:root{
  --bg:#FAF8F4; --bg2:#E8DCC8; --ink:#1C2120; --accent:#557692; --accent-ink:#FFFFFF;
  --ink-2:rgba(28,33,32,.72); --ink-3:rgba(28,33,32,.62); --ink-4:rgba(28,33,32,.36);
  --glass:rgba(255,255,255,.64); --edge:rgba(255,255,255,.95); --hair:rgba(28,33,32,.10);
  --fill:rgba(118,118,128,.12); --thumb:#FFFFFF; --field:rgba(255,255,255,.78);
  --shadow:0 1px 1px rgba(28,33,32,.04),0 10px 28px rgba(28,33,32,.06),0 34px 70px rgba(28,33,32,.07);
  --good:#477D60; --warn:#B2533A; --heart:#C2483D; --frame:#1C2120; --sat:180%; --a-glow:.17; --a-warm:.6;
  --spring:cubic-bezier(.3,1.4,.4,1);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
:root{--spring:linear(0,.009,.035 2.1%,.141 4.4%,.723 12.9%,.938 16.7%,1.017 19.8%,1.077 23.1%,1.088 25.4%,1.087,1.074 30.5%,1.009 39.2%,.989 44.5%,.996 56%,1);}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#1B1C1A; --bg2:#2E2C27; --ink:#EFECE6; --accent:#8EA9BF; --accent-ink:#15191C;
    --ink-2:rgba(239,236,230,.72); --ink-3:rgba(239,236,230,.58); --ink-4:rgba(239,236,230,.30);
    --glass:rgba(43,44,40,.95); --edge:rgba(239,236,230,.06); --hair:rgba(239,236,230,.08);
    --fill:rgba(239,236,230,.08); --thumb:#45463F; --field:rgba(14,15,13,.46);
    --shadow:0 1px 0 rgba(0,0,0,.22),0 16px 40px rgba(0,0,0,.28);
    --good:#8BBF9F; --warn:#E3A186; --heart:#E0796C; --frame:#121311; --sat:110%; --a-glow:.04; --a-warm:.5; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#1B1C1A; --bg2:#2E2C27; --ink:#EFECE6; --accent:#8EA9BF; --accent-ink:#15191C;
  --ink-2:rgba(239,236,230,.72); --ink-3:rgba(239,236,230,.58); --ink-4:rgba(239,236,230,.30);
  --glass:rgba(43,44,40,.95); --edge:rgba(239,236,230,.06); --hair:rgba(239,236,230,.08);
  --fill:rgba(239,236,230,.08); --thumb:#45463F; --field:rgba(14,15,13,.46);
  --shadow:0 1px 0 rgba(0,0,0,.22),0 16px 40px rgba(0,0,0,.28);
  --good:#8BBF9F; --warn:#E3A186; --heart:#E0796C; --frame:#121311; --sat:110%; --a-glow:.04; --a-warm:.5; color-scheme:dark;
}
/* Typefaces. Newsreader (headlines) and JetBrains Mono (small technical details) are
   served from /fonts on this site, never from a font service; body text stays the
   system font (SF Pro on Apple devices). Both are under the SIL Open Font License. */
@font-face{font-family:"Newsreader"; src:url(/fonts/newsreader.woff2) format("woff2"); font-weight:200 800; font-style:normal; font-display:swap;}
@font-face{font-family:"JetBrains Mono"; src:url(/fonts/jetbrains-mono.woff2) format("woff2"); font-weight:100 800; font-style:normal; font-display:swap;}
:root{--serif:"Newsreader","Iowan Old Style",Georgia,serif; --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;}
html{scroll-padding-top:env(safe-area-inset-top,0px); background:var(--bg);}
*,*::before,*::after{box-sizing:border-box;}
body{margin:0; min-height:100%; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:17px; line-height:1.47; letter-spacing:-.022em; -webkit-font-smoothing:antialiased;}
button{font:inherit; color:inherit;}
/* The soft background glow. It fades to the plain page color at the top and bottom
   edges, so the strips Safari paints behind the status bar and the toolbar (one solid
   color) meet it without a visible line. The glows are painted as background images,
   not background colors, so Safari never picks their color for those strips. */
.ambient{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  --fade-top:calc(env(safe-area-inset-top,0px) + 110px); --fade-bottom:calc(env(safe-area-inset-bottom,0px) + 110px);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 var(--fade-top),#000 calc(100% - var(--fade-bottom)),transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 var(--fade-top),#000 calc(100% - var(--fade-bottom)),transparent);}
.ambient i{position:absolute; border-radius:50%; filter:blur(90px); transition:transform 1.6s cubic-bezier(.2,.7,.2,1);}
.ambient .a{width:560px;height:560px;background-image:linear-gradient(var(--bg2),var(--bg2));opacity:var(--a-warm);top:-120px;left:-140px;}
.ambient .b{width:460px;height:460px;background-image:linear-gradient(var(--accent),var(--accent));opacity:var(--a-glow);bottom:-90px;right:-120px;}
.wrap{position:relative; z-index:1; max-width:1080px; margin:0 auto; padding:24px 22px 72px;}
/* Centered on the window itself (100vw includes any scrollbar), so the logo and header
   sit in exactly the same place on every page, whether or not the page has a scrollbar. */
@media (min-width:1080px){ .wrap{margin-left:calc((100vw - 1080px) / 2); margin-right:auto;} }
.wrap:not(.admin){display:grid; grid-template-rows:auto 1fr auto; grid-template-columns:minmax(0,1fr); min-height:100vh; min-height:100dvh;}
/* One header on every page: fixed height, and the logo never wraps or shrinks, so it
   sits in exactly the same spot whatever is on the right. */
header{display:flex; align-items:center; justify-content:space-between; gap:12px; height:44px; margin-bottom:56px; position:relative;}
.mark{display:flex; align-items:center; flex:none; height:28px; gap:9px; white-space:nowrap; font-weight:600; font-size:19px; color:var(--ink); text-decoration:none; letter-spacing:-.02em;}
.mark svg{flex:none; width:26px;height:26px;}
/* The app draws its first screen with JavaScript; until then the footer would sit at the
   top and jump down, so it stays invisible (it still takes its space). */
.booting .site-foot{visibility:hidden;}
.chip{display:inline-flex; align-items:center; gap:7px; border:0; cursor:pointer; background:var(--glass); padding:8px 14px; border-radius:99px; font-size:14px; font-weight:500;
  -webkit-backdrop-filter:blur(20px) saturate(var(--sat)); backdrop-filter:blur(20px) saturate(var(--sat)); box-shadow:inset 0 0 0 .5px var(--hair);}
.chip svg{width:13px;height:13px;color:var(--accent);}
.pop{position:absolute; right:0; top:52px; width:min(340px,calc(100vw - 44px)); z-index:20; padding:20px; border-radius:22px;
  background:color-mix(in srgb,var(--bg) 96%,var(--ink)); -webkit-backdrop-filter:blur(40px) saturate(var(--sat)); backdrop-filter:blur(40px) saturate(var(--sat));
  box-shadow:var(--shadow),inset 0 0 0 .5px var(--edge); transform-origin:top right; animation:pop .45s var(--spring);}
.pop h3{margin:0 0 8px; font-size:17px;}
.pop p{margin:0 0 10px; font-size:15px; color:var(--ink-2); line-height:1.42;}
.pop p:last-of-type{margin:0;}
.pop-more{display:inline-flex; align-items:center; gap:3px; margin-top:14px; font-size:15px; font-weight:600; color:var(--accent); text-decoration:none;}
.pop-more svg{width:12px; height:12px; transition:transform .3s var(--spring);}
.pop-more:hover svg{transform:translateX(2px);}
@keyframes pop{from{opacity:0; transform:scale(.85)}}

.create-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:44px; align-items:start;}
@media (min-width:940px){.create-grid{grid-template-columns:minmax(0,1fr) 330px; gap:64px;} .preview{position:sticky; top:28px;}}
.narrow{width:100%; max-width:560px; margin:0 auto;}
h1{font-family:var(--serif); font-size:clamp(48px,8.8vw,84px); line-height:1; letter-spacing:-.035em; font-weight:500; margin:0 0 16px;}
.lede{font-size:21px; line-height:1.38; letter-spacing:-.021em; color:var(--ink-2); margin:0 0 36px; max-width:32ch;}
.card{position:relative; background:var(--glass); border-radius:30px; padding:22px;
  -webkit-backdrop-filter:blur(30px) saturate(var(--sat)); backdrop-filter:blur(30px) saturate(var(--sat));
  box-shadow:var(--shadow),inset 0 0 0 .5px var(--edge),inset 0 1px 0 var(--edge);}

.top-row{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap;}
.seg{display:inline-grid; grid-auto-flow:column; grid-auto-columns:1fr; background:var(--fill); border-radius:10px; padding:2px; position:relative;}
.seg button{position:relative; z-index:1; border:0; background:none; font-size:13px; font-weight:500; padding:6px 14px; border-radius:8px; cursor:pointer; white-space:nowrap; transition:opacity .2s;}
.seg button[aria-checked="false"]{opacity:.7;}
.seg .thumb{position:absolute; z-index:0; top:2px; bottom:2px; left:0; border-radius:8px; background:var(--thumb);
  box-shadow:0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04); transition:transform .5s var(--spring), width .5s var(--spring);}
