@font-face{font-family:'National Park';src:url('assets/national-park.woff2') format('woff2');font-style:normal;font-weight:200 800;font-display:swap}
/* App/Figma tokens. Desktop geometry follows node 221:487 at 1440px. */
:root{color-scheme:light;--surface:#f6f7f8;--white:#fff;--ink:#111537;--muted:#6c7086;--charcoal:#111;--charcoal-raised:#1b1b1b;--dark-ink:#e3e4e9;--dark-muted:#9395a7;--blue:#2b7fff;--blue-dark:#155dfc;--blue-700:#193cb8;--blue-800:#1c398e;--sky:#51a2ff;--sky-pale:#dbeafe;--border:rgb(22 36 86 / 10%);--dark-border:rgb(255 255 255 / 12%);--h1:2.625rem;--h2:2rem;--h4:1.25rem;--body:1rem;--small:.875rem;--caption:.75rem;--radius-button:.75rem;--radius-control:1rem;--radius-card:2.75rem;--radius-preview:2.5rem;--gutter:1.25rem;--shadow-phone:0 20.347px 55.932px rgb(7 10 48 / 16%),0 4.613px 13.746px rgb(7 10 48 / 10%),0 1.277px 5.228px rgb(7 10 48 / 8%),0 .227px 2.279px rgb(7 10 48 / 6%)}
*{box-sizing:border-box}body{margin:0;background:var(--surface);color:var(--ink);font:400 var(--body)/1.5 'National Park',system-ui,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3,p,figure{margin:0}h1,h2,h3{font-weight:600}h1{font-size:var(--h1);line-height:1.047619;letter-spacing:-.01em}h2{font-size:var(--h2);line-height:1.125;letter-spacing:-.01em}h3{font-size:var(--h4);line-height:1.2;letter-spacing:-.01em}a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:from-font}button{font:inherit;color:inherit}img{display:block;height:auto;max-width:100%}[hidden]{display:none!important}a:focus-visible,button:focus-visible,summary:focus-visible,[role=tabpanel]:focus-visible{outline:3px solid var(--blue-800);outline-offset:4px;border-radius:4px}.hero a:focus-visible,.privacy-section a:focus-visible,.download-section a:focus-visible{outline-color:var(--white)}section[id]{scroll-margin-top:2rem}.shell{width:min(100%,75rem);margin-inline:auto}.section-shell{padding-inline:var(--gutter)}.skip-link{position:absolute;z-index:10;top:1rem;left:1rem;padding:.75rem 1rem;border-radius:var(--radius-button);background:var(--white);transform:translateY(-180%)}.skip-link:focus{transform:none}
.hero{display:flex;flex-direction:column;align-items:center;gap:5rem;padding:1.5rem var(--gutter) 2.5rem;background:linear-gradient(180deg,var(--blue-800) 0%,var(--blue-700) 18.75%,var(--blue-dark) 35.268%,var(--sky) 53.82%,var(--sky-pale) 84.135%,var(--surface) 100%);color:var(--white)}.site-header{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:3.5rem;padding-block:.5rem}.brand{display:flex;align-items:center;min-height:2.5rem}.brand img{width:122.024px;height:35.3625px;max-width:none}.site-header nav{display:flex;gap:.25rem}.site-header nav a{display:flex;align-items:center;min-height:2.5rem;padding:.5rem .75rem;text-decoration:none;border-radius:var(--radius-button)}.hero-copy{display:flex;flex-direction:column;align-items:center;gap:1.25rem;width:min(100%,37rem);text-align:center}.hero-copy h1{width:100%}.hero-copy>p{max-width:min(100%,25rem);color:rgb(255 255 255 / 92%)}.hero-actions{display:flex;justify-content:center;gap:.75rem;padding-top:.625rem}.button{display:inline-flex;align-items:center;justify-content:center;min-height:2.75rem;padding:.5625rem .6875rem;border-radius:var(--radius-button);border:1px solid transparent;font-weight:600;text-align:center;text-decoration:none;line-height:1.5}.button-light{border-radius:var(--radius-control);border-color:var(--border);color:var(--ink);background:linear-gradient(var(--white),#e6e6e6 124.11%)}.button-outline{border-color:rgb(255 255 255 / 30%);color:var(--white)}.availability{cursor:default}.app-preview{width:min(100%,1118px);aspect-ratio:1118/555;overflow:hidden;border-radius:var(--radius-preview)}.app-preview picture{display:block;width:100%;height:100%}.app-preview img{width:100%;height:100%;object-fit:cover}
.record-section{padding-block:7.5rem}.record-card{display:flex;justify-content:space-between;gap:1.5rem;width:min(100%,70rem);margin-inline:auto;padding:.25rem;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--white);min-height:45.625rem}.record-copy{display:flex;flex:1 1 0;flex-direction:column;justify-content:space-between;gap:4.125rem;max-width:545px;min-width:0;padding:2.5rem 1.25rem}.record-copy>h2{max-width:333px;margin-inline:1.25rem}.record-details{--feature-icon-size:1.25rem;display:grid;gap:.5rem}.record-details details{padding:1.75rem;border-radius:var(--radius-control)}.record-details details[open]{background:var(--surface)}.record-details summary{list-style:none;cursor:pointer}.record-details summary::-webkit-details-marker{display:none}.record-details summary h3{line-height:1.2;letter-spacing:-.01em}.record-details details p{margin-top:1rem;line-height:1.5}.plan-intro{display:block;margin-bottom:4px}.inline-label{display:inline-flex;align-items:center;gap:2px;vertical-align:bottom}.record-details .inline-label .lucide{width:var(--feature-icon-size);height:var(--feature-icon-size);flex:0 0 auto}.transaction-preview{display:flex;align-items:center;justify-content:center;flex:0 1 510px;min-width:0;min-height:45rem;border-radius:var(--radius-preview);background:var(--surface)}.transaction-screen{width:238.828px;height:auto;border-radius:var(--radius-preview);outline:2px solid #dedede;box-shadow:var(--shadow-phone)}
.center-heading{display:flex;flex-direction:column;align-items:center;gap:1rem;width:min(100% - var(--gutter)*2,420px);margin-inline:auto;text-align:center}.center-heading p{color:var(--muted)}.categories-section{position:relative;display:flex;align-items:center;justify-content:center;min-height:50rem;isolation:isolate;overflow:hidden}.categories-section .center-heading{position:relative;z-index:1}.category-art{position:absolute;inset:0;z-index:-1}.category-art span{position:absolute;left:var(--x);top:var(--y);transform:translateX(-50%);font:600 var(--h1)/1.047619 'Apple Color Emoji','Segoe UI Emoji',sans-serif}
.helpers-section{padding-block:7.5rem;display:flex;flex-direction:column;align-items:center;gap:3.75rem}.helpers-showcase{width:min(100%,70rem)}.helper-tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:.25rem;padding-block:.25rem;margin-bottom:.75rem;min-height:3rem}.helper-tabs button{display:flex;align-items:center;justify-content:center;gap:.25rem;min-height:2.5rem;padding:.4375rem 1.1875rem;border:1px solid transparent;border-radius:1.75rem;line-height:1.5;font-weight:600;white-space:nowrap;cursor:pointer;background:transparent}.helper-tabs button[aria-selected=true]{background:var(--sky-pale);border-color:var(--blue)}.helper-tabs .lucide{width:20px;height:20px}.helper-preview{height:36.25rem;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--white);padding:2.5rem}.helper-preview [role=tabpanel]{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.calculator-screen{width:230px;height:500px;object-fit:cover;border-radius:2.3rem;box-shadow:var(--shadow-phone)}.helper-description{max-width:28rem;text-align:center}.helper-description h3{font-size:var(--h2);line-height:1.125;margin-bottom:1rem}.helper-description p{color:var(--muted)}
.privacy-section{--privacy-glow:radial-gradient(ellipse 721.985px 721.985px at 50% calc(100% + 53.5px),#f69efb 0%,#b96acb 17.788%,#9b50b3 26.683%,#7d359b 35.577%,#55257a 52.644%,#2d1458 69.712%,rgb(17 21 55 / 0%) 100%);display:flex;flex-direction:column;align-items:center;gap:3.75rem;padding-top:10rem;color:var(--dark-ink);background:var(--privacy-glow),var(--charcoal);overflow:hidden}.privacy-section .center-heading p{color:var(--dark-muted)}.icon-tile{display:flex;align-items:center;justify-content:center;width:3.5rem;height:3.5rem;border-radius:1.25rem;background:rgb(255 255 255 / 9%)}.symbol-slot{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem}.symbol-slot .lucide{width:32px;height:32px}.sync-cards{display:flex;gap:.5rem;justify-content:center;max-width:calc(100% - var(--gutter)*2)}.sync-cards>div{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.625rem;width:180px;min-height:120px;padding:1.25rem;border-radius:1.25rem;background:var(--charcoal-raised)}.sync-cards h3{font-size:var(--small);line-height:1.42857;letter-spacing:0;text-align:center}.encryption-section{position:relative;display:flex;flex-direction:column;align-items:center;gap:2.5rem;width:100%;padding:5rem var(--gutter);isolation:isolate}.encryption-heading h2{max-width:362px}.encryption-example{display:flex;align-items:center;justify-content:center;gap:1.75rem;width:min(100%,578px);min-height:170px}.example-row{display:flex;align-items:center;gap:.75rem;width:260px;min-width:0;padding:.6875rem .6875rem .6875rem .4375rem;border:1px solid rgb(255 255 255 / 4%);border-radius:1.25rem;background:rgb(255 255 255 / 6%);backdrop-filter:blur(3px)}.example-emoji{display:flex;align-items:center;justify-content:center;width:44px;height:44px;flex:0 0 auto;background:rgb(255 255 255 / 9%);border-radius:1rem;font-size:1.5rem}.example-name{display:flex;flex-direction:column;min-width:0;flex:1;font-size:var(--small);line-height:1.42857}.example-name strong{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.example-name span{color:var(--dark-muted)}.example-amount{font-size:var(--body);font-weight:600;white-space:nowrap}.encryption-divider{position:relative;width:2px;height:170px;flex:0 0 2px}.encryption-divider img{position:absolute;top:-12px;left:-5px;width:12px;height:194px;max-width:none}.encryption-caption{width:min(100%,333px);display:flex;align-items:center;gap:.75rem;min-height:64px;padding:.6875rem 1.1875rem;background:rgb(255 255 255 / 6%);border:1px solid rgb(255 255 255 / 4%);border-radius:1.25rem}.encryption-caption p{flex:1;min-width:0;font-size:var(--small);line-height:1.42857;font-weight:600;color:var(--white)}.privacy-rings{position:absolute;inset:0;z-index:-1;pointer-events:none}.privacy-rings img{position:absolute;left:50%;transform:translateX(-50%);max-width:none}.ring-outer{top:369px;width:674px;opacity:.3}.ring-inner{top:483px;width:446px;opacity:.1}.ring-middle{top:429px;width:554px;opacity:.2}
.pricing-section{display:flex;flex-direction:column;align-items:center;gap:3.75rem;padding-block:7.5rem;background:var(--charcoal);color:var(--dark-ink)}.pricing-heading{display:flex;flex-direction:column;align-items:center;gap:1rem;width:min(100%,760px);text-align:center}.pricing-heading>p{max-width:550px;min-height:72px;color:var(--dark-muted)}.plans{display:flex;gap:1.25rem;width:min(100%,70rem);min-height:380px}.free-plan{display:flex;flex-direction:column;gap:1.25rem;flex:0 0 265px;min-width:0;padding:1.1875rem;border:1px solid var(--dark-border);border-radius:1rem}.plan-copy{display:flex;flex-direction:column;gap:1.25rem;flex:1}.plans h3{font-size:.6875rem;line-height:1.45455;letter-spacing:.03em;text-transform:uppercase}.plan-price{font-size:var(--h2);line-height:1.125;letter-spacing:-.01em;font-weight:600}.plan-cadence{margin-top:.25rem;color:var(--dark-muted)}.plan-copy>p,.paid-plan>p{color:var(--dark-muted)}.plus-plans{display:flex;flex-direction:column;gap:1.25rem;flex:1;min-width:0;padding:1.25rem;border:1px solid rgb(255 255 255 / 5%);border-radius:1.25rem;background:var(--charcoal-raised)}.plus-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;flex:1}.paid-plan{display:flex;flex-direction:column;gap:1.25rem;min-width:0;padding-inline-end:1.25rem}.paid-plan:not(:last-child){border-inline-end:1px solid rgb(255 255 255 / 5%)}.paid-plan .plan-price{white-space:nowrap}.button-primary{background:linear-gradient(var(--blue),var(--blue-dark) 124.11%);border-color:rgb(255 255 255 / 12%);color:var(--white)}.button-dark{border-radius:var(--radius-control);background:linear-gradient(#2b2b2b,var(--charcoal) 124.11%);border-color:var(--dark-border);color:var(--surface)}.pricing-note{color:var(--dark-muted);text-align:center}
.download-section{display:flex;flex-direction:column;align-items:center;gap:2.5rem;padding:6.25rem var(--gutter);background:var(--charcoal);color:var(--dark-ink);text-align:center}.glass-wordmark{width:176.846px;height:51.25px;max-width:none}.download-section>p{color:var(--dark-muted)}.download-section>p a{text-decoration:none}.download-section .button{padding-inline:1rem}.credits{font-size:var(--caption);line-height:1.33333;color:var(--dark-muted);display:flex;flex-direction:column;gap:.25rem}.credits a{text-decoration:underline}::selection{color:var(--ink);background:var(--sky-pale)}
@media(hover:hover){.site-header nav a:hover,.button-outline:hover{background:rgb(255 255 255 / 10%)}.record-details details:not([open]):hover{background:rgb(22 36 86 / 3%)}.helper-tabs button:not([aria-selected=true]):hover{background:rgb(22 36 86 / 5%)}}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:auto}.button:not(.availability),.helper-tabs button{transition:background-color .16s ease-out,transform .16s ease-out}.button:not(.availability):active,.helper-tabs button:active{transform:scale(.96)}}
@media(min-width:90rem){.section-shell{padding-inline:10rem}.hero{padding-inline:7.5rem}}
@media(max-width:74rem){.record-card{gap:1rem}.record-copy{padding-inline:1rem}.record-copy>h2{margin-inline:1rem}.record-details details{padding:1.5rem}.transaction-preview{flex-basis:45%}.plans{gap:1rem}.free-plan{flex-basis:24%}.plus-columns{gap:1rem}.paid-plan{padding-inline-end:1rem}.paid-plan .plan-price{font-size:1.5rem}.helper-tabs button{padding-inline:1rem}}
@media(max-width:52rem){.hero{gap:3.75rem}.hero-copy h1{font-size:2.25rem;line-height:1.15}.record-section,.helpers-section,.pricing-section{padding-block:5rem}.record-card{flex-direction:column;gap:1rem;min-height:0}.record-copy{max-width:none;padding:2rem 1rem;gap:3rem}.record-copy>h2{max-width:333px}.transaction-preview{flex-basis:auto;min-height:38rem}.categories-section{min-height:40rem}.category-art span{font-size:2rem}.categories-section .center-heading{max-width:360px}.helpers-section{gap:2.5rem}.helper-tabs{row-gap:.5rem}.helper-tabs button{font-size:var(--small);padding-inline:.75rem}.privacy-section{padding-top:6rem;gap:3rem}.encryption-section{padding-block:4rem}.plans{flex-direction:column}.free-plan{flex-basis:auto;min-height:300px}.plan-copy{max-width:none}.plus-plans{min-height:340px}.paid-plan .plan-price{font-size:var(--h2)}.pricing-heading p{min-height:0}.download-section{padding-block:5rem}.category-art span:nth-child(4),.category-art span:nth-child(13){visibility:hidden}}
@media(max-width:36rem){:root{--radius-card:1.75rem;--radius-preview:1.5rem}.hero{gap:3rem;padding-top:1rem}.site-header{gap:1rem}.site-header nav a{font-size:var(--small);padding-inline:.5rem;min-height:2.75rem}.brand img{width:122.024px;height:35.3625px}.hero-copy{max-width:100%}.hero-copy h1{font-size:2rem;line-height:1.125}.hero-actions{flex-wrap:wrap}.app-preview{aspect-ratio:4/3}.record-copy{padding:1.5rem .75rem;gap:2rem}.record-copy>h2{margin-inline:1rem}.record-details details{padding:1.25rem}.record-details h3{font-size:1.125rem;line-height:1.33333}.transaction-preview{min-height:36rem}.transaction-screen{border-radius:2.5rem}.center-heading h2,.record-copy>h2,.pricing-heading h2,.download-section h2{font-size:1.75rem;line-height:1.14286}.categories-section{min-height:36rem}.categories-section .center-heading{max-width:280px}.category-art span{font-size:1.5rem}.category-art span:nth-child(1),.category-art span:nth-child(2),.category-art span:nth-child(7),.category-art span:nth-child(8),.category-art span:nth-child(10),.category-art span:nth-child(19){visibility:hidden}.helper-tabs{justify-content:center;gap:.25rem}.helper-tabs button{min-height:2.75rem}.helper-preview{height:36.25rem;padding:2rem 1rem}.sync-cards{flex-wrap:wrap;gap:.75rem}.sync-cards>div{width:160px;min-height:120px}.privacy-section{padding-top:5rem}.privacy-rings img{top:auto;bottom:-20rem}.plus-columns{grid-template-columns:1fr;gap:1.5rem}.paid-plan{padding:0 0 1.5rem}.paid-plan:not(:last-child){border-inline-end:0;border-block-end:1px solid rgb(255 255 255 / 12%)}.paid-plan:last-child{padding-bottom:0}.paid-plan .plan-price{font-size:var(--h2)}.plus-plans{gap:2rem}.free-plan{min-height:320px}.download-section{gap:2rem}.download-section>p{max-width:30ch}.hero .button-outline{background:rgb(17 21 55 / 15%)}}
@media(forced-colors:active){a:focus-visible,button:focus-visible,summary:focus-visible,[role=tabpanel]:focus-visible{outline-color:Highlight!important}.button,.helper-tabs button[aria-selected=true],.record-card,.helper-preview{border:1px solid ButtonText}}

/* Keep the hero controls on dark blue when the copy wraps on phones. */
@media(max-width:36rem){.hero{background:linear-gradient(180deg,var(--blue-800) 0%,var(--blue-700) 25%,var(--blue-dark) 60%,var(--sky) 75%,var(--sky-pale) 90%,var(--surface) 100%)}}
@media(max-width:22.5rem){.site-header{flex-direction:column;gap:.5rem}}

/* Motion uses the Web Animations API; resting styles always show content. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.example-name strong span { color: inherit; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Entire feature cards are pointer targets; native summaries keep keyboard semantics. */
.record-details details { cursor: pointer; }
.record-body { display: flow-root; }
.record-details .inline-label { gap: 0; }
.feature-icon { display: inline-flex; align-items: center; width: calc(var(--feature-icon-size) + 2px); height: var(--feature-icon-size); flex: 0 0 auto; overflow: hidden; }
.record-details details:not([open]) .feature-icon { display: none; }
.record-details details:has(summary:focus-visible) { outline: 3px solid var(--blue-800); outline-offset: 3px; }
.record-details summary:focus-visible { outline: none; }

/* App decorative fills and Lucide accents, shared by each selected pill. */
:root {
  --helper-orange: #ff6900; --helper-orange-fill: #ffedd4; --helper-orange-border: #ffd6a7;
  --helper-red: #c10007; --helper-red-fill: #ffe2e2; --helper-red-border: #ffc9c9;
  --helper-green: #008236; --helper-green-fill: #dcfce7; --helper-green-border: #b9f8cf;
  --helper-purple: #8200db; --helper-purple-fill: #f3e8ff; --helper-purple-border: #e9d4ff;
  --helper-lime: #5ea500; --helper-lime-fill: #ecfcca; --helper-lime-border: #d8f999;
  --helper-blue-border: #bedbff;
}
.helper-tabs button { position: relative; --pill-accent: var(--blue); --pill-fill: var(--sky-pale); --pill-border: var(--helper-blue-border); }
.helper-tabs [data-color=batch] { --pill-accent: var(--helper-orange); --pill-fill: var(--helper-orange-fill); --pill-border: var(--helper-orange-border); }
.helper-tabs [data-color=timeseeker] { --pill-accent: var(--helper-red); --pill-fill: var(--helper-red-fill); --pill-border: var(--helper-red-border); }
.helper-tabs [data-color=currency] { --pill-accent: var(--helper-green); --pill-fill: var(--helper-green-fill); --pill-border: var(--helper-green-border); }
.helper-tabs [data-color=widgets] { --pill-accent: var(--helper-purple); --pill-fill: var(--helper-purple-fill); --pill-border: var(--helper-purple-border); }
.helper-tabs [data-color=streak] { --pill-accent: var(--helper-lime); --pill-fill: var(--helper-lime-fill); --pill-border: var(--helper-lime-border); }
.helper-tabs button[aria-selected=true] { background: var(--pill-fill); border-color: var(--pill-border); }
.timer-border { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); pointer-events: none; overflow: visible; }
.timer-border path { fill: none; stroke: var(--pill-accent); stroke-width: 1.5px; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.helper-tabs button[aria-selected=false] .timer-border { visibility: hidden; }
.helper-controls { display: flex; justify-content: flex-end; margin-top: .5rem; }
.motion-control { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .5rem .75rem; background: transparent; border: 1px solid transparent; border-radius: var(--radius-button); font-size: var(--small); color: var(--muted); cursor: pointer; }
@media (hover: hover) { .motion-control:hover { background: rgb(22 36 86 / 5%); } }

/* Moving sample cards are masked at the edges; the centre divider stays sharp. */
.encryption-demo { width: min(100%, 760px); }
.encryption-example { display: block; position: relative; width: 100%; height: 170px; min-height: 170px; }
.encryption-window { position: relative; width: 100%; height: 100%; overflow: hidden; mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); }
.encryption-window .example-row { position: absolute; top: 50%; left: 0; width: var(--encryption-card-width, 260px); transform: translate3d(-320px, -50%, 0); }
.encryption-window .example-row:nth-child(1) { left: calc(50% - 276px); transform: translateY(-50%); }
.encryption-window .example-row:nth-child(2) { left: calc(50% + 16px); transform: translateY(-50%); }
.encryption-window .example-row[style] { left: 0; }
.example-amount { min-width: 4.25rem; text-align: right; font-variant-numeric: tabular-nums; }
.encryption-divider { position: absolute; left: calc(50% - 1px); top: 0; width: 2px; height: 170px; z-index: 1; pointer-events: none; }
.encryption-controls { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .75rem; min-height: 44px; margin-top: .5rem; font-size: var(--caption); color: var(--dark-ink); }
.privacy-section .motion-control { color: var(--dark-ink); }
.privacy-section .motion-control:focus-visible { outline-color: var(--white); }
@media (hover: hover) { .privacy-section .motion-control:hover { background: rgb(255 255 255 / 9%); } }
@media (max-width: 36rem) {
  .encryption-window .example-row { width: var(--encryption-card-width, 232px); gap: .5rem; }
  .encryption-window .example-row:nth-child(1) { left: calc(50% - 248px); }
  .example-emoji { width: 36px; height: 36px; border-radius: .75rem; font-size: var(--h4); }
}
@media (prefers-reduced-motion: reduce) { .timer-border { display: none; } }
@media (forced-colors: active) {
  .record-details details:has(summary:focus-visible) { outline-color: Highlight; }
  .helper-tabs button[aria-selected=true] { border-color: Highlight; }
  .timer-border path { stroke: Highlight; }
}

/* Contact bloom: static paint layers; only their opacity changes. */
:root { --encryption-glow: #f69efb; --encryption-glow-deep: #b96acb; }
/* Three stepped bloom layers share the pulse and contact fade. */
.encryption-example[data-glow-variant=contact] .encryption-divider > img { opacity: .32; }
.contact-glow { position: absolute; inset: 0; opacity: var(--contact-glow, 0); pointer-events: none; }
.glow-layer { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); filter: blur(var(--glow-softness, 8px)); border-radius: .75rem; background: var(--encryption-glow); }
.glow-layer-outer { width: var(--glow-width, 160px); height: var(--glow-height, 100px); opacity: calc(.35 * var(--glow-gain, 1)); }
.glow-layer-middle { width: calc(var(--glow-width, 160px) * .65); height: var(--glow-middle-height, 152px); opacity: calc(.55 * var(--glow-gain, 1)); }
.glow-layer-core { width: calc(var(--glow-width, 160px) * .28); height: var(--glow-core-height, 200px); opacity: calc(.8 * var(--glow-gain, 1)); background: color-mix(in srgb, var(--white) 70%, var(--encryption-glow)); }
.encryption-example[data-glow-shape=ellipse] .glow-layer { border-radius: 0; background: radial-gradient(ellipse, var(--encryption-glow), transparent 70%); }
.encryption-example[data-glow-shape=circle] .glow-layer { border-radius: 0; background: radial-gradient(circle closest-side, var(--encryption-glow), transparent 70%); }
.encryption-example[data-glow-shape=beam] .glow-layer { border-radius: 0; background: linear-gradient(90deg, transparent, var(--encryption-glow), transparent); mask-image: linear-gradient(transparent, #000 25%, #000 75%, transparent); }
.encryption-example:is([data-glow-shape=ellipse], [data-glow-shape=circle]) .glow-layer-core { background: radial-gradient(ellipse, color-mix(in srgb, var(--white) 70%, var(--encryption-glow)), transparent 70%); }
/* A narrow, cached filament replaces the still seam during contact. */
.encryption-edge { display: none; position: absolute; top: -12px; left: -19px; width: 40px; height: 194px; overflow: hidden; opacity: 0; pointer-events: none; mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); }
.encryption-example[data-glow-variant=contact][data-edge-motion=true] .encryption-edge { display: block; }
.encryption-edge path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.edge-halo { stroke: var(--encryption-glow); stroke-width: 3; filter: blur(2px); opacity: .8; }
.edge-core { stroke: var(--white); stroke-width: 1.2; opacity: .9; }
.edge-echo { stroke: var(--encryption-glow); stroke-width: .8; opacity: .38; }
@media (prefers-reduced-motion: reduce) { .contact-glow, .encryption-example[data-glow-variant=contact][data-edge-motion=true] .encryption-edge { display: none; } }

/* Text keeps its native glyph proportions; masks alone follow the line. */
.scramble-text { position: relative; display: block; width: 100%; white-space: nowrap; }
.example-name strong .text-plain, .example-name strong .text-cipher-mask, .example-name strong .text-cipher { color: inherit; }
.text-plain { display: inline-block; vertical-align: top; clip-path: inset(0 var(--plain-cut, 0px) 0 0); }
.text-cipher-mask { position: absolute; inset: 0; overflow: hidden; clip-path: inset(0 0 0 var(--uncrossed, 100%)); }
.text-cipher { display: block; width: 100%; text-align: inherit; }

/* This tuner is shown only in the animation preview. */
.glow-tuner { position: fixed; z-index: 40; right: 1rem; bottom: 1rem; width: min(320px, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); overflow: auto; color: var(--dark-ink); background: var(--charcoal-raised); border: 1px solid var(--dark-border); border-radius: 1.25rem; box-shadow: 0 8px 32px rgb(0 0 0 / 30%); }
.glow-tuner summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: .75rem 1rem; font-weight: 600; cursor: pointer; list-style: none; }
.glow-tuner summary::-webkit-details-marker { display: none; }
.glow-panel-chevron { width:16px; height:16px; flex:none; }
.glow-tuner details[open] .glow-panel-chevron { transform:rotate(180deg); }
.glow-comparison { min-width: 0; margin: .25rem 1rem 1rem; padding: 0; border: 0; }
.glow-comparison legend { margin-bottom: .5rem; font-size: var(--small); }
.glow-version-options { display: flex; gap: .5rem; }
.glow-version-options label { display: flex; align-items: center; justify-content: center; gap: .5rem; flex: 1; min-height: 44px; padding: .5rem; border: 1px solid var(--dark-border); border-radius: .75rem; background: var(--charcoal); font-size: var(--caption); cursor: pointer; }
.glow-version-options label:has(:checked) { border-color: var(--encryption-glow); background: color-mix(in srgb, var(--encryption-glow) 12%, var(--charcoal)); }
.glow-version-options input { margin: 0; accent-color: var(--encryption-glow); color-scheme: dark; }
.glow-comparison .glow-panel-note { margin: .5rem 0 0; }
.glow-toggle:has(input:disabled) { opacity: .5; cursor: default; }
.glow-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1rem; padding: .25rem 1rem 1rem; }
.glow-toggle { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 44px; font-size: var(--small); cursor: pointer; }
.glow-toggle input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--encryption-glow); color-scheme: dark; cursor: pointer; }
.glow-setting:has(input:disabled) { opacity: .5; }
.glow-setting input:disabled { cursor: default; }
.glow-setting { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.glow-setting-wide { grid-column: 1 / -1; }
.glow-setting label { display: flex; justify-content: space-between; gap: .25rem; font-size: var(--caption); }
.glow-setting output { color: var(--dark-muted); font-variant-numeric: tabular-nums; }
.glow-setting input[type=range] { width: 100%; margin: 0; height: 36px; accent-color: var(--encryption-glow); cursor: pointer; }
.glow-setting select, .glow-setting input[type=color] { width: 100%; height: 40px; font: inherit; font-size: var(--small); color: var(--dark-ink); background: var(--charcoal); border: 1px solid var(--dark-border); border-radius: .5rem; padding: .25rem .5rem; color-scheme: dark; }
.glow-panel-actions { grid-column: 1 / -1; display: flex; gap: .5rem; }
.glow-panel-actions button { flex: 1; min-height: 44px; padding: .5rem; border: 1px solid var(--dark-border); border-radius: .75rem; background: var(--charcoal); color: var(--dark-ink); font-size: var(--caption); cursor: pointer; }
.glow-panel-note { grid-column: 1 / -1; color: var(--dark-muted); font-size: var(--caption); }
.glow-tuner :is(button, summary, input, select):focus-visible { outline: 2px solid var(--encryption-glow); outline-offset: 3px; }
@media (hover: hover) { .glow-panel-actions button:hover, .glow-tuner summary:hover { background: rgb(255 255 255 / 5%); } }
@media (max-width: 52rem) { .glow-tuner { max-height: 52dvh; } }
@media (forced-colors: active) { .glow-tuner :is(button, summary, input, select):focus-visible { outline-color: Highlight; } }

.encryption-example[data-glow-shape=circle] .glow-layer-core { background: radial-gradient(circle closest-side, color-mix(in srgb, var(--white) 70%, var(--encryption-glow)), transparent 70%); }

/* Self-hosted Lucide SVGs: one 24px grid, consistent 2px strokes. */
:root { --icon-yellow: #f0b100; --icon-purple-light: #c27aff; --icon-red-light: #ff6467; }
.lucide { display: inline-block; flex-shrink: 0; vertical-align: middle; }
.icon-orange { color: var(--helper-orange); }
.icon-blue { color: var(--blue); }
.icon-lime { color: var(--helper-lime); }
.icon-purple { color: var(--helper-purple); }
.icon-yellow { color: var(--icon-yellow); }
.icon-green { color: var(--helper-green); }
.icon-red { color: var(--helper-red); }
.icon-sky { color: var(--sky); }
.icon-gray { color: var(--muted); }
.icon-purple-light { color: var(--icon-purple-light); }
.icon-white { color: var(--white); }
.helper-tabs .lucide { color: var(--pill-accent); }
.privacy-section .icon-purple { color: var(--icon-purple-light); }
.privacy-section .icon-blue { color: var(--sky); }
.privacy-section .icon-red { color: var(--icon-red-light); }
.privacy-section .icon-gray { color: var(--dark-ink); }
.encryption-caption > .lucide { width: 20px; height: 20px; flex: none; }

/* Charcoal accents from AppColors.contentHighlight* tokens. */
:root { --icon-orange-dark: #ff8904; --icon-lime-dark: #9ae600; --icon-yellow-dark: #ffdf20; --icon-green-dark: #05df72; }
.privacy-section .icon-orange { color: var(--icon-orange-dark); }
.privacy-section .icon-lime { color: var(--icon-lime-dark); }
.privacy-section .icon-yellow { color: var(--icon-yellow-dark); }
.privacy-section .icon-green { color: var(--icon-green-dark); }

/* Category positions remain stylesheet-owned under the production CSP. */
.category-art span:nth-child(1) { --x:79.17%;--y:25%; }
.category-art span:nth-child(2) { --x:25.97%;--y:44.75%; }
.category-art span:nth-child(3) { --x:18.13%;--y:22.25%; }
.category-art span:nth-child(4) { --x:50%;--y:22.25%; }
.category-art span:nth-child(5) { --x:43.54%;--y:65.25%; }
.category-art span:nth-child(6) { --x:89.24%;--y:71.25%; }
.category-art span:nth-child(7) { --x:97.64%;--y:89.38%; }
.category-art span:nth-child(8) { --x:4.17%;--y:65.75%; }
.category-art span:nth-child(9) { --x:60.42%;--y:74.5%; }
.category-art span:nth-child(10) { --x:83.61%;--y:51.25%; }
.category-art span:nth-child(11) { --x:24.51%;--y:87.13%; }
.category-art span:nth-child(12) { --x:15.21%;--y:74%; }
.category-art span:nth-child(13) { --x:35.97%;--y:24.5%; }
.category-art span:nth-child(14) { --x:33.06%;--y:72.25%; }
.category-art span:nth-child(15) { --x:48.54%;--y:84.88%; }
.category-art span:nth-child(16) { --x:93.61%;--y:4.63%; }
.category-art span:nth-child(17) { --x:9.93%;--y:47.5%; }
.category-art span:nth-child(18) { --x:78.33%;--y:87.13%; }
.category-art span:nth-child(19) { --x:73.33%;--y:54.25%; }
.category-art span:nth-child(20) { --x:67.57%;--y:19.5%; }
.category-art span:nth-child(21) { --x:90.69%;--y:22.75%; }
.category-art span:nth-child(22) { --x:29.17%;--y:10.13%; }
.category-art span:nth-child(23) { --x:5.63%;--y:4.63%; }