/*
 * The page is a poster of its reel. Colours come from the video (set per page as
 * custom properties on :root), the title is set huge in condensed caps, and a spine
 * beside the steps fills as the video plays.
 */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lock{overflow:hidden}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.5 Archivo,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
button,input{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:inherit}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px}
[hidden]{display:none!important}

.d{font-family:Archivo,"Arial Narrow","Helvetica Neue",Impact,sans-serif;font-stretch:62%;font-weight:900;text-transform:uppercase;letter-spacing:-.005em;line-height:.9;margin:0}
.mono,.tc,.facts,.scale,.hint,.chip,.seen,.dok,.cl,.came,.loopchip{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace}

.frame{max-width:480px;margin:0 auto;position:relative;min-height:100svh;padding-bottom:calc(210px + env(safe-area-inset-bottom,0px))}
/* Fixed things line up with the column on a wide screen. */
:root{--edge:max(12px, calc(50vw - 228px))}

/* ---------- buttons ---------- */
.btn{font-family:Archivo,"Arial Narrow",Impact,sans-serif;font-stretch:62%;font-weight:900;font-size:22px;line-height:1;text-transform:uppercase;letter-spacing:.01em;padding:16px 22px;border-radius:999px;border:0;background:var(--accent);color:var(--accent-ink);display:inline-flex;align-items:center;justify-content:center;gap:9px;white-space:nowrap;transition:transform .12s}
.btn:active{transform:scale(.97)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn.on{background:var(--ink);color:var(--bg);box-shadow:none}
.btn.on .bm{fill:currentColor}
.btn:disabled{opacity:.35}
.rnd{width:42px;height:42px;border-radius:50%;border:0;display:grid;place-items:center;background:color-mix(in srgb,var(--bg) 62%,transparent);color:var(--ink);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.chip{font-size:12px;text-transform:uppercase;letter-spacing:.06em;border:1.5px solid var(--ink);background:none;border-radius:999px;padding:5px 11px}

/* ---------- hero ---------- */
.hero{position:relative}
.stage{position:relative;height:min(60svh,480px);background:var(--surface)}
.player{position:absolute;inset:0;background:#000;cursor:pointer;overflow:hidden}
.player.still{cursor:default;background:var(--surface)}
.player video,.player img{width:100%;height:100%;object-fit:cover;display:block}
.player::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 60%,transparent) 0,transparent 24%,transparent 38%,color-mix(in srgb,var(--bg) 88%,transparent) 68%,var(--bg) 92%)}
.pp{position:absolute;left:50%;top:38%;translate:-50% -50%;width:68px;height:68px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink);opacity:0;scale:.8;transition:.18s;pointer-events:none;padding-left:4px;z-index:2}
.player.paused .pp{opacity:1;scale:1}
.snd{position:absolute;left:14px;top:calc(66px + env(safe-area-inset-top,0px));z-index:3;width:42px;height:42px;border-radius:50%;border:0;display:grid;place-items:center;background:color-mix(in srgb,var(--bg) 62%,transparent);color:var(--ink);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.snd .on{display:none}
.snd.live .on{display:initial}
.snd.live .off{display:none}
.loopchip{position:absolute;left:66px;top:calc(72px + env(safe-area-inset-top,0px));z-index:3;border:0;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-size:12px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;padding:7px 11px}
.vbar{position:absolute;left:8px;right:8px;bottom:8px;height:3px;border-radius:2px;background:rgb(255 255 255 / .3);display:none;z-index:2}
.vbar i{display:block;height:100%;width:0;background:var(--accent);border-radius:2px}

.top{position:absolute;top:0;left:0;right:0;z-index:4;display:flex;justify-content:space-between;align-items:center;padding:calc(12px + env(safe-area-inset-top,0px)) 14px 0}
.who{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:700;font-size:15px;padding:5px 14px 5px 5px;border-radius:999px;background:color-mix(in srgb,var(--bg) 62%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink);font-weight:900;font-size:15px}
.av.big{width:56px;height:56px;font-size:26px}

/* The reel's number, drawn in outline over the video: the page's signature. */
.no{position:absolute;right:12px;top:calc(60px + env(safe-area-inset-top,0px));z-index:2;font-size:150px;color:transparent;-webkit-text-stroke:2.5px var(--ink);pointer-events:none;opacity:.9}

.ttl{position:relative;z-index:3;margin-top:-168px;padding:0 18px}
.came{display:inline-block;margin:0 0 12px;font-size:12px;letter-spacing:.04em;text-transform:uppercase;background:var(--accent);color:var(--accent-ink);padding:5px 10px;border-radius:6px}
h1.d{font-size:clamp(50px,16.5vw,80px);text-wrap:balance;overflow-wrap:anywhere}
.facts{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 0;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.facts span{border:1.5px solid var(--line);border-radius:999px;padding:4px 11px;color:var(--muted)}
.facts span:first-child{border-color:var(--accent);color:var(--accent)}
.cta{display:flex;gap:10px;margin-top:20px}
.cta #go{flex:1}
.cta #save:only-child{flex:1}

/* When the hero scrolls away the video follows, as a small player in the corner. */
.player.docked{position:fixed;inset:auto var(--edge) calc(12px + env(safe-area-inset-bottom,0px)) auto;width:100px;height:178px;border-radius:16px;z-index:30;box-shadow:0 0 0 2.5px var(--ink),0 18px 44px rgb(0 0 0 / .6);animation:dockin .22s ease}
@keyframes dockin{from{opacity:0;transform:translateY(16px) scale(.92)}}
.player.docked::after,.player.indo::after{display:none}
.player.docked .snd{display:none}
.player.docked .vbar{display:block}
.player.docked .pp{width:38px;height:38px;top:50%}
.player.docked .pp svg{width:15px;height:15px}
.player.docked .loopchip{left:6px;right:6px;top:6px;font-size:10px;padding:3px 0;text-align:center}
.player.indo .snd{top:30px}
.player.indo .loopchip{top:36px}

/* ---------- sections ---------- */
.sec{padding:44px 18px 0}
.sh{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 12px;margin-bottom:16px}
.sh h2{font-size:42px}
.hint{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:right}

.scale{display:flex;align-items:center;gap:8px;font-size:13px;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.scale button{width:36px;height:36px;border-radius:50%;border:2px solid var(--ink);background:none;font-size:20px;line-height:1;font-family:Archivo,sans-serif;font-weight:700}
.need{display:grid;grid-template-columns:108px minmax(0,1fr);gap:12px;width:100%;text-align:left;background:none;border:0;border-top:1.5px solid var(--line);padding:14px 0;font-size:18px;font-weight:500}
.need:last-child{border-bottom:1.5px solid var(--line)}
.need .q{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:15px;color:var(--accent);padding-top:3px;font-variant-numeric:tabular-nums}
/* A line with no amount gives its name the whole row. */
.need .q:empty{display:none}
.need .q:empty+.nm{grid-column:1 / -1}
.need.have{opacity:.36}
.need.have .nm{text-decoration:line-through}

/* Steps hang off the spine, which fills as the video plays. */
.steps{position:relative;padding-left:52px}
.spine{position:absolute;left:14px;top:10px;bottom:10px;width:4px;border-radius:2px;background:var(--line)}
.spine i{display:block;width:100%;height:0;max-height:100%;border-radius:2px;background:var(--accent)}
.step{position:relative;display:block;width:100%;text-align:left;background:none;border:0;padding:0 0 34px}
.step:last-child{padding-bottom:6px}
.step::before{content:"";position:absolute;left:-46px;top:9px;width:20px;height:20px;border-radius:50%;background:var(--bg);border:4px solid var(--line);transition:.2s}
.step.past::before{border-color:var(--accent)}
.step.on::before{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 28%,transparent)}
.sr{display:flex;align-items:baseline;gap:10px}
.sn{font-size:46px;color:transparent;-webkit-text-stroke:1.5px var(--muted)}
.step.on .sn{color:var(--accent);-webkit-text-stroke:0}
.tc{font-size:12px;color:var(--muted);letter-spacing:.04em}
.step.on .tc{color:var(--accent)}
.stt{display:block;font-size:32px;margin-top:6px;text-wrap:balance}
.sx{display:block;margin-top:8px;font-size:16px;color:var(--muted);max-width:36ch}
.step.on .sx{color:var(--ink)}

.items{display:grid;gap:10px}
.item{display:grid;grid-template-columns:64px minmax(0,1fr) 48px;gap:12px;align-items:center;background:var(--surface);border-radius:18px;padding:8px}
.item img,.item .ph{width:64px;height:64px;border-radius:12px;object-fit:cover}
.item .ph{display:grid;place-items:center;background:var(--accent);color:var(--accent-ink);font-size:38px}
.im b{display:block;font-size:17px;line-height:1.2}
.im span{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:4px;font-size:14px;color:var(--muted)}
.seen{border:0;border-radius:6px;background:var(--line);color:var(--ink);font-size:11px;padding:3px 7px}
.get{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink)}

.code{display:grid;gap:6px;width:100%;text-align:center;background:none;border:2.5px dashed var(--accent);border-radius:20px;padding:20px 16px}
.cl{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cv{font-size:60px;color:var(--accent);overflow-wrap:anywhere}
.cn{font-size:15px;color:var(--muted)}

.links{display:grid;gap:10px}
.lnk{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px;border:2px solid var(--ink);border-radius:18px;text-decoration:none;font-size:18px;transition:.12s}
.lnk b{display:block;line-height:1.2}
.lnk small{display:block;font-size:14px;color:var(--muted);margin-top:2px}
.lnk:active{background:var(--ink);color:var(--bg)}
@media (hover:hover){.lnk:hover{background:var(--ink);color:var(--bg)}.lnk:hover small{color:inherit}}

.signup{background:var(--surface);border-radius:22px;padding:22px 18px}
.signup h2{font-size:36px}
.signup p{margin:8px 0 0;color:var(--muted)}
.signup .row{display:flex;gap:8px;margin-top:16px}
.signup input{flex:1;min-width:0;border:2px solid var(--line);background:var(--bg);border-radius:999px;padding:12px 16px;font-size:16px}
.signup .btn{padding:12px 20px;font-size:20px}

.foot{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:center;padding:48px 18px 0;font-size:14px;color:var(--muted)}

/* ---------- on screen now ---------- */
.dock{position:fixed;left:var(--edge);right:calc(var(--edge) + 112px);bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:30;display:grid;grid-template-columns:46px minmax(0,1fr) 42px;gap:10px;align-items:center;background:var(--ink);color:var(--bg);border-radius:18px;padding:8px;box-shadow:0 18px 44px rgb(0 0 0 / .5);animation:dockin .22s ease}
.dock img,.dock .ph{width:46px;height:46px;border-radius:10px;object-fit:cover}
.dock .ph{display:grid;place-items:center;background:var(--accent);color:var(--accent-ink);font-size:28px}
.dock small{display:block;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10px;letter-spacing:.07em;text-transform:uppercase;opacity:.7}
.dock b{display:block;font-size:15px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dock .get{width:42px;height:42px}

/* ---------- do-it mode ---------- */
.do{position:fixed;inset:0;z-index:50;background:var(--bg);touch-action:pan-y}
.doin{max-width:480px;height:100%;margin:0 auto;display:flex;flex-direction:column}
.doclip{position:relative;flex:none;height:46svh;background:#000;overflow:hidden}
.doclip>img{width:100%;height:100%;object-fit:cover}
.player.indo{position:absolute;inset:0}
.segs{position:absolute;left:12px;right:12px;top:calc(10px + env(safe-area-inset-top,0px));z-index:5;display:flex;gap:4px}
.segs span{flex:1;height:4px;border-radius:2px;background:rgb(255 255 255 / .3);overflow:hidden}
.segs i{display:block;height:100%;width:0;background:var(--accent)}
.x{position:absolute;right:12px;top:calc(26px + env(safe-area-inset-top,0px));z-index:5;font-size:17px}
.dobody{flex:1;min-height:0;overflow-y:auto;padding:20px 18px 8px}
.dok{margin:0 0 10px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
#dot{font-size:clamp(42px,13vw,60px);text-wrap:balance}
.dox{margin:14px 0 0;font-size:20px;line-height:1.4}
.dou{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.dou span{border:2px solid var(--accent);color:var(--accent);border-radius:999px;padding:5px 13px;font-weight:700;font-size:15px}
.timer{margin-top:18px;border:2px solid var(--ink);background:none;border-radius:999px;padding:10px 18px;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:18px;font-variant-numeric:tabular-nums}
.timer.run{background:var(--ink);color:var(--bg)}
.donav{flex:none;display:grid;grid-template-columns:1fr 2fr;gap:10px;padding:10px 18px calc(16px + env(safe-area-inset-bottom,0px))}

.toast{position:fixed;left:50%;top:calc(16px + env(safe-area-inset-top,0px));z-index:60;translate:-50% -20px;opacity:0;pointer-events:none;transition:.22s;background:var(--ink);color:var(--bg);border-radius:999px;padding:10px 18px;font-weight:700;font-size:15px;white-space:nowrap;max-width:calc(100vw - 24px);overflow:hidden;text-overflow:ellipsis}
.toast.show{translate:-50% 0;opacity:1;pointer-events:auto}
.toast a{margin-left:8px}

/* ---------- hub and saved ---------- */
.hub{padding-bottom:60px}
.hubh{padding:calc(44px + env(safe-area-inset-top,0px)) 18px 8px}
.hubh h1{font-size:clamp(60px,19vw,96px);margin-top:14px}
.hubh p{margin:12px 0 0;color:var(--muted);font-family:"JetBrains Mono",ui-monospace,monospace;font-size:13px;letter-spacing:.04em;text-transform:uppercase}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:20px 18px 0}
.pc{position:relative;display:block;aspect-ratio:9/14;border-radius:20px;overflow:hidden;background:var(--cbg,var(--surface));color:#fff;text-decoration:none;box-shadow:inset 0 -6px 0 var(--cacc,var(--accent))}
.pc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pc::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgb(0 0 0 / .35),transparent 35%,transparent 45%,rgb(0 0 0 / .8));border-bottom:6px solid var(--cacc,var(--accent))}
.pn{position:absolute;left:12px;top:12px;z-index:1;font-size:36px;color:transparent;-webkit-text-stroke:1.5px #fff}
.pt{position:absolute;left:12px;right:12px;bottom:18px;z-index:1;font-size:26px;text-wrap:balance;overflow-wrap:anywhere}
.empty{padding:20px 18px;color:var(--muted);font-size:17px}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- themes: the same page, set in a different voice ---------- */

/* Editorial: a serif with some swing, squared corners, thinner rules. */
.t-editorial .d{font-family:Fraunces,Georgia,"Times New Roman",serif;font-stretch:normal;font-weight:600;text-transform:none;letter-spacing:-.025em;line-height:1}
.t-editorial h1.d{font-size:clamp(46px,14vw,70px);font-style:italic;font-weight:500}
.t-editorial .no,.t-editorial .sn{font-style:italic;font-weight:500}
.t-editorial .sh h2{font-size:36px}
.t-editorial .stt{font-size:27px}
.t-editorial .cv{font-size:50px}
.t-editorial #dot{font-size:clamp(36px,11vw,50px)}
.t-editorial .btn{font-family:Archivo,system-ui,sans-serif;font-stretch:100%;font-weight:700;font-size:17px;text-transform:none;letter-spacing:0;border-radius:6px}
.t-editorial .btn.ghost{box-shadow:inset 0 0 0 1.5px var(--ink)}
.t-editorial .lnk{border-width:1.5px}
.t-editorial .lnk,.t-editorial .item,.t-editorial .signup,.t-editorial .code,.t-editorial .signup input,.t-editorial .facts span,.t-editorial .came{border-radius:6px}
.t-editorial .item img,.t-editorial .item .ph{border-radius:3px}
.t-editorial .spine{width:2px;left:15px}
.t-editorial .facts{font-family:Archivo,system-ui,sans-serif;font-weight:600;letter-spacing:.04em}

/* Terminal: monospace headings on a faint grid, hard corners. */
.t-terminal{background-image:linear-gradient(color-mix(in srgb,var(--line) 45%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--line) 45%,transparent) 1px,transparent 1px);background-size:26px 26px}
.t-terminal .d{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-stretch:normal;font-weight:800;letter-spacing:-.05em;line-height:1.02}
.t-terminal h1.d{font-size:clamp(34px,10.5vw,50px)}
.t-terminal .no{font-size:112px;-webkit-text-stroke-width:2px}
.t-terminal .sh h2{font-size:28px}
.t-terminal .sh h2::before{content:"> ";color:var(--accent)}
.t-terminal .sn{font-size:34px}
.t-terminal .stt{font-size:23px}
.t-terminal .cv{font-size:40px}
.t-terminal #dot{font-size:clamp(30px,9vw,40px)}
.t-terminal .signup h2{font-size:26px}
.t-terminal .btn{font-family:"JetBrains Mono",ui-monospace,monospace;font-stretch:normal;font-weight:800;font-size:16px;letter-spacing:-.02em;border-radius:4px}
.t-terminal .lnk,.t-terminal .item,.t-terminal .signup,.t-terminal .code,.t-terminal .signup input,.t-terminal .facts span,.t-terminal .came,.t-terminal .item img,.t-terminal .item .ph,.t-terminal .chip,.t-terminal .timer,.t-terminal .dou span{border-radius:4px}
.t-terminal .get{border-radius:4px}
.t-terminal .step::before{border-radius:3px}
.t-terminal .item,.t-terminal .signup{background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line)}

/* ---------- Work with me: book, message, buy ---------- */
.acts{display:grid;gap:12px}
.act{display:grid;grid-template-columns:46px minmax(0,1fr) auto;grid-template-areas:"ic tx pr" "go go go";gap:12px 12px;align-items:center;padding:14px;background:var(--surface);border:2px solid var(--line);border-radius:20px;text-decoration:none;color:var(--ink);transition:border-color .15s,transform .12s}
.act:active{transform:scale(.985)}
@media (hover:hover){.act:hover{border-color:var(--accent)}}
.act__ic{grid-area:ic;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 18%,var(--bg));color:var(--accent)}
.act--whatsapp .act__ic{background:#25D366;color:#fff}
.act__tx{grid-area:tx;min-width:0}
.act__tx b{display:block;font-size:17px;line-height:1.2}
.act__tx small{display:block;font-size:14px;color:var(--muted);margin-top:3px;line-height:1.35}
.act__pr{grid-area:pr;font-size:24px;line-height:1;color:var(--accent);white-space:nowrap}
.act__go{grid-area:go;display:flex;align-items:center;justify-content:center;gap:8px;padding:13px 16px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-weight:800;font-size:16px}
.act--whatsapp .act__go{background:#25D366;color:#06210f}
.t-editorial .act,.t-editorial .act__ic{border-radius:6px}
.t-editorial .act__go{border-radius:4px}
.t-editorial .act{border-width:1.5px}
.t-terminal .act,.t-terminal .act__ic,.t-terminal .act__go{border-radius:4px}
.t-terminal .act{box-shadow:inset 0 0 0 1.5px var(--line);border-color:transparent}
.t-terminal .act__go{text-transform:lowercase;font-family:"JetBrains Mono",ui-monospace,monospace}
.t-poster .act__go{text-transform:uppercase;letter-spacing:.04em}