.gen{display:inline-flex; align-items:center; gap:6px; border:0; background:none; color:var(--accent); font-size:15px; font-weight:500; cursor:pointer; padding:6px 2px;}
.gen svg{width:16px;height:16px; transition:transform .6s var(--spring);}
.gen:active svg{transform:rotate(180deg);}
.field{position:relative;}
.ta{display:block; width:100%; border:0; outline:0; margin:0; font:inherit; font-size:18px; line-height:1.5; color:var(--ink); background:var(--field); border-radius:18px;
  padding:16px 18px; min-height:156px; resize:none; overflow:hidden; box-shadow:inset 0 0 0 .5px var(--hair); transition:box-shadow .25s; white-space:pre-wrap; word-break:break-word;}
.ta:focus{box-shadow:inset 0 0 0 2px var(--accent);}
.ta.mono,.secret.mono{font-family:var(--mono); letter-spacing:0;}
.ta.ghosted{color:transparent; caret-color:transparent;}
.scr{position:absolute; inset:0; pointer-events:none; background:none; box-shadow:none; color:var(--accent); overflow:hidden;}
::placeholder{color:var(--ink-3);}
.count{font-size:13px; color:var(--ink-3); text-align:right; margin:8px 4px 0; font-variant-numeric:tabular-nums;}
.group{margin-top:16px; border-radius:18px; background:var(--field); box-shadow:inset 0 0 0 .5px var(--hair);}
.row{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px 16px; min-height:54px; flex-wrap:wrap;}
.group > .row:not(:first-child),.pass-row{border-top:.5px solid var(--hair);}
.row .l{display:flex; flex-direction:column; flex:1 1 0; min-width:0;}
.row .l small{font-size:13px; color:var(--ink-3); letter-spacing:-.01em;}
.switch{position:relative; width:51px; height:31px; flex:none;}
.switch input{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; z-index:2; -webkit-appearance:none; appearance:none; touch-action:manipulation; -webkit-tap-highlight-color:transparent;}
.switch span{position:absolute; inset:0; border-radius:99px; background:var(--fill); transition:background .3s;}
.switch span::after{content:""; position:absolute; top:2px; left:2px; width:27px; height:27px; border-radius:99px; background:#fff;
  box-shadow:0 3px 8px rgba(0,0,0,.15),0 3px 1px rgba(0,0,0,.06); transition:transform .5s var(--spring), width .2s;}
.switch input:active + span::after{width:32px;}
.switch input:checked:active + span::after{transform:translateX(15px);}
.switch input:checked + span{background:var(--accent);}
.switch input:checked + span::after{transform:translateX(20px);}
.switch input:focus-visible + span{outline:2px solid var(--accent); outline-offset:2px;}
.stepper{display:flex; align-items:center; gap:2px; background:var(--fill); border-radius:10px; padding:2px;}
.stepper button{width:38px; height:30px; border:0; background:none; border-radius:8px; cursor:pointer; font-size:19px; line-height:1; display:grid; place-items:center;}
.stepper button:active{background:var(--thumb);}
.stepper button:disabled{opacity:.3; cursor:default;}
.stepper output{min-width:64px; text-align:center; font-size:14px; font-weight:500; font-variant-numeric:tabular-nums;}
.stepper output b{display:inline-block; font-weight:600;}
.bump{animation:bump .4s var(--spring);}
@keyframes bump{40%{transform:scale(1.25)}}
.pass-row{display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--spring); border-top-color:transparent;}
.pass-row.on{grid-template-rows:1fr; border-top-color:var(--hair);}
.pass-row > div{overflow:hidden;}
.pass-row input{display:block; width:calc(100% - 32px); margin:12px 16px 14px; border:0; outline:0; font:inherit; color:var(--ink); background:transparent; padding:11px 14px; border-radius:12px; box-shadow:inset 0 0 0 .5px var(--hair);}
.pass-row input:focus,.inp:focus{box-shadow:inset 0 0 0 2px var(--accent);}
a.btn{text-decoration:none;}
.sub a{color:var(--accent); text-underline-offset:2px;}
.btn{position:relative; display:flex; align-items:center; justify-content:center; gap:10px; width:100%; margin-top:18px; border:0; cursor:pointer;
  font-size:17px; font-weight:600; letter-spacing:-.02em; color:var(--accent-ink); background:var(--accent); border-radius:99px; padding:16px 24px;
  transition:transform .4s var(--spring), opacity .2s, filter .2s; overflow:hidden;}
.btn:hover{filter:brightness(1.06);}
.btn:active{transform:scale(.97);}
.btn:disabled{opacity:.38; cursor:default; transform:none; filter:none;}
.btn kbd{font:inherit; font-size:13px; font-weight:500; opacity:.62;}
.btn.soft{background:var(--fill); color:var(--ink);}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}
/* Typing fields draw their own inset ring on focus, so they skip the outline (one ring, not two). */
textarea:focus-visible,input:not([type="checkbox"]):not([type="radio"]):focus-visible{outline:none;}
.err{color:var(--warn); font-size:15px; margin:10px 4px 0;}
.err:empty{margin:0;}
.shake{animation:shake .45s;}
@keyframes shake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}

/* preview */
.preview .cap{display:flex; align-items:center; justify-content:center; gap:6px; font-size:13px; color:var(--ink-3); margin:0 0 14px; font-weight:500; letter-spacing:-.005em;}
.preview .cap svg{width:15px; height:15px;}
.phone{width:300px; max-width:100%; margin:0 auto; border-radius:50px; padding:11px; background:var(--frame);
  box-shadow:0 40px 80px rgba(28,33,32,.18),0 0 0 1px rgba(255,255,255,.06) inset; transform:rotate(0deg);}
