/* bryanlee.net. Built from the converge prototype in design/. */
/* Fonts: Zodiak (ITF Free Font License, from fontshare.com) and Libre Franklin (SIL Open Font License 1.1, from fonts.google.com). Hosted here, so pages never wait on another server. Each Zodiak file is one fixed weight, so it is declared for every weight. */
@font-face{font-family:'Zodiak';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/zodiak-bold.woff2) format('woff2')}
@font-face{font-family:'Zodiak';font-style:italic;font-weight:100 900;font-display:swap;src:url(/fonts/zodiak-bold-italic.woff2) format('woff2')}
@font-face{font-family:'Zodiak Regular';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/zodiak-regular.woff2) format('woff2')}
@font-face{font-family:'Libre Franklin';font-style:italic;font-weight:100 900;font-display:swap;src:url(/fonts/franklin-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Libre Franklin';font-style:italic;font-weight:100 900;font-display:swap;src:url(/fonts/franklin-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Libre Franklin';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/franklin-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Libre Franklin';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/franklin-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
html{--display:'Zodiak',Georgia,serif;--display-light:'Zodiak Regular',Georgia,serif;--text:'Libre Franklin',system-ui,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{background:#f7f6f2;-webkit-text-size-adjust:100%}
body{min-height:100vh}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button,input{font:inherit;color:inherit}
img{max-width:100%}
#site{--bg:#f7f6f2;--ink:#111;--muted:#6c695f;--rule:#d9d6ce;--acc:#ff4f00;--soft:rgba(17,17,17,.045);container-type:inline-size;min-height:100vh}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}.pg-demo :focus-visible{outline-color:#16181d}.ix-name:focus{outline:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important}}

/* ---------- the Index (locked in round 1) ---------- */
.ix{font-family:var(--text);background:var(--bg);color:var(--ink);min-height:100vh;padding:26px 44px 80px;position:relative;transition:background-color .55s ease,color .55s ease}
.ix ::selection{background:var(--ink);color:var(--bg)}
.ix-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;font-size:13px;font-weight:550;border-bottom:1px solid var(--ink);padding-bottom:12px;transition:border-color .55s}
.ix-top nav{display:flex;gap:26px}
.ix-top>:last-child{justify-self:end;text-align:right}
.ix-top a:hover{opacity:.6}
.ix-hero{display:grid;grid-template-columns:1.25fr 1fr;gap:48px;align-items:end;padding:56px 0 64px;position:relative}
.ix-name{font-family:var(--display);font-weight:400;font-size:clamp(84px,15.5cqi,212px);line-height:.82;letter-spacing:-.02em;height:1.66em;display:flex;flex-direction:column;justify-content:flex-end;white-space:nowrap;position:relative}
.ix-line{display:block;overflow:hidden;padding:.1em .1em .26em 0;margin:-.1em 0 -.26em}   /* room for ascenders and the y's tail; the margins keep the layout */
.ix-line>span{display:inline-block;position:relative}
/* The home page name is printed in the apps' inks (--i1 to --i5). Each ink slides its own way as the mouse moves (--mx, --my from src/app.js), a glow in the inks follows the cursor over the letters (--gx, --gy, --ig), and the inks drift as the page scrolls. */
@property --ink-sx{syntax:'<length>';inherits:true;initial-value:0px}
.ix-name.inked .ix-line>span{padding:.3em .1em;margin:-.3em -.1em;color:transparent;-webkit-background-clip:text;background-clip:text;background-color:var(--ink);background-repeat:no-repeat;background-size:100% 100%,4em 2.6em,4em 2.6em,4em 2.6em,4em 2.6em,4em 2.6em;background-position:0 0,calc(var(--mx,0em) * 1.5 + var(--ink-sx)) calc(var(--my,0em) * 1.2 - var(--ly,0em)),calc(var(--mx,0em) * -1.1 + var(--ink-sx)) calc(var(--my,0em) * 1.5 - var(--ly,0em)),calc(var(--mx,0em) * .8 + var(--ink-sx)) calc(var(--my,0em) * -1.2 - var(--ly,0em)),calc(var(--mx,0em) * -1.4 + var(--ink-sx)) calc(var(--my,0em) * -.9 - var(--ly,0em)),calc(var(--mx,0em) * 1.1 + var(--ink-sx)) calc(var(--my,0em) * -1.4 - var(--ly,0em));background-image:radial-gradient(.9em .7em at var(--gx,-9em) calc(var(--gy,-9em) - var(--ly,0em)),var(--ig,transparent),transparent),radial-gradient(1.2em .85em at 10% 26%,color-mix(in srgb,var(--i1) 70%,transparent),transparent 70%),radial-gradient(1.2em .85em at 50% 22%,color-mix(in srgb,var(--i2) 70%,transparent),transparent 70%),radial-gradient(1.2em .85em at 84% 34%,color-mix(in srgb,var(--i3) 70%,transparent),transparent 70%),radial-gradient(1.2em .85em at 40% 72%,color-mix(in srgb,var(--i4) 70%,transparent),transparent 70%),radial-gradient(1.2em .85em at 14% 66%,color-mix(in srgb,var(--i5) 70%,transparent),transparent 70%)}   /* padding lets the inks reach the tops and tails of the letters */
.ix-name.inked .ix-line+.ix-line>span{--ly:.82em}   /* the second line reads the same sheet of ink, one line lower */
.ix-name.inked .ix-line>span::selection{color:var(--ink)}
@supports (animation-timeline:scroll()){@media (prefers-reduced-motion:no-preference){.ix-name.inked{animation:inkFlow linear both;animation-timeline:scroll(root);animation-range:0 700px}}}
@keyframes inkFlow{to{--ink-sx:-1em}}
.ix-intro{font-size:19px;line-height:1.45;max-width:29em}
.ix-intro a{border-bottom:1.5px solid var(--acc)}
.ix-loc{display:block;margin-top:18px;font-size:13px;color:var(--muted);transition:color .55s}
.ix-kick{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:650;color:var(--muted);margin-bottom:14px;transition:color .55s}
.ix-pitch{font-family:var(--display);font-size:40px;line-height:1.02;letter-spacing:-.02em;margin-bottom:14px;max-width:13em}
.ix-desc{font-size:17px;line-height:1.45;max-width:30em;opacity:.86}
.ix-cta{display:inline-block;align-self:flex-start;margin-top:20px;font-size:15px;font-weight:650;border-bottom:1.5px solid var(--acc);padding-bottom:2px}
.ix-cta.priv{border-bottom:0;opacity:.75}
.ix-sec{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;font-size:12px;text-transform:uppercase;letter-spacing:.1em;border-bottom:1px solid var(--ink);padding-bottom:10px;font-weight:650;transition:border-color .55s}
.ix-row{display:grid;grid-template-columns:44px 1.05fr 2fr 110px 56px minmax(20px,auto);align-items:baseline;gap:16px;padding:22px 0;border-bottom:1px solid var(--rule);position:relative;cursor:pointer;outline:none;transition:opacity .35s,border-color .55s}
.ix-row .n,.ix-row .yr{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;transition:color .55s}
.ix-row .nm{justify-self:start;font-family:var(--display);font-size:42px;line-height:1;white-space:nowrap;transition:transform .45s cubic-bezier(.22,1,.36,1);letter-spacing:-.02em}
.ix-row .ds{font-size:16px;line-height:1.4;opacity:.8}
.ix-row .st{font-size:12px;font-weight:650;white-space:nowrap}
.ix-row .st::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--muted);opacity:.55;margin-right:7px;vertical-align:1px}
.ix-row .st.live::before{background:var(--c);opacity:1}
.ix-row .ar{text-align:right;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.ix-row.on .nm{font-style:italic;transform:translateX(8px)}
.ix-row.on .ar{transform:translateX(5px)}
.ix-row:focus-visible{box-shadow:inset 3px 0 0 var(--c)}
.ix.dim .ix-row:not(.on){opacity:.36}
.ix-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;margin-top:88px}
.ix-cols li{padding:11px 0;border-bottom:1px solid var(--rule);display:flex;justify-content:space-between;gap:14px;font-size:15px;line-height:1.35;transition:border-color .55s}
.ix-cols li span{color:var(--muted);font-size:13px;flex:none;transition:color .55s}
.ix-foot{margin-top:96px;display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap}
.ix-foot p{font-size:13px;color:var(--muted);transition:color .55s}
.ix-thumb{position:absolute;right:150px;top:50%;width:260px;transform:translateY(-44%) rotate(-2.5deg) scale(.94);opacity:0;pointer-events:none;transition:opacity .22s,transform .35s cubic-bezier(.22,1,.36,1);z-index:4}
.ix-row.on .ix-thumb{opacity:1;transform:translateY(-50%) rotate(-2.5deg)}
@container (max-width:760px){
 .ix{padding:18px 18px 60px}
 .ix-top{display:flex;flex-wrap:wrap;justify-content:space-between;row-gap:10px}
 .ix-top nav{display:flex;order:3;width:100%;gap:18px}   /* phones keep the menu, on its own row */
 .ix-hero{grid-template-columns:1fr;gap:22px;padding:34px 0 40px}
 .ix-name{font-size:clamp(80px,28cqi,150px)}   /* "Bryan" is the widest line; 28cqi keeps it inside the margins */
 .ix-pitch{font-size:30px}
 .ix-row{grid-template-columns:30px 1fr auto;gap:6px 10px;padding:18px 0}
 .ix-row .n,.ix-row .nm{grid-row:1}
 .ix-row .st{grid-row:1;grid-column:3}
 .ix-row .ds{grid-row:2;grid-column:2/4;font-size:14px}
 .ix-row .yr,.ix-row .ar,.ix-thumb{display:none}
 .ix-row .nm{font-size:32px}
 .ix-cols{grid-template-columns:1fr;gap:32px;margin-top:56px}
 .ix-foot{margin-top:64px}
}

/* ---------- app mocks (drawn in code, fake data) ---------- */
.mk{container-type:inline-size;width:100%;font-family:var(--text);background:#fff;color:#16181d;border-radius:18px;padding:14px;font-size:13px;line-height:1.3;box-shadow:0 1px 0 rgba(0,0,0,.04),0 10px 28px -6px rgba(0,0,0,.14)}
.mk-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-weight:650;font-size:14px;margin-bottom:8px;color:#16181d}
.mk-h small{font-weight:500;color:#6b707a;font-size:11px;white-space:nowrap}
.mk-lab{display:flex;justify-content:space-between;font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:#6b707a;margin:10px 0 2px;font-weight:700}
.mk-row{display:flex;align-items:center;gap:8px;padding:7px 0;border-top:1px solid #f0f1f3}
.mk-row em{font-style:normal;color:#6b707a;font-size:11px;margin-left:auto;white-space:nowrap}
.mk-row b{font-variant-numeric:tabular-nums;min-width:52px;text-align:right}
.mk-av{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;color:#fff;flex:none}
.mk-foot{margin-top:8px;font-size:11px;font-weight:650;color:#17805a}
.mk-bar{height:6px;border-radius:3px;background:#f0f1f3;flex:1;overflow:hidden;min-width:30px}
.mk-bar i{display:block;height:100%;background:var(--c);transition:width .45s cubic-bezier(.22,1,.36,1)}
.mk-name{width:44%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-pill{font-size:10px;font-weight:700;padding:2px 6px;border-radius:99px;background:#fff0ec;color:#b5361d;white-space:nowrap}
.mk-chk{width:16px;height:16px;border-radius:5px;border:1.5px solid #c9ccd2;flex:none;display:grid;place-items:center;font-size:10px;color:#fff;transition:background .2s,border-color .2s}
.mk-chk.on{background:#5d8a63;border-color:#5d8a63}
.mk-done{text-decoration:line-through;color:#a0a4ab}
.mk-note{display:flex;gap:8px;align-items:flex-start;padding:8px 10px;border-radius:10px;background:#f4f6f1;margin-top:6px}
.mk-note i{width:8px;height:8px;border-radius:50%;margin-top:4px;flex:none;background:var(--c)}
.mk-board{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);aspect-ratio:1;border-radius:6px;overflow:hidden}
.mk-board span{display:grid;place-items:center;font-size:9.5cqi;line-height:1;font-family:'Apple Symbols','Segoe UI Symbol',serif}
.mk-board .lt{background:#efd9b6}.mk-board .dk{background:#b88a62}
.mk-board .hi.lt{background:#f3ec7a}.mk-board .hi.dk{background:#d6c24a}
.mk-board .w{color:#fff;text-shadow:0 0 1px #000,0 0 1px #000,0 1px 1px #000}
.mk-board .b{color:#1b1b1b}
.mk-rank{width:18px;color:#6b707a;font-weight:700;font-size:11px}
.mk-pos{color:#17805a}.mk-neg{color:#c0392b}


/* ---------- preview (the takeover) ---------- */
.tk{position:relative}
.tk .ix-right{min-height:var(--rh,0px);display:flex;flex-direction:column;justify-content:flex-end}
.tk-layers{position:absolute;inset:0;pointer-events:none;z-index:2}
.tk-lay{position:absolute;inset:0;overflow:hidden}
.tk-lay .ix{min-height:100%;transition:none}
.tk-lay .ix-line>span{transform:translateY(155%)}
.tk-lay.go .ix-line>span{animation:tkRise .95s cubic-bezier(.22,1,.36,1) var(--rise,0ms) both}
.tk-lay.go .ix-line+.ix-line>span{animation-delay:calc(var(--rise,0ms) + 70ms)}
.tk-lay .ix-right>*{opacity:0}
.tk-lay.go .ix-right>*{animation:tkUp .75s cubic-bezier(.22,1,.36,1) var(--rise2,0ms) both}
.tk-lay.go .ix-right>:nth-child(2){animation-delay:calc(var(--rise2,0ms) + 50ms)}
.tk-lay.go .ix-right>:nth-child(3){animation-delay:calc(var(--rise2,0ms) + 100ms)}
.tk-lay.go .ix-right>:nth-child(4){animation-delay:calc(var(--rise2,0ms) + 150ms)}
@keyframes tkRise{from{transform:translateY(155%)}to{transform:none}}
@keyframes tkUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.tk-float{position:fixed;left:0;top:0;width:300px;z-index:60;pointer-events:none;opacity:0;transition:opacity .2s;will-change:transform}
.tk-float.on{opacity:1}
.tk-card{animation:tkPop .5s cubic-bezier(.22,1,.36,1)}
.tk-card .mk{box-shadow:0 34px 60px -22px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.05)}
@keyframes tkPop{from{opacity:0;transform:scale(.9)}}


/* ---------- the app pages ---------- */
.tk-hint{display:inline-flex;align-items:center;gap:6px;margin:12px 0 0 8px;padding:7px 12px;border-radius:99px;background:#111;color:#fff;font:650 12px/1 var(--text);box-shadow:0 10px 22px -10px rgba(0,0,0,.55);animation:tkUp .4s .15s both}
.dt-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,450px);gap:56px;align-items:center;background:var(--soft);border-radius:28px;padding:52px 56px;margin:22px 0 84px}
.dt-howt{font-family:var(--display);font-size:clamp(28px,3cqi,42px);line-height:1.06;max-width:12em;margin-bottom:16px;letter-spacing:-.02em}
.dt-note{font-size:15px;line-height:1.5;max-width:26em}
.dt-nums li{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--rule);font-size:15px;line-height:1.35}
.dt-nums li:first-child{margin-top:6px}
.dt-nums li span{text-align:right;color:var(--muted)}
.dt-nums li span a{color:var(--ink);border-bottom:1.5px solid var(--acc)}
::view-transition-group(hx-title),::view-transition-group(hx-shot){animation-duration:.85s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
::view-transition-image-pair(hx-shot){isolation:isolate}
/* the card flies as the preview, then turns into the live demo near the end of the flight */
::view-transition-old(hx-shot){animation-duration:.3s;animation-delay:.32s;animation-fill-mode:both}
::view-transition-new(hx-shot){animation-duration:.35s;animation-delay:.28s;animation-fill-mode:both}
@container (max-width:900px){.dt-stage{grid-template-columns:1fr;gap:28px;padding:30px 22px;border-radius:22px}}
.ap-back{font-weight:650}
.ap-back:hover,.ap-all:hover{opacity:.6}
.ap-pitch{font-family:var(--display);font-size:clamp(30px,3.4cqi,46px);line-height:1.04;max-width:14em;letter-spacing:-.02em}
.ap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px}
.ap-p{font-size:17px;line-height:1.5;margin-top:14px;opacity:.9}
.ap-p a{border-bottom:1.5px solid var(--acc)}
.ap-next{margin-top:110px;display:flex;justify-content:space-between;align-items:end;gap:20px;border-top:1px solid var(--rule);padding-top:22px}
.ap-nx{display:flex;flex-direction:column;gap:8px}
.ap-nx span{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:650}
.ap-nx b{font-family:var(--display);font-weight:400;font-size:clamp(40px,7cqi,92px);line-height:1;letter-spacing:-.02em}
.ap-nx:hover b{font-style:italic}
.ap-all{font-size:14px;font-weight:650;border-bottom:1.5px solid var(--acc);padding-bottom:2px}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
/* ---------- demos ---------- */
.pg-demo{background:#fff;color:#16181d;border-radius:20px;overflow:hidden;box-shadow:0 1px 0 rgba(0,0,0,.04),0 28px 56px -28px rgba(0,0,0,.35),0 0 0 1px rgba(0,0,0,.06);font-family:var(--text);font-size:13px;line-height:1.3}
.pg-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid #eee;font-size:12px;color:#6b707a}
.pg-bar i{width:9px;height:9px;border-radius:50%;background:#e4e2dc}
.pg-bar span{margin-left:6px;font-weight:650;color:#333}
.pg-bar em{margin-left:auto;font-style:normal;font-weight:650;color:color-mix(in srgb,var(--c) 68%,#000)}
.pg-body{padding:16px}
.dm-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.dm-chips button,.dm-btn{border:1px solid #e3e5e8;background:#f7f8f9;border-radius:99px;padding:6px 11px;font-size:12px;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.dm-chips button:hover,.dm-btn:hover{border-color:var(--c);background:#fff}
.dm-btn.on{background:#16181d;border-color:#16181d;color:#fff}
.dm-form{display:flex;gap:6px;margin-top:10px}
.dm-form input{flex:1;min-width:0;border:1px solid #e3e5e8;border-radius:10px;padding:9px 11px;font-size:13px;outline:none;background:#fff;color:#16181d}
.dm-form input:focus{border-color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 18%,transparent)}
.dm-form button{border:0;border-radius:10px;background:#16181d;color:#fff;padding:0 13px;font-weight:650;font-size:12px;cursor:pointer}
.dm-msg{min-height:17px;margin-top:8px;font-size:12px;color:#6b707a}
.dm-msg.bad{color:#c2362f}.dm-msg.good{color:#146b45;font-weight:650}
.dm-hit{animation:dmHit .8s ease}
@keyframes dmHit{from{background:color-mix(in srgb,var(--c) 16%,transparent)}to{background:transparent}}
.dm-shake{animation:dmShake .36s}
@keyframes dmShake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
.dm-ok{margin-top:6px;font-size:11px;font-weight:650;color:#17805a}
.dt-who{display:flex;flex-direction:column;flex:1;min-width:0;line-height:1.25}.dt-who em{margin:1px 0 0}   /* the note sits under the name, like the real app */
.dt-delta{font-style:normal;font-size:10.5px;font-weight:650;color:#7c4dbd;background:#ece7f6;border-radius:99px;padding:2px 6px;min-width:60px;text-align:center;font-variant-numeric:tabular-nums}.dt-delta:empty{visibility:hidden}
.dh-opt{display:flex;align-items:center;gap:8px;width:100%;padding:8px 6px;border:0;border-top:1px solid #f0f1f3;background:none;cursor:pointer;text-align:left;font-size:13px;border-radius:0}
.dh-opt:hover{background:#fff6f3}
.dh-me{width:18px;height:18px;border-radius:50%;border:1.5px solid #d6d9de;display:grid;place-items:center;font-size:10px;color:#fff;flex:none;transition:background .2s,border-color .2s}
.dh-opt.sel .dh-me{background:#f0613f;border-color:#f0613f}
.dh-opt b{min-width:16px;text-align:right;font-variant-numeric:tabular-nums}
.dc-board{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);aspect-ratio:1;border-radius:8px;overflow:hidden;position:relative;container-type:inline-size;user-select:none}
.dc-sq{border:0;padding:0;display:grid;place-items:center;font:9.5cqi/1 'Apple Symbols','Segoe UI Symbol',serif;cursor:pointer;position:relative}
.dc-sq.lt{background:#efd9b6}.dc-sq.dk{background:#b88a62}
.dc-sq.sel.lt{background:#f3ec7a}.dc-sq.sel.dk{background:#d6c24a}
.dc-sq.last.lt{background:#e9e2a0}.dc-sq.last.dk{background:#c9b05a}
.dc-sq.tg::after{content:'';position:absolute;width:28%;height:28%;border-radius:50%;background:rgba(20,20,20,.24)}
.dc-sq.tg.cap::after{width:86%;height:86%;background:transparent;border:4px solid rgba(20,20,20,.24)}
.dc-sq .w,.dc-ghost.w{color:#fff;text-shadow:0 0 1px #000,0 0 1px #000,0 1px 1px #000}
.dc-sq .b{color:#1b1b1b}
.dc-ghost{position:absolute;display:grid;place-items:center;font:9.5cqi/1 'Apple Symbols','Segoe UI Symbol',serif;z-index:3;pointer-events:none}
.dc-msg{min-height:36px;margin-top:10px;font-size:13px;line-height:1.38;color:#3a3833}
.dc-msg.bad{color:#b3261e}.dc-msg.good{color:#146b45;font-weight:650}
.dc-foot{display:flex;justify-content:space-between;align-items:center;margin-top:4px;font-size:11px;color:#6b707a}
.dn-item{display:flex;align-items:center;gap:9px;width:100%;padding:8px 2px;border:0;border-top:1px solid #f0f1f3;background:none;cursor:pointer;text-align:left;font-size:13px}
.dn-item span{transition:color .2s}
.dn-item.done span:last-child{text-decoration:line-through;color:#6b707a}
.dn-dig p{display:flex;gap:8px;align-items:flex-start;padding:7px 0;border-top:1px solid #f0f1f3}
.dn-dig i{width:8px;height:8px;border-radius:50%;background:var(--c);margin-top:4px;flex:none}
.dn-dig small{display:block;margin-top:6px;font-size:11px;color:#6b707a}
.ds-bet{border:1px solid #e8e9ee;border-radius:12px;padding:12px;margin-top:4px;background:#fafbff}
.ds-q{font-size:14px;font-weight:700;margin-bottom:4px}
.ds-sides{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px;font-size:12px}
.ds-sides div{background:#fff;border:1px solid #eceef3;border-radius:10px;padding:8px}
.ds-sides b{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#6b707a;margin-bottom:3px}
.ds-act{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;align-items:center}
.ds-coin{width:46px;height:46px;position:relative;transform-style:preserve-3d;margin-left:auto}
.ds-coin span{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:15px;color:#6b4e00;background:radial-gradient(circle at 35% 30%,#ffe79a,#f5c542 55%,#c99a1d);box-shadow:inset 0 0 0 3px rgba(255,255,255,.4);backface-visibility:hidden}
.ds-coin span+span{transform:rotateY(180deg)}
.ds-lb .mk-row b{min-width:60px}
.ds-lb .mk-row small{font-size:11px;font-weight:650;margin-left:6px}


/* ---------- hover intent: a line fills along the row while you rest on it ---------- */
.ix-row::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left center;transition:transform .18s ease;pointer-events:none}
.ix-row.pend::after{transform:scaleX(1);transition:transform .5s linear}
.ix-row.pend .nm{transform:translateX(8px)}
.ix.dim .ix-row.pend{opacity:.85}
.ix-row:focus-visible{outline:none}
.ix-hi{font-family:var(--display);font-size:clamp(40px,7cqi,92px);line-height:1;letter-spacing:-.02em}
.ix-hi:hover{font-style:italic}
.ix-else{text-align:right;font-size:13px;color:var(--muted);line-height:1.7}
.ix-else a{color:var(--ink);border-bottom:1px solid var(--rule)}
.ix-else a:hover{border-color:var(--ink)}
.ix-cols li a:hover{text-decoration:underline;text-underline-offset:3px}
.ix-cols .more{display:block;margin-top:12px;font-size:13px;font-weight:650}

/* ---------- pages: writing, an essay, podcast, about ---------- */
.pg-hero{padding:56px 0 52px}
.pg-title{font-family:var(--display);font-weight:400;font-size:clamp(min(64px,16cqi),11cqi,150px);line-height:.86;letter-spacing:-.02em}
.pg-lede{font-size:19px;line-height:1.45;max-width:32em;margin-top:34px}
.pg-lede a{border-bottom:1.5px solid var(--acc)}
.bl-row{display:grid;grid-template-columns:110px 1fr 90px;gap:16px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--rule)}
.bl-row .d,.bl-row .m{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.bl-row .m{text-align:right}
.bl-row b{display:block;font-family:var(--display);font-weight:400;font-size:32px;line-height:1.05;transition:transform .4s cubic-bezier(.22,1,.36,1);letter-spacing:-.02em}
.bl-row p{font-size:15px;line-height:1.45;opacity:.75;margin-top:8px;max-width:44em}
.bl-row:hover b{font-style:italic;transform:translateX(6px)}
.post-hero{padding:56px 0 44px;max-width:900px}
.post-title{font-family:var(--display);font-weight:400;font-size:clamp(40px,6.2cqi,82px);line-height:.94;letter-spacing:-.02em}
.post-meta{margin-top:20px;font-size:13px;color:var(--muted)}
.post-meta a{color:var(--ink);border-bottom:1px solid var(--rule)}
.prose{font-size:19px;line-height:1.66;max-width:38em;overflow-wrap:break-word}
.prose p{margin:0 0 1.1em}
.prose h2{font-family:var(--display);font-weight:400;font-size:clamp(28px,8.5cqi,38px);line-height:1.05;margin:1.6em 0 .5em;letter-spacing:-.02em}
.prose h3{font-size:21px;font-weight:650;line-height:1.3;margin:1.6em 0 .5em}
.prose h4{font-size:17px;font-weight:650;margin:1.4em 0 .4em}
.prose a{border-bottom:1.5px solid var(--acc)}
.prose ul,.prose ol{margin:0 0 1.1em 1.3em}
.prose ul{list-style:disc}.prose ol{list-style:decimal}
.prose li{margin:.35em 0}
.prose blockquote{border-left:3px solid var(--ink);padding:.1em 0 .1em 1em;margin:1.4em 0;font-family:var(--display);font-size:27px;line-height:1.25;letter-spacing:-.02em}
.prose blockquote p{margin:0}.prose blockquote p+p{margin-top:.6em}.prose blockquote strong{font-weight:inherit;font-style:italic}
.prose img{display:block;width:auto;max-width:100%;max-height:80vh;height:auto;border-radius:10px;margin:1.6em auto;background:var(--soft)}   /* small photos keep their size instead of stretching */
.prose figure{margin:1.6em 0}
.prose figure img{margin:0}
.prose figcaption,.prose figcaption p{font-size:13px;color:var(--muted);margin-top:8px}
.prose hr{border:0;border-top:1px solid var(--rule);margin:2em 0}
.prose strong{font-weight:650}
.prose .embed{position:relative;aspect-ratio:16/9;margin:1.6em 0;border-radius:10px;overflow:hidden;background:#000}
.prose .embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:80px;border-top:1px solid var(--ink);padding-top:22px}
.post-nav a{display:block}
.post-nav span{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:650;margin-bottom:8px}
.post-nav b{font-family:var(--display);font-weight:400;font-size:28px;line-height:1.1;letter-spacing:-.02em}
.post-nav a:hover b{font-style:italic}
.post-nav .nx{text-align:right}
.ep{display:grid;grid-template-columns:110px 1fr minmax(300px,420px);gap:24px;align-items:start;padding:26px 0;border-bottom:1px solid var(--rule);scroll-margin-top:24px}
.ep .d{font-size:13px;color:var(--muted)}
.ep b{display:block;font-family:var(--display);font-weight:400;font-size:34px;line-height:1.05;letter-spacing:-.02em}
.ep p{font-size:15px;line-height:1.5;opacity:.8;margin-top:8px}
.ep iframe{width:100%;height:152px;border:0;border-radius:12px}
.ab-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:48px}
.ab-p{font-size:18px;line-height:1.6;margin-top:14px;max-width:30em}
.ab-p+.ab-p{margin-top:12px}
.ab-p a{border-bottom:1.5px solid var(--acc)}
.ab-list li{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--rule);font-size:15px;line-height:1.4}
.ab-list li span{color:var(--muted);font-size:13px;text-align:right}
.ab-list li a{border-bottom:1px solid var(--rule)}
.lost{min-height:70vh;display:flex;flex-direction:column;justify-content:center}
@container (max-width:760px){
 .bl-row{grid-template-columns:1fr auto;gap:4px 12px}.bl-row .d{grid-column:1}.bl-row .m{grid-column:2;grid-row:1}.bl-row>div{grid-column:1/-1}
 .bl-row b{font-size:26px}
 .prose{font-size:17.5px}
 .post-nav{grid-template-columns:1fr}.post-nav .nx{text-align:left}
 .ep{grid-template-columns:1fr;gap:10px}
 .ab-grid{grid-template-columns:1fr;gap:34px}
 .ap-grid{grid-template-columns:1fr;gap:28px}
 .ap-next{margin-top:70px}
 .ix-else{text-align:left}
}

/* ---------- four columns, fun facts, the newsletter card ---------- */
.ix-cols{grid-template-columns:repeat(4,1fr);gap:36px}
.ix-facts{margin-top:100px}
.ix-facts ol{display:grid;grid-template-columns:repeat(4,1fr);gap:36px;margin-top:22px}
.ix-facts li{display:flex;flex-direction:column;gap:12px}
.ix-facts b{font-family:var(--display);font-weight:400;font-size:46px;line-height:.9;color:var(--muted);font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.02em}
.ix-facts p{font-size:15.5px;line-height:1.45;max-width:22em}
.ix-foot{margin-top:76px}
.ix-else p+p{margin-top:2px}
.nl{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,460px);gap:48px;align-items:center;margin-top:88px;padding:44px 48px;border-radius:28px;background:var(--soft)}
.nl-kick{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:650;color:var(--muted)}
.nl-title{font-family:var(--display);font-size:clamp(32px,4cqi,52px);line-height:1.02;margin:12px 0 14px;max-width:13em;letter-spacing:-.02em}
.nl-note{font-size:15px;line-height:1.5;color:var(--muted);max-width:30em}
.nl-note a{color:var(--ink);border-bottom:1.5px solid var(--acc)}
.nl-box{position:relative;background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 1px 0 rgba(0,0,0,.04),0 18px 40px -24px rgba(0,0,0,.35)}
.nl-box iframe{position:relative;display:block;width:100%;height:320px;border:0;background:transparent}
.nl-box::before{content:'Loading the signup form…';position:absolute;inset:0;display:grid;place-items:center;font-size:14px;color:#6b707a}   /* shows until Substack's form paints over it */
@container (max-width:1100px){.ix-cols{grid-template-columns:repeat(2,1fr);gap:40px 36px}.ix-facts ol{grid-template-columns:repeat(2,1fr)}}
@container (max-width:900px){.nl{grid-template-columns:1fr;gap:24px;padding:28px 22px;border-radius:22px}}
@container (max-width:760px){.ix-cols{grid-template-columns:1fr}.ix-facts{margin-top:64px}.ix-facts ol{grid-template-columns:1fr;gap:18px}.ix-facts li{flex-direction:row;gap:14px;align-items:baseline}.ix-facts b{font-size:30px;flex:none;width:1.9em}   /* one fixed column, so every line of text starts at the same spot */}

/* ---------- case studies: each app's page ---------- */
.cs-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;border-top:1px solid var(--ink);padding-top:16px;margin-bottom:28px}
.cs-meta dt{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:650;margin-bottom:6px}
.cs-meta dd{font-size:15px;line-height:1.4}
.cs-meta a{border-bottom:1.5px solid var(--acc)}
.cs-show{position:relative;border-radius:32px;background:var(--soft);padding:72px 32px 0;display:flex;justify-content:center;align-items:flex-end;gap:40px;overflow:hidden;min-height:560px}
.cs-show .cs-phone:nth-child(odd){margin-bottom:-90px}
.cs-show .cs-phone:nth-child(even){margin-bottom:-30px;width:300px}
.cs-show .cs-browser{flex:none;width:min(820px,76%);margin-bottom:-48px}
.cs-show .cs-browser+.cs-phone{margin:0 0 -70px -180px;width:250px;z-index:1}
.cs-cap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 20px;font-size:13px;color:var(--muted);margin-top:14px}
.cs-phone{position:relative;width:270px;aspect-ratio:390/844;flex:none;border-radius:16.3%/7.5%;background:#0d0d0d;padding:10px;box-shadow:0 50px 90px -40px rgba(0,0,0,.65),inset 0 0 0 1.5px #2b2b2b;transform:rotate(var(--r,0deg)) translateY(var(--y,0px))}
.cs-phone::before{content:'';position:absolute;top:3.25%;left:50%;width:31%;aspect-ratio:7/2;border-radius:99px;background:#0d0d0d;transform:translateX(-50%);z-index:2}
.cs-screen{height:100%;border-radius:14%/6.2%;container-type:inline-size;overflow:hidden;background:var(--sb,#fff);position:relative;color:#16181d;padding-top:11.5%}
.cs-screen::after{content:'9:41';position:absolute;top:4.6%;left:13%;font:600 4.6cqi/1 -apple-system,BlinkMacSystemFont,var(--text);color:#111;letter-spacing:-.01em}
.cs-screen::before{content:'';position:absolute;top:4.4%;right:10%;width:18.4cqi;height:4.4cqi;background:no-repeat right center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 11'%3E%3Cg fill='%23111'%3E%3Crect x='0' y='7' width='3' height='4' rx='1'/%3E%3Crect x='4.5' y='5' width='3' height='6' rx='1'/%3E%3Crect x='9' y='2.5' width='3' height='8.5' rx='1'/%3E%3Crect x='13.5' y='0' width='3' height='11' rx='1'/%3E%3Crect x='24' y='.5' width='19' height='10' rx='3' fill='none' stroke='%23111' stroke-opacity='.4'/%3E%3Crect x='25.5' y='2' width='14' height='7' rx='1.5'/%3E%3Crect x='43.6' y='3.6' width='1.6' height='3.8' rx='.8' fill-opacity='.4'/%3E%3C/g%3E%3C/svg%3E")}
.cs-screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.cs-screen.nobar{padding-top:0}.cs-screen.nobar::before,.cs-screen.nobar::after{content:none}
.cs-screen.dark::after{color:#fff}.cs-screen.dark::before{filter:invert(1)}
.cs-browser{width:min(880px,100%);border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 40px 80px -40px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.06);color:#16181d}
.cs-bar{display:flex;align-items:center;gap:7px;height:36px;padding:0 14px;background:#f2f2f0;border-bottom:1px solid #e6e5e1;font-size:12px;color:#6b707a}
.cs-bar i{width:10px;height:10px;border-radius:50%;background:#dcdad4}
.cs-bar span{margin-left:10px;padding:3px 10px;border-radius:6px;background:#fff;min-width:220px}
.cs-browser img{display:block;width:100%;height:auto}
.cs-card{width:min(420px,100%);border-radius:22px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.45)}
.cs-card .mk{border-radius:22px;box-shadow:none}
.sx-lab{font-size:12px;line-height:1.45;color:#5c616b;margin:2px 0 8px}
.sx-row{display:grid;grid-template-columns:40px 46px 1fr 46px 40px;align-items:center;gap:8px;padding:8px 0;border-top:1px solid #f0f1f3;font-size:13px}
.sx-row b{font-variant-numeric:tabular-nums;text-align:center;font-weight:650}
.sx-row span:last-child{text-align:right}
.sx-row i{height:2px;border-radius:2px;background:#16181d}
.sx-row i.open{background:none;border-top:2px dashed #c9ccd1}
.sx-row b.o{color:#6b707a;font-weight:500;font-size:11.5px}
.sx-cut{margin:12px 0 2px;font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#6b707a}
/* a drawn phone screen (for private apps and for states a screenshot cannot reach) */
.sc{height:100%;display:flex;flex-direction:column;font-family:var(--text);font-size:13px;line-height:1.3;background:var(--scr,#f6f6f3)}
.sc-status{display:flex;justify-content:space-between;padding:14px 22px 0 26px;font-size:12px;font-weight:650;height:44px}
.sc-head{padding:14px 18px 10px;font-size:24px;font-weight:750;letter-spacing:-.02em}
.sc-head small{display:block;font-size:12px;font-weight:550;color:#6b707a;letter-spacing:0;margin-top:3px}
.sc-body{padding:0 12px 16px;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.sc-body .mk{box-shadow:0 1px 0 rgba(0,0,0,.03),0 6px 16px -8px rgba(0,0,0,.12)}
.sc-tabs{margin-top:auto;display:flex;justify-content:space-around;padding:10px 6px 22px;border-top:1px solid rgba(0,0,0,.06);background:rgba(255,255,255,.7);font-size:10px;font-weight:650;color:#6b707a}
.sc-tabs span.on{color:#16181d}
.cs-story{margin-top:120px}
.cs-story-in{display:grid;grid-template-columns:1.2fr 1fr;gap:56px;margin-top:22px;align-items:start}
.cs-lead{font-family:var(--display-light);font-size:clamp(30px,3.3cqi,46px);line-height:1.08;letter-spacing:-.01em}
.cs-body p{font-size:17px;line-height:1.6;opacity:.9}
.cs-body p+p{margin-top:14px}
.cs-idea{margin:130px 0 0;padding:0 0 0 2px}
.cs-idea .cs-kick,.cs-kick{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:650;color:var(--muted)}
.cs-idea blockquote{font-family:var(--display);font-size:clamp(44px,6.2cqi,92px);line-height:.98;letter-spacing:-.02em;margin-top:18px;max-width:15em}
.cs-idea blockquote em{font-style:italic;color:var(--acc)}
.cs-features{margin-top:130px}
.cs-feat{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:center;padding:64px 0;border-bottom:1px solid var(--rule)}
.cs-feat.flip .cs-feat-copy{order:2}
.cs-n{display:block;font-family:var(--display);font-size:56px;line-height:1;color:var(--muted);letter-spacing:-.02em}
.cs-feat h2{font-family:var(--display);font-weight:400;font-size:clamp(34px,3.6cqi,52px);line-height:1;letter-spacing:-.02em;margin:14px 0 18px}
.cs-what{font-size:18px;line-height:1.55;max-width:30em}
.cs-why{font-size:15px;line-height:1.55;color:var(--muted);max-width:32em;margin-top:14px;padding-left:14px;border-left:2px solid var(--acc)}
.cs-feat-vis{border-radius:28px;background:var(--soft);min-height:440px;display:flex;align-items:center;justify-content:center;gap:28px;padding:48px 24px;overflow:hidden}
.cs-feat-vis .cs-phone{width:240px}
.cs-try{margin-top:120px}
.cs-process,.cs-look{margin-top:120px}
.cs-proc-lead{font-family:var(--display-light);font-size:clamp(30px,3.3cqi,46px);line-height:1.08;max-width:22em;margin:22px 0 8px}
.cs-round{padding:36px 0;border-bottom:1px solid var(--rule)}
.cs-round-h{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-bottom:22px}
.cs-round-h b{font-size:16px;font-weight:650}
.cs-round-h span{font-size:15px;color:var(--muted);text-align:right}
.cs-opts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}
.cs-opts li{display:flex;flex-direction:column;gap:12px}
.cs-opts li:not(.pick) img{opacity:.5;transition:opacity .25s}.cs-opts li:hover img{opacity:1}
.cs-opts li:not(.pick) span{color:var(--muted)}
.cs-opts img{display:block;width:100%;height:auto;border-radius:18px;box-shadow:0 24px 50px -28px rgba(0,0,0,.45),0 0 0 1px var(--rule)}
.cs-opts li.pick img{box-shadow:0 24px 50px -28px rgba(0,0,0,.45),0 0 0 3px var(--acc)}
.cs-opts span{font-size:14px;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.cs-opts em{font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border:1.5px solid var(--acc);border-radius:99px;padding:2px 8px}
.cs-look-in{display:grid;grid-template-columns:1.3fr 1fr;gap:56px;margin-top:22px;align-items:start}
.cs-sw{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.cs-sw li{border-radius:18px;overflow:hidden;background:var(--soft)}
.cs-sw i{display:block;aspect-ratio:16/10;box-shadow:inset 0 0 0 1px var(--rule)}
.cs-sw b{display:block;font-size:14px;font-weight:650;padding:11px 13px 0}
.cs-sw code{display:block;font:12px/1.4 ui-monospace,'SF Mono',Menlo,monospace;padding:2px 13px 12px;text-transform:uppercase}
.cs-type{font-family:var(--display-light);font-size:clamp(30px,3.3cqi,46px);line-height:1.08}
.cs-look-note{font-size:17px;line-height:1.6;opacity:.9;margin-top:16px}
.cs-details{margin-top:120px}
.cs-details ul{display:grid;grid-template-columns:repeat(3,1fr);gap:0 40px;margin-top:6px}
.cs-details li{padding:22px 0;border-bottom:1px solid var(--rule)}
.cs-details b{display:block;font-size:16px;font-weight:650;margin-bottom:6px}
.cs-details p{font-size:15px;line-height:1.5}
.cs-hood{margin-top:120px}
.cs-hood-in{display:grid;grid-template-columns:1.3fr 1fr;gap:64px;margin-top:22px;align-items:start}
.cs-hood-list li{padding:14px 0;border-bottom:1px solid var(--rule);font-size:16px;line-height:1.55}
.cs-hood-list li:first-child{padding-top:0}
.cs-hood-list code,.cs-details code,.cs-what code{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:.86em;padding:1px 5px;border-radius:5px;background:var(--soft)}
.cs-nums{display:grid;grid-template-columns:1fr 1fr;gap:28px 24px}
.cs-nums dd{font-family:var(--display);font-size:clamp(38px,3.9cqi,60px);white-space:nowrap;line-height:.95;letter-spacing:-.02em}
.cs-nums dt{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:650;margin-top:8px}
.cs-nums div{border-top:1px solid var(--ink);padding-top:14px;display:flex;flex-direction:column-reverse;justify-content:flex-end}
@container (max-width:1000px){.cs-look-in{grid-template-columns:1fr;gap:28px}.cs-show .cs-browser{width:84%}.cs-show .cs-browser+.cs-phone{width:200px;margin-left:-140px}.cs-show .cs-phone:nth-child(n+3){display:none}.cs-feat{grid-template-columns:1fr;gap:28px}.cs-feat.flip .cs-feat-copy{order:0}.cs-story-in,.cs-hood-in{grid-template-columns:1fr;gap:28px}.cs-details ul{grid-template-columns:1fr 1fr}}
@container (max-width:760px){.cs-opts{grid-template-columns:repeat(5,42%);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px}.cs-opts li{scroll-snap-align:start}.cs-round-h{flex-direction:column;gap:6px}.cs-round-h span{text-align:left}.cs-sw{grid-template-columns:1fr 1fr}.cs-process,.cs-look{margin-top:80px}.cs-show .cs-browser{width:100%;margin-bottom:-24px}.cs-meta{grid-template-columns:1fr 1fr;gap:16px}.cs-show{padding:40px 12px 0;min-height:0;gap:14px;border-radius:22px}.cs-show .cs-phone{width:230px;--r:0deg;--y:0px}.cs-show .cs-phone[data-main]{width:min(280px,82%)}.cs-show>:not([data-main]){display:none}.cs-feat{padding:44px 0}.cs-feat-vis{min-height:0;padding:28px 12px;border-radius:22px;gap:12px}.cs-feat-vis .cs-phone{width:min(210px,calc(50% - 6px));padding:7px}.cs-feat-vis .cs-phone:only-child{width:210px}.cs-details ul{grid-template-columns:1fr}.cs-idea,.cs-features,.cs-story,.cs-try,.cs-details,.cs-hood{margin-top:80px}.cs-nums{grid-template-columns:1fr 1fr}}
@container (max-width:380px){.cs-nums{grid-template-columns:1fr}}   /* very narrow phones: one number per row, no sideways scroll */
/* tablets: the home rows stack like on phones, the podcast player drops under its text, About uses two columns */
@container (max-width:1000px){
 .ix-row{grid-template-columns:44px 1fr auto;gap:6px 14px;padding:20px 0}
 .ix-row .n,.ix-row .nm{grid-row:1}
 .ix-row .st{grid-row:1;grid-column:3}
 .ix-row .ds{grid-row:2;grid-column:2/4;font-size:15px}
 .ix-row .yr,.ix-row .ar{display:none}
 .ep{grid-template-columns:110px 1fr}.ep iframe{grid-column:2;max-width:520px}
 .ab-grid{grid-template-columns:1fr 1fr}.ab-grid>:first-child{grid-column:1/-1}
}
@container (max-width:760px){.ix-row{grid-template-columns:30px 1fr auto;gap:6px 10px;padding:18px 0}.ep{grid-template-columns:1fr}.ep iframe{grid-column:auto}.ab-grid{grid-template-columns:1fr}}
/* short laptop windows: a smaller hero so more of the list shows above the fold */
@media (max-height:900px) and (min-width:1000px){.ix-name{font-size:clamp(84px,min(15.5cqi,20vh),212px)}.ix-hero{padding:40px 0 44px}}
/* touch: the first tap previews, so say what the second tap does */
@media (hover:none){.ix.dim .ix-row.on .ds::after{content:'Tap again to open →';display:block;margin-top:8px;font-size:13px;font-weight:650}}
/* no lonely last words in big type, and calmer rags in paragraphs */
.ix-pitch,.cs-idea blockquote,.cs-feat h2,.post-title,.pg-title,.cs-lead,.nl-title,.dt-howt,.cs-proc-lead,.cs-type{text-wrap:balance}
p,li{text-wrap:pretty}