@font-face{font-family:"Barusans";src:url("assets/fonts/Barusans-300.woff") format("woff");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Barusans";src:url("assets/fonts/Barusans-Regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Barusans";src:url("assets/fonts/Barusans-500.woff") format("woff");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Barusans";src:url("assets/fonts/Barusans-600.woff") format("woff");font-weight:600;font-style:normal;font-display:swap}
/* Tokens: 4px grid, one accent, subtle motion (no blur). Light, cool, near-white. */
:root{
  --bg:#f6f5f1; --surface:#ebeae5; --ink:#0e0e0d; --muted:#77766f; --line:#d9d8d1;
  --accent:#0e0e0d; --ok:#0e0e0d;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --display:"Barusans","Instrument Sans",system-ui,sans-serif;
  --body:"Barusans",system-ui,sans-serif;
  --r4:4px;--r8:8px;--r12:12px;--r16:16px;--r20:20px;--r24:24px;
  --raised:0 0 0 1px rgba(0,0,0,.08),0 1px 3px rgba(0,0,0,.1);
  --float:0 2px 16px rgba(28,28,28,.1);
  --ease:cubic-bezier(.16,1,.3,1);
  --pad:clamp(16px,3vw,32px);
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.5}
body.locked{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
em{font-style:normal;color:var(--muted)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
h1,h2,h3,.brand,.pre-title{font-family:var(--display)}
::selection{background:var(--ink);color:var(--bg)}

/* ---------- PRELOADER ---------- */
@keyframes blink{50%{opacity:0}}
.spin{width:12px;height:12px;border-radius:50%;border:2px solid #b8b8b2;border-top-color:var(--ink);animation:spin .8s linear infinite;flex:none}
.spin.ok{animation:none;border:2px solid var(--ink);background:var(--ok)}
#preSpin.ok{display:none}
@keyframes spin{to{transform:rotate(1turn)}}

/* ---------- NAV ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px var(--pad);transition:opacity .8s var(--ease),transform .8s var(--ease)}
body:not(.ready) .nav{opacity:0;transform:translateY(-12px)}
.brand{display:flex;align-items:center;gap:12px;font-weight:600;font-size:18px;letter-spacing:-.02em;text-transform:uppercase}
.brand i{font-style:normal;display:inline-block;width:.34em;height:.34em;border-radius:50%;background:var(--ink);margin:0 .12em;vertical-align:.12em}
.clock{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.04em;display:none;white-space:nowrap;align-items:center;gap:8px}
.clock::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ink);animation:blink 1.4s steps(1) infinite}
.pill{font-family:var(--mono);font-size:11px;font-weight:400;color:var(--muted);background:var(--surface);border-radius:var(--r4);padding:6px 8px;display:none;white-space:nowrap;letter-spacing:.02em;text-transform:uppercase}
.links{display:none;gap:32px;color:var(--muted);font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.links a{transition:color .2s}.links a:hover{color:var(--ink)}
.icons{display:flex;gap:8px;align-items:center}
.icon-btn{width:40px;height:40px;border-radius:var(--r8);border:1px solid var(--ink);display:grid;place-content:center;background:transparent;cursor:pointer;transition:background .2s,color .2s}
.icon-btn:hover{background:var(--ink);color:#fff}
.icon-btn svg{width:20px;height:20px}
.menu-btn{display:grid}
.mobile-menu{position:absolute;top:64px;left:var(--pad);right:var(--pad);background:#fff;border-radius:var(--r16);box-shadow:var(--float);padding:8px;display:grid}
.mobile-menu a{padding:12px;border-radius:var(--r8);font-weight:500}
.mobile-menu a:hover{background:var(--surface)}
.mobile-menu[hidden]{display:none}
@media(min-width:640px){.pill{display:inline-block}}
@media(min-width:1100px){.clock{display:inline-flex}}
@media(min-width:900px){.links{display:flex;position:absolute;left:50%;transform:translateX(-50%)}.menu-btn,.mobile-menu{display:none!important}}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;padding:96px var(--pad) clamp(28px,5vw,48px);overflow:hidden}
.hero-img{position:absolute;left:50%;top:50%;width:min(60vw,34svh,380px);aspect-ratio:4/5;transform:translate(-50%,-84%);border-radius:var(--r24);overflow:hidden;background:var(--surface)}
body:not(.photo) .hero-img{visibility:hidden}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:top}
.hero-copy{position:relative;z-index:2;max-width:100%}
.name{font-weight:600;font-size:clamp(52px,12.5vw,144px);line-height:.92;letter-spacing:-.05em;text-transform:uppercase;display:flex;flex-wrap:wrap;column-gap:.2em}
.name .w{display:block;overflow:hidden;padding-bottom:.1em}
.name .w span{display:block;transition:transform 1.1s var(--ease)}
body:not(.ready) .name .w span{transform:translateY(105%)}
.name .w:nth-child(2) span{transition-delay:.12s}
.name i{font-style:normal;color:var(--muted)}
.sub{margin-top:16px;font-family:var(--mono);font-size:clamp(14px,2vw,20px);letter-spacing:-.02em;color:var(--muted);font-weight:400}
.sub b{color:var(--ink);font-weight:500;display:inline-block;transition:transform .35s var(--ease),opacity .35s}
.sub b.swap{transform:translateY(-.4em);opacity:0}
.sub2{margin-top:8px;max-width:min(36ch,calc(100% - 80px));font-size:clamp(16px,2vw,20px);color:var(--muted)}
.sub,.sub2{transition:opacity .9s var(--ease) .5s,transform .9s var(--ease) .5s}
.sub2{transition-delay:.65s}
body:not(.ready) .sub,body:not(.ready) .sub2{opacity:0;transform:translateY(16px)}


/* ---------- SECTIONS ---------- */
.sec{padding:clamp(72px,10vw,128px) var(--pad) 0;max-width:1180px;margin:0 auto}
.sec-head{display:grid;gap:12px;margin-bottom:32px}
.kick{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.sec-head .kick::before,.page-head .kick::before{content:"/* "}
.sec-head .kick::after,.page-head .kick::after{content:" */"}
.sec-head h2{font-size:clamp(32px,6vw,64px);line-height:1;letter-spacing:-.04em;font-weight:600;text-wrap:balance;text-transform:uppercase}
.grid{display:grid;gap:16px;counter-reset:t}
@media(min-width:760px){.grid{grid-template-columns:1fr 1fr}}
.tile{counter-increment:t;display:block;padding:12px 12px 24px;border-radius:var(--r24);background:var(--surface);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.tile:hover{transform:translateY(-8px);box-shadow:var(--float)}
.tile-img{position:relative;aspect-ratio:16/10;border-radius:var(--r16);background:var(--line);display:grid;place-content:center;color:var(--muted);margin-bottom:20px;overflow:hidden}
.tile-img span{transition:transform .7s var(--ease)}
.tile:hover .tile-img span{transform:scale(1.12)}
.tile-img::before{content:counter(t,decimal-leading-zero);position:absolute;left:12px;top:12px;font-family:var(--mono);font-size:12px;color:var(--ink)}
.tile-img::after{content:"VIEW \2197";position:absolute;right:12px;top:12px;font-family:var(--mono);font-size:11px;background:var(--ink);color:var(--bg);padding:4px 8px;border-radius:var(--r4);opacity:0;transform:translateY(-6px);transition:opacity .3s,transform .5s var(--ease)}
.tile:hover .tile-img::after{opacity:1;transform:none}
.tile h3{font-size:28px;letter-spacing:-.03em;text-transform:uppercase;padding:0 12px;line-height:1.1}
.tile p{color:var(--muted);margin:8px 12px 16px;max-width:44ch}
.tags{display:flex;gap:8px;padding:0 12px}
.tags i{font-style:normal;font-family:var(--mono);font-size:11px;text-transform:uppercase;background:var(--bg);border-radius:var(--r4);padding:4px 8px}

.play{position:absolute;width:64px;height:64px;border-radius:50%;background:#fff;box-shadow:var(--float);top:16px;right:16px}
.play::after{content:"";position:absolute;left:26px;top:20px;border:12px solid transparent;border-left:18px solid var(--ink);border-right:0}
.play.sm{width:40px;height:40px;top:12px;right:12px}.play.sm::after{left:16px;top:12px;border-width:8px;border-left-width:12px}
.feature{position:relative;display:flex;align-items:flex-end;aspect-ratio:16/9;min-height:240px;border-radius:var(--r24);background:linear-gradient(160deg,#e6e6e2,#222222 88%);color:#fff;padding:24px;overflow:hidden;transition:transform .5s var(--ease)}
.feature:hover{transform:scale(1.01)}
.feature small,.ep small{display:block;opacity:.7}
.feature b{font-family:var(--display);font-size:clamp(24px,4vw,40px);letter-spacing:-.04em;line-height:1.1}
.eps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
.ep{position:relative;aspect-ratio:16/11;border-radius:var(--r20);background:linear-gradient(160deg,#e6e6e2,#2c2c2c 90%);color:#fff;padding:16px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;transition:transform .5s var(--ease)}
.ep:hover{transform:translateY(-6px)}
.ep b{font-family:var(--display);font-size:20px;letter-spacing:-.03em}
@media(max-width:560px){.eps{grid-template-columns:1fr}}

.list{list-style:none;padding:0;border-top:1px solid var(--line)}
.list a{display:grid;grid-template-columns:88px 1fr auto;gap:16px;align-items:center;padding:20px 0;border-bottom:1px solid var(--line);transition:padding .4s var(--ease)}
.list a:hover{padding-left:12px;background:linear-gradient(90deg,var(--ink) 0 3px,transparent 3px)}
.list b{font-family:var(--display);font-size:clamp(20px,3vw,28px);letter-spacing:-.04em;font-weight:500}
.list .d{color:var(--muted);font-family:var(--mono);font-size:12px;text-transform:uppercase}
.list i{font-style:normal;font-family:var(--mono);font-size:11px;text-transform:uppercase;background:var(--surface);border-radius:var(--r4);padding:4px 8px}
@media(max-width:560px){.list a{grid-template-columns:1fr auto}.list .d{grid-column:1/-1}}

.about{display:grid;gap:32px}
@media(min-width:860px){.about{grid-template-columns:1.2fr 1fr;gap:64px}}
.bio{font-size:clamp(20px,2.4vw,28px);line-height:1.35;letter-spacing:-.02em;max-width:32ch}
.skills{list-style:none;padding:0;display:grid;gap:8px}
.skills li{display:flex;align-items:center;gap:12px;padding:16px;border-radius:var(--r16);background:var(--surface);font-weight:500}
.skills svg{width:24px;height:24px;color:var(--accent)}

.hire-wrap{background:var(--ink);color:var(--bg);margin-top:clamp(72px,10vw,128px);border-radius:var(--r24) var(--r24) 0 0}
.hire-wrap .sec{padding-top:clamp(64px,9vw,112px);padding-bottom:clamp(48px,7vw,88px)}
.hire .kick{font-family:var(--display);font-size:clamp(28px,5vw,56px);letter-spacing:-.04em;text-transform:uppercase;font-weight:600;color:#8a8982}
.mail{display:inline-block;margin-top:8px;font-family:var(--display);font-size:clamp(28px,7vw,104px);font-weight:600;letter-spacing:-.06em;line-height:1.05;overflow-wrap:anywhere;border-bottom:3px solid var(--bg);transition:color .3s}
.mail:hover{color:#8a8982}
.hire .spin{border-color:#55554f;border-top-color:var(--bg)}
.hire .spin.ok{border-color:var(--bg);background:var(--bg)}
.hire .status{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.status{display:flex;align-items:center;gap:12px;margin-top:24px}
.foot{background:var(--ink);color:var(--bg);padding:0 0 48px;font-family:var(--display);font-size:clamp(24px,4vw,40px);letter-spacing:-.04em;font-weight:500}
.foot em{color:#8a8982}
.foot small{display:block;margin-top:12px;font-family:var(--mono);font-size:12px;text-transform:uppercase;color:#8a8982;letter-spacing:.04em}

/* ---------- FLOAT ME + DRAWER ---------- */
.me{position:fixed;right:var(--pad);bottom:var(--pad);z-index:900;width:64px;height:64px;padding:0;border:0;border-radius:50%;background:#fff;box-shadow:var(--float);cursor:pointer;transition:transform .4s var(--ease),opacity .6s var(--ease)}
.me img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:top;border:3px solid #fff}
.me:hover{transform:scale(1.08)}
.me .dot{position:absolute;right:2px;bottom:2px;width:16px;height:16px;border-radius:50%;background:var(--ok);border:3px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
body:not(.ready) .me{opacity:0;transform:scale(.4);pointer-events:none}
.me-tip{position:fixed;right:calc(var(--pad) + 76px);bottom:calc(var(--pad) + 12px);z-index:900;background:var(--ink);color:#fff;padding:12px 16px;border-radius:var(--r12);font-size:14px;opacity:0;transform:translateX(8px);transition:opacity .4s,transform .5s var(--ease);pointer-events:none;white-space:nowrap}
.me-tip.on{opacity:1;transform:none}
#scrim{position:fixed;inset:0;z-index:950;background:rgba(0,0,0,.3);opacity:0;transition:opacity .4s}
#scrim.on{opacity:1}
#scrim[hidden]{display:none}
#drawer{position:fixed;top:0;right:0;bottom:0;z-index:1000;width:min(440px,100%);background:#fff;border-radius:var(--r24) 0 0 var(--r24);padding:20px;display:flex;flex-direction:column;gap:16px;transform:translateX(105%);transition:transform .6s var(--ease)}
#drawer.open{transform:none}
.d-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.d-top p b{display:block;line-height:1.2}.d-top small{color:var(--muted)}
.close{background:var(--ink);color:#fff;border:0;border-radius:var(--r8);padding:12px 16px;cursor:pointer;font-weight:500}
.thread{flex:1;overflow-y:auto;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;min-height:0}
.thread h3{font-size:32px;letter-spacing:-.05em;line-height:1.05}
.msg{max-width:88%;padding:12px 16px;border-radius:var(--r16);line-height:1.45}
.msg.u{align-self:flex-end;background:var(--surface)}
.msg.w{align-self:flex-start;background:var(--ink);color:#fff}
.msg a{text-decoration:underline}
.qs{display:grid;gap:8px}
.qs button{text-align:left;background:var(--surface);border:0;border-radius:var(--r8);padding:12px 16px;color:var(--muted);cursor:pointer;transition:background .2s,color .2s}
.qs button:hover{background:#e9e9e5;color:var(--ink)}
.ask-form{display:flex;gap:8px;border:1px solid var(--line);border-radius:var(--r16);padding:8px 8px 8px 16px;box-shadow:var(--raised)}
.ask-form input{flex:1;border:0;outline:0;background:none;min-width:0}
.ask-form button{width:40px;height:40px;border-radius:var(--r12);border:0;background:var(--ink);color:#fff;cursor:pointer}
.fine{text-align:center;color:var(--muted);font-size:12px}

.reveal{transition:opacity .8s var(--ease),transform .9s var(--ease)}
.js .reveal:not(.in){opacity:0;transform:translateY(24px)}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .chip{opacity:1;transform:none}.card{opacity:1}
}

/* ---------- MULTI-PAGE ---------- */
.page-head{padding-top:clamp(120px,16vw,200px);display:grid;gap:16px;padding-bottom:8px}
.page-head h1{font-size:clamp(40px,9vw,112px);line-height:.95;letter-spacing:-.05em;font-weight:600;text-wrap:balance;max-width:14ch;text-transform:uppercase}
.lede{font-size:clamp(18px,2.2vw,24px);color:var(--muted);max-width:36ch}
.sec.tight{padding-top:clamp(32px,5vw,56px)}
.sec-head.row{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.more{display:inline-flex;gap:8px;align-items:center;font-family:var(--mono);font-size:12px;text-transform:uppercase;border:1px solid var(--ink);border-radius:var(--r4);padding:12px 16px;transition:background .2s,color .2s}
.more span{transition:transform .3s var(--ease)}
.more:hover{background:var(--ink);color:#fff}.more:hover span{transform:translateX(4px)}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.tabs button{font-family:var(--mono);font-size:12px;text-transform:uppercase;border:1px solid var(--line);background:transparent;border-radius:var(--r4);padding:8px 12px;cursor:pointer;color:var(--muted);transition:background .2s,color .2s,border-color .2s}
.tabs button:hover{color:var(--ink);border-color:var(--ink)}
.tabs button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.tabs sup{font-size:10px;margin-left:6px;opacity:.6}
.tile[hidden]{display:none}
.platforms{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:32px;color:var(--muted)}
.platforms a{border:1px solid var(--line);border-radius:var(--r8);padding:8px 16px;color:var(--ink);transition:border-color .2s}
.platforms a:hover{border-color:var(--ink)}
.about-grid{display:grid;gap:32px}
@media(min-width:860px){.about-grid{grid-template-columns:minmax(0,420px) 1fr;gap:64px;align-items:start}}
.portrait{aspect-ratio:4/5;border-radius:var(--r24);overflow:hidden;background:var(--surface);max-width:420px}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:top}
.about-copy{display:grid;gap:32px}
.work-on a,.work-on li>div{display:grid;grid-template-columns:minmax(160px,1fr) 2fr;gap:16px;padding:20px 0;border-bottom:1px solid var(--line);align-items:baseline}
.work-on b{font-family:var(--display);font-size:clamp(20px,3vw,28px);letter-spacing:-.04em;font-weight:500}
.work-on span{color:var(--muted)}
@media(max-width:560px){.work-on li>div{grid-template-columns:1fr;gap:4px}}
.foot-links{display:flex;gap:24px;flex-wrap:wrap;margin-top:24px;font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:#8a8982}
.foot-links a:hover{color:var(--bg)}
.links a.active{color:var(--ink)}



/* no visible scrollbars */
*{scrollbar-width:none;-ms-overflow-style:none}
*::-webkit-scrollbar{display:none}

.hire .kick em{color:var(--bg)}

/* nav flips light while over the black contact block */
.nav.on-dark{color:var(--bg)}
.nav.on-dark .links,.nav.on-dark .links a.active,.nav.on-dark .links a:hover{color:var(--bg)}
.nav.on-dark .icon-btn{border-color:var(--bg)}
.nav.on-dark .icon-btn:hover{background:var(--bg);color:var(--ink)}
.nav.on-dark .pill{background:#2a2a28;color:#b8b7b0}
.nav,.nav .icon-btn{transition:opacity .8s var(--ease),transform .8s var(--ease),color .3s,border-color .3s}

/* ---------- WARM GRADIENT PAPER (monochrome, not flat white) ---------- */
body{background:linear-gradient(180deg,#faf9f6 0,#f4f3ee 100%) fixed}

/* ---------- GLASSY HERO ---------- */
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;filter:blur(40px);pointer-events:none}
.hero::before{width:min(46vw,520px);aspect-ratio:1;left:-8%;top:18%;background:radial-gradient(circle at 30% 30%,#fff,#bdbbb3 60%,#6d6c66)}
.hero::after{width:min(38vw,420px);aspect-ratio:1;right:-6%;top:6%;background:radial-gradient(circle at 60% 40%,#f1f0eb,#9b9a93 65%,#2a2a28)}
.hero-copy{padding:clamp(16px,2.4vw,32px);border-radius:var(--r24);background:linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,.18));backdrop-filter:blur(18px) saturate(1.1);-webkit-backdrop-filter:blur(18px) saturate(1.1);box-shadow:0 0 0 1px rgba(255,255,255,.7) inset,0 12px 40px rgba(14,14,13,.08)}
.hero-img{box-shadow:0 0 0 1px rgba(255,255,255,.8),0 0 0 8px rgba(255,255,255,.35),0 24px 60px rgba(14,14,13,.18)}

/* ---------- LIVE PROJECTS: card slides out of a frosted shelf ---------- */
.pockets{display:grid;gap:24px}
@media(min-width:760px){.pockets{grid-template-columns:1fr 1fr}}

/* ---------- CTA ---------- */
.cta-h{font-size:clamp(36px,7vw,96px);line-height:.98;letter-spacing:-.05em;text-transform:uppercase;font-weight:600;margin-top:16px;max-width:14ch;text-wrap:balance}
.cta-h em{color:#8a8982}
.cta-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.cta-btn{font-family:var(--mono);font-size:13px;text-transform:uppercase;padding:16px 24px;border-radius:var(--r8);border:1px solid var(--bg);transition:background .3s,color .3s,transform .4s var(--ease)}
.cta-btn:hover{transform:translateY(-3px);background:var(--bg);color:var(--ink)}
.cta-btn.solid{background:var(--bg);color:var(--ink)}
.cta-btn.solid:hover{background:transparent;color:var(--bg)}

/* ---------- ABOUT: sticky profile card, story scrolls past ---------- */
.about-wrap{padding-top:clamp(96px,12vw,140px);display:grid;gap:32px;align-items:start}
@media(min-width:900px){.about-wrap{grid-template-columns:minmax(300px,380px) 1fr;gap:clamp(48px,8vw,120px)}}
.about-card{background:#fff;border-radius:28px;padding:12px;box-shadow:var(--float)}
@media(min-width:900px){.about-card{position:sticky;top:88px}}
.ac-photo{aspect-ratio:4/4.4;border-radius:var(--r20);overflow:hidden;background:var(--surface)}
.ac-photo img{width:100%;height:100%;object-fit:cover;object-position:top}
.ac-who{padding:12px 4px 0}
.ac-who b{display:block;font-weight:500}
.ac-who small{color:var(--muted)}
.ac-facts{position:relative;min-height:112px;margin:12px 4px 0;border-top:1px solid var(--line);padding-top:12px}
.fact{position:absolute;inset:12px 0 0;opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .6s var(--ease);pointer-events:none}
.fact.on{opacity:1;transform:none;pointer-events:auto}
.fact b{display:block;font-family:var(--display);font-size:clamp(32px,4vw,44px);letter-spacing:-.04em;line-height:1;text-transform:uppercase}
.fact span{display:block;margin-top:8px;color:var(--muted);font-size:14px}
.ac-nav{display:flex;align-items:center;gap:8px;padding:8px 4px 4px}
.ac-nav button{width:36px;height:36px;border-radius:var(--r8);border:1px solid var(--ink);background:transparent;cursor:pointer;transition:background .2s,color .2s}
.ac-nav button:hover{background:var(--ink);color:var(--bg)}
.ac-nav span{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--muted)}
.about-main{display:grid;gap:24px;max-width:720px}
.about-main .kick::before{content:"/* "}.about-main .kick::after{content:" */"}
.about-h{font-size:clamp(36px,6.5vw,80px);line-height:.96;letter-spacing:-.05em;text-transform:uppercase;font-weight:600;text-wrap:balance}
.about-h em{color:var(--muted)}
.body-copy{color:var(--muted);max-width:56ch}
.mini{margin-top:40px}
.polaroids{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:700px){.polaroids{grid-template-columns:repeat(3,1fr)}}
.polaroids figure{background:#fff;padding:8px 8px 12px;border-radius:var(--r8);box-shadow:var(--raised);transition:transform .6s var(--ease),opacity .8s var(--ease)}
.polaroids figure:nth-child(odd){rotate:-1.5deg}.polaroids figure:nth-child(even){rotate:1.5deg}
.polaroids figure:hover{rotate:0deg;transform:translateY(-6px)}
.polaroids img{aspect-ratio:1;width:100%;object-fit:cover;background:var(--surface);border-radius:var(--r4)}
.polaroids figcaption{font-family:var(--mono);font-size:11px;text-transform:uppercase;color:var(--muted);margin-top:8px}

/* ---------- diimejii-style bits: bracket hint + track record ---------- */
.scroll-hint{position:absolute;right:var(--pad);top:80px;font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);display:none}
@media(min-width:1000px){.scroll-hint{display:block;top:auto;bottom:calc(clamp(28px,5vw,48px) + 8px)}}
.track{list-style:none;padding:0;border-top:1px solid var(--line)}
.track li{display:grid;grid-template-columns:96px 1fr;gap:4px 16px;padding:20px 0;border-bottom:1px solid var(--line)}
.track .tag{font-family:var(--mono);font-size:12px;text-transform:uppercase;color:var(--muted);grid-row:span 2}
.track b{font-family:var(--display);font-size:clamp(20px,3vw,28px);letter-spacing:-.03em;text-transform:uppercase;font-weight:500}
.track p{color:var(--muted);max-width:52ch}

/* ---------- WORKS: glass pockets (taller so every line shows on hover) ---------- */
.pockets{gap:24px}
@media(min-width:1000px){.pockets{grid-template-columns:repeat(3,1fr)}}
.wk[hidden],.work-block[hidden]{display:none}
.work-block{margin-top:clamp(40px,6vw,72px);scroll-margin-top:96px}
.blk{margin-bottom:24px}
.blk::before{content:"/* "}.blk::after{content:" */"}
.persona-note{font-family:var(--mono);font-size:12px;text-transform:uppercase;display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:0 0 24px}
.persona-note button{font:inherit;text-transform:inherit;border:0;border-bottom:1px solid currentColor;background:none;cursor:pointer;color:var(--muted)}

/* ---------- WEB: Mac / Phone screen mockup ---------- */
.demo{display:grid;gap:24px;align-items:center}
@media(min-width:900px){.demo{grid-template-columns:260px 1fr;gap:48px}}
.seg{display:inline-flex;padding:4px;border-radius:var(--r8);background:rgba(255,255,255,.6);box-shadow:var(--raised);margin-bottom:16px}
.seg button{font-family:var(--mono);font-size:12px;text-transform:uppercase;border:0;background:none;padding:8px 16px;border-radius:var(--r4);cursor:pointer;color:var(--muted)}
.seg button.on{background:var(--ink);color:var(--bg)}
.demo-list{list-style:none;padding:0;display:grid;gap:8px}
.demo-list button{width:100%;text-align:left;border:1px solid var(--line);background:rgba(255,255,255,.5);border-radius:var(--r12);padding:12px 16px;cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.demo-list button b{display:block;font-weight:500}
.demo-list button span{font-size:13px;color:var(--muted)}
.demo-list button.on,.demo-list button:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.demo-list button.on span,.demo-list button:hover span{color:#b8b7b0}
.dev{display:grid;justify-items:center;margin:0 auto;width:100%}
.dev-frame{background:#1b1b1a;border-radius:18px 18px 6px 6px;padding:12px 12px 14px;width:100%;max-width:720px;box-shadow:0 30px 60px rgba(14,14,13,.22);transition:max-width .7s var(--ease),border-radius .7s var(--ease),padding .7s var(--ease)}
.dev-screen{position:relative;aspect-ratio:16/10;border-radius:6px;overflow:hidden;background:var(--surface);transition:aspect-ratio .7s var(--ease)}
.dev-screen img{width:100%;height:100%;object-fit:cover}
.dev-screen span{position:absolute;left:12px;bottom:12px;font-family:var(--mono);font-size:12px;text-transform:uppercase;background:var(--bg);padding:4px 8px;border-radius:var(--r4)}
.dev-base{width:calc(100% + 48px);max-width:768px;height:14px;border-radius:0 0 18px 18px;background:linear-gradient(#cfcec8,#9d9c95);transition:opacity .4s}
.dev.phone .dev-frame{max-width:280px;border-radius:38px;padding:14px}
.dev.phone .dev-screen{aspect-ratio:9/19.5;border-radius:26px}
.dev.phone .dev-base{opacity:0;height:0}

/* ---------- MEDIA: TV on a stand, photo in a vintage frame ---------- */
.sets{display:grid;gap:40px 24px}
@media(min-width:760px){.sets{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.sets{grid-template-columns:repeat(3,1fr)}}
.wnd,.vframe{display:grid;justify-items:center;gap:0}
.wnd figcaption,.vframe figcaption{display:grid;text-align:center;margin-top:16px}
.wnd figcaption b,.vframe figcaption b{font-family:var(--display);font-size:20px;letter-spacing:-.02em;text-transform:uppercase;font-weight:500}
.wnd figcaption span,.vframe figcaption span{font-family:var(--mono);font-size:11px;text-transform:uppercase;color:var(--muted)}
.vf-wood{width:100%;padding:18px;border-radius:4px;background:linear-gradient(135deg,#6b5a45,#3d3225 45%,#7a6850 60%,#3a2f22);box-shadow:inset 0 0 0 2px rgba(255,255,255,.12),inset 0 0 0 7px rgba(0,0,0,.35),0 20px 40px rgba(14,14,13,.28)}
.vf-mat{background:#efeadf;padding:18px;box-shadow:inset 0 0 12px rgba(0,0,0,.28)}
.vf-mat img{aspect-ratio:4/3;width:100%;object-fit:cover;filter:grayscale(1) sepia(.35) contrast(1.05);box-shadow:0 0 0 1px rgba(0,0,0,.35)}

/* ---------- VIDEO page (diimejii-style mono brackets) ---------- */
.vbr{letter-spacing:.1em}
.vid{display:grid;gap:24px}
@media(min-width:1000px){.vid{grid-template-columns:1.6fr 1fr;gap:48px;align-items:end}}
.vid-screen{position:relative;display:block;aspect-ratio:16/9;border-radius:var(--r20);overflow:hidden;background:#000;box-shadow:0 24px 60px rgba(14,14,13,.22)}
.vid-screen img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1);transition:transform .8s var(--ease)}
.vid-screen:hover img{transform:scale(1.04)}
.vid-screen .play{top:50%;left:50%;right:auto;margin:-32px 0 0 -32px}
.vid-bar{position:absolute;left:16px;top:16px;font-family:var(--mono);font-size:11px;text-transform:uppercase;color:#fff;mix-blend-mode:difference}
.vid-meta{display:grid;gap:0;border-top:1px solid var(--ink)}
.vid-meta div{display:grid;gap:4px;padding:16px 0;border-bottom:1px solid var(--line)}
.vid-meta dt{font-family:var(--mono);font-size:11px;text-transform:uppercase;color:var(--muted)}
.vid-meta dd{margin:0;font-family:var(--display);font-size:18px;letter-spacing:-.01em}
.vid-meta a{border-bottom:1px solid currentColor}

.page-head .vbr::before,.page-head .vbr::after{content:none}
.page-head h1 em{color:var(--muted)}

/* ---------- THOUGHTS: reader ---------- */
.reader{--rd-size:20px;--rd-bg:#faf9f6;--rd-ink:#161615;--rd-mute:#7a7972;--rd-line:#dedcd4;position:fixed;inset:0;z-index:1500;background:var(--rd-bg);color:var(--rd-ink);display:flex;flex-direction:column;animation:rdIn .5s var(--ease)}
.reader[hidden]{display:none}
.reader.dark{--rd-bg:#0f0f0e;--rd-ink:#ecebe6;--rd-mute:#8d8c85;--rd-line:#2c2c2a}
@keyframes rdIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.rd-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px var(--pad);border-bottom:1px solid var(--rd-line)}
.rd-x,.rd-set button{font-family:var(--mono);font-size:12px;text-transform:uppercase;color:inherit;background:none;border:1px solid var(--rd-line);border-radius:var(--r4);padding:8px 12px;cursor:pointer;transition:border-color .2s,background .2s}
.rd-x:hover,.rd-set button:hover{border-color:var(--rd-ink)}
.rd-set{display:flex;gap:6px}
.rd-scroll{flex:1;overflow-y:auto;padding:clamp(32px,6vw,72px) var(--pad) 120px}
.rd-col{max-width:640px;margin:0 auto}
.rd-meta{font-family:var(--mono);font-size:12px;text-transform:uppercase;color:var(--rd-mute);margin-bottom:24px}
.rd-wave{flex:1;display:flex;align-items:center;gap:2px;height:32px;min-width:0}
.rd-wave i{flex:1;background:var(--rd-line);border-radius:1px;transition:background .2s}
.rd-wave i.done{background:var(--rd-ink)}
.rd-body{font-family:var(--body);font-size:var(--rd-size);line-height:1.75}
.reader.serif .rd-body{font-family:Georgia,"Times New Roman",serif}
.rd-body h2{font-family:var(--display);font-size:clamp(34px,6vw,56px);line-height:1;letter-spacing:-.04em;text-transform:uppercase;margin-bottom:32px;font-weight:600}
.reader.serif .rd-body h2{font-family:var(--display)}
.rd-body h3{font-size:1.15em;margin:2em 0 .5em}
.rd-body p{margin:0 0 1.2em}
.thought-list a{cursor:pointer}

/* ---------- ABOUT: milestones, campaigns, toolkit carousel ---------- */
.blurb{color:var(--muted);max-width:56ch}
.ms{list-style:none;padding:0;border-top:1px solid var(--ink)}
.ms li{display:grid;grid-template-columns:1fr;gap:4px 24px;padding:24px 0;border-bottom:1px solid var(--line)}
@media(min-width:700px){.ms li{grid-template-columns:110px 1fr}.ms .tag{grid-row:span 3}}
.ms .tag,.camp .tag{font-family:var(--mono);font-size:12px;text-transform:uppercase;color:var(--muted)}
.ms strong{font-family:var(--display);font-size:clamp(40px,7vw,72px);line-height:1;letter-spacing:-.05em;font-weight:600}
.ms b{font-family:var(--display);font-size:20px;letter-spacing:-.02em;text-transform:uppercase;font-weight:500}
.ms p{color:var(--muted);max-width:50ch}
.camp-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:40px}
.camp-head .mini{margin:0}
.camps{display:grid;gap:12px}
@media(min-width:760px){.camps{grid-template-columns:repeat(3,1fr)}}
.camp{display:grid;gap:8px;align-content:start;min-height:200px;padding:20px;border-radius:var(--r20);background:rgba(255,255,255,.55);box-shadow:var(--raised);transition:transform .6s var(--ease),background .4s,color .4s}
.camp:hover{transform:translateY(-6px);background:var(--ink);color:var(--bg)}
.camp:hover .tag,.camp:hover p{color:#b8b7b0}
.camp b{font-family:var(--display);font-size:24px;letter-spacing:-.03em;text-transform:uppercase;font-weight:500;line-height:1.05;margin-top:auto}
.camp p{color:var(--muted);font-size:14px}
.tools{overflow:hidden;margin:0 calc(var(--pad) * -1);padding:8px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
@media(min-width:900px){.tools{margin:0}}
.tools-track{display:flex;gap:16px;width:max-content;animation:marq 28s linear infinite}
.tools:hover .tools-track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.tools figure{display:grid;justify-items:center;gap:8px;width:88px;flex:none}
.tools figure>span{position:relative;width:72px;height:72px;border-radius:var(--r20);display:grid;place-content:center;background:rgba(255,255,255,.7);box-shadow:var(--raised);font-family:var(--mono);color:var(--muted);transition:transform .5s var(--ease)}
.tools figure>span img{position:absolute;inset:14px;width:calc(100% - 28px);height:calc(100% - 28px);object-fit:contain;background:#fff;border-radius:var(--r8)}
.tools figure:hover>span{transform:translateY(-6px) scale(1.06)}
.tools figcaption{font-family:var(--mono);font-size:10px;text-transform:uppercase;color:var(--muted);text-align:center}

/* ---------- MASK: 3D head that splits into three roles ---------- */
.mask{position:relative;width:min(94vw,860px);aspect-ratio:3/2;margin:0 auto}
.mask canvas{position:relative;z-index:1;width:100%;height:100%;display:block;cursor:pointer}
.mask::before{content:"";position:absolute;left:50%;bottom:7%;width:44%;height:7%;translate:-50% 0;background:radial-gradient(closest-side,rgba(14,14,13,.2),transparent);pointer-events:none}
.pl{position:absolute;display:grid;gap:2px;text-align:left;padding:12px 16px;border:0;border-radius:var(--r16);cursor:pointer;font-family:var(--display);font-size:clamp(16px,2.4vw,22px);letter-spacing:-.02em;text-transform:uppercase;color:var(--ink);background:rgba(255,255,255,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 0 0 1px rgba(255,255,255,.8) inset,var(--float);opacity:0;transform:scale(.7);pointer-events:none;transition:opacity .4s var(--ease),transform .6s var(--ease),background .3s,color .3s}
.pl small{font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:.04em}
.pl0{left:0;top:14%}.pl2{left:0;bottom:10%}.pl1{right:0;top:14%;text-align:right}
.mask.open .pl{opacity:1;transform:none;pointer-events:auto}
.mask.open .pl1{transition-delay:.06s}.mask.open .pl2{transition-delay:.12s}
.pl:hover,.pl.on{background:var(--ink);color:var(--bg)}
.pl:hover small,.pl.on small{color:#b8b7b0}
.mask-hint{position:absolute;left:0;right:0;bottom:-30px;text-align:center;font-family:var(--mono);font-size:12px;text-transform:uppercase;color:var(--muted);transition:opacity .3s}
.mask.open .mask-hint{opacity:0}

/* ---------- ASK WISDOM: floaty card with an animated caricature ---------- */
@keyframes floaty{50%{translate:0 -6px}}
.me{animation:floaty 5s ease-in-out infinite}
#scrim{background:transparent}
#drawer{top:auto;bottom:calc(var(--pad) + 80px);right:var(--pad);width:min(380px,calc(100vw - 2 * var(--pad)));height:min(540px,calc(100svh - 150px));border-radius:28px;background:rgba(255,255,255,.8);backdrop-filter:blur(20px) saturate(1.1);-webkit-backdrop-filter:blur(20px) saturate(1.1);box-shadow:0 0 0 1px rgba(255,255,255,.8) inset,0 24px 70px rgba(14,14,13,.22);transform:translateY(24px) scale(.6);transform-origin:100% 100%;opacity:0;pointer-events:none;transition:transform .6s var(--ease),opacity .3s}
#drawer.open{transform:none;opacity:1;pointer-events:auto;animation:floaty 6s ease-in-out .6s infinite}
.d-who{display:flex;align-items:center;gap:12px}
@keyframes sway{50%{transform:rotate(2.5deg)}}
@keyframes eyeblink{0%,92%,100%{transform:scaleY(0)}95%{transform:scaleY(1)}}
@keyframes talk{to{transform:scaleY(1.9) scaleX(.85)}}
@keyframes brow{to{transform:translateY(-1.5px)}}
.thread h3{font-size:26px}

.pl{z-index:2}

/* ---------- WINDOWS (Mac-style frame), glossy pills, newsletter ---------- */
.win{position:relative;border-radius:14px;background:#2c2d2f;box-shadow:0 0 0 1px rgba(0,0,0,.5),0 24px 50px rgba(14,14,13,.28);overflow:visible}
.win-bar{display:flex;align-items:center;gap:7px;height:32px;padding:0 14px;position:relative}
.win-bar i{width:11px;height:11px;border-radius:50%;background:#8d8c85}
.win-bar i:nth-child(2){background:#b8b7b0}.win-bar i:nth-child(3){background:#e4e3dc}
.win-bar b{position:absolute;left:0;right:0;text-align:center;font:400 12px var(--mono);color:#8d8c85;pointer-events:none}
.win-body{margin:0 5px 5px;border-radius:9px;background:#1b1b1b;padding:clamp(20px,3vw,32px);display:grid;gap:20px;color:#fff}
.gloss{position:relative;font-family:var(--mono);font-size:15px;color:#1b1b1b;padding:12px 26px;border-radius:999px;border:0;cursor:pointer;background:linear-gradient(#fff,#d6d5cf);box-shadow:0 0 0 1px rgba(0,0,0,.25),0 4px 10px rgba(0,0,0,.35),inset 0 1px 0 #fff;transition:transform .35s var(--ease),box-shadow .35s}
.gloss:hover{transform:translateY(-2px) scale(1.03)}
.gloss:active{transform:scale(.96)}
.nl{max-width:1100px;margin:0 auto}
.nl-copy h2{font:700 clamp(22px,3vw,30px) var(--mono);letter-spacing:-.02em;text-transform:none;line-height:1.2;margin:0 0 10px}
.nl-copy p{font:400 clamp(14px,1.6vw,17px)/1.7 var(--mono);color:#8d8c85;max-width:46ch}
@media(min-width:900px){.nl .win-body{grid-template-columns:1.3fr 1fr;align-items:center;gap:40px}}
.nl-form{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
.nl-form input[type=email]{min-width:0;font:400 15px var(--mono);color:#fff;padding:14px 16px;border-radius:10px;border:1px solid #3a3a3a;background:#262626;outline:none;transition:border-color .2s,box-shadow .2s}
.nl-form input[type=email]::placeholder{color:#6b6a64}
.nl-form input[type=email]:focus{border-color:#e4e3dc;box-shadow:0 0 0 3px rgba(255,255,255,.08)}
.nl-msg{grid-column:1/-1;min-height:1.4em;font:400 12px var(--mono);color:#8d8c85}
.nl-form.done input,.nl-form.done button{opacity:.4;pointer-events:none}
.nl-note{text-align:center;margin-top:14px;font:400 12px var(--mono);color:var(--muted)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:520px){.nl-form{grid-template-columns:1fr}}

.pillplay{display:inline-flex;align-items:center;gap:10px;font:600 17px var(--body);color:#fff;padding:12px 22px 12px 16px;border-radius:999px;background:linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.12));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 0 0 1px rgba(255,255,255,.55) inset,0 8px 20px rgba(0,0,0,.28);text-shadow:0 1px 2px rgba(0,0,0,.35);transition:transform .45s var(--ease)}
.pillplay::before{content:"";border:8px solid transparent;border-left:13px solid #fff;border-right:0;margin-left:3px}
a:hover>.pillplay,a:hover .pillplay{transform:scale(1.07)}
.vid-screen{display:block;aspect-ratio:auto;background:#2c2d2f;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.5),0 24px 60px rgba(14,14,13,.28)}
.vid-frame{position:relative;display:block;aspect-ratio:16/9;margin:0 5px 5px;border-radius:9px;overflow:hidden;background:#000}
.vid-frame img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1);transition:transform .8s var(--ease)}
.vid-screen:hover .vid-frame img{transform:scale(1.04)}
.vid-frame .pillplay{position:absolute;left:50%;top:50%;translate:-50% -50%}
.feature .pillplay{position:absolute;left:50%;top:50%;translate:-50% -50%}

/* ---------- NAV ICONS: glossy squircle app icons; YouTube, the main channel, is the long one ---------- */
.icons{gap:10px}
.icons .icon-btn{position:relative;width:40px;height:40px;border:0;border-radius:30%;color:#f4f3ef;overflow:hidden;
  background:linear-gradient(160deg,#4d4d4a 0,#1b1b1a 55%,#0e0e0d);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -2px 4px rgba(0,0,0,.45),0 5px 12px rgba(14,14,13,.28),0 0 0 1px rgba(0,0,0,.65);
  transition:transform .45s cubic-bezier(.34,1.56,.64,1),box-shadow .3s}
.icons .icon-btn::before{content:"";position:absolute;inset:1px 1px 52% 1px;border-radius:inherit;background:linear-gradient(rgba(255,255,255,.26),rgba(255,255,255,0));pointer-events:none}
.icons .icon-btn:hover{background:linear-gradient(160deg,#5a5a57 0,#232322 55%,#0e0e0d);color:#fff;transform:translateY(-3px) scale(1.07)}
.icons .icon-btn:active{transform:scale(.93)}
.icons .icon-btn svg{position:relative;width:20px;height:20px}
.icons .yt{width:auto;padding:0 16px 0 13px;gap:8px;border-radius:999px;display:flex;align-items:center;color:#111;
  background:linear-gradient(#fff,#d6d5cf);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 4px rgba(0,0,0,.12),0 5px 12px rgba(14,14,13,.25),0 0 0 1px rgba(0,0,0,.35)}
.icons .yt::before{background:linear-gradient(rgba(255,255,255,.9),rgba(255,255,255,0))}
.icons .yt:hover{background:linear-gradient(#fff,#e4e3dd);color:#000}
.icons .yt span{position:relative;font:500 12px var(--mono);text-transform:uppercase;letter-spacing:.04em}
.nav.on-dark .icons .icon-btn:not(.yt){background:linear-gradient(160deg,#f6f5f1,#cfcec8);color:#111;box-shadow:inset 0 1px 0 #fff,0 5px 12px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.2)}
.nav.on-dark .icons .icon-btn:not(.yt)::before{background:linear-gradient(rgba(255,255,255,.8),rgba(255,255,255,0))}
@media(max-width:479px){.icons .icon-btn[aria-label=GitHub],.icons .icon-btn[aria-label=Email]{display:none}.icons .yt{padding:0 12px 0 10px}}

/* ---------- PRELOADER: Apple-style glass card, 3D icons ---------- */

/* ---------- WORK FOLDERS: frosted glass over cards that peek out and fan on hover ---------- */
.pockets{gap:36px 24px}
.folder{display:grid;justify-items:center;text-align:center;gap:6px}
.fdr-art{position:relative;display:block;width:100%;max-width:320px;height:224px;margin-bottom:12px}
.fdr-back{position:absolute;inset:36px 4% 0 4%;border-radius:20px;background:linear-gradient(#dcdbd4,#c4c3bb);box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.fdr-back::before{content:"";position:absolute;left:0;top:-15px;width:40%;height:24px;border-radius:14px 14px 0 0;background:#dcdbd4}
.fdr-card{position:absolute;bottom:58px;width:42%;height:136px;display:grid;place-content:center;border:5px solid #fff;border-radius:13px;box-shadow:0 12px 22px rgba(14,14,13,.22);background:linear-gradient(160deg,#f1f0ec,#a5a49d 78%,#4b4b48);color:#fff;font:600 38px var(--display);transform-origin:50% 100%;transition:transform .7s var(--ease)}
.fdr-card.c1{left:7%;transform:rotate(-9deg) translateY(8px)}
.fdr-card.c2{left:29%;z-index:1;transform:translateY(-8px);background:linear-gradient(160deg,#fafaf8,#b9b8b1 78%,#62625e)}
.fdr-card.c3{right:7%;transform:rotate(9deg) translateY(8px);background:linear-gradient(160deg,#e6e5df,#8d8c85 78%,#33332f)}
.fdr-front{position:absolute;z-index:2;left:0;right:0;bottom:0;height:132px;border-radius:22px;background:linear-gradient(rgba(255,255,255,.66),rgba(255,255,255,.3));backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.55),0 16px 28px rgba(14,14,13,.16);transform-origin:50% 100%;transition:transform .7s var(--ease)}
.fdr-front::after{content:"";position:absolute;left:16px;right:16px;bottom:12px;height:1px;background:rgba(14,14,13,.08)}
.fdr-dot{position:absolute;right:14px;bottom:20px;width:42px;height:42px;border-radius:50%;display:grid;place-content:center;font:400 19px var(--body);font-style:normal;color:#f4f3ef;background:linear-gradient(160deg,#4d4d4a,#141413);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 6px 12px rgba(14,14,13,.3),0 0 0 2px #fff;transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.folder:hover .fdr-card.c1,.folder:focus-visible .fdr-card.c1{transform:rotate(-17deg) translate(-16px,-26px)}
.folder:hover .fdr-card.c2,.folder:focus-visible .fdr-card.c2{transform:translateY(-40px)}
.folder:hover .fdr-card.c3,.folder:focus-visible .fdr-card.c3{transform:rotate(17deg) translate(16px,-26px)}
.folder:hover .fdr-front,.folder:focus-visible .fdr-front{transform:perspective(520px) rotateX(-12deg) translateY(8px)}
.folder:hover .fdr-dot{transform:scale(1.12) rotate(8deg)}
.folder h3{font-size:24px;letter-spacing:-.03em;text-transform:uppercase}
.folder p{color:var(--muted);max-width:34ch;font-size:15px}
.folder .tags{justify-content:center;padding:0;margin-top:6px}
@media(hover:none){
  .fdr-card.c1{transform:rotate(-14deg) translate(-12px,-20px)}.fdr-card.c2{transform:translateY(-32px)}.fdr-card.c3{transform:rotate(14deg) translate(12px,-20px)}
}

/* ---------- nav: flag and analog clock, segmented link pill ---------- */
.clock{gap:8px}
.clock::before{display:none}
.clock .flag{width:20px;height:14px;border-radius:3px;box-shadow:0 0 0 1px rgba(14,14,13,.2)}
.clock .aclock{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6}
.clock .aclock line{transform-origin:12px 12px;transition:transform .6s var(--ease)}
.links{padding:4px;border-radius:999px;background:rgba(255,255,255,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 0 0 1px rgba(14,14,13,.08),inset 0 1px 0 rgba(255,255,255,.9);gap:2px}
.links a{padding:8px 16px;border-radius:999px;transition:background .3s,color .3s}
.links a:hover{background:rgba(14,14,13,.06)}
.links a.active{background:var(--ink);color:var(--bg)}
.nav.on-dark .links{background:rgba(255,255,255,.1);box-shadow:0 0 0 1px rgba(255,255,255,.14)}
.nav.on-dark .links a.active{background:var(--bg);color:var(--ink)}

/* ---------- about: fact dots, photos app icon ---------- */
.ac-dots{display:flex;gap:8px;padding:10px 4px 6px}
.ac-dots button{width:8px;height:8px;border-radius:99px;border:0;padding:0;background:var(--line);cursor:pointer;transition:width .4s var(--ease),background .3s}
.ac-dots button[aria-selected=true]{width:26px;background:var(--ink)}
.ow{display:flex;align-items:center;gap:12px;margin-top:40px}
.ow .mini{margin:0}
.appico{width:44px;height:44px;border-radius:30%;display:grid;place-content:center;background:linear-gradient(#fff,#e7e6e0);box-shadow:inset 0 1px 0 #fff,0 6px 14px rgba(14,14,13,.2),0 0 0 1px rgba(14,14,13,.12)}
.appico svg{width:30px;height:30px;fill:none}

/* ---------- footer call to action: idea and hire trade places ---------- */
.roll{display:inline-grid;overflow:hidden;vertical-align:bottom;color:#8a8982;padding-bottom:.06em}
.roll b{grid-area:1/1;font-weight:inherit;transition:transform .8s cubic-bezier(.7,0,.2,1)}
.roll b:nth-child(2){transform:translateY(110%)}
.cta-h.swap .roll b:nth-child(1){transform:translateY(-110%)}
.cta-h.swap .roll b:nth-child(2){transform:translateY(0)}

/* ---------- chat header: a whirling AI orb ---------- */
.d-who{display:flex;align-items:center;gap:12px}
.orb{position:relative;width:52px;height:52px;flex:none;border-radius:50%;display:block}
.orb i{position:absolute;inset:0;border-radius:42% 58% 55% 45% / 50% 42% 58% 50%;animation:orbSpin 7s linear infinite,orbMorph 5s ease-in-out infinite;background:conic-gradient(from 0deg,#fff,#f6c9b8,#d9c6f0,#bfe6d8,#fff);filter:saturate(.85)}
.orb i:nth-child(2){inset:7px;animation-duration:4s,7s;animation-direction:reverse,alternate;background:conic-gradient(from 90deg,#1b1b1a,#6d6c66,#f4f3ef,#1b1b1a);mix-blend-mode:multiply;opacity:.55}
.orb::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 2px 4px rgba(255,255,255,.9),inset 0 -4px 8px rgba(14,14,13,.2),0 6px 14px rgba(14,14,13,.22)}
.orb.talking i{animation-duration:1.6s,1.4s}
@keyframes orbSpin{to{transform:rotate(360deg)}}
@keyframes orbMorph{50%{border-radius:58% 42% 40% 60% / 45% 58% 42% 55%}}

.wf{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}

/* ---------- OPENING: an empty desktop, one big blue folder ---------- */
#pre{position:fixed;inset:0;z-index:2000;display:grid;place-content:center;justify-items:center;background:radial-gradient(60% 50% at 18% 12%,#fbfaf7 0,transparent 70%),radial-gradient(55% 50% at 88% 30%,#dcdad2 0,transparent 70%),radial-gradient(60% 50% at 30% 95%,#d0cec6 0,transparent 72%),#ecebe6;transition:background .6s}
#pre.leaving{background:transparent;pointer-events:none}
.desk{display:grid;justify-items:center;gap:6px;transition:opacity .5s,transform .8s var(--ease)}
#pre.leaving .desk{opacity:0;transform:scale(.96)}
.bigfolder{--w:min(400px,78vw);position:relative;width:var(--w);height:calc(var(--w) * .8);padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;filter:drop-shadow(0 30px 34px rgba(20,60,150,.28));animation:fin 1s var(--ease) both}
@keyframes fin{from{opacity:0;transform:translateY(24px) scale(.95)}to{opacity:1;transform:none}}
.bigfolder>span{position:absolute;display:block}
.bf-back{inset:calc(var(--w) * .09) 0 0 0;border-radius:calc(var(--w) * .07);background:linear-gradient(#3a8cf5,#2467d6)}
.bf-back::before{content:"";position:absolute;left:0;top:calc(var(--w) * -.055);width:38%;height:calc(var(--w) * .1);border-radius:calc(var(--w) * .045) calc(var(--w) * .06) 0 0;background:#3a8cf5}
.bf-sheet{left:5%;right:5%;bottom:calc(var(--w) * .3);height:calc(var(--w) * .5);border-radius:10px;background:#f4f6fb;box-shadow:0 2px 6px rgba(0,30,90,.2)}
.bf-photo{left:19%;width:62%;aspect-ratio:4/5;bottom:calc(var(--w) * .24);z-index:2;border-radius:14px;overflow:hidden;border:5px solid #fff;box-shadow:0 14px 30px rgba(0,30,90,.35);transform:rotate(-3deg);transition:transform .6s cubic-bezier(.34,1.56,.64,1)}
.bf-photo img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.bf-front{left:0;right:0;bottom:0;height:60%;z-index:3;border-radius:calc(var(--w) * .07);background:linear-gradient(#69b4ff,#3f8bf6 62%,#2f74e6);box-shadow:inset 0 2px 0 rgba(255,255,255,.6),inset 0 -8px 14px rgba(0,40,130,.28);transform-origin:50% 100%;transition:transform .55s cubic-bezier(.5,0,.2,1)}
.bf-front::after{content:"";position:absolute;left:4%;right:4%;top:3%;height:26%;border-radius:calc(var(--w) * .06);background:linear-gradient(rgba(255,255,255,.35),rgba(255,255,255,0))}
.bf-tip{right:-4%;top:-6%;z-index:5;font:600 13px var(--mono);padding:9px 14px;border-radius:12px;background:#fff;color:#1b1b1a;box-shadow:0 0 0 1px rgba(0,0,0,.1),0 10px 22px rgba(0,30,90,.28);opacity:0;transform:translateY(8px) scale(.85);transform-origin:20% 100%;transition:opacity .3s,transform .5s cubic-bezier(.34,1.56,.64,1);white-space:nowrap;pointer-events:none}
.bf-tip::after{content:"";position:absolute;left:18px;bottom:-5px;width:10px;height:10px;background:#fff;rotate:45deg}
.bigfolder:not(:disabled):hover,.bigfolder:not(:disabled):focus-visible{animation:fin 1s var(--ease) both,wiggle 1s ease-in-out .15s infinite;outline:none}
.bigfolder:not(:disabled):hover .bf-photo,.bigfolder:not(:disabled):focus-visible .bf-photo{transform:rotate(-3deg) translateY(calc(var(--w) * -.05))}
.bigfolder:not(:disabled):hover .bf-tip,.bigfolder:not(:disabled):focus-visible .bf-tip{opacity:1;transform:none}
@keyframes wiggle{0%,100%{rotate:0deg}15%{rotate:-2.4deg}35%{rotate:2.2deg}55%{rotate:-1.6deg}75%{rotate:1deg}}
#pre.opening .bigfolder{animation:none}
#pre.opening .bf-front{transform:perspective(700px) rotateX(-62deg)}
#pre.opening .bf-photo{transform:rotate(0deg) translateY(calc(var(--w) * -.12))}
#pre.opening .bf-tip,#pre.opening .bf-name{opacity:0}
.bf-name{margin:6px 0 0;padding:6px 14px;border-radius:9px;background:rgba(14,14,13,.8);color:#fff;font:500 16px var(--body);letter-spacing:.01em;transition:opacity .3s}
@media(hover:none){#pre.loaded .bf-tip{opacity:1;transform:none;animation:nudge 2.4s ease-in-out infinite}}

/* ---------- WORKS: a single card for one-thing products; a scrollable site in the device frame; the photos carousel ---------- */
.dev-screen iframe{position:absolute;left:0;top:0;border:0;transform-origin:0 0;background:#fff}
.dev-screen img[hidden],.dev-screen iframe[hidden]{display:none}
.dev-screen span{z-index:2;pointer-events:none}
.photos{margin-top:48px}
.photos:not(:has(.ph-slide)){display:none}
.ph-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}.ph-head .kick{margin:0}
.ph-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px calc(50% - min(180px,38vw)) 24px;scrollbar-width:none}
.ph-slide{position:relative;flex:none;width:min(360px,76vw);aspect-ratio:4/5;margin:0;border-radius:28px;overflow:hidden;scroll-snap-align:center;box-shadow:0 20px 44px rgba(14,14,13,.28);transform:scale(calc(1 - var(--d,0) * var(--d,0) * .12));opacity:calc(1 - var(--d,0) * var(--d,0) * .4);transition:transform .25s,opacity .25s}
.ph-slide img{width:100%;height:100%;object-fit:cover}
.ph-slide figcaption{position:absolute;left:0;right:0;bottom:0;padding:48px 20px 20px;display:grid;gap:2px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.65))}
.ph-slide figcaption b{font:600 24px var(--display);letter-spacing:-.02em}
.ph-slide figcaption span{font:400 12px var(--mono);text-transform:uppercase;opacity:.8}
.ph-dots{display:flex;justify-content:center;gap:8px}
.ph-dots button{width:8px;height:8px;border-radius:99px;border:0;padding:0;background:var(--line);cursor:pointer;transition:width .4s var(--ease),background .3s}
.ph-dots button[aria-selected=true]{width:26px;background:var(--ink)}

.pl{max-width:172px}
.ico-btn{position:relative;width:40px;height:40px;border:0;border-radius:30%;color:#f4f3ef;overflow:hidden;
  background:linear-gradient(160deg,#4d4d4a 0,#1b1b1a 55%,#0e0e0d);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -2px 4px rgba(0,0,0,.45),0 5px 12px rgba(14,14,13,.28),0 0 0 1px rgba(0,0,0,.65);
  transition:transform .45s cubic-bezier(.34,1.56,.64,1),box-shadow .3s}
.ico-btn::before{content:"";position:absolute;inset:1px 1px 52% 1px;border-radius:inherit;background:linear-gradient(rgba(255,255,255,.26),rgba(255,255,255,0));pointer-events:none}
.ico-btn:hover{background:linear-gradient(160deg,#5a5a57 0,#232322 55%,#0e0e0d);color:#fff;transform:translateY(-3px) scale(1.07)}
.ico-btn:active{transform:scale(.93)}
.ico-btn svg{position:relative;width:20px;height:20px;fill:none}

/* colour for some of them */
.icons .yt{background:linear-gradient(#ff5a50,#d2201a);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 4px rgba(120,0,0,.35),0 5px 12px rgba(200,30,20,.35),0 0 0 1px rgba(120,10,10,.6)}
.icons .yt:hover{background:linear-gradient(#ff6a60,#dc2a22);color:#fff}
.icons .yt::before{background:linear-gradient(rgba(255,255,255,.45),rgba(255,255,255,0))}
.nav.on-dark .icons .icon-btn:not(.yt){background:linear-gradient(160deg,#f6f5f1,#cfcec8);color:#111}

/* ---------- TESTIMONIALS: one note at a time, the rest wait at the side ---------- */
.deck-wrap{outline:none}
.deck{position:relative;display:grid;padding:0 24px 52px}
.deck::before,.deck::after{content:"";position:absolute;inset:0 24px 52px;border-radius:22px;background:#fff;box-shadow:0 0 0 1px rgba(14,14,13,.08);z-index:0}
.deck::before{transform:translate(14px,12px) rotate(1.4deg)}.deck::after{transform:translate(-12px,22px) rotate(-1.4deg);background:#fbfaf7}
.tcard{--t:#f6efe3;--tk:#e6d6b8;position:relative;z-index:2;grid-area:1/1;display:grid;gap:22px;align-content:space-between;padding:clamp(22px,3.4vw,44px);border-radius:22px;background:linear-gradient(135deg,var(--t),#fff 78%);box-shadow:0 0 0 1px rgba(14,14,13,.08),0 22px 44px rgba(14,14,13,.08);opacity:0;transform:translateX(var(--x,56px)) scale(.97);pointer-events:none;transition:transform .8s var(--ease),opacity .5s}
.tcard.on{opacity:1;transform:none;pointer-events:auto}
.tcard:nth-child(2){--t:#e9efe6;--tk:#c9d9c3}.tcard:nth-child(3){--t:#f4e8e6;--tk:#e3c5c0}.tcard:nth-child(4){--t:#f3f0dc;--tk:#e0d9a8}.tcard:nth-child(5){--t:#ece9f1;--tk:#d3cbe0}
.tc-top{display:flex;justify-content:space-between;align-items:center;font:400 11px var(--mono);text-transform:uppercase;color:var(--muted)}
.tc-top span:first-child{padding:5px 10px;border-radius:999px;background:var(--tk);color:var(--ink)}
.tcard blockquote{margin:0;font-size:clamp(22px,3vw,40px);line-height:1.28;letter-spacing:-.025em;max-width:26ch}
.tcard mark{color:inherit;background:linear-gradient(transparent 58%,var(--tk) 58%);padding:0 .08em}
.tcard footer{display:flex;align-items:center;gap:14px}
.tc-av{width:48px;height:48px;border-radius:50%;display:grid;place-content:center;background:var(--tk);font:500 15px var(--mono);box-shadow:0 0 0 1px rgba(14,14,13,.1)}
.tcard footer b{display:block;font-weight:500;font-size:18px}.tcard footer small{color:var(--muted)}
@media(min-width:900px){
  .tcard{grid-template-columns:1.7fr 1fr;grid-template-areas:"top top" "quote who";align-items:end;gap:28px 48px}
  .tc-top{grid-area:top}.tcard blockquote{grid-area:quote;max-width:30ch}
  .tcard footer{grid-area:who;flex-direction:column;align-items:flex-start;gap:14px;padding-left:36px;border-left:1px solid rgba(14,14,13,.12)}
  .tc-av{width:64px;height:64px;font-size:20px}
}
.tpager{display:flex;align-items:center;gap:20px;padding:4px 24px 0}
.tbars{display:flex;gap:8px;flex:1;max-width:360px}
.tbars button{position:relative;flex:1;height:34px;border:0;padding:0;background:none;cursor:pointer}
.tbars button::before{content:"";position:absolute;left:0;right:0;top:15px;height:4px;border-radius:4px;background:var(--line)}
.tbars button i{position:absolute;left:0;top:15px;height:4px;width:0;border-radius:4px;background:var(--ink)}
.tbars button.done i{width:100%}
.tbars button.on i{animation:tfill 7s linear forwards}
.deck-wrap:hover .tbars button.on i,.deck-wrap:focus-within .tbars button.on i{animation-play-state:paused}
@keyframes tfill{to{width:100%}}
.tcount{font:400 12px var(--mono);color:var(--muted);margin-left:auto}
.tbtns{display:flex;gap:10px}
.tbtns .ico-btn{width:44px;height:44px}
.deck-wrap:focus-visible .tcard.on{outline:2px solid var(--ink);outline-offset:3px}

/* ---------- VOICE NOTE: a tape deck, with a record for the play button ---------- */
.rd-voice.tape{position:relative;display:flex;align-items:center;gap:18px;padding:14px 20px 14px 14px;border-radius:20px;margin-bottom:48px;color:#f4f3ef;background:linear-gradient(160deg,#242422,#121211);box-shadow:0 0 0 1px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.12),0 18px 36px rgba(14,14,13,.28)}
.reader.dark .rd-voice.tape{box-shadow:0 0 0 1px #3a3a38,0 18px 36px rgba(0,0,0,.5)}
.tape .rd-play{position:relative;flex:none;width:68px;height:68px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.tape .rd-play:disabled{opacity:.4;cursor:not-allowed}
.tape .rd-play:hover:not(:disabled){transform:scale(1.06)}
.tape .disc{position:absolute;inset:0;border-radius:50%;background:repeating-radial-gradient(circle at 50% 50%,#0c0c0b 0 2px,#2a2a28 2px 3.5px);box-shadow:0 0 0 2px #3b3b39,0 6px 12px rgba(0,0,0,.5);animation:discspin 3s linear infinite paused}
.tape .disc i{position:absolute;inset:22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#d6d5cf 60%,#a6a59e);box-shadow:inset 0 0 0 2px rgba(0,0,0,.2)}
.tape .disc i::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:#161615}
.reader.playing .tape .disc{animation-play-state:running}
@keyframes discspin{to{transform:rotate(360deg)}}
.tape .pp{position:absolute;left:50%;top:50%;width:0;height:0;margin:-8px 0 0 -4px;border:8px solid transparent;border-left:13px solid #161615;border-right:0;filter:drop-shadow(0 1px 0 rgba(255,255,255,.5))}
.reader.playing .tape .pp{width:12px;height:16px;margin:-8px 0 0 -6px;border:0;border-left:4px solid #161615;border-right:4px solid #161615}
.tp-mid{flex:1;min-width:0;display:grid;gap:6px}
.tp-top{display:flex;justify-content:space-between;align-items:center;font:400 11px var(--mono);text-transform:uppercase;color:#a3a29b}
.tp-top small{display:flex;align-items:center;gap:8px;font:inherit}
.tp-top .rec{width:8px;height:8px;border-radius:50%;background:#6d6c66}
.reader.playing .tp-top .rec{background:#ff4a3d;animation:blink 1.1s steps(1) infinite}
.tp-top em{font-style:normal;color:#f4f3ef}
.tape .rd-wave{height:34px;gap:2px}
.tape .rd-wave i{background:#4a4a47;border-radius:1px}
.tape .rd-wave i.done{background:#f4f3ef}
.tape .tp-mid>b{font:400 12px var(--mono);color:#a3a29b}
.tape .bubble{right:20px;top:-30px}
@media(max-width:560px){.tape .tp-mid>b{display:none}}

/* ---------- FOOTER: OZALDEYCRE8 in pastel folders, across the full width ---------- */
.foot>*:not(.folder-row){margin-inline:max(var(--pad),calc((100% - 1180px)/2 + var(--pad)))}
.folder-row{margin:clamp(40px,7vw,90px) 0 32px;overflow:hidden}
.folders{--fc:calc(100vw / 44);position:relative;display:grid;gap:calc(var(--fc) * 1.5);width:100vw}
.fline{display:grid;grid-template-columns:repeat(var(--cols),var(--fc));grid-auto-rows:calc(var(--fc) * .84)}
.fline.l1{justify-self:center}
.fline.l2{justify-self:end;margin-right:calc(var(--fc) * 2.2)}
.folders .fd{position:relative;display:block;border-radius:14% / 18%;background:linear-gradient(#f6f5f1,#a9a8a1);box-shadow:0 1px 2px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.65);opacity:0;transform:translateY(-140px) rotate(var(--r,0deg));transition:opacity .5s,transform 1s cubic-bezier(.34,1.56,.64,1),translate .4s var(--ease)}
.folders .fd::before{content:"";position:absolute;left:0;top:-14%;width:42%;height:20%;border-radius:25% 25% 0 0;background:inherit;filter:brightness(.93)}
.folders.in .fd{opacity:1;transform:none}

.tape .bubble,.bubble{position:absolute;right:20px;top:-30px;font:600 12px var(--mono);padding:6px 10px;border-radius:8px;background:#fff;color:#1b1b1a;box-shadow:0 0 0 1px rgba(0,0,0,.15),0 6px 14px rgba(0,0,0,.2);animation:nudge 2.4s ease-in-out infinite;transition:opacity .3s}
.bubble::after{content:"";position:absolute;left:16px;bottom:-5px;width:10px;height:10px;background:#fff;rotate:45deg}
.reader.playing .bubble,.rd-voice.none .bubble{opacity:0}
.rd-voice.none{opacity:.7}

.me .orb{width:100%;height:100%}
.ch{display:inline-block;font-weight:inherit;transform:translateY(calc(var(--k,0) * -9%)) scale(calc(1 + var(--k,0) * .06));transition:transform .25s var(--ease)}

.pen-art{position:absolute;right:16px;top:-46px;width:220px;height:92px;overflow:visible;pointer-events:none}
.pen-art .scribble{fill:none;stroke:#f4f3ef;stroke-width:3;stroke-linecap:round}
.nl .win-bar{overflow:visible}

/* ---------- loader: previews flicking through the folder ---------- */
.bf-photo .pv{position:absolute;inset:0;display:grid;align-content:center;justify-items:center;gap:10px;padding:14px;opacity:0;transition:opacity .22s;text-align:center;z-index:1}
.bf-photo .pv.on{opacity:1}
.pv small{position:absolute;left:0;right:0;bottom:10px;font:400 10px var(--mono);text-transform:uppercase;letter-spacing:.08em;opacity:.7}
.pv-laycue{background:#111110;color:#F1EBDD}
.pv-laycue svg{width:56%;margin-top:-18px}
.pv-laycue b{font:800 30px "Archivo",var(--body);letter-spacing:-.045em;line-height:1;margin-top:-6px}
.pv-laycue small{opacity:.55;text-transform:none;letter-spacing:0;font-size:10px}
.pv-ext{background:#F1EBDD;color:#111110}
.pv-ext svg{width:46%;fill:#111110;stroke:none}
.pv-ext .rows{display:grid;gap:6px;width:70%}.pv-ext .rows i{height:8px;border-radius:4px;background:rgba(17,17,16,.16)}.pv-ext .rows i:nth-child(2){width:70%}.pv-ext .rows i:nth-child(3){width:45%}
.pv-web{background:#e7e6e0;color:#111110;align-content:start;padding:18px 14px}
.pv-web .bar{display:flex;gap:5px;width:100%}.pv-web .bar i{width:8px;height:8px;border-radius:50%;background:#9c9b94}
.pv-web .pvh{width:100%;height:84px;border-radius:8px;background:linear-gradient(135deg,#c9c8c1,#6d6c66)}
.pv-web .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;width:100%}.pv-web .cols i{height:56px;border-radius:6px;background:#fff}
.pv-yap{background:#1b1b1a;color:#fff}
.pv-yap .pillplay{font-size:15px;padding:10px 18px 10px 12px}
.pv-voice{background:#f4f3ef;color:#111110}
.pv-voice .wave{display:flex;align-items:center;gap:4px;height:90px}
.pv-voice .wave i{width:6px;height:calc(var(--h) * 1%);border-radius:3px;background:#111110;animation:vw .9s ease-in-out infinite alternate}
.pv-voice .wave i:nth-child(odd){animation-delay:-.4s}
@keyframes vw{to{height:calc(var(--h) * .45%)}}
.pv-note{background:#fffdf7;color:#111110;align-content:center;justify-items:start;padding:22px}
.pv-note .ln{height:7px;border-radius:4px;background:rgba(17,17,16,.2);width:100%}.pv-note .ln:nth-child(2){width:86%}.pv-note .ln:nth-child(3){width:94%}.pv-note .ln:nth-child(4){width:48%;position:relative}
.pv-note .ln:nth-child(4)::after{content:"";position:absolute;right:-6px;top:-3px;width:2px;height:13px;background:#111110;animation:blink 1s steps(1) infinite}
.bf-load{margin:10px 0 0;display:flex;align-items:center;gap:12px;font:500 13px var(--mono);color:#5b5a55;transition:opacity .4s}
.bf-load .track{display:block;width:150px;height:4px;border-radius:4px;background:rgba(14,14,13,.14);overflow:hidden}
.bf-load .track b{display:block;height:100%;width:50%;background:#2f74e6;border-radius:4px;transition:width .1s linear}
#pre.loaded .bf-load{opacity:0;pointer-events:none}
.bigfolder:disabled{cursor:progress;animation:fin 1s var(--ease) both}

/* ---------- folders: random pop-ups, Laycue brand, the voice reel ---------- */
.fdr-card.pop{animation:popUp 1.5s ease-in-out}
@keyframes popUp{35%,65%{translate:0 -34px}}
.fdr-card b{font:500 22px var(--mono);letter-spacing:-.02em}
@keyframes bandIn{from{transform:translateX(-34px);opacity:0}}
.lc-word{font:800 30px "Archivo",var(--body)!important;letter-spacing:-.045em!important;text-transform:lowercase!important}
.vid-frame.voicef{display:grid;place-content:center;background:#161615}
.voicef .wave{display:flex;align-items:center;gap:5px;height:110px}
.voicef .wave i{width:7px;height:calc(var(--h) * 1%);border-radius:4px;background:#f4f3ef;animation:vw 1s ease-in-out infinite alternate}
.voicef .wave i:nth-child(odd){animation-delay:-.45s}
.voicef .pillplay{position:absolute;left:50%;bottom:16px;translate:-50% 0}
.cats{gap:36px 20px}
@media(min-width:1000px){.cats{grid-template-columns:repeat(4,1fr)}}

/* ---------- Laycue page: its own identity ---------- */
.lc-wrap{padding-top:clamp(96px,12vw,140px)}
.lc-hero{position:relative;display:grid;justify-items:start;gap:14px;padding:clamp(28px,5vw,64px);border-radius:28px;background:#111110;color:#F1EBDD;overflow:hidden}
.lc-hero::after{content:"";position:absolute;right:-8%;top:-30%;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(241,235,221,.12),transparent 65%)}
.lc-back{font:400 12px var(--mono);text-transform:uppercase;color:#a39d90;letter-spacing:.05em;transition:color .2s}.lc-back:hover{color:#F1EBDD}
.lc-back.dark{color:var(--muted);display:inline-block;margin-bottom:12px}.lc-back.dark:hover{color:var(--ink)}
.lc-logo{width:clamp(120px,22vw,220px);margin:12px 0 4px}
.lc-logo rect{transform-box:fill-box;animation:bandIn 1s cubic-bezier(.2,.8,.2,1) both}
.lc-logo rect:nth-child(2){animation-delay:.1s}.lc-logo rect:nth-child(3){animation-delay:.2s}.lc-logo rect:nth-child(4){animation-delay:.3s}
.lc-eyebrow{font:400 12px var(--mono);text-transform:uppercase;letter-spacing:.1em;color:#a39d90}
.lc-hero h1{font:800 clamp(64px,14vw,168px) "Archivo",var(--body);letter-spacing:-.05em;line-height:.85;text-transform:lowercase}
.lc-tag{font:600 clamp(20px,3vw,32px) "Archivo",var(--body);letter-spacing:-.02em;color:#b5b0a5}
.lc-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}
.lc-lede{max-width:60ch}
.lc-steps{list-style:none;padding:0;margin-top:32px;display:grid;gap:12px}
@media(min-width:800px){.lc-steps{grid-template-columns:repeat(4,1fr)}}
.lc-steps li{display:grid;gap:8px;padding:20px;border-radius:18px;background:#1C1B19;color:#F1EBDD}
.lc-steps i{width:36px;height:12px;border-radius:2px}
.lc-steps b{font:800 22px "Archivo",var(--body);letter-spacing:-.03em;text-transform:lowercase}
.lc-steps span{color:#a39d90;font-size:14px}
.lc-grid{display:grid;gap:12px}
@media(min-width:800px){.lc-grid{grid-template-columns:1fr 1fr}}
.lc-grid article{padding:24px;border-radius:18px;background:rgba(255,255,255,.6);box-shadow:var(--raised)}
.lc-grid h3{font:800 22px "Archivo",var(--body);letter-spacing:-.03em;margin-bottom:8px}
.lc-grid p{color:var(--muted)}
.lc-swatches{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.lc-swatches li{display:grid;gap:4px;padding:12px;border-radius:14px;background:rgba(255,255,255,.6);box-shadow:var(--raised)}
.lc-swatches i{height:64px;border-radius:8px;box-shadow:inset 0 0 0 1px rgba(14,14,13,.12)}
.lc-swatches b{font:800 16px "Archivo",var(--body)}.lc-swatches small{font:400 11px var(--mono);color:var(--muted)}
.lc-type{margin-top:24px;color:var(--muted)}.lc-type b{color:var(--ink);font-family:"Archivo",var(--body);font-weight:800}.lc-type .mono{font-family:var(--mono);font-weight:500}

/* ---------- project pages: a gallery first, then each write-up ---------- */
.gal{display:grid;gap:16px}
@media(min-width:800px){.gal{grid-template-columns:repeat(3,1fr)}}
.gal-card{display:grid;gap:6px;padding:12px 12px 18px;border-radius:22px;background:rgba(255,255,255,.6);box-shadow:var(--raised);transition:transform .5s var(--ease)}
.gal-card:hover{transform:translateY(-6px)}
.gal-img{aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:var(--surface);margin-bottom:8px}
.gal-img img{width:100%;height:100%;object-fit:cover}
.gal-card b{font:500 20px var(--display);letter-spacing:-.02em;padding:0 6px}.gal-card small{font:400 11px var(--mono);text-transform:uppercase;color:var(--muted);padding:0 6px}
.proj{padding:40px 0;border-top:1px solid var(--line);scroll-margin-top:96px}
.proj h2{font-size:clamp(28px,5vw,48px);letter-spacing:-.04em;text-transform:uppercase;margin-bottom:20px}
.proj-grid{display:grid;gap:24px}
@media(min-width:800px){.proj-grid{grid-template-columns:1fr 1fr;gap:48px;align-items:start}}
.proj dl{display:grid;gap:4px}.proj dt{font:400 11px var(--mono);text-transform:uppercase;color:var(--muted);margin-top:14px}.proj dd{margin:0;font-size:18px}
.proj-shot{aspect-ratio:4/3;border-radius:18px;overflow:hidden;background:var(--surface)}.proj-shot img{width:100%;height:100%;object-fit:cover}

@media(min-width:821px){.mask .pl{left:0;top:0;right:auto;bottom:auto;text-align:left}}

/* about: room under the nav */
.about-wrap{padding-top:clamp(120px,13vw,190px)}
@media(min-width:900px){.about-card{top:120px}}

/* ---------- hero: photo centred above, name below it; stacked in flow so they can never overlap ---------- */
.hero::before,.hero::after{display:none}
.hero{flex-direction:column;align-items:stretch;justify-content:flex-end;gap:20px}
.hero-img{position:relative;left:auto;top:auto;transform:none;flex:1 1 0;min-height:170px;max-height:460px;width:auto;aspect-ratio:4/5;align-self:center}
.name{flex-direction:column;column-gap:0;font-size:clamp(46px,8vw,108px)}
.hero-copy{width:fit-content;max-width:100%;background:linear-gradient(135deg,rgba(255,255,255,.34),rgba(255,255,255,.06));backdrop-filter:none;-webkit-backdrop-filter:none;border:1px solid rgba(255,255,255,.8);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 18px 50px rgba(14,14,13,.05)}
.sec.tight.about-wrap{padding-top:clamp(120px,13vw,190px)}

/* ---------- software cards: coloured head, two tilted app tiles, a white body, and a frosted shelf the card lifts out of ---------- */
.apps{display:grid;gap:48px 28px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));justify-items:center}
.app{position:relative;display:block;width:100%;max-width:340px;height:460px;--lift:0px}
.app-main{position:absolute;left:0;right:0;top:0;height:380px;display:block;transform:translateY(var(--lift));transition:transform .75s var(--ease)}
.app:hover,.app:focus-visible{--lift:-62px}
.app-head{position:relative;display:block;height:180px;border-radius:32px 32px 0 0;background:linear-gradient(160deg,var(--g1),var(--g2));overflow:visible}
.app-head::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(70% 90% at 30% 0,rgba(255,255,255,.28),transparent 60%)}
.app-tile{position:absolute;z-index:3;width:108px;height:108px;border-radius:28px;display:grid;place-content:center;background:linear-gradient(#fff,#ecebe6);box-shadow:0 14px 28px rgba(14,14,13,.28),inset 0 1px 0 #fff,0 0 0 1px rgba(14,14,13,.06);transition:transform .75s var(--ease)}
.app-tile.t1{left:17%;top:34px;transform:rotate(-9deg);animation:tfloat 5s ease-in-out infinite}
.app-tile.t2{left:46%;top:58px;transform:rotate(8deg);animation:tfloat 5s ease-in-out -2.4s infinite}
@keyframes tfloat{50%{translate:0 -6px}}
.app:hover .app-tile.t1{transform:rotate(-14deg) translate(-10px,-6px)}.app:hover .app-tile.t2{transform:rotate(13deg) translate(10px,-10px)}
.app-tile svg{width:46px;height:46px;fill:#111110;stroke:none}
.app-tile .lcm{width:78%;height:78%}
.app-tile:has(.lcm){background:#111110}
.mini-ui{display:grid;gap:7px;width:74px}
.mini-ui b{display:inline-flex;align-items:center;gap:6px;font:600 10px var(--mono);color:#111110;background:#F1EBDD;border-radius:999px;padding:5px 8px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.mini-ui b i{width:7px;height:7px;border-radius:50%;background:#FF4D2E;animation:blink 1.4s steps(1) infinite}
.mini-ui u{display:block;height:8px;border-radius:2px;background:#2E8BFF}.mini-ui u:nth-of-type(2){background:#2FD18B;width:80%}.mini-ui u:nth-of-type(3){background:#FFB31A;width:60%}
.app-tile:has(.mini-ui){background:#1C1B19}
.app-body{position:relative;z-index:1;display:block;margin-top:-34px;height:234px;padding:70px 26px 0;border-radius:36px 36px 0 0;background:#fff;box-shadow:0 -1px 0 rgba(14,14,13,.04),0 20px 40px rgba(14,14,13,.1)}
.app-body h3{font-size:26px;letter-spacing:-.03em;text-transform:uppercase;line-height:1.05}
.app-body p{margin-top:8px;color:var(--muted);font-size:15px;max-width:34ch}
.app-shelf{position:absolute;z-index:4;left:-12px;right:-12px;bottom:0;height:170px;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:18px 18px 18px 22px;border-radius:0 0 32px 32px;background:linear-gradient(rgba(251,250,247,.5),rgba(251,250,247,.72));backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 18px 30px rgba(14,14,13,.1)}
.app-shelf .tags{padding:0;margin:0}.app-shelf .tags i{background:rgba(255,255,255,.85);box-shadow:var(--raised)}
.app-shelf .fdr-dot{position:static;flex:none}
.app:hover .fdr-dot{transform:scale(1.12) rotate(8deg)}
.app .lcm .b{transform-box:fill-box}
.app:hover .lcm .b{animation:bandIn .55s cubic-bezier(.2,.8,.2,1) both}.app:hover .lcm .b2{animation-delay:.07s}.app:hover .lcm .b3{animation-delay:.14s}.app:hover .lcm .b4{animation-delay:.21s}
@media(hover:none){.app{--lift:-62px}}
/* hero: everything centred under the photo */
.hero{align-items:center}
.hero-copy{text-align:center}
.name{align-items:center}
.sub2{margin-left:auto;margin-right:auto}

/* ---------- glass cards: only the name shows until hover; the description is frosted out to create curiosity ---------- */
.app-body p,.folder p{filter:blur(6px);opacity:.55;transition:filter .65s var(--ease),opacity .65s var(--ease)}
.app:hover .app-body p,.app:focus-visible .app-body p,.folder:hover p,.folder:focus-visible p{filter:none;opacity:1}
.app-shelf .tags,.folder .tags{opacity:0;transform:translateY(6px);transition:opacity .5s,transform .6s var(--ease)}
.app:hover .app-shelf .tags,.app:focus-visible .app-shelf .tags,.folder:hover .tags,.folder:focus-visible .tags{opacity:1;transform:none}
@media(hover:none){.app-body p,.folder p{filter:none;opacity:1}.app-shelf .tags,.folder .tags{opacity:1;transform:none}}

/* ---------- hero: the name spread out on one line again ---------- */
.name{flex-direction:row;flex-wrap:nowrap;justify-content:center;column-gap:.22em;white-space:nowrap;font-size:clamp(34px,10.5vw,150px)}
.name .w{flex:none}
/* hero name: stray whitespace letters were flex items adding gaps; card is frosted, not clear */
.name>.ch{display:none}
.hero-copy{background:linear-gradient(135deg,rgba(255,255,255,.72),rgba(255,255,255,.5));backdrop-filter:blur(26px) saturate(1.15);-webkit-backdrop-filter:blur(26px) saturate(1.15)}

/* home folders: caption below stays visible; only the text inside the folder is frosted until hover */
.folder p{filter:none;opacity:1}
.folder .tags{opacity:1;transform:none}
.folder .fdr-card b{filter:blur(5px);opacity:.6;transition:filter .6s var(--ease),opacity .6s var(--ease)}
.folder:hover .fdr-card b,.folder:focus-visible .fdr-card b{filter:none;opacity:1}
@media(hover:none){.folder .fdr-card b{filter:none;opacity:1}}

/* ---------- product pages: problem / solution / features with animated interface mocks ---------- */
.ps{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,32px)}
.ps-card{padding:clamp(18px,2.4vw,30px);border-radius:var(--r24);background:rgba(255,255,255,.6);border:1px solid rgba(14,14,13,.08);display:flex;flex-direction:column;gap:12px}
.ps-card h2{font-size:clamp(22px,2.6vw,34px);line-height:1.1;letter-spacing:-.03em;margin:0}
.ps-card h2 em{font-style:normal;opacity:.5}
.ps-card p{margin:0}
.ps-card .ui{margin-top:auto}
.pf{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(20px,4vw,56px);align-items:center;padding:clamp(20px,3vw,40px) 0;border-top:1px solid rgba(14,14,13,.1)}
.pf:nth-of-type(even) .ui{order:-1}
.pf:nth-of-type(even){grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.pf-n{font-family:'Geist Mono',monospace;font-size:12px;opacity:.5}
.pf-txt h3{font-size:clamp(22px,2.4vw,32px);letter-spacing:-.03em;margin:6px 0 8px}
.pf-txt p{margin:0;max-width:44ch;opacity:.75}
@media(max-width:820px){.ps,.pf,.pf:nth-of-type(even){grid-template-columns:1fr}.pf:nth-of-type(even) .ui{order:0}}

.ui{--ink:#111110;--gr:#1C1B19;--cr:#F1EBDD;--bl:#2E8BFF;--gn:#2FD18B;--am:#FFB31A;--rd:#FF4D2E;border-radius:16px;background:var(--ink);color:var(--cr);overflow:hidden;border:1px solid #2a2927;box-shadow:0 24px 60px rgba(14,14,13,.18)}
.ui-bar{height:30px;display:flex;align-items:center;gap:6px;padding:0 12px;background:var(--gr);font:11px 'Geist Mono',monospace}
.ui-bar i{width:9px;height:9px;border-radius:50%;background:#3a3835}
.ui-bar b{margin-left:8px;font-weight:400;opacity:.6}
.ui-body{position:relative;aspect-ratio:16/10;overflow:hidden;font:12px 'Geist Mono',monospace}
.chip{position:absolute;right:12px;bottom:12px;padding:5px 10px;border-radius:99px;font-size:11px;color:var(--ink)}
.chip.red{background:var(--rd)}.chip.green{background:var(--gn)}.chip.amber{background:var(--am)}

/* laycue: chaos vs snap */
.mb{position:absolute;left:8%;width:38%;height:11%;border-radius:3px}
.b1{background:var(--bl);top:10%;--x:120%;--y:60%;--r:-8deg}
.b2{background:var(--gn);top:28%;--x:90%;--y:-40%;--r:6deg}
.b3{background:var(--am);top:46%;--x:140%;--y:-20%;--r:-4deg}
.b4{background:var(--rd);top:64%;--x:100%;--y:-90%;--r:9deg}
.m-chaos .mb{animation:chaos 2.4s ease-in-out infinite alternate}
.m-chaos .b2{animation-delay:-.6s}.m-chaos .b3{animation-delay:-1.1s}.m-chaos .b4{animation-delay:-1.7s}
@keyframes chaos{from{transform:translate(var(--x),var(--y)) rotate(var(--r))}to{transform:translate(calc(var(--x) * .4),calc(var(--y) * -.5)) rotate(calc(var(--r) * -1))}}
.m-snap .mb{animation:snap 6s cubic-bezier(.6,0,.2,1) infinite}
.m-snap .b2{animation-delay:.08s}.m-snap .b3{animation-delay:.16s}.m-snap .b4{animation-delay:.24s}
@keyframes snap{0%,20%{transform:translate(var(--x),var(--y)) rotate(var(--r))}42%,86%{transform:none}100%{transform:translate(var(--x),var(--y)) rotate(var(--r))}}
.mwin{position:absolute;left:46%;top:10%;width:46%;height:65%;border-radius:0 14px 14px 0;background:var(--cr);animation:winin 6s infinite}
@keyframes winin{0%,36%{opacity:0;transform:scaleX(.6)}48%,86%{opacity:1;transform:none}100%{opacity:0}}
.m-snap .chip{animation:winin 6s infinite}

/* laycue: smart fit */
.m-fit{padding:14px;display:flex;flex-direction:column;gap:12px}
.m-fit .stage{position:relative;flex:1;border-radius:10px;background:var(--gr);overflow:hidden}
.m-fit .slide{position:absolute;inset:10% 40% 10% 6%;border-radius:6px;background:linear-gradient(135deg,#2c2a27,#222120)}
.m-fit .win{position:absolute;right:6%;top:14%;width:30%;height:56%;border:2px dashed rgba(241,235,221,.4);border-radius:8px}
.m-fit .cam{position:absolute;right:6%;top:14%;width:30%;height:56%;border-radius:8px;background:var(--bl);animation:fit 5s cubic-bezier(.5,0,.2,1) infinite}
@keyframes fit{0%,12%{transform:translate(-230%,70%) scale(.5);opacity:.5}40%,88%{transform:none;opacity:1}100%{opacity:0;transform:translate(-230%,70%) scale(.5)}}
.shots{display:flex;gap:8px;align-items:center}
.shot{padding:7px 12px;border-radius:8px;background:var(--gr);border:2px solid transparent;font-size:11px}
.shot.nx{animation:nx 5s infinite}
@keyframes nx{0%,35%{border-color:transparent}45%,90%{border-color:var(--gn)}100%{border-color:transparent}}
.golive{margin-left:auto;padding:8px 14px;border-radius:8px;background:var(--cr);color:var(--ink);font-weight:700;animation:pulse 5s infinite}
@keyframes pulse{0%,80%{transform:none}88%{transform:scale(1.08)}100%{transform:none}}

/* laycue: loud button */
.m-loud{display:grid;place-items:center;gap:18px;align-content:center}
.m-loud .row{display:flex;gap:12px}
.m-loud .cut{padding:12px 22px;border-radius:10px;border:1px solid #4a4743}
.m-loud .live{padding:12px 28px;border-radius:10px;background:var(--cr);color:var(--ink);font-weight:700;font-size:15px;animation:press 3.6s infinite}
.m-loud .key{padding:6px 28px;border-radius:7px;background:var(--gr);border-bottom:4px solid #000;animation:keyp 3.6s infinite}
.m-loud .air{position:absolute;top:14px;right:14px;display:flex;align-items:center;gap:6px;color:var(--rd);opacity:0;animation:airon 3.6s infinite}
.m-loud .air i{width:8px;height:8px;border-radius:50%;background:var(--rd)}
@keyframes keyp{0%,40%{transform:none;border-bottom-width:4px}46%,56%{transform:translateY(3px);border-bottom-width:1px}64%,100%{transform:none;border-bottom-width:4px}}
@keyframes press{0%,44%{transform:none}50%{transform:scale(.94)}60%,100%{transform:none}}
@keyframes airon{0%,50%{opacity:0}58%,92%{opacity:1}100%{opacity:0}}

/* laycue: tally */
.m-tally{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:16px;align-items:center}
.mon{position:relative;aspect-ratio:16/10;border-radius:10px;background:var(--gr);outline:3px solid transparent;overflow:hidden}
.mon .face{position:absolute;left:50%;top:32%;width:30%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:#3a3835}
.mon em{position:absolute;left:8px;top:8px;padding:3px 8px;border-radius:5px;font-style:normal;font-size:10px;color:var(--ink);opacity:0}
.mon .l1{animation:lab 6s infinite}.mon .l2{animation:lab 6s infinite -3s}
.mon.a{animation:tA 6s infinite}.mon.b{animation:tB 6s infinite}
.mon.a .l1,.mon.b .l2{background:var(--rd)}.mon.a .l2,.mon.b .l1{background:var(--gn)}
@keyframes tA{0%,45%{outline-color:var(--rd)}50%,95%{outline-color:var(--gn)}100%{outline-color:var(--rd)}}
@keyframes tB{0%,45%{outline-color:var(--gn)}50%,95%{outline-color:var(--rd)}100%{outline-color:var(--gn)}}
@keyframes lab{0%,45%{opacity:1}50%,95%{opacity:0}100%{opacity:1}}

/* laycue: overlays */
.m-ovl{padding:14px;display:grid}
.m-ovl .frame{position:relative;border-radius:10px;background:var(--gr);overflow:hidden}
.m-ovl .speaker{position:absolute;left:50%;top:14%;width:22%;height:62%;transform:translateX(-50%);border-radius:40% 40% 8px 8px;background:#3a3835}
.m-ovl .spot{position:absolute;left:6%;right:6%;bottom:8%;height:20%;border:2px dashed var(--am);border-radius:6px;opacity:.7}
.m-ovl .ly,.m-ovl .nm{position:absolute;left:8%;bottom:11%;padding:6px 12px;border-radius:5px;background:var(--cr);color:var(--ink);font-weight:700;opacity:0}
.m-ovl .nm small{display:block;font-weight:400;font-size:10px}
.m-ovl .ly{animation:ovA 7s infinite}.m-ovl .nm{animation:ovB 7s infinite}
@keyframes ovA{0%{opacity:0;transform:translateY(10px)}8%,40%{opacity:1;transform:none}48%,100%{opacity:0}}
@keyframes ovB{0%,48%{opacity:0;transform:translateY(10px)}56%,90%{opacity:1;transform:none}100%{opacity:0}}
.m-ovl .chip{animation:ovB 7s infinite}

/* extensions: tabs, read, shop */
.m-tabs .tb{position:absolute;padding:8px 12px;border-radius:8px 8px 0 0;background:var(--gr);border:1px solid #3a3835;animation:chaos 2.8s ease-in-out infinite alternate}
.m-tabs .t1{left:6%;top:10%;--x:0%;--y:20%;--r:-3deg}.m-tabs .t2{left:40%;top:22%;--x:30%;--y:-10%;--r:4deg;animation-delay:-.5s}.m-tabs .t3{left:12%;top:44%;--x:10%;--y:30%;--r:2deg;animation-delay:-1s}.m-tabs .t4{left:52%;top:52%;--x:-30%;--y:10%;--r:-5deg;animation-delay:-1.5s}.m-tabs .t5{left:28%;top:72%;--x:20%;--y:-30%;--r:3deg;animation-delay:-2s}
.m-shop{padding:14px}
.m-shop .prod{position:absolute;left:5%;top:10%;width:44%;display:grid;gap:8px}
.m-shop .img{aspect-ratio:4/3;border-radius:8px;background:linear-gradient(135deg,#3a3835,#2a2927)}
.m-shop .prod b{height:8px;border-radius:4px;background:#3a3835}.m-shop .prod b+b{width:60%}
.m-shop .prod u{text-decoration:none;font-size:15px;color:var(--cr)}
.m-shop .pop{position:absolute;right:5%;top:10%;width:42%;padding:12px;border-radius:12px;background:var(--cr);color:var(--ink);display:grid;gap:8px;animation:popin 6s infinite}
.m-shop .pop small{opacity:.55}
.m-shop .pop p{margin:0;display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center}
.m-shop .pop em{font-style:normal;font-size:11px}
.m-shop .pop s{display:block;height:8px;border-radius:4px;background:#bdb7a8;transform-origin:left;width:var(--w);animation:grow 6s infinite}
.m-shop .pop .best s{background:var(--gn)}
.m-shop .pop i{font-style:normal;font-size:10px;padding:2px 7px;border-radius:99px;background:var(--gn)}
@keyframes popin{0%,8%{opacity:0;transform:translateX(24px)}18%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes grow{0%,20%{transform:scaleX(0)}45%,92%{transform:none}100%{transform:scaleX(0)}}
.m-read{padding:16px;display:grid;align-content:center;gap:12px}
.m-read .line{height:12px;border-radius:6px;background:#2a2927}.m-read .l2{width:70%}.m-read .l3{width:45%;background:#3a3835}
.m-read .scan{position:absolute;left:0;right:0;height:3px;background:var(--gn);box-shadow:0 0 18px var(--gn);animation:scan 3.6s ease-in-out infinite}
@keyframes scan{0%{top:6%}50%{top:90%}100%{top:6%}}
.m-read .chip{animation:winin 3.6s infinite}

/* vibecoded: idea pile, typing, build */
.m-idea .note{position:absolute;padding:14px 18px;border-radius:6px;background:var(--am);color:var(--ink);animation:chaos 3s ease-in-out infinite alternate}
.m-idea .n1{left:10%;top:14%;--x:0%;--y:10%;--r:-6deg}.m-idea .n2{left:42%;top:36%;--x:10%;--y:-10%;--r:5deg;background:var(--bl);animation-delay:-1s}.m-idea .n3{left:18%;top:58%;--x:-5%;--y:12%;--r:-3deg;background:var(--gn);animation-delay:-2s}
.m-type{display:grid;place-items:center;padding:20px}
.m-type .in{width:100%;padding:16px;border-radius:12px;background:var(--gr);display:flex;align-items:center}
.m-type .in span{display:inline-block;overflow:hidden;white-space:nowrap;width:0;animation:typing 6s steps(44) infinite}
.m-type .in i{width:2px;height:16px;background:var(--cr);margin-left:2px;animation:blink .8s infinite}
@keyframes typing{0%{width:0}60%,100%{width:44ch}}
@keyframes blink{50%{opacity:0}}
.m-build{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px}
.m-build .chat{display:flex;flex-direction:column;gap:8px;justify-content:center}
.m-build .chat span{padding:8px 10px;border-radius:10px;max-width:90%}
.m-build .u{background:var(--gr)}.m-build .a{background:var(--bl);color:#fff;align-self:flex-end}
.m-build .app{border-radius:12px;background:var(--cr);padding:10px;display:grid;gap:8px;align-content:start}
.m-build .ah{height:14px;width:50%;border-radius:4px;background:var(--ink)}
.m-build .ac{height:26px;border-radius:8px;background:#d9d2c0;opacity:0;animation:pop 6s infinite}
.m-build .c1{animation-delay:.4s}.m-build .c2{animation-delay:.9s;background:#bfe8d4}.m-build .c3{animation-delay:1.4s;background:#ffe2a8}
@keyframes pop{0%{opacity:0;transform:translateY(8px) scale(.96)}10%,88%{opacity:1;transform:none}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.ui *{animation-play-state:paused!important}}

/* hero: tagline + one primary action; skip intro; featured work */
.sub2{font-size:clamp(20px,2.6vw,28px);color:var(--ink,#111);max-width:none}
.sub3{margin:6px auto 0;font-size:clamp(13px,1.5vw,16px);color:var(--muted);transition:opacity .9s var(--ease) .75s,transform .9s var(--ease) .75s}
body:not(.ready) .sub3,body:not(.ready) .hero-cta{opacity:0;transform:translateY(16px)}
.hero-cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:16px 0 0;transition:opacity .9s var(--ease) .85s,transform .9s var(--ease) .85s}
.hero-cta .cta-btn{padding:12px 20px;font-size:12px;background:transparent;color:inherit}
.hero-cta .cta-btn.solid{background:#111110;color:#F1EBDD;border-color:#111110}
.bf-skip{position:fixed;right:20px;bottom:20px;z-index:3;font:12px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:#5b5a55;background:rgba(255,255,255,.6);border:1px solid rgba(14,14,13,.12);border-radius:99px;padding:9px 14px;cursor:pointer}
.bf-skip:hover{color:#111}
.feat-k{margin:0 0 14px}
.feat1{margin-bottom:36px;grid-template-columns:minmax(0,420px);justify-content:start}
@media(max-width:640px){.feat1{grid-template-columns:1fr}}

/* no sideways scroll on phones (testimonial deck pokes out) */
html,body{overflow-x:clip}

/* ---------- wordmark: serif italic + heavy grotesque ---------- */
.wm{display:inline-flex;align-items:baseline;gap:.3em;line-height:1}
.wm em{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;font-size:1.55em;letter-spacing:-.01em;text-transform:none}
.wm b{font-family:'Archivo',sans-serif;font-weight:800;font-size:.9em;letter-spacing:-.045em;text-transform:uppercase}
.wm u{text-decoration:none;opacity:.4}
.brand{position:relative}
.brand .wm{font-size:15px}
.wm-tip{position:absolute;left:0;top:calc(100% + 12px);display:grid;gap:3px;padding:12px 16px;border-radius:16px;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--line);box-shadow:0 18px 40px rgba(14,14,13,.12);opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .3s,transform .4s var(--ease);white-space:nowrap;text-transform:none;letter-spacing:0;font-weight:400;z-index:20}
.wm-tip small{font:400 11px var(--mono);color:var(--muted)}
.wm-tip em{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:26px;line-height:1.05;color:var(--ink)}
.brand:hover .wm-tip,.brand:focus-visible .wm-tip{opacity:1;transform:none}
.bf-name.wm{background:none;color:#14130f;padding:0;margin-top:14px;font-size:24px;justify-content:center}

/* ---------- intro: files pile up and fan out of the folder ---------- */
.bigfolder:disabled{pointer-events:none}
.bf-files{position:absolute;left:30%;width:40%;bottom:calc(var(--w) * .24);z-index:1;pointer-events:none}
.pf{position:absolute;left:0;bottom:0;width:100%;aspect-ratio:4/5;border-radius:10px;background:#fff;box-shadow:0 8px 20px rgba(0,30,90,.28);opacity:0;display:grid;place-items:center;align-content:center;gap:6px;padding:8px;overflow:hidden;transform:translateY(-420%) rotate(0deg) scale(.85);transition:transform .9s cubic-bezier(.34,1.35,.64,1),opacity .25s}
.pf.in{opacity:1;transform:translate(var(--x),var(--y)) rotate(var(--r))}
.pf small{position:absolute;left:0;right:0;bottom:6px;text-align:center;font:400 9px var(--mono);text-transform:uppercase;letter-spacing:.08em;opacity:.6}
.pf1{--x:-85%;--y:-18%;--r:-16deg;background:#111110;color:#F1EBDD}.pf1 svg{width:60%}
.pf2{--x:-52%;--y:-30%;--r:-10deg;background:#F1EBDD;color:#111}.pf2 b{font:800 22px Archivo,sans-serif}
.pf3{--x:-18%;--y:-38%;--r:-4deg;background:#e7e6e0;color:#111;align-content:start;padding-top:14px}.pf3 .ln{height:6px;width:100%;border-radius:3px;background:#9c9b94}.pf3 .blk2{width:100%;height:40%;border-radius:6px;background:linear-gradient(135deg,#c9c8c1,#6d6c66)}
.pf4{--x:18%;--y:-38%;--r:4deg;background:#1b1b1a;color:#fff}.pf4 .tri{width:0;height:0;border-left:18px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent}
.pf5{--x:52%;--y:-30%;--r:10deg;background:#f4f3ef;color:#111}.pf5 .wv{display:flex;gap:4px;align-items:center;height:44px}.pf5 .wv i{width:5px;border-radius:3px;background:#111;height:40%}.pf5 .wv i:nth-child(2){height:80%}.pf5 .wv i:nth-child(3){height:55%}.pf5 .wv i:nth-child(4){height:95%}
.pf6{--x:85%;--y:-18%;--r:16deg;background:#fffdf7;color:#111;align-content:start;padding-top:16px}.pf6 .ln{height:6px;width:100%;border-radius:3px;background:rgba(17,17,16,.2)}.pf6 .ln:nth-child(2){width:80%}.pf6 .ln:nth-child(3){width:55%}
.bf-hint{margin:6px 0 0;font:11px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:#8a8982;transition:opacity .4s}
#pre.loaded .bf-hint{opacity:0}
.bf-skip{display:none}

/* ---------- hero: Hire me reads as a button ---------- */
.hero-cta .cta-btn:not(.solid){background:#fff;color:#111110;border:1.5px solid #111110;box-shadow:0 3px 0 #111110}
.hero-cta .cta-btn:not(.solid):hover{transform:translateY(2px);box-shadow:0 1px 0 #111110}
.hero-cta .cta-btn.solid{box-shadow:0 3px 0 rgba(14,14,13,.35)}

/* ---------- featured banner ---------- */
.feat-banner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(20px,4vw,56px);align-items:center;margin-bottom:40px;padding:clamp(22px,4vw,56px);border-radius:28px;background:#111110;color:#F1EBDD;overflow:hidden;position:relative;transition:transform .5s var(--ease),box-shadow .5s}
.feat-banner:hover{transform:translateY(-3px);box-shadow:0 30px 70px rgba(14,14,13,.28)}
.fb-txt{display:grid;gap:10px;justify-items:start}
.fb-eye{font:12px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:#2FD18B}
.fb-word{font:800 clamp(44px,7vw,92px)/.9 'Archivo',sans-serif;letter-spacing:-.05em;text-transform:lowercase}
.fb-line{font-size:clamp(18px,2vw,24px);font-weight:600}
.fb-p{max-width:42ch;opacity:.65}
.fb-btn{margin-top:8px;background:#F1EBDD;color:#111110;border-color:#F1EBDD;display:inline-block}
.feat-banner .ui{box-shadow:0 0 0 1px #34322f}
@media(max-width:820px){.feat-banner{grid-template-columns:1fr}}

/* ---------- works: every category is a folder with a colour tab ---------- */
.work-block{--c:#9a998f;--t:#111110;position:relative;margin-top:clamp(64px,8vw,96px);padding:clamp(18px,2.6vw,34px);border-radius:0 26px 26px 26px;background:color-mix(in srgb,var(--c) 9%,#fff);border:1.5px solid color-mix(in srgb,var(--c) 55%,#fff)}
.work-block[data-block=products]{--c:#2E8BFF;--t:#fff}
.work-block[data-block=web]{--c:#FFB31A}
.work-block[data-block=video]{--c:#FF4D2E;--t:#fff}
.work-block[data-block=voice]{--c:#2FD18B}
.work-block>h2.blk{position:absolute;left:-1.5px;bottom:100%;margin:0 0 -1.5px;padding:11px 24px 10px;border-radius:16px 16px 0 0;background:var(--c);color:var(--t);font-size:12px}
.work-block>h2.blk::before,.work-block>h2.blk::after{content:none}
.cats .folder:nth-child(1){--c:#2E8BFF}.cats .folder:nth-child(2){--c:#FFB31A}.cats .folder:nth-child(3){--c:#FF4D2E}.cats .folder:nth-child(4){--c:#2FD18B}
.pf1{--x:-120%;--y:-6%;--r:-20deg}.pf2{--x:-76%;--y:-22%;--r:-12deg}.pf3{--x:-26%;--y:-34%;--r:-4deg}.pf4{--x:26%;--y:-34%;--r:4deg}.pf5{--x:76%;--y:-22%;--r:12deg}.pf6{--x:120%;--y:-6%;--r:20deg}
.feat-banner .ui{display:block}.feat-banner .ui-bar{display:flex}.feat-banner .ui-body{display:block}.feat-banner .mb,.feat-banner .mwin,.feat-banner .chip{display:block}

/* ---------- taste pass: flatter surfaces, fewer strokes, calmer controls ---------- */
.obs-ico{width:22px;height:22px;border-radius:50%;vertical-align:middle;margin-right:8px;display:inline-block}
.fb-eye{display:flex;align-items:center}
.lc-eyebrow{display:flex;align-items:center;justify-content:center}
.work-block{border:0}
.ps-card{border:0;background:rgba(255,255,255,.7)}
.pf{border-top:0}

/* hero buttons: solid dark and soft white, no outlines */
.hero-cta .cta-btn.solid{box-shadow:0 10px 24px rgba(14,14,13,.18)}
.hero-cta .cta-btn:not(.solid){background:#fff;color:#111110;border:0;box-shadow:0 1px 2px rgba(14,14,13,.08),0 10px 24px rgba(14,14,13,.1)}
.hero-cta .cta-btn:not(.solid):hover{transform:translateY(-1px);box-shadow:0 1px 2px rgba(14,14,13,.08),0 14px 30px rgba(14,14,13,.14)}

/* play button: one solid pill, dark disc with a centred triangle */
.pillplay{height:48px;gap:10px;padding:0 20px 0 6px;font:600 15px/1 var(--body);color:#111110;background:#F4F3EF;border-radius:999px;box-shadow:0 10px 24px rgba(0,0,0,.25);text-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.pillplay::before{content:"";width:36px;height:36px;margin:0;border:0;border-radius:50%;background:#111110 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 6.5v11l9-5.5z'/%3E%3C/svg%3E") center/16px no-repeat}
.pv-yap .pillplay{font-size:14px;height:42px;padding:0 16px 0 5px}.pv-yap .pillplay::before{width:32px;height:32px}
.vid-frame.voicef{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
.voicef .wave{height:clamp(44px,9vw,100px)}
.voicef .pillplay{position:static;translate:none}

.app-shelf .tags,.folder .tags{opacity:1;transform:none}
.nav.on-dark .brand i{background:var(--bg)}
/* reel windows: fill their column (max 560px) instead of shrinking to the waveform */
.sets{grid-template-columns:minmax(0,560px)}
.wnd{justify-items:stretch}
.wnd .win{width:100%}
.wnd figcaption{text-align:left}
.brand>span:first-child{white-space:nowrap}
@media(max-width:520px){.icon-btn.yt span{display:none}.nav{gap:8px}.brand .pill{display:none}}
/* folder containers: tinted back panel, three across on the products page */
.folder .fdr-back,.folder .fdr-back::before{background:color-mix(in srgb,var(--c,#9a998f) 24%,#e6e5df)}
.pockets.prods{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
/* product cards: the description waits inside the frosted file front, rises out of it on hover */
.app-body p{filter:blur(3px);opacity:.7;transform:translateY(78px);transition:transform .75s var(--ease),filter .5s var(--ease),opacity .5s var(--ease)}
.app:hover .app-body p,.app:focus-visible .app-body p{filter:none;opacity:1;transform:none}
@media(hover:none){.app-body p{filter:none;opacity:1;transform:none}}

/* intro files: poured in one by one, falling with gravity and settling softly (keyframes, no springy transition) */
.pf{transition:none;opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r));will-change:transform,opacity}
.pf.in{opacity:1;transform:translate(var(--x),var(--y)) rotate(var(--r));animation:pour 1.5s both}
@keyframes pour{
  0%{opacity:0;transform:translate(calc(var(--x) * .35),-360%) rotate(calc(var(--r) * -2.4)) scale(.94);animation-timing-function:cubic-bezier(.5,0,.85,.45)}
  14%{opacity:1}
  62%{opacity:1;transform:translate(var(--x),calc(var(--y) + 7%)) rotate(calc(var(--r) * 1.18)) scale(1);animation-timing-function:cubic-bezier(.2,.7,.3,1)}
  100%{opacity:1;transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(1)}
}

/* ---------- thought pages: own address, voice note, readable column, signup ---------- */
.tp-head h1{max-width:20ch;font-size:clamp(34px,6vw,76px)}
.tp-meta{font:400 12px var(--mono);text-transform:uppercase;color:var(--muted);letter-spacing:.04em}
.tp-meta span{opacity:.5;margin:0 .3em}
.tp-col{max-width:680px;margin:0 auto;padding:0 var(--pad) clamp(48px,8vw,96px)}
.tp-col .rd-voice{margin:32px 0 40px}
.tp-body{font-size:clamp(18px,2vw,21px);line-height:1.75}
.tp-body p,.tp-body ul,.tp-body ol,.tp-body figure,.tp-body blockquote,.tp-body pre,.tp-video{margin:0 0 1.3em}
.tp-body h2{font-size:clamp(26px,3.4vw,36px);letter-spacing:-.03em;line-height:1.1;margin:1.8em 0 .5em}
.tp-body h3{font-size:1.2em;margin:1.6em 0 .4em}
.tp-body a{text-decoration:underline;text-underline-offset:3px}
.tp-body ul,.tp-body ol{padding-left:1.3em}
.tp-body blockquote{border-left:3px solid var(--ink);padding-left:1em;font-size:1.1em}
.tp-body img{width:100%;height:auto;border-radius:16px}
.tp-body figcaption{font:12px var(--mono);color:var(--muted);margin-top:8px}
.tp-body pre{background:#1b1b1b;color:#eee;padding:16px;border-radius:12px;overflow-x:auto;font:14px/1.5 var(--mono)}
.tp-body code{font-family:var(--mono);font-size:.9em}
.tp-body hr{border:0;border-top:1px solid var(--line);margin:2em 0}
.tp-video{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden}
.tp-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.tp-mark{display:block;height:1px}
.tp-sub{margin:56px 0;padding:clamp(22px,4vw,36px);border-radius:24px;background:#1b1b1b;color:#fff;display:grid;gap:12px}
.tp-sub h2{font-size:clamp(24px,3vw,32px);letter-spacing:-.03em}
.tp-sub p{margin:0;color:#b8b7b0}
.tp-sub .tp-fine{font:12px var(--mono);color:#8d8c85}
.tp-more h2{font:400 12px var(--mono);text-transform:uppercase;color:var(--muted);margin-bottom:12px}
@media(max-width:560px){.tp-more .list a{grid-template-columns:1fr auto}.tp-more .list .d{display:none}}
.empty{color:var(--muted);font-size:18px;padding:24px 0}
.tpage.playing .tape .disc{animation-play-state:running}
.tpage.playing .tape .pp{width:12px;height:16px;margin:-8px 0 0 -6px;border:0;border-left:4px solid #161615;border-right:4px solid #161615}
.tpage.playing .tp-top .rec{background:#ff4a3d;animation:blink 1.1s steps(1) infinite}
.tpage.playing .bubble{opacity:0}
.nl-soft{position:fixed;left:50%;bottom:20px;z-index:40;translate:-50% 0;max-width:min(520px,calc(100% - 24px));display:flex;align-items:center;gap:12px;padding:12px 14px 12px 18px;border-radius:999px;background:#1b1b1b;color:#fff;box-shadow:0 18px 40px rgba(14,14,13,.3);opacity:0;transform:translateY(16px);transition:opacity .5s,transform .6s var(--ease)}
.nl-soft[hidden]{display:none}
.nl-soft.show{opacity:1;transform:none}
.nl-soft span{color:#b8b7b0;font-size:14px}
.nl-soft .go{border:0;border-radius:999px;background:#F4F3EF;color:#111;font:600 14px var(--body);padding:10px 16px;cursor:pointer}
.nl-soft .x{border:0;background:none;color:#8d8c85;font-size:20px;cursor:pointer;line-height:1;padding:0 4px}
@media(max-width:560px){.nl-soft span{display:none}}