.screen{position:relative; border-radius:40px; overflow:hidden; background:var(--bg); min-height:600px; padding:54px 14px 10px; display:flex; flex-direction:column;}
.sb{position:absolute; top:16px; left:28px; right:24px; display:flex; justify-content:space-between; align-items:center; font-size:13px; font-weight:600; letter-spacing:-.01em; color:var(--ink); z-index:1;}
.sb-icons{display:flex; gap:5px; align-items:center;}
.sb-icons svg{height:11px; width:auto;}
.m-head{position:relative; display:flex; align-items:center; gap:6px; margin:4px 4px 14px; font-size:13px; font-weight:600; letter-spacing:-.02em; color:var(--ink);}
.m-head svg{width:16px; height:16px;}
.m-bar{position:relative; margin-top:auto; padding-top:14px;}
.m-url{display:flex; align-items:center; justify-content:center; gap:5px; height:34px; border-radius:12px; background:var(--glass); box-shadow:inset 0 0 0 .5px var(--hair); font-size:12px; color:var(--ink-2); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);}
.m-url svg{width:9px; height:9px; color:var(--ink-3);}
.m-home{display:block; width:104px; height:4px; border-radius:99px; background:var(--ink); opacity:.85; margin:10px auto 0;}
.screen::before{content:""; position:absolute; z-index:2; width:88px; height:26px; border-radius:99px; background:#000; top:12px; left:50%; transform:translateX(-50%);}
.screen .orb{position:absolute; width:300px; height:300px; border-radius:50%; background:var(--bg2); filter:blur(60px); opacity:.7; top:-80px; left:-100px;}
.mini{position:relative; padding:18px; border-radius:24px; font-size:13px;}
.mini .glyph{width:40px;height:40px;border-radius:12px;margin-bottom:12px;}
.mini .glyph svg{width:20px;height:20px;}
.mini h4{margin:0 0 4px; font-family:var(--serif); font-size:18px; font-weight:500; letter-spacing:-.02em; line-height:1.2;}
.mini p{margin:0; color:var(--ink-2); font-size:12px; line-height:1.35;}
.bars{display:grid; gap:7px; margin:16px 0; filter:blur(3px);}
.bars i{display:block; height:9px; border-radius:5px; background:var(--ink-4); transition:width .5s var(--spring);}
.mini .fakein{height:34px; border-radius:10px; background:var(--field); box-shadow:inset 0 0 0 .5px var(--hair); margin-bottom:10px; font-size:12px; color:var(--ink-3); display:flex; align-items:center; padding:0 10px;}
.mini .fakebtn{height:40px; border-radius:99px; background:var(--accent); color:var(--accent-ink); display:grid; place-items:center; font-weight:600; font-size:13px; position:relative; overflow:hidden;}
.mini .fakebtn::before{content:""; position:absolute; inset:0; background:rgba(255,255,255,.28); transform-origin:left; animation:demo 3.2s ease-in-out infinite;}
@keyframes demo{0%,15%{transform:scaleX(0)}55%{transform:scaleX(1)}62%,100%{transform:scaleX(1);opacity:0}}
.mini .tag{margin-top:12px; text-align:center; color:var(--ink-3); font-size:11.5px;}
.reveal-in{animation:fadeup .5s var(--spring);}
@keyframes fadeup{from{opacity:0; transform:translateY(6px)}}

/* shared */
.glyph{width:56px; height:56px; border-radius:17px; display:grid; place-items:center; background:var(--fill); margin-bottom:18px;}
.glyph svg{width:28px; height:28px; color:var(--accent);}
h2{font-family:var(--serif); font-size:31px; letter-spacing:-.025em; line-height:1.12; margin:0 0 8px; font-weight:500;}
h1.h2{font-size:30px; line-height:1.12; letter-spacing:-.04em; margin:0 0 8px;}
.sub{color:var(--ink-2); margin:0;}
.draw path{stroke-dasharray:30; stroke-dashoffset:30; animation:draw .6s .15s cubic-bezier(.6,0,.2,1) forwards;}
@media (prefers-reduced-motion:reduce){.draw path{stroke-dashoffset:0;}}
@keyframes draw{to{stroke-dashoffset:0}}
.linkpill{display:flex; align-items:center; gap:8px; margin-top:22px; padding:6px 6px 6px 18px; border-radius:99px; background:var(--field); box-shadow:inset 0 0 0 .5px var(--hair);}
.linkpill span{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; color:var(--ink-2);}
.copy{flex:none; border:0; cursor:pointer; font-size:15px; font-weight:600; color:var(--accent-ink); background:var(--accent); border-radius:99px; padding:10px 18px; min-width:90px; transition:transform .4s var(--spring);}
.copy:active{transform:scale(.94);}
.actions{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:12px;}
.act{display:flex; flex-direction:column; align-items:center; gap:6px; border:0; cursor:pointer; padding:14px 8px 12px; border-radius:18px; background:var(--field); box-shadow:inset 0 0 0 .5px var(--hair); font-size:13px; font-weight:500; transition:transform .4s var(--spring);}
.act:active{transform:scale(.95);}
.act svg{width:22px; height:22px; color:var(--accent);}
.act[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--accent);}
.qr{display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--spring);}
.qr.on{grid-template-rows:1fr;}
.qr > div{overflow:hidden;}
.qr .tile{width:196px; margin:16px auto 4px; padding:14px; border-radius:22px; background:#FAF8F4; box-shadow:0 8px 24px rgba(0,0,0,.08);}
.qr .tile img,.qr .tile canvas{display:block; width:100% !important; height:auto !important;}
.qr p{text-align:center; font-size:13px; color:var(--ink-3); margin:6px 0 0;}
.meta{font-size:15px; color:var(--ink-2); margin:16px 4px 0; display:flex; align-items:center; gap:8px; font-variant-numeric:tabular-nums;}
.meta svg{width:15px;height:15px; flex:none;}
.foot{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; margin-top:16px;}
.ghost{display:inline-flex; align-items:center; gap:6px; border:0; background:none; color:var(--accent); font-size:17px; cursor:pointer; padding:8px 0;}

/* hold */
.hold{position:relative; display:flex; align-items:center; justify-content:center; gap:10px; width:100%; margin-top:20px; border:0; cursor:pointer;
  padding:17px 24px; border-radius:99px; background:var(--accent); color:var(--accent-ink); font-size:17px; font-weight:600; letter-spacing:-.02em;
  overflow:hidden; -webkit-user-select:none; user-select:none; touch-action:none; -webkit-touch-callout:none; transition:transform .5s var(--spring);}
.hold .fill{position:absolute; inset:0; background:rgba(255,255,255,.3); transform:scaleX(0); transform-origin:left; transition:transform .6s var(--spring);}
.hold .lbl{position:relative; display:flex; align-items:center; gap:9px;}
.hold svg{width:18px;height:18px;}
.hold.holding{transform:scale(.97);}
.hold.nudge{animation:nudge .5s var(--spring);}
@keyframes nudge{30%{transform:scale(.95)}60%{transform:scale(1.02)}}
.hold.danger{background:var(--fill); color:var(--warn);}
.hold.danger .fill{background:var(--warn); opacity:.22;}
.hold:disabled{opacity:.5;}
.hint{font-size:13px; color:var(--ink-3); text-align:center; margin:10px 0 0; min-height:1.2em; transition:color .2s;}
.hint.lit{color:var(--accent);}

.inp{display:block; width:100%; border:0; outline:0; font:inherit; color:var(--ink); background:var(--field); padding:14px 16px; border-radius:16px; box-shadow:inset 0 0 0 .5px var(--hair); margin-top:20px;}
.secret-wrap{position:relative; margin-top:20px;}
.seal{display:grid; gap:12px; padding:20px 18px; border-radius:18px; background:var(--field); box-shadow:inset 0 0 0 .5px var(--hair); overflow:hidden;}
.seal i{display:block; height:13px; border-radius:7px; background:var(--ink-4); filter:blur(5px);}
.seal i:nth-child(odd){animation:shimmer 2.4s ease-in-out infinite;}
#seal i:nth-child(1){width:92%;} #seal i:nth-child(3){width:64%;}
#ib-seal i:nth-child(1){width:88%;} #ib-seal i:nth-child(3){width:56%;}
@keyframes shimmer{50%{opacity:.45}}
.secret{position:relative; white-space:pre-wrap; word-break:break-word; font-size:19px; line-height:1.5; letter-spacing:-.015em; padding:18px; border-radius:18px;
  background:var(--field); box-shadow:inset 0 0 0 .5px var(--hair); transition:filter 1s cubic-bezier(.2,.7,.2,1), opacity .8s, transform 1s var(--spring);}
.secret.sealed{filter:blur(16px); opacity:0; transform:scale(.97);}
.secret.erasing{color:transparent; background:transparent; box-shadow:none; transition:background .6s, box-shadow .6s;}
.timer{display:flex; align-items:center; gap:10px; font-size:15px; color:var(--ink-2); font-variant-numeric:tabular-nums;}
.ring{width:28px; height:28px; transform:rotate(-90deg); flex:none;}
.ring circle{fill:none; stroke-width:3;}
.ring .trk{stroke:var(--fill);}
.ring .val{stroke:var(--accent); stroke-linecap:round; transition:stroke-dashoffset 1s linear;}
.ring.big{width:64px;height:64px;}
.ring.big circle{stroke-width:5;}

/* status */
.timeline{list-style:none; margin:24px 0 0; padding:0; position:relative;}
.timeline li{position:relative; display:flex; gap:14px; padding:0 0 22px;}
.timeline li:last-child{padding-bottom:0;}
.timeline li::before{content:""; position:absolute; left:11px; top:26px; bottom:2px; width:2px; border-radius:2px; background:var(--fill);}
.timeline li:last-child::before{display:none;}
.timeline li.done::before{background:var(--accent);}
.tdot{flex:none; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; background:var(--fill); color:var(--accent-ink); transition:background .4s, transform .6s var(--spring);}
.tdot svg{width:13px;height:13px; opacity:0; transition:opacity .3s;}
.done .tdot{background:var(--accent);}
.done .tdot svg{opacity:1;}
.active .tdot{background:transparent; box-shadow:inset 0 0 0 2px var(--accent); animation:breathe 2s ease-in-out infinite;}
@keyframes breathe{50%{box-shadow:inset 0 0 0 2px var(--accent),0 0 0 6px color-mix(in srgb,var(--accent) 18%,transparent)}}
.timeline b{display:block; font-weight:600; font-size:17px;}
.timeline small{color:var(--ink-2); font-size:14px; font-variant-numeric:tabular-nums;}
.expbox{display:flex; align-items:center; gap:16px; margin-top:26px; padding:16px; border-radius:20px; background:var(--field); box-shadow:inset 0 0 0 .5px var(--hair);}
.expbox b{display:block; font-size:22px; letter-spacing:-.03em; font-variant-numeric:tabular-nums;}
.expbox small{color:var(--ink-2); font-size:14px;}

.toast{position:fixed; left:50%; bottom:calc(28px + env(safe-area-inset-bottom,0px)); z-index:50; transform:translate(-50%,30px) scale(.9); opacity:0; pointer-events:none;
  display:flex; align-items:center; gap:8px; padding:12px 20px; border-radius:99px; font-size:15px; font-weight:500; color:var(--bg); background:var(--ink);
  box-shadow:0 12px 30px rgba(0,0,0,.2); transition:transform .5s var(--spring), opacity .25s;}
.toast.on{transform:translate(-50%,0) scale(1); opacity:1;}
.toast svg{width:16px;height:16px;}
.seg.flow{margin-bottom:24px;}
.seg.flow button{font-size:15px; padding:8px 18px;}
.flabel{display:block; font-size:15px; font-weight:600; margin:4px 4px 8px; letter-spacing:-.015em;}
.flabel.gap-s{margin-top:18px;} .flabel.gap-m{margin-top:20px;} .flabel.gap-l{margin-top:24px;}
.meta.flush{margin-top:0;}
.hint.tries{text-align:left; margin-left:4px;}
.flabel span{font-weight:400; color:var(--ink-3); font-size:13px; margin-left:6px;}
.flabel + .linkpill{margin-top:0;}
.inp.tight{margin:0 0 18px;}
.ask{margin:14px 0 10px; padding:10px 12px; border-radius:12px; background:var(--fill); font-weight:600; font-size:14px; letter-spacing:-.015em; word-break:break-word;}
.ask.big{font-size:19px; padding:16px 18px; margin:20px 0 16px; border-radius:16px;}
.mini .fakein.tall{height:58px; align-items:flex-start; padding-top:9px;}
.mini .fakebtn.still::before{display:none;}
.copy.soft{background:var(--fill); color:var(--ink);}
.pulse{width:8px; height:8px; border-radius:50%; background:var(--accent); animation:shimmer 1.6s ease-in-out infinite; flex:none;}
.shield{position:absolute; inset:0; z-index:3; display:none; flex-direction:column; align-items:center; justify-content:center; gap:4px; border:0; border-radius:18px; cursor:pointer;
  background:color-mix(in srgb,var(--field) 35%,transparent); -webkit-backdrop-filter:blur(20px) saturate(var(--sat)); backdrop-filter:blur(20px) saturate(var(--sat)); font-size:15px; font-weight:600; color:var(--ink);}
.shield svg{width:22px; height:22px; color:var(--accent); margin-bottom:2px;}
.shield small{font-weight:400; color:var(--ink-2); font-size:13px;}
.guarded.veiled .shield{display:flex; animation:fadeup .3s var(--spring);}
.guarded.veiled .secret{filter:blur(16px);}
.notice{font-size:13px; color:var(--ink-3); text-align:center; margin-top:28px;}
[hidden]{display:none !important;}
::view-transition-old(root),::view-transition-new(root){animation-duration:.32s;}
@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important;}}
@media (max-width:520px){
  header{margin-bottom:36px;} .lede{font-size:19px;} .card{padding:16px; border-radius:26px;} h2{font-size:26px;} h1.h2{font-size:26px;}
  .seg button{padding:6px 11px;} .chip .t{display:none;} .chip{padding:9px 11px;}
}

