/* Copied from ~/Desktop/deiko new site/index.html (tokens, base, section, card, window bar, wall, buttons),
   so each option renders exactly as it would on the page. Option-specific rules live in each file. */
:root{
  --ink:#161618; --ink-2:#4b4b53; --ink-3:#6b6b73; --ink-4:#9a9aa2;
  --line:#ececef; --line-2:#e2e2e6; --paper:#fafafb; --paper-2:#f5f5f7;
  --accent:#4a5bac; --accent-ink:#4050a0; --accent-soft:#eef1ff;
  --capture:#d4302a; --ok:#177a45;
  --wall:radial-gradient(120% 90% at 0% 0%,#dfe4ff 0%,transparent 55%),radial-gradient(90% 80% at 100% 10%,#ece4ff 0%,transparent 60%),radial-gradient(100% 90% at 60% 100%,#e6eeff 0%,transparent 60%),#f5f6ff;
  --shadow:0 24px 60px -28px rgba(30,36,90,.28),0 1px 3px rgba(20,20,30,.06);
  --ease:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --display:'Bricolage Grotesque','Geist',sans-serif;
  --sans:'Geist',system-ui,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --hand:'Kalam',cursive;
  --marker:'Permanent Marker',cursive;
}
html,body{margin:0;padding:0;background:#fff;color:var(--ink);font:400 17px/1.55 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
*{box-sizing:border-box;}
h1,h2,h3,h4,p,figure,ul,ol,blockquote{margin:0;}
ul,ol{padding:0;list-style:none;}
button,input{font:inherit;color:inherit;}
button{background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:inherit;}
::selection{background:#dfe3fa;color:var(--ink);}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:8px;}
input{caret-color:var(--accent);}
html{scrollbar-color:#cfcfd5 transparent;scrollbar-width:thin;}
.tnum{font-variant-numeric:tabular-nums;}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

.sec{position:relative;padding:clamp(88px,10vw,140px) 28px;}
.sec.tint{background:var(--paper);}
.prev{height:64px;border-bottom:1px solid var(--line);background:#fff;}
.next{height:64px;border-top:1px solid var(--line);background:#fff;}
.in{max-width:1200px;margin:0 auto;}
.head{max-width:760px;}
.head.center{margin:0 auto;text-align:center;}
.head h2{font:650 clamp(38px,4.8vw,66px)/1.02 var(--display);letter-spacing:-.035em;text-wrap:balance;}
.head p{margin-top:18px;font-size:clamp(17px,1.25vw,19px);color:var(--ink-2);text-wrap:pretty;max-width:58ch;}
.head.center p{margin-left:auto;margin-right:auto;}
.head p strong{color:var(--ink);font-weight:500;}

.card{background:#fff;border-radius:18px;box-shadow:var(--shadow);border:1px solid rgba(20,20,30,.06);}
.win-bar{display:flex;align-items:center;gap:7px;height:40px;padding:0 14px;border-bottom:1px solid var(--line);background:var(--paper);border-radius:18px 18px 0 0;}
.win-bar i{width:11px;height:11px;border-radius:50%;background:#e2e2e6;}
.win-bar i:nth-child(1){background:#ff5f57}.win-bar i:nth-child(2){background:#febc2e}.win-bar i:nth-child(3){background:#28c840}
.win-bar span{margin:0 auto;font-size:12.5px;color:var(--ink-3);}
.wall{position:relative;padding:clamp(16px,2.8vw,40px);border-radius:24px;overflow:hidden;background:var(--wall);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 30px 80px -40px rgba(40,50,120,.35);}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:44px;padding:0 19px;border-radius:12px;font:500 15px/1 var(--sans);white-space:nowrap;
  transition:transform .2s var(--ease),box-shadow .2s,background .2s,opacity .2s;}
.btn svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.btn-ink{background:var(--ink);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 8px 20px -10px rgba(22,22,24,.6);}
.btn-ink:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 14px 26px -12px rgba(22,22,24,.6);}
.btn-line{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2),0 1px 2px rgba(20,20,30,.04);}
.btn-line:hover{box-shadow:inset 0 0 0 1px #cfcfd5,0 4px 10px -4px rgba(20,20,30,.12);}
.btn-sm{height:38px;padding:0 15px;font-size:14.5px;border-radius:10px;}
.btn:disabled{opacity:.45;cursor:default;transform:none;}

/* the ink task label, as the pin wall draws it */
.task{display:inline-flex;align-items:center;gap:9px;max-width:100%;padding:8px 12px 8px 10px;border-radius:10px;background:var(--ink);color:#fff;font:600 13.5px/1.25 var(--sans);
  box-shadow:0 14px 30px -16px rgba(20,20,30,.6);}
.task::before{content:'';flex:none;width:9px;height:9px;border-radius:50%;background:#aab5ee;box-shadow:0 0 0 2px rgba(255,255,255,.18);}
.task small{font-size:13px;font-weight:500;color:rgba(255,255,255,.7);white-space:nowrap;}

/* a crop: the bit of screen that was pointed at, with Deiko's lasso on it */
.crop{position:relative;border-radius:9px;background:var(--paper-2);overflow:hidden;}
.lasso{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;}
.lasso path{fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linecap:round;}

/* marker graffiti: aria-hidden, in the margins, gone on narrow screens */
.gf{position:absolute;pointer-events:none;z-index:6;color:var(--accent);}
.gf svg{overflow:visible;filter:url(#gf-rough);display:block;}
.gf path{fill:none;stroke:var(--accent);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;}
.gf b{display:block;white-space:nowrap;font:400 23px/1 var(--marker);color:var(--accent);}
@media (max-width:899px){.gf{display:none;}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}}
/* a lasso drawn around one element inside a crop, so it follows that element at any width */
.tgt{position:relative;display:inline-grid;}
.tgt > .lasso{inset:-8px -11px;width:calc(100% + 22px);height:calc(100% + 16px);}

/* ── the pin wall, as the current memory section draws it (index.html #context) ── */
.desk{position:relative;height:clamp(560px,50vw,640px);overflow:hidden;border-radius:14px;
  background:linear-gradient(rgba(255,255,255,.34),rgba(255,255,255,.34)),url(/v/assets/art/whiteboard.b4969903df.webp) center 55%/cover no-repeat,#eef0f3;
  box-shadow:0 1px 0 #fff,0 30px 70px -36px rgba(30,36,90,.38);}
.desk.calm{background:linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.5)),url(/v/assets/art/whiteboard.b4969903df.webp) center 55%/cover no-repeat,#eef0f3;}
.strings{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:visible;}
.strings path{fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-dasharray:1 6;opacity:.9;transition:opacity .3s;}
.strings path.faint{opacity:.22;}
.strings path.rel{stroke-dasharray:6 7;opacity:.55;}
.desk > [data-w]{position:absolute;transition:left .85s var(--ease),top .85s var(--ease),opacity .45s,transform .6s var(--ease),box-shadow .3s;}
.desk.still > [data-w]{transition:none;}
.desk .gone{opacity:0;pointer-events:none;}
.desk .task{position:absolute;z-index:4;transform:rotate(var(--r,0deg));}
.desk .task.hi{box-shadow:0 0 0 3px rgba(74,91,172,.35),0 14px 30px -16px rgba(20,20,30,.6);}
.task.soft{background:#fff;color:var(--ink-2);box-shadow:0 0 0 1px var(--line-2),0 10px 24px -16px rgba(20,20,30,.35);}
.task.soft::before{background:var(--line-2);box-shadow:none;}
.task.soft small{color:var(--ink-3);}
.pcard{z-index:3;width:clamp(186px,16vw,224px);background:#fff;border-radius:14px;padding:14px 14px 13px;user-select:none;
  box-shadow:0 18px 40px -22px rgba(30,36,90,.45),0 1px 2px rgba(20,20,30,.06);transform:rotate(var(--r,0deg));}
.pcard.grab{cursor:grab;touch-action:none;}
.pcard.drag{cursor:grabbing;z-index:9;box-shadow:0 30px 60px -24px rgba(30,36,90,.5);transition:none;}
.pcard .pin{position:absolute;left:50%;top:-5px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px #fff;}
.pcard h3,.pcard q{display:block;margin:0;font:600 15px/1.3 var(--display);letter-spacing:-.01em;quotes:'“' '”';}
.pcard .crop{margin-top:10px;height:58px;}
.pcard p{margin-top:9px;font-size:14px;line-height:1.4;color:var(--ink-2);}
.pcard small{display:flex;justify-content:space-between;gap:8px;margin-top:10px;font-size:12px;color:var(--ink-3);}
.pcard.fresh{box-shadow:0 0 0 2px var(--accent),0 24px 50px -22px rgba(30,36,90,.55);}
.pcard .tag{position:absolute;right:10px;top:-11px;padding:3px 8px;border-radius:999px;background:var(--accent);color:#fff;font-size:12px;font-weight:600;}
.pcard.aside .crop{opacity:.35;}
.note{z-index:3;width:162px;padding:14px;border-radius:12px;background:#fff7d1;font:700 15px/1.3 var(--hand);color:#5a4a00;
  box-shadow:0 18px 36px -22px rgba(60,40,0,.45);transform:rotate(var(--r,0deg));}
/* writing on the board itself: marker-ish, but legible and part of the content */
.scrawl{z-index:2;font:700 22px/1.1 var(--hand);color:var(--accent-ink);white-space:nowrap;transform:rotate(var(--r,0deg));}
.scrawl small{display:block;font:700 15px/1.2 var(--hand);color:rgba(64,80,160,.75);}
/* crop contents */
.cp{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px;font-size:11px;color:var(--ink-3);}
.cp .tile{display:grid;gap:2px;padding:5px 8px;border-radius:6px;background:#fff;box-shadow:0 0 0 1px var(--line);}
.cp .tile b{font:600 12.5px/1.1 var(--sans);color:var(--ink);}
.cp .row{display:grid;gap:3px;min-width:120px;padding:6px 9px;border-radius:6px;background:#fff;box-shadow:0 0 0 1px var(--line);}
.cp .row span{display:flex;justify-content:space-between;gap:10px;}
.cp .row b{color:var(--ink);font-weight:600;}
.cp .field{height:14px;width:62px;border-radius:4px;background:#fff;box-shadow:0 0 0 1px var(--line-2);}
.cp .save{padding:3px 10px;border-radius:5px;background:var(--ink);color:#fff;font-size:11px;font-weight:600;}
.cp .wave{display:flex;align-items:center;gap:2px;height:22px;}
.cp .wave i{width:3px;border-radius:2px;background:#cfcfd5;}
/* the section's closing row: a few plain truths and the way to the explainer */
.mem-ft{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:0;margin-top:clamp(36px,4vw,52px);align-items:start;}
.mem-ft > div{padding:4px 26px;}
.mem-ft > div:first-child{padding-left:0;}
.mem-ft > div + div{border-left:1px solid var(--line);}
.mem-ft b{display:block;font:650 18px/1.25 var(--display);letter-spacing:-.015em;}
.mem-ft span{display:block;margin-top:6px;font-size:15px;line-height:1.5;color:var(--ink-3);}
.more{display:inline-flex;align-items:center;gap:8px;font-size:15.5px;font-weight:500;color:var(--accent-ink);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;}
.more:hover{color:var(--ink);}
.more svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.more-row{margin-top:26px;}
@media (max-width:900px){.mem-ft{grid-template-columns:1fr;}.mem-ft > div{padding:16px 0;}.mem-ft > div:first-child{padding-top:0;}.mem-ft > div + div{border-left:0;border-top:1px solid var(--line);}}
@media (max-width:760px){.pcard{width:158px;padding:11px;}.pcard .crop{height:44px;}.pcard p{font-size:13px;}.pcard h3,.pcard q{font-size:14px;}.note{width:136px;font-size:13.5px;padding:11px;}.desk .task{max-width:calc(100% - 24px);font-size:12.5px;}.scrawl{font-size:19px;}}
[hidden]{display:none !important;}
.gf,.scrawl,.drawer{user-select:none;-webkit-user-select:none;}
/* Board pieces the options share: the week scrubber, the Odds and ends drawer, the note clipped to a task,
   the agent's window pinned to the board, "Which one?" chips. */

/* the week scrubber */
.scrub input{width:100%;margin:0;height:28px;background:none;-webkit-appearance:none;appearance:none;cursor:pointer;}
.scrub input::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(var(--accent),var(--accent)) 0/var(--fill,0%) 100% no-repeat,var(--line-2);}
.scrub input::-moz-range-track{height:4px;border-radius:4px;background:var(--line-2);}
.scrub input::-moz-range-progress{height:4px;border-radius:4px;background:var(--accent);}
.scrub input::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-9px;border-radius:50%;background:#fff;border:0;box-shadow:0 0 0 2px var(--accent),0 6px 14px -4px rgba(30,36,90,.45);}
.scrub input::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:0;box-shadow:0 0 0 2px var(--accent),0 6px 14px -4px rgba(30,36,90,.45);}
.scrub input:focus-visible{outline:none;}
.scrub input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 2px var(--accent),0 0 0 7px rgba(74,91,172,.2);}
.scrub-days{display:flex;justify-content:space-between;margin:2px 3px 0;font-size:13px;font-weight:500;color:var(--ink-3);}
.scrub-days span.on{color:var(--accent-ink);}

/* the Odds and ends drawer, drawn on the board */
.drawer{z-index:3;width:26%;height:96px;}
@media (max-width:760px){.drawer{width:94%;}.pcard .tag{right:-8px;}}
.drawer svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:url(#gf-rough);}
.drawer svg path{fill:rgba(255,255,255,.72);stroke:var(--accent);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round;}
.drawer svg path + path{fill:none;}
.drawer .lab{position:absolute;left:0;right:0;top:34px;text-align:center;font:700 19px/1.1 var(--hand);color:var(--accent-ink);}
.drawer .lab small{font:500 13px var(--sans);color:var(--ink-3);}
.drawer{transition:transform .5s var(--spring) !important;}
.drawer.open{transform:translateY(10px) scale(1.04) !important;}

/* the note clipped to a task: where it stands, and who wrote each line */
.stand{z-index:4;padding:16px 16px 14px;border-radius:12px;background:#fff;box-shadow:0 18px 40px -22px rgba(30,36,90,.45),0 1px 2px rgba(20,20,30,.06);transform:rotate(var(--r,0deg));}
.stand .clip{position:absolute;left:24px;top:-12px;width:34px;height:22px;border-radius:5px 5px 3px 3px;background:var(--ink);box-shadow:0 4px 8px -3px rgba(20,20,30,.5);}
.stand .clip::before{content:'';position:absolute;left:7px;right:7px;top:-9px;height:12px;border:2.5px solid #9a9aa2;border-bottom:0;border-radius:7px 7px 0 0;}
.stand h3,.stand h4{margin:0 0 8px;font:650 16px/1.2 var(--display);letter-spacing:-.015em;}
.stand ul{display:grid;gap:7px;}
.stand li{display:grid;gap:2px;font-size:14px;line-height:1.35;color:var(--ink);}
.stand li em{justify-self:start;font-style:normal;padding:1px 8px;border-radius:999px;background:var(--paper-2);font-size:12px;font-weight:500;color:var(--ink-3);}
.stand li em.back{background:#e6f4ec;color:var(--ok);}
.stand li.late{display:none;}
.stand li.late.on{display:grid;animation:lineIn .6s var(--ease);}
@keyframes lineIn{from{opacity:0;transform:translateY(-4px)}}

/* the agent's window, pinned to the board */
.agent{z-index:4;border-radius:14px;background:#fff;box-shadow:0 22px 44px -22px rgba(30,36,90,.5),0 1px 2px rgba(20,20,30,.06);transform:rotate(var(--r,0deg));}
.agent .pin{position:absolute;left:50%;top:-5px;z-index:2;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px #fff;}
.agent .win-bar{height:32px;border-radius:14px 14px 0 0;}
.agent .win-bar i{width:9px;height:9px;}
.ag-b{padding:12px 14px 14px;font-size:13.5px;line-height:1.45;}
.ag-b .you{font:600 13px/1.5 var(--mono);color:var(--ink);}
.img{display:inline-block;padding:0 6px;border-radius:5px;background:var(--accent-soft);color:var(--accent-ink);font:500 11.5px/1.7 var(--sans);vertical-align:1px;}
.ag-b .carry{margin-top:8px;padding:8px 10px;border-radius:9px;background:#f7f8ff;box-shadow:inset 0 0 0 1px #dfe3fa;font:500 12.5px/1.55 var(--mono);color:var(--ink-2);}
.ag-b .carry b{color:var(--accent-ink);font-weight:600;}
.ag-b .reply{display:none;margin-top:9px;color:var(--ink);}
.ag-b .reply.on{display:flex;gap:8px;animation:lineIn .6s var(--ease);}
.ag-b .reply i{flex:none;width:7px;height:7px;margin-top:7px;border-radius:50%;background:var(--ok);}

/* scrawls: an arrow drawn after a line of writing, and small asides */
.scrawl .arrow{display:inline-block;width:70px;height:24px;margin-left:6px;vertical-align:middle;overflow:visible;filter:url(#gf-rough);}
.scrawl .arrow path{fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.rel-note small{font-size:15px;}

/* "Which one?" chips, as the review card shows them */
.which p{font:600 14px/1.2 var(--sans);color:var(--ink-2);}
.which div{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.which button{min-height:32px;padding:5px 12px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--line-2);font-size:13px;font-weight:500;line-height:1.3;color:var(--ink);text-align:left;transition:box-shadow .2s,background .2s,color .2s;}
.which button:hover{box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--accent-ink);}
.which button.ghosty{color:var(--ink-3);background:transparent;}
.which button[aria-pressed="true"]{background:var(--accent-soft);box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--accent-ink);}

@media (prefers-reduced-motion:reduce){.drawer.open{transform:none !important;}}
@media (max-width:760px){.agent .win-bar span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:11.5px;}}

/* ── the calm options (s1–s3): one manual drag, everything else still ── */
.zone{z-index:2;border-radius:14px;border:2px dashed rgba(74,91,172,.55);background:rgba(255,255,255,.45);display:grid;place-items:center;text-align:center;padding:12px;
  font:700 18px/1.2 var(--hand);color:var(--accent-ink);transition:opacity .3s;}
.snapped .zone{opacity:0;}
.pcard.loose{z-index:6;cursor:grab;touch-action:none;box-shadow:0 0 0 2px var(--accent),0 26px 50px -22px rgba(30,36,90,.55);}
.pcard.loose:focus-visible{outline:2.5px solid var(--accent);outline-offset:4px;border-radius:14px;}
.pcard.loose .grip{position:absolute;right:10px;bottom:10px;display:flex;gap:3px;}
.pcard.loose .grip i{width:4px;height:4px;border-radius:50%;background:#c9cff0;}
.reveal{opacity:0;visibility:hidden;transform:rotate(var(--r,0deg)) translateY(10px);transition:opacity .35s var(--ease),transform .5s var(--ease),visibility 0s .35s;}
.snapped .reveal{opacity:1;visibility:visible;transform:rotate(var(--r,0deg));transition:opacity .35s var(--ease),transform .5s var(--ease);}
.snapped .before-only{display:none;}
.after-only{display:none;}
.snapped .after-only{display:revert;}
.under{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:14px;min-height:38px;}
.under .status{font-size:14.5px;color:var(--ink-3);}
.under .status b{color:var(--ink);font-weight:600;}
@media (max-width:899px){.gf.gf-drag{display:none;}}

/* ── How Deiko remembers: the page's world. The home page's props (the hero grid, a real screenshot on the wall tile,
   washi tape, die-cut stickers, marker tags, the public-domain prints, dot paper), all of it still: only hover moves anything. ── */
main{overflow-x:clip;}
.hero{overflow:clip;}
.grid{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:72px 72px;
  -webkit-mask-image:radial-gradient(ellipse 70% 62% at 28% 30%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 70% 62% at 28% 30%,#000 20%,transparent 75%);}
.hero-in{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(40px,5vw,80px);align-items:center;}

/* Tuesday's screenshot: a real frame from the demo, on the wall tile, taped down */
.shot{position:relative;margin:0;padding-top:40px;}
.shot .wall{rotate:1.5deg;}
.shot .card{overflow:hidden;}
.shot-img{position:relative;}
.shot-img img{display:block;width:100%;height:auto;}
.mk-loop{position:absolute;left:62%;top:24%;width:23%;height:17%;overflow:visible;filter:url(#gf-rough);pointer-events:none;}
.mk-loop path{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke;}
.shot > .tape{top:28px;}
.note.shot-note{position:absolute;left:-22px;bottom:-30px;z-index:6;width:auto;padding:12px 18px;font-size:21px;}
.shot .dot-st{right:-28px;top:4px;}
.shot-tag{position:absolute;left:4px;top:-14px;z-index:6;display:flex;align-items:flex-start;gap:4px;rotate:-4deg;}
.shot-tag svg{width:66px;height:36px;margin-top:12px;}

/* marker tags: short asides in the margins, aria-hidden */
.mtag{font:400 23px/1 var(--marker);color:var(--accent);white-space:nowrap;pointer-events:none;user-select:none;-webkit-user-select:none;}
.mtag svg{flex:none;overflow:visible;fill:none;stroke:var(--accent);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;filter:url(#gf-rough);}

/* washi tape */
.tape{position:absolute;z-index:5;width:92px;height:24px;rotate:var(--r,0deg);pointer-events:none;
  background:repeating-linear-gradient(45deg,rgba(223,227,250,.92) 0 8px,rgba(236,228,255,.92) 8px 16px);box-shadow:0 1px 2px rgba(30,36,90,.12);
  clip-path:polygon(0 8%,4% 0,8% 10%,12% 0,100% 0,96% 100%,92% 90%,88% 100%,0 100%);}

/* die-cut stickers, slapped on: they only move when you reach for them */
.sticker{position:absolute;z-index:6;display:block;font-style:normal;user-select:none;-webkit-user-select:none;
  filter:drop-shadow(0 8px 14px rgba(30,36,90,.2)) drop-shadow(0 1px 1px rgba(30,36,90,.12));rotate:var(--r,0deg);transition:rotate .35s var(--spring),scale .35s var(--spring);}
.sticker:hover{rotate:calc(var(--r,0deg) * -1);scale:1.05;}
.sticker.pill{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;box-shadow:0 0 0 5px #fff;font:700 17px/1.1 var(--display);letter-spacing:-.01em;white-space:nowrap;}
.sticker.pill svg{width:18px;height:18px;flex:none;}
.sticker.card-st{padding:12px 16px 14px;border-radius:16px;box-shadow:0 0 0 5px #fff;font:700 17px/1.15 var(--display);letter-spacing:-.01em;text-align:center;}
.sticker.card-st small{display:block;margin-top:3px;font:500 12.5px/1.2 var(--sans);letter-spacing:0;opacity:.8;}
.sticker.butter{background:#fff1a6;color:#4a3f00;}
.sticker.lav{background:#dfe3fa;color:#2f3c80;}
.sticker.pink{background:#ffd0ea;color:#6b1d4d;}
.sticker.dot-st svg{display:block;width:96px;height:96px;overflow:visible;}
.sticker.art-st svg{display:block;overflow:visible;}

/* the comic: the Creation of Adam over its headline, two agents who never quite meet */
.hands-head{position:relative;}
.hands-head h2,.hands-head p{position:relative;}
.hand{position:absolute;z-index:2;top:clamp(4px,1vw,14px);width:min(36vw,470px);aspect-ratio:700/503;transform:translateY(-50%);
  pointer-events:none;background:center/contain no-repeat;mix-blend-mode:multiply;}
.hand-l{right:calc(50% + 12px);background-image:url(/v/assets/art/hand-adam.a055a04f71.webp);-webkit-mask-image:linear-gradient(90deg,transparent,#000 35%);mask-image:linear-gradient(90deg,transparent,#000 35%);}
.hand-r{left:calc(50% + 12px);background-image:url(/v/assets/art/hand-god.d0c9c8e9bd.webp);-webkit-mask-image:linear-gradient(270deg,transparent,#000 35%);mask-image:linear-gradient(270deg,transparent,#000 35%);}
.wb-st{right:-16px;top:-30px;}

/* guess and flip: dot paper, the cards dealt a little crooked */
.sec.dots{background:radial-gradient(circle,#d5dbf5 1.3px,transparent 1.8px) 0 0/22px 22px,#fff;}
.guess{position:relative;}
.flip{rotate:var(--r,0deg);transition:rotate .35s var(--spring);}
.flip:hover,.flip:focus-visible{rotate:0deg;}
.guess-tag{position:absolute;right:130px;top:34px;display:flex;flex-direction:column;align-items:flex-end;gap:2px;rotate:-3deg;}
.guess-tag svg{width:64px;height:56px;margin-right:24px;}
.guess-st{right:6px;top:-24px;}

/* what stays, what goes: on the Great Wave, as the home page's privacy section is */
.wall.pd{background:linear-gradient(rgba(245,246,255,var(--veil,.3)),rgba(245,246,255,var(--veil,.3))),var(--pd) var(--pd-pos,center)/cover no-repeat,#f5f6ff;}
.stay-wrap{position:relative;margin-top:clamp(32px,4vw,48px);}
.stay-wall{padding:clamp(22px,3.4vw,48px);}
.stay-wall .split2{margin-top:0;}
.col > .tape{top:-12px;}
.stay-st{left:-18px;top:-24px;}

/* the boss and the helper */
.boss{position:relative;}
.boss-st{right:0;top:-58px;}
.helper-wall{margin-top:22px;}
.taped{position:relative;}
.taped > .tape{top:-14px;}
.btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:16px;}
.btn-row .btnlike{margin-top:0;}
.btn-tag{display:inline-flex;align-items:center;gap:6px;rotate:-3deg;}
.btn-tag svg{width:50px;height:26px;}

/* FAQ: a print pinned beside the questions */
.faq-grid{display:grid;grid-template-columns:minmax(0,820px) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start;}
.polaroid{position:relative;justify-self:center;width:min(100%,290px);margin:clamp(28px,3.4vw,40px) 0 0;padding:14px 14px 16px;border-radius:6px;background:#fff;rotate:var(--r,0deg);
  box-shadow:0 24px 50px -24px rgba(30,36,90,.45),0 1px 2px rgba(20,20,30,.08);}
.polaroid img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:0 0;border-radius:2px;}
.polaroid figcaption{margin-top:12px;text-align:center;font:700 19px/1.2 var(--hand);color:var(--ink-2);}
.polaroid > .tape{top:-12px;}

/* the end: on the home page's closing dot field, held still */
.field-end{overflow:clip;}
.field-end::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle,rgba(170,181,238,.55) 1.7px,transparent 2.2px) 0 0/18px 18px;
  -webkit-mask-image:linear-gradient(transparent,#000 70%);mask-image:linear-gradient(transparent,#000 70%);}
.end-cta{position:relative;display:inline-flex;align-items:center;gap:22px;}
.sticker.end-dot{position:relative;}
.sticker.end-dot svg{width:78px;height:78px;}
.btn{text-decoration:none;}
.btn.has-stk{position:relative;overflow:visible;}
.stk{position:absolute;top:-17px;right:-26px;z-index:3;display:inline-flex;align-items:center;gap:5px;padding:6px 11px;border-radius:999px;background:#fff1a6;color:#4a3f00;
  font:700 13.5px/1 var(--display);letter-spacing:-.01em;white-space:nowrap;box-shadow:0 0 0 3px #fff;
  filter:drop-shadow(0 6px 10px rgba(30,36,90,.22)) drop-shadow(0 1px 1px rgba(30,36,90,.12));rotate:8deg;pointer-events:none;transition:rotate .35s var(--spring);}
.stk svg{width:13px;height:13px;fill:currentColor;}
.btn.has-stk:hover .stk{rotate:14deg;}

@media (max-width:1099px){.hand{display:none;}}
@media (max-width:1000px){.guess-tag,.guess-st{display:none;}.faq-grid{grid-template-columns:1fr;}.polaroid{width:250px;margin-top:0;}}
@media (max-width:900px){.hero-in{grid-template-columns:1fr;}.shot{max-width:560px;}}
@media (max-width:640px){
  .shot{padding-top:44px;}.shot .wall{rotate:1deg;}
  .shot .dot-st{right:-8px;top:0;}.sticker.dot-st svg{width:70px;height:70px;}
  .note.shot-note{left:-4px;bottom:-26px;font-size:18px;padding:10px 14px;}
  .wb-st{right:-6px;top:-34px;}.sticker.card-st{font-size:15px;padding:9px 13px 11px;}
  .stay-wall{padding:14px;}.stay-st{left:-4px;}.sticker.pill{font-size:15px;padding:8px 13px;}
  .boss-st{top:-50px;}
  .sticker.end-dot svg{width:64px;height:64px;}
}
@media (prefers-reduced-motion:reduce){.sticker,.flip,.stk{transition:none;}}