/* production additions */
.safety{margin-top:22px; padding-top:16px; border-top:.5px solid var(--hair); display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;}
.safety p{margin:0; font-size:13px; color:var(--ink-3); max-width:40ch; line-height:1.4;}
.ghost.small{font-size:14px; padding:4px 0; color:var(--ink-2);}
.hint.left{text-align:left; margin-left:4px;}
.site-foot{margin-top:56px; text-align:center; font-size:13px; color:var(--ink-3); display:grid; gap:14px; justify-items:center;}
/* The drifting "ciphertext" band above the sign-off (drawn by /cipher.js). Decorative only. */
.cipher{display:block; justify-self:stretch; width:100%; height:132px; margin:-8px 0 6px;}
@media (max-width:520px){ .cipher{height:96px;} }
/* One quiet row under the sign-off: links, then the appearance switch. */
.foot-row{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px 22px;}
.foot-links{display:flex; gap:6px 18px; flex-wrap:wrap; justify-content:center;}
.foot-links a, .foot-links .foot-btn{color:var(--ink-3); text-decoration:none; transition:color .2s;}
.foot-links a:hover, .foot-links .foot-btn:hover{color:var(--ink);}
@media (min-width:700px){ .foot-links{padding-right:22px; border-right:.5px solid var(--hair);} }
/* Made with love in Houston. The heart is a drawing, not an emoji, so it looks the same everywhere. */
.made{margin:0; font-size:15px; font-weight:500; color:var(--ink-2); display:inline-flex; align-items:center; gap:6px; letter-spacing:-.015em;}
.made .heart{width:15px; height:15px; fill:var(--heart); flex:none; transform-origin:50% 60%;}
.made:hover .heart{animation:beat 1s var(--spring) 1;}
@keyframes beat{0%,100%{transform:scale(1);} 25%{transform:scale(1.22);} 50%{transform:scale(.96);} 70%{transform:scale(1.1);}}
@media (prefers-reduced-motion: reduce){ .made:hover .heart{animation:none;} }

/* legal pages */
.doc{width:100%; max-width:680px; margin:0 auto;}
.doc h1{font-size:clamp(40px,7vw,56px); margin-bottom:10px;}
.doc .updated{color:var(--ink-3); font-size:15px; margin:0 0 36px;}
.doc .summary{background:var(--glass); border-radius:24px; padding:22px 24px; margin:0 0 40px; box-shadow:var(--shadow),inset 0 0 0 .5px var(--edge);
  -webkit-backdrop-filter:blur(30px) saturate(var(--sat)); backdrop-filter:blur(30px) saturate(var(--sat));}
.doc .summary h2{margin-top:0; font-size:19px;}
.doc .summary ul{margin-bottom:0;}
.doc h2{font-size:24px; letter-spacing:-.02em; margin:40px 0 10px; font-weight:500;}
.doc h3{font-size:17px; margin:24px 0 6px; font-weight:600; letter-spacing:-.015em;}
.doc p,.doc li{color:var(--ink-2); font-size:17px; line-height:1.6;}
.doc p{margin:0 0 14px;}
.doc ul{padding-left:22px; margin:0 0 14px;}
.doc li{margin-bottom:6px;}
.doc strong{color:var(--ink); font-weight:600;}
.doc a{color:var(--accent);}
.doc .back{display:inline-block; margin-top:40px; color:var(--accent); text-decoration:none; font-weight:500;}
.qr .tile svg{display:block; width:100%; height:auto;}

/* header actions */
.head-right{display:flex; align-items:center; gap:8px; min-width:0;}
a.chip{color:var(--ink); text-decoration:none;}
.chip .count{min-width:18px; height:18px; margin:0 -3px 0 1px; padding:0 5px; border-radius:99px; background:var(--accent); color:var(--accent-ink); font-size:11px; line-height:18px; font-weight:600; letter-spacing:0; text-align:center; display:inline-block; font-variant-numeric:tabular-nums;}

/* appearance switch */
:root[data-theme="light"]{color-scheme:light;}
.theme-switch{display:inline-flex; gap:2px; padding:2px; border-radius:99px; background:var(--fill);}
.theme-switch button{border:0; background:none; width:30px; height:24px; border-radius:99px; display:grid; place-items:center; color:var(--ink-2); cursor:pointer; transition:background .2s, color .2s;}
.theme-switch button[aria-checked="true"]{background:var(--thumb); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.12);}
.theme-switch svg{width:14px; height:14px;}

/* my links */
.ml-list{list-style:none; margin:20px 0 0; padding:0; display:grid; grid-template-columns:minmax(0,1fr); gap:8px;}
.ml-item{display:flex; align-items:center; gap:12px; padding:12px 12px 12px 14px; border-radius:18px; background:var(--field); box-shadow:inset 0 0 0 .5px var(--hair); cursor:pointer; transition:transform .4s var(--spring);}
.ml-item:active{transform:scale(.98);}
.ml-item:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.ml-ico{flex:none; width:38px; height:38px; border-radius:12px; background:var(--fill); display:grid; place-items:center; color:var(--accent);}
.ml-ico svg{width:19px; height:19px;}
.ml-text{flex:1; min-width:0;}
.ml-title{font-weight:600; font-size:16px; letter-spacing:-.015em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ml-meta{font-size:13px; color:var(--ink-3);}
.ml-badge{flex:none; font-size:12px; font-weight:600; padding:4px 10px; border-radius:99px; background:var(--fill); color:var(--ink-2); white-space:nowrap;}
.ml-badge.live{background:color-mix(in srgb,var(--accent) 16%,transparent); color:var(--accent);}
.ml-badge.ready{background:var(--accent); color:var(--accent-ink);}
.ml-badge.done{background:color-mix(in srgb,var(--good) 16%,transparent); color:var(--good);}
.ml-remove{flex:none; border:0; background:none; color:var(--ink-3); width:30px; height:30px; border-radius:99px; cursor:pointer; display:grid; place-items:center;}
.ml-remove:hover{background:var(--fill); color:var(--ink);}
.ml-remove svg{width:12px; height:12px;}
.ml-empty{text-align:center; padding:28px 10px 8px;}
.ml-empty p{margin:0 0 4px;}
#v-mylinks .group{margin-top:22px;}
.hint.saved{color:var(--good);}
@media (max-width:520px){ .head-right{gap:6px;} }

/* new links paused notice */
.paused-note{display:flex; align-items:flex-start; gap:12px; margin:-12px 0 24px; padding:14px 16px; border-radius:20px; max-width:560px;
  background:color-mix(in srgb,var(--warn) 10%,var(--glass)); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--warn) 26%,transparent); animation:fadeup .5s var(--spring);}
.paused-note svg{flex:none; width:18px; height:18px; margin-top:2px; color:var(--warn);}
.paused-note p{margin:0; font-size:15px; line-height:1.45; color:var(--ink); overflow-wrap:anywhere;}

/* Clickable things show the pointing hand in every browser, including on the icons
   and text inside them. Safari is stricter than Chrome about inheriting this. */
a[href], button, summary, select, [role="button"], [role="radio"], [role="tab"], [role="switch"],
input[type="checkbox"], input[type="radio"], .row label.l, .ml-item,
:is(a[href], button, summary, [role="button"], [role="radio"], [role="tab"], .row label.l, .ml-item) *{cursor:pointer;}
button:disabled, button:disabled *{cursor:default;}

/* report sheet */
.sheet{padding:0; border:0; margin:auto; width:min(440px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:visible; background:none; color:var(--ink);}
.sheet::backdrop{background:rgba(14,18,17,.38); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); animation:fade .3s ease;}
.sheet[open]{animation:sheet-in .5s var(--spring);}
.sheet.closing{animation:sheet-out .22s ease-in forwards;}
.sheet.closing::backdrop{animation:fade .22s ease-in reverse forwards;}
.sheet-body{position:relative; max-height:calc(100dvh - 32px); overflow:auto; overscroll-behavior:contain; padding:26px 24px 22px; border-radius:30px; background:var(--glass);
  -webkit-backdrop-filter:blur(40px) saturate(var(--sat)); backdrop-filter:blur(40px) saturate(var(--sat)); box-shadow:var(--shadow),0 30px 80px rgba(0,0,0,.25),inset 0 0 0 .5px var(--edge);}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.sheet-body{background:var(--bg);}}
.sheet h2{font-size:24px; margin:0 0 6px;}
.sheet .sub{font-size:15px; line-height:1.42;}
.sheet-grab{display:none;}
.choices{margin:20px 0 18px; border-radius:18px; background:var(--field); box-shadow:inset 0 0 0 .5px var(--hair); overflow:hidden;}
.choices button{display:flex; align-items:center; gap:12px; width:100%; border:0; margin:0; padding:12px 16px; background:none; text-align:left; transition:background .2s;}
.choices button + button{border-top:.5px solid var(--hair);}
.choices button:hover{background:color-mix(in srgb,var(--fill) 50%,transparent);}
.choices button span{flex:1; min-width:0; display:flex; flex-direction:column;}
.choices b{font-size:16px; font-weight:500; letter-spacing:-.015em;}
.choices small{font-size:13px; color:var(--ink-3);}
.choices .tick{flex:none; width:20px; height:20px; color:var(--accent); opacity:0; transform:scale(.5); transition:opacity .2s, transform .45s var(--spring);}
.choices [aria-checked="true"] .tick{opacity:1; transform:none;}
.choices [aria-checked="true"] b{font-weight:600;}
.choices button:focus-visible{outline:2px solid var(--accent); outline-offset:-2px;}
.sheet textarea.inp{margin-top:0; resize:none; min-height:84px; line-height:1.45;}
.sheet .hint.left{margin:8px 4px 0;}
.sheet-actions{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:18px;}
.sheet-actions .btn{margin:0;}
.btn.danger{background:var(--warn); color:var(--accent-ink);}
.sheet .err:empty{display:none;}
.sheet-done{text-align:center; padding:14px 4px 2px;}
.sheet-done .glyph{margin:0 auto 16px; background:color-mix(in srgb,var(--good) 16%,transparent);}
.sheet-done .glyph svg{color:var(--good);}
.sheet-done .sub{margin:0 auto; max-width:32ch;}
.sheet-done .btn{margin-top:22px;}
.ghost:disabled{opacity:.6;}
html:has(.sheet[open]){overflow:hidden;}
@keyframes fade{from{opacity:0}}
@keyframes sheet-in{from{opacity:0; transform:translateY(16px) scale(.96)}}
@keyframes sheet-out{to{opacity:0; transform:translateY(10px) scale(.97)}}
@media (max-width:520px){
  .sheet{width:100%; max-width:100%; margin:auto 0 0; max-height:calc(100dvh - 24px);}
  .sheet-body{max-height:calc(100dvh - 24px); border-radius:28px 28px 0 0; padding:10px 20px calc(20px + env(safe-area-inset-bottom,0px));}
  .sheet-grab{display:block; width:36px; height:5px; border-radius:99px; background:var(--ink-4); opacity:.5; margin:0 auto 16px;}
  .sheet[open]{animation:sheet-up .55s var(--spring);}
  .sheet.closing{animation:sheet-down .22s ease-in forwards;}
}
@media (max-height:720px){
  .choices small{display:none;}
  .choices button{padding:11px 16px;}
  .sheet textarea.inp{min-height:60px;}
  .sheet .sub{font-size:14px;}
}
.sheet .sub{text-wrap:pretty;}
.sheet-actions .btn{white-space:nowrap;}
@media (max-width:360px){
  .sheet h2{font-size:22px;}
  .sheet-actions .btn{padding:14px 12px; font-size:16px;}
  .sheet .flabel span{display:none;}
}
@media (max-height:680px){
  .sheet .sub{display:none;}
  .sheet h2{margin-bottom:0;}
  .choices{margin-top:16px;}
}
@keyframes sheet-up{from{transform:translateY(100%)}}
@keyframes sheet-down{to{transform:translateY(100%)}}

/* announcement banner */
.announce{display:flex; align-items:center; gap:12px; margin:-28px 0 30px; padding:10px 8px 10px 12px; border-radius:20px; background:var(--glass);
  -webkit-backdrop-filter:blur(30px) saturate(var(--sat)); backdrop-filter:blur(30px) saturate(var(--sat)); box-shadow:var(--shadow),inset 0 0 0 .5px var(--edge);
  animation:fadeup .5s var(--spring); transition:opacity .25s, transform .35s var(--spring);}
.announce.leaving{opacity:0; transform:translateY(-6px) scale(.98);}
.an-ico{flex:none; width:32px; height:32px; border-radius:10px; display:grid; place-items:center; background:color-mix(in srgb,var(--accent) 16%,transparent); color:var(--accent);}
.an-ico svg{width:17px; height:17px;}
.announce p{flex:1; min-width:0; margin:0; font-size:15px; line-height:1.4; letter-spacing:-.012em; overflow-wrap:anywhere; text-wrap:pretty;}
.an-x{flex:none; width:32px; height:32px; border:0; border-radius:99px; background:none; color:var(--ink-3); display:grid; place-items:center; transition:background .2s, color .2s;}
.an-x:hover{background:var(--fill); color:var(--ink);}
.an-x svg{width:12px; height:12px;}
@media (max-width:520px){ .announce{margin:-16px 0 22px; align-items:flex-start;} .an-ico{margin-top:1px;} .announce p{font-size:14px; padding-top:6px;} }

/* feedback sheet */
.foot-btn{border:0; background:none; padding:0; font:inherit; cursor:pointer;}
.seg.fb-kind{display:grid; width:100%; margin:20px 0 14px;}
.seg.fb-kind button{padding:7px 4px; font-size:14px;}
#fb-msg{margin-top:0; resize:none; min-height:128px; line-height:1.45;}
.fb-meta{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-top:8px;}
.fb-meta .hint.left{margin:0 4px; text-align:left;}
.fb-count{flex:none; font-size:13px; color:var(--ink-3); font-variant-numeric:tabular-nums; margin-right:4px;}
@media (max-height:680px){ #fb-msg{min-height:90px;} }

/* logo: the inner dot breathes gently, like a status light (still with reduced motion) */
.mark svg circle[fill]{transform-box:fill-box; transform-origin:center; animation:mark-pulse 2.8s ease-in-out infinite;}
@keyframes mark-pulse{0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.35; transform:scale(.78)}}

#s-link{text-align:left; margin-left:4px;}
/* My links on narrow screens: the status pill moves under the title so nothing gets squeezed */
@media (max-width:420px){
  .ml-item{display:grid; grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"ico text x" "ico badge x"; column-gap:12px; row-gap:6px; align-items:center;}
  .ml-ico{grid-area:ico;} .ml-text{grid-area:text;} .ml-remove{grid-area:x;}
  .ml-badge{grid-area:badge; justify-self:start;}
  .ml-meta{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .foot-links{gap:8px 18px;}
}

/* password generator */
.top-row{position:relative;}
.gen-wrap{display:inline-flex; align-items:center; gap:2px;}
.gen-wrap[hidden]{display:none;}
.gen-opt{display:grid; place-items:center; width:32px; height:32px; border:0; border-radius:99px; background:none; color:var(--accent); transition:background .2s, transform .4s var(--spring);}
.gen-opt:hover,.gen-opt[aria-expanded="true"]{background:color-mix(in srgb,var(--accent) 12%,transparent);}
.gen-opt:active{transform:scale(.92);}
.gen-opt svg{width:17px; height:17px;}
.genpop{position:absolute; right:0; top:calc(100% + 8px); z-index:15; width:min(330px,100%); padding:14px; border-radius:22px;
  background:color-mix(in srgb,var(--bg) 96%,var(--ink)); box-shadow:var(--shadow),0 18px 50px rgba(0,0,0,.14),inset 0 0 0 .5px var(--edge);
  transform-origin:top right; animation:pop .45s var(--spring);}
.genpop .seg{display:grid; width:100%;}
.genpop .seg button{padding:7px 4px;}
.gp-row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 2px 0;}
.gp-row + .gp-row{margin-top:2px;}
.gp-l{display:flex; flex-direction:column; font-size:15px; letter-spacing:-.015em;}
.gp-l small{font-size:12px; color:var(--ink-3); letter-spacing:.04em;}
.genpop .stepper output{min-width:96px;}
.gp-strength{display:flex; align-items:center; gap:10px; margin:14px 2px 2px; font-size:13px; color:var(--ink-2); font-variant-numeric:tabular-nums;}
.gp-meter{flex:none; width:56px; height:6px; border-radius:99px; background:var(--fill); overflow:hidden;}
.gp-meter i{display:block; height:100%; width:0; border-radius:99px; background:var(--good); transition:width .5s var(--spring), background .3s;}
.gp-meter i.mid{background:var(--accent);}
.gp-meter i.low{background:var(--warn);}

/* email updates */
.nt-row > div{display:flex; flex-direction:column;}
.pass-row input.nt-email{margin-bottom:10px;}
.togs{display:flex; flex-wrap:wrap; gap:8px; padding:0 16px;}
.tog{display:inline-flex; align-items:center; gap:6px; border:0; margin:0; padding:7px 12px 7px 10px; border-radius:99px; font-size:13px; font-weight:500; letter-spacing:-.01em;
  background:var(--fill); color:var(--ink-2); transition:background .2s, color .2s, transform .4s var(--spring);}
.tog::before{content:""; width:14px; height:14px; border-radius:50%; box-shadow:inset 0 0 0 1.5px var(--ink-3); transition:background .2s, box-shadow .2s;}
.tog[aria-pressed="true"]{background:color-mix(in srgb,var(--accent) 14%,transparent); color:var(--accent);}
.tog[aria-pressed="true"]::before{background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 7.2l2 2 4-4.4' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; box-shadow:none;}
.tog:active{transform:scale(.95);}
.tog[hidden]{display:none;}
.nt-note{margin:10px 16px 14px; font-size:13px; line-height:1.4; color:var(--ink-3);}
#rn-row .nt-note{margin-top:0;}
#made-mail{margin-top:4px;}

/* Phones: the expiry row has four choices, so its label sits above them. */
@media (max-width:440px){
  .row:has(> #seg-exp){flex-direction:column; align-items:stretch; gap:10px; padding-top:13px; padding-bottom:13px;}
  .row > #seg-exp{display:grid; width:100%;}
  .row > #seg-exp button{padding:7px 4px;}
}

/* Smallest phones (320 to 360px): rows with a control stack the label above it,
   so labels never break word by word. Switch rows stay side by side. */
@media (max-width:360px){
  .row:has(> .seg), .row:has(> .stepper){flex-direction:column; align-items:stretch; gap:10px; padding-top:13px; padding-bottom:13px;}
  .row > .seg{display:grid; width:100%;}
  .row > .seg button{padding:7px 4px;}
  .row > .stepper{justify-content:space-between;}
  .sb-icons svg:not(:last-child){display:none;}
}
.gp-row{flex-wrap:wrap;}
.genpop .stepper{flex:1 1 170px; max-width:220px; justify-content:space-between;}
.genpop .stepper output{min-width:0; flex:1;}
@media (max-width:360px){ .genpop .stepper{max-width:none;} .gp-strength{align-items:flex-start;} .gp-meter{margin-top:6px;} }

/* vanish timer choices */
.hide-row > div{padding:0 16px;}
.hide-row .seg{display:grid; width:100%; margin:12px 0 14px;}
.hide-row .seg button{padding:7px 4px;}

/* send with Messages, WhatsApp, Email */
.sendvia{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px;}
/* "Send the passcode separately", on the link-ready screen when a passcode is set */
.pc-card{margin-top:18px; padding:16px; border-radius:22px; background:color-mix(in srgb,var(--accent) 7%,var(--field)); box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--accent) 22%,var(--hair));}
.pc-card[hidden]{display:none;}
.pc-top{display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; align-items:start;}
.pc-ico{display:grid; place-items:center; width:34px; height:34px; border-radius:11px; background:color-mix(in srgb,var(--accent) 16%,transparent); color:var(--accent);}
.pc-ico svg{width:19px; height:19px;}
.pc-text b{display:block; font-size:16px; letter-spacing:-.02em; line-height:1.3;}
.pc-text small{display:block; margin-top:2px; font-size:14px; line-height:1.4; color:var(--ink-2);}
.pc-pill{margin-top:14px; background:var(--field);}
.pc-pill .pc-val{font:500 16px/1.3 var(--mono); letter-spacing:.04em; color:var(--ink);}
.pc-pill .pc-val.masked{letter-spacing:.08em; color:var(--ink-2);}
.pc-eye{display:grid; place-items:center; flex:none; width:38px; height:38px; border:0; border-radius:50%; background:none; color:var(--ink-2); cursor:pointer; transition:background .2s, transform .3s var(--spring);}
.pc-eye:hover{background:var(--fill);}
.pc-eye:active{transform:scale(.9);}
.pc-eye svg{width:20px; height:20px;}
.pc-eye .i-hide, .pc-eye[aria-pressed="true"] .i-show{display:none;}
.pc-eye[aria-pressed="true"] .i-hide{display:block;}
.pc-sms{margin-top:10px; width:100%;}
@media (max-width:360px){ .pc-pill{padding-left:14px; gap:2px;} .pc-eye{width:34px;} .pc-pill .copy{padding-left:16px; padding-right:16px;} .pc-pill .pc-val.masked{letter-spacing:0; text-overflow:clip;} }
.pc-sms[hidden]{display:none;}
.sv-l{flex:1 1 100%; font-size:13px; color:var(--ink-3); margin:2px 6px -2px;}
.sv{flex:1 1 0; display:flex; align-items:center; justify-content:center; gap:7px; min-width:0; height:42px; padding:0 10px; border-radius:99px; background:var(--field); box-shadow:inset 0 0 0 .5px var(--hair);
  color:var(--ink); text-decoration:none; font-size:14px; font-weight:500; letter-spacing:-.01em; white-space:nowrap; transition:transform .4s var(--spring), background .2s;}
.sv svg{flex:none; width:17px; height:17px; color:var(--accent);}
.sv:hover{background:color-mix(in srgb,var(--accent) 10%,var(--field));}
.sv:active{transform:scale(.95);}
.sv[hidden]{display:none;}
@media (max-width:360px){ .sv svg{display:none;} .sv{font-size:13px; padding:0 6px;} }

/* undo toast */
.toast.undo{gap:14px; padding:8px 8px 8px 20px; overflow:hidden; pointer-events:none; white-space:nowrap; max-width:calc(100vw - 32px);}
.toast.undo.on{pointer-events:auto;}
.toast.undo button{border:0; margin:0; padding:7px 14px; border-radius:99px; font:inherit; font-weight:600; color:var(--bg); background:color-mix(in srgb,var(--bg) 18%,transparent);}
.toast.undo button:hover{background:color-mix(in srgb,var(--bg) 28%,transparent);}
.ut-bar{position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--accent); transform-origin:left; opacity:.9;}

/* copy button inside a revealed message */
.secret-wrap .secret{padding-right:62px;}
.incopy{position:absolute; top:10px; right:10px; z-index:2; display:grid; place-items:center; width:38px; height:38px; padding:0; border:0; border-radius:50%;
  background:var(--glass); color:var(--accent); box-shadow:inset 0 0 0 .5px var(--hair), 0 1px 3px rgba(0,0,0,.06);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); transition:background .25s, color .25s, transform .4s var(--spring); animation:fadeup .4s var(--spring);}
.incopy[hidden]{display:none;}
.incopy svg{grid-area:1 / 1; width:19px; height:19px; transition:opacity .2s, transform .45s var(--spring);}
.incopy .i-done{opacity:0; transform:scale(.4);}
.incopy-t{display:none;}
.incopy:hover{background:color-mix(in srgb,var(--accent) 12%,var(--field));}
.incopy:active{transform:scale(.92);}
.incopy.done{background:var(--accent); color:var(--accent-ink); box-shadow:none;}
.incopy.done .i-copy{opacity:0; transform:scale(.4);}
.incopy.done .i-done{opacity:1; transform:none;}
.guarded.veiled .incopy{visibility:hidden;}

/* the row under a revealed message */
.erase-btn{display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 16px 0 13px; border:0; border-radius:99px; font:inherit; font-size:15px; font-weight:600; letter-spacing:-.015em;
  color:var(--warn); background:color-mix(in srgb,var(--warn) 11%,transparent); transition:background .2s, transform .4s var(--spring);}
.erase-btn svg{width:17px; height:17px;}
.erase-btn:hover{background:color-mix(in srgb,var(--warn) 17%,transparent);}
.erase-btn:active{transform:scale(.95);}
.priv{display:inline-flex; align-items:center; gap:7px; font-size:14px; color:var(--ink-3);}
.priv[hidden]{display:none;}
.priv svg{width:16px; height:16px; color:var(--good);}

/* small icons on text links */
.ghost svg{flex:none; width:17px; height:17px;}
.ghost.danger{color:var(--warn);}

/* "Be careful" scam warning */
.scam{display:flex; gap:12px; align-items:flex-start; margin-top:18px; padding:14px 16px; border-radius:18px;
  background:color-mix(in srgb,var(--warn) 9%,var(--field)); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--warn) 24%,transparent); animation:fadeup .45s var(--spring);}
.scam[hidden]{display:none;}
.scam svg{flex:none; width:20px; height:20px; margin-top:1px; color:var(--warn);}
.scam b{display:block; font-size:15px; font-weight:600; letter-spacing:-.015em; color:var(--warn);}
.scam p{margin:2px 0 0; font-size:14px; line-height:1.45; color:var(--ink-2); text-wrap:pretty;}
.ask.big + .scam{margin-top:-4px; margin-bottom:16px;}

/* password strength meter (beneath the composer, Password mode only) */
/* Password strength, right under the text box, updating as you type. */
.pwm{--lv:var(--fill); margin:12px 4px 2px;}
.pwm[hidden]{display:none;}
.pwm-top{display:flex; align-items:center; gap:12px;}
.pwm-bars{flex:none; display:grid; grid-template-columns:repeat(4,22px); gap:4px;}
.pwm-bars i{height:6px; border-radius:99px; background:var(--fill); transition:background-color .35s ease, transform .45s var(--spring); transform-origin:left center;}
.pwm-label{font-size:14px; font-weight:600; letter-spacing:-.015em; transition:color .3s;}
.pwm-time{margin-left:auto; font-size:13px; color:var(--ink-2); text-align:right; font-variant-numeric:tabular-nums;}
.pwm-hint{margin:4px 0 0; font-size:13px; line-height:1.4; color:var(--ink-2); text-wrap:pretty;}
.pwm[data-level="0"]{--lv:var(--warn);} .pwm[data-level="1"]{--lv:var(--fair);} .pwm[data-level="2"]{--lv:var(--accent);} .pwm[data-level="3"]{--lv:var(--good);}
.pwm[data-level="none"] .pwm-label{color:var(--ink-2); font-weight:500;}
.pwm[data-level="0"] .pwm-bars i:nth-child(-n+1), .pwm[data-level="1"] .pwm-bars i:nth-child(-n+2),
.pwm[data-level="2"] .pwm-bars i:nth-child(-n+3), .pwm[data-level="3"] .pwm-bars i{background:var(--lv);}
:root{--fair:#B07A1E;}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){--fair:#D9B36E;} }
:root[data-theme="dark"]{--fair:#D9B36E;}
@media (max-width:520px){ .pwm-top{flex-wrap:wrap; row-gap:2px;} .pwm-time{margin-left:0; flex-basis:100%; text-align:left;} .pwm-time:empty{display:none;} }
@media (max-width:360px){ .pwm-bars{grid-template-columns:repeat(4,16px);} }
@media (prefers-reduced-motion: reduce){ .pwm-bars i{transition:none;} }
.vh{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}

/* files: picking, uploading, and the recipient's preview */
.drop{margin-top:2px;}
.drop[hidden]{display:none;}
.drop-zone{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; width:100%; min-height:156px; padding:22px 18px; border:0; border-radius:20px; cursor:pointer;
  background:var(--field); box-shadow:inset 0 0 0 1.5px var(--hair); color:var(--ink); text-align:center; transition:box-shadow .25s, background .25s, transform .4s var(--spring);}
.drop-zone:hover{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 45%,transparent);}
.drop-zone:active{transform:scale(.985);}
.drop-zone b{font-size:17px; font-weight:600; letter-spacing:-.02em;}
.dz-sub{font-size:15px; color:var(--ink-2);}
.drop-zone small{margin-top:6px; font-size:13px; color:var(--ink-3); max-width:34ch; line-height:1.4;}
.dz-ico{display:grid; place-items:center; width:46px; height:46px; margin-bottom:6px; border-radius:15px; background:color-mix(in srgb,var(--accent) 14%,transparent); color:var(--accent);}
.dz-ico svg{width:24px; height:24px;}
#composer.dragging .drop-zone, #composer.dragging .fchip{box-shadow:inset 0 0 0 2px var(--accent); background:color-mix(in srgb,var(--accent) 8%,var(--field));}
#composer.dragging{transform:scale(1.005);}
.fchip, .fcard{position:relative; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:14px; padding:16px; border-radius:20px; background:var(--field); box-shadow:inset 0 0 0 .5px var(--hair); overflow:hidden;}
.fchip{animation:fadeup .4s var(--spring);}
.fchip[hidden], .fcard[hidden]{display:none;}
.fchip-ico{display:grid; place-items:center; width:46px; height:46px; border-radius:14px; background:color-mix(in srgb,var(--accent) 14%,transparent); color:var(--accent);}
.fchip-ico svg{width:24px; height:24px;}
.fchip-text{display:flex; flex-direction:column; gap:2px; min-width:0;}
.fchip-text b{font-size:16px; font-weight:600; letter-spacing:-.015em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.fchip-text small{font-size:13px; color:var(--ink-2); font-variant-numeric:tabular-nums;}
.fchip-x{display:grid; place-items:center; width:32px; height:32px; border:0; border-radius:50%; background:var(--fill); color:var(--ink-2); cursor:pointer; transition:background .2s, color .2s, transform .3s var(--spring);}
.fchip-x:hover{background:color-mix(in srgb,var(--warn) 16%,transparent); color:var(--warn);}
.fchip-x:active{transform:scale(.9);}
.fchip-x svg{width:11px; height:11px;}
.fchip.uploading .fchip-x{visibility:hidden;}
.fchip-bar{position:absolute; left:16px; right:16px; bottom:8px; height:3px; border-radius:99px; background:var(--fill); opacity:0; transition:opacity .3s;}
.fchip-bar i{display:block; height:100%; width:0; border-radius:99px; background:var(--accent); transition:width .25s ease;}
.fchip.uploading .fchip-bar{opacity:1;}
.fview{position:relative;}
.fview[hidden]{display:none;}
.fv-img{display:block; width:100%; max-height:min(62vh,560px); object-fit:contain; border-radius:18px; background:var(--field); box-shadow:inset 0 0 0 .5px var(--hair); animation:fadeup .5s var(--spring);}
.fv-img[hidden]{display:none;}
.guarded.veiled .fview{filter:blur(18px);}
#o-save, #ib-save{gap:9px;}
#o-save svg, #ib-save svg{width:19px; height:19px; flex:none;}
#o-save[hidden], #ib-save[hidden]{display:none;}
#ib-save{margin-top:14px;}
.seg.rs-mode{display:grid; width:100%; margin:18px 0 12px;}
.seg.rs-mode[hidden]{display:none;}
.seg.rs-mode button{padding:7px 4px; font-size:14px;}
#rs-drop{margin-bottom:14px;}
#rs-drop.dragging .drop-zone, #rs-drop.dragging .fchip{box-shadow:inset 0 0 0 2px var(--accent); background:color-mix(in srgb,var(--accent) 8%,var(--field));}
@media (max-width:360px){ .fchip, .fcard{gap:12px; padding:14px;} .fchip-ico{width:40px; height:40px;} }
@media (prefers-reduced-motion: reduce){ .fchip, .fv-img{animation:none;} #composer.dragging{transform:none;} }

/* ---------- How it works and Transparency pages ---------- */
.page{width:100%; max-width:860px; margin:0 auto;}
.pg-hero{max-width:700px; margin:0 0 8px;}
.eyebrow{margin:0 0 12px; font-size:15px; font-weight:600; letter-spacing:-.01em; color:var(--accent);}
.pg-hero h1{font-size:clamp(40px,7vw,64px); line-height:1.02; letter-spacing:-.045em; text-wrap:balance;}
.pg-hero .lede{max-width:36ch; margin-bottom:0;}
.pg-sec{margin-top:72px;}
.pg-sec > h2{font-size:clamp(26px,4vw,34px); margin-bottom:8px; text-wrap:balance;}
.sec-sub{margin:0 0 24px; font-size:17px; line-height:1.45; color:var(--ink-2); max-width:56ch;}
.pg-sec > h2 + .steps, .pg-sec > h2 + .feats, .pg-sec > h2 + .tips, .pg-sec > h2 + .faq, .pg-sec > h2 + .see, .pg-sec > h2 + .keep, .pg-sec > h2 + .checks{margin-top:22px;}
.pg-sec .body{margin:0; font-size:17px; line-height:1.6; color:var(--ink-2); max-width:62ch;}
.pg-sec .body b{color:var(--ink); font-weight:600;}
.fine{margin:14px 0 0; font-size:14px; line-height:1.5; color:var(--ink-3);}
.fine a, .faq a{color:var(--accent);}
.step, .feats, .see-card, .keep, .faq, .pg-cta, .num, .anatomy{background:var(--glass); box-shadow:var(--shadow),inset 0 0 0 .5px var(--edge);
  -webkit-backdrop-filter:blur(30px) saturate(var(--sat)); backdrop-filter:blur(30px) saturate(var(--sat));}

/* three steps */
.steps{list-style:none; margin:0; padding:0; display:grid; gap:14px; grid-template-columns:repeat(3,minmax(0,1fr));}
.step{position:relative; padding:22px 22px 24px; border-radius:26px;}
.step-ico{display:grid; place-items:center; width:46px; height:46px; border-radius:14px; margin-bottom:18px; background:color-mix(in srgb,var(--accent) 14%,transparent); color:var(--accent);}
.step-ico svg{width:24px; height:24px;}
.step-n{position:absolute; top:22px; right:22px; font-size:13px; font-weight:600; color:var(--ink-3); font-variant-numeric:tabular-nums;}
.step h3{margin:0 0 6px; font-size:19px; letter-spacing:-.025em; line-height:1.2;}
.step p{margin:0; font-size:15px; line-height:1.5; color:var(--ink-2);}

/* the two parts of a link */
.anatomy{margin:0; padding:26px; border-radius:28px;}
.link-demo{display:flex; flex-wrap:wrap; align-items:baseline; padding:16px 18px; border-radius:16px; background:var(--field); box-shadow:inset 0 0 0 .5px var(--hair);
  font:500 clamp(14px,2.4vw,17px)/1.4 var(--mono); letter-spacing:-.01em; overflow-wrap:anywhere;}
.ld-addr{color:var(--ink-2);}
.ld-hash{margin:0 3px; color:var(--accent); font-weight:700;}
.ld-key{padding:1px 8px; border-radius:8px; background:color-mix(in srgb,var(--accent) 16%,transparent); color:var(--accent);}
.ld-parts{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:14px; margin-top:16px;}
.ld-part{position:relative; padding:14px 0 0 16px; font-size:15px; line-height:1.45; color:var(--ink-2);}
.ld-part::before{content:""; position:absolute; left:0; top:16px; bottom:2px; width:3px; border-radius:2px; background:var(--ink-4);}
.ld-part.key::before{background:var(--accent);}
.ld-part b{display:block; margin-bottom:2px; color:var(--ink); font-size:16px; letter-spacing:-.015em;}
.anatomy figcaption{margin-top:20px; padding-top:16px; border-top:.5px solid var(--hair); font-size:15px; line-height:1.5; color:var(--ink-2);}

/* features */
.feats{list-style:none; margin:0; padding:6px 22px; border-radius:26px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:28px;}
.feats li{display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px; padding:16px 0; border-top:.5px solid var(--hair);}
.feats li:nth-child(-n+2){border-top:0;}
.feat-ico{display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:var(--fill); color:var(--ink-2);}
.feat-ico svg{width:20px; height:20px;}
.feats h3{margin:5px 0 3px; font-size:16px; letter-spacing:-.015em;}
.feats p{margin:0; font-size:14px; line-height:1.5; color:var(--ink-2);}

/* tips and checks */
.tips, .checks{margin:0; padding:0; list-style:none; display:grid; gap:12px; max-width:66ch;}
.tips li, .checks li{position:relative; padding-left:30px; font-size:17px; line-height:1.5; color:var(--ink-2);}
.tips li b, .checks li b{color:var(--ink); font-weight:600;}
.tips li::before{content:""; position:absolute; left:6px; top:.6em; width:8px; height:8px; border-radius:50%; background:var(--accent);}
.checks{counter-reset:c;}
.checks li{counter-increment:c;}
.checks li::before{content:counter(c); position:absolute; left:0; top:.15em; display:grid; place-items:center; width:21px; height:21px; border-radius:50%;
  background:color-mix(in srgb,var(--accent) 16%,transparent); color:var(--accent); font-size:12px; font-weight:700;}

/* questions */
.faq{border-radius:26px; padding:4px 22px;}
.faq details + details{border-top:.5px solid var(--hair);}
.faq summary{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 0; cursor:pointer; list-style:none; font-size:17px; font-weight:600; letter-spacing:-.02em;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary:focus-visible{outline:2px solid var(--accent); outline-offset:4px; border-radius:6px;}
.faq .chev{width:14px; height:14px; flex:none; color:var(--ink-3); transition:transform .35s var(--spring);}
.faq details[open] .chev{transform:rotate(180deg);}
.faq details p{margin:-6px 0 18px; font-size:16px; line-height:1.55; color:var(--ink-2); max-width:62ch;}

/* closing call to action */
.pg-cta{margin-top:72px; padding:36px 28px; border-radius:30px; text-align:center;}
.pg-cta h2{font-size:clamp(26px,4vw,32px);}
.pg-cta p{margin:0; font-size:17px; color:var(--ink-2);}
.pg-cta .btn{width:auto; display:inline-flex; margin-top:22px; padding-left:30px; padding-right:30px;}

/* live numbers */
.nums{display:grid; gap:12px; grid-template-columns:repeat(5,minmax(0,1fr));}
.num{display:flex; flex-direction:column; gap:4px; padding:18px; border-radius:22px; min-width:0;}
.num b{font-size:clamp(26px,3.6vw,34px); line-height:1.1; font-weight:700; letter-spacing:-.04em; font-variant-numeric:tabular-nums;}
.num span{font-size:14px; line-height:1.35; color:var(--ink-2);}

/* can and can't see */
.see{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px;}
.see-card{padding:22px; border-radius:26px;}
.see-card h3{margin:0 0 12px; font-size:19px; letter-spacing:-.025em;}
.see-card ul{list-style:none; margin:0; padding:0; display:grid; gap:12px;}
.see-card li{display:grid; grid-template-columns:auto minmax(0,1fr); gap:11px; font-size:15px; line-height:1.45; color:var(--ink-2);}
.tick{display:grid; place-items:center; width:22px; height:22px; border-radius:50%; margin-top:-1px;}
.tick svg{width:12px; height:12px;}
.can .tick{background:var(--fill); color:var(--ink-2);}
.cant .tick{background:color-mix(in srgb,var(--good) 16%,transparent); color:var(--good);}

/* how long things stay */
.keep{margin:0; padding:4px 22px; border-radius:26px;}
.keep-row{display:flex; justify-content:space-between; align-items:baseline; gap:20px; padding:14px 0;}
.keep-row + .keep-row{border-top:.5px solid var(--hair);}
.keep dt{font-size:16px; font-weight:500; letter-spacing:-.015em;}
.keep dd{margin:0; font-size:15px; color:var(--ink-2); text-align:right; max-width:58%;}

@media (max-width:760px){
  .steps{grid-template-columns:minmax(0,1fr);}
  .step{display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:16px; padding:18px;}
  .step-ico{grid-row:span 2; margin:0;}
  .step h3{margin-top:2px;}
  .step-n{top:18px; right:18px;}
  .feats{grid-template-columns:minmax(0,1fr);}
  .feats li:nth-child(2){border-top:.5px solid var(--hair);}
  .see{grid-template-columns:minmax(0,1fr);}
  .nums{grid-template-columns:repeat(2,minmax(0,1fr));}
  .nums .num:first-child{grid-column:1 / -1;}
  .ld-parts{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:520px){
  .pg-sec{margin-top:56px;}
  .pg-hero .lede{font-size:19px;}
  .anatomy{padding:18px;}
  .feats, .faq, .keep{padding-left:18px; padding-right:18px;}
  .keep-row{flex-direction:column; gap:2px;}
  .keep dd{text-align:left; max-width:none;}
  .pg-cta{padding:30px 20px;}
  .pg-cta .btn{width:100%;}
}

/* ---------- Opening animation (home page, once per tab; see /splash.js) ---------- */
.splash{display:none;}
.splash-on .splash{display:block; position:fixed; inset:0; z-index:1000; overflow:hidden; cursor:default;
  animation:splash-failsafe .4s ease 3.6s forwards;}
/* The veil (background and ciphertext) is what the opening circle cuts through. */
.splash-veil{position:absolute; inset:0; background:radial-gradient(70vmax 60vmax at 0% 0%, color-mix(in srgb,var(--bg2) calc(var(--a-warm) * 100%),transparent), transparent 70%),
    radial-gradient(60vmax 50vmax at 100% 100%, color-mix(in srgb,var(--accent) calc(var(--a-glow) * 60%),transparent), transparent 70%), var(--bg);}
.splash canvas{position:absolute; inset:0; width:100%; height:100%;}
/* While it plays, the page underneath waits, then rises in gently as the circle opens. */
.splash-on .create-grid, .splash-on .head-right{opacity:0; transform:translateY(14px); animation:splash-show 0s 4s forwards;}
.splash-reveal .create-grid, .splash-reveal .head-right{opacity:1; transform:none; transition:opacity .8s ease .12s, transform 1s cubic-bezier(.32,.72,0,1) .12s;}
@keyframes splash-failsafe{to{opacity:0; visibility:hidden;}}
@keyframes splash-show{to{opacity:1; transform:none;}}

/* Only for this email: the code step on the open page */
.vcode{margin-top:20px; padding:16px; border-radius:22px; background:color-mix(in srgb,var(--accent) 7%,var(--field)); box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--accent) 22%,var(--hair));}
.vcode[hidden]{display:none;}
.vc-top{display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; align-items:center;}
.vc-top p{margin:0; font-size:15px; line-height:1.4; color:var(--ink-2); overflow-wrap:anywhere;}
.vc-top p b{color:var(--ink); font-weight:600;}
.vcode .btn{margin-top:14px;}
.code-inp{margin-top:14px; text-align:center; font-family:var(--mono); font-size:26px; font-weight:600; letter-spacing:.42em; padding:14px 0 14px .42em;}
.code-inp::placeholder{color:var(--ink-4); opacity:.55;}
.vcode .hint{margin-top:10px;}
.vcode .ghost.small{display:block; margin:4px auto 0;}
.vcode .ghost.small:disabled{opacity:.55; cursor:default;}

/* Reply privately */
#o-reply{gap:9px;}
#o-reply svg{width:18px; height:18px; flex:none;}
#o-reply[hidden]{display:none;}
#o-reply + #o-new{margin-top:10px;}
.s-reply{margin-top:20px;}
.s-reply .btn{margin-top:14px;}
.s-reply .btn[hidden]{display:none;}

/* Destroy all open links (My links) */
.ml-panic{margin-top:18px;}
.ml-panic[hidden]{display:none;}
.ml-panic .hold{margin-top:0;}

/* Security page */
.sub-h{margin:28px 0 14px; font-size:19px; letter-spacing:-.02em;}
.pg-sec .body.more{margin-top:18px;}
.pg-sec .body a{color:var(--accent);}
.fp-cmd{display:block; margin:18px 0 0; padding:12px 16px; border-radius:14px; background:var(--field); box-shadow:inset 0 0 0 .5px var(--hair); font:13px/1.5 var(--mono); color:var(--ink); overflow-x:auto; white-space:nowrap;}
.fp{margin-top:18px; padding:8px 22px 20px; border-radius:26px; background:var(--glass); box-shadow:var(--shadow),inset 0 0 0 .5px var(--edge);}
.fp-list{margin:0; padding:0; list-style:none;}
.fp-row{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; padding:13px 0;}
.fp-row + .fp-row{border-top:.5px solid var(--hair);}
.fp-path{font:600 14px/1.4 var(--mono); color:var(--ink);}
.fp-hash{grid-column:1 / -1; font:12px/1.5 var(--mono); color:var(--ink-3); overflow-wrap:anywhere;}
.fp-st{font-size:13px; font-weight:600; color:var(--ink-3);}
.fp-st.ok{color:var(--good);}
.fp-st.bad{color:var(--warn);}
.fp .btn{margin-top:14px;}

/* Small technical details in the code font, for the "encrypted" feel. Used sparingly. */
.eyebrow{font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase;}
#out, #rq-out, #in-out, #ib-link, .meta, #count, .tag, kbd, .timer, .ld-key, .ld-id{font-family:var(--mono); letter-spacing:-.01em;}
.ta.mono, .secret.mono{letter-spacing:-.01em;}