/* ============================================================================
Boredom — the site
----------------------------------------------------------------------------
The palette, the borders, the radii and the type are taken from the app
itself rather than chosen. Near-white warm grey, hairline borders, near-black
text, small letterspaced eyebrows, huge tight-tracked numbers.
Glass here means what it means on macOS: a translucent surface with the page
showing faintly through it, a hairline edge, and one soft shadow. Not a
gradient, not a glow.
========================================================================= */
:root{
--bg: #F2F2F4;
--bg-2: #EDEDEF;
--surface: rgba(255,255,255,.72);
--surface-2: rgba(255,255,255,.9);
--t1: rgba(10,10,12,.96);
--t2: rgba(10,10,12,.54);
--t3: rgba(10,10,12,.34);
--hair: rgba(10,10,12,.10);
--hair-2: rgba(10,10,12,.06);
--fill: rgba(10,10,12,.04);
/* The four the app draws its day with. */
--work: #26241F;
--dist: #8A7455;
--other:#5C6976;
--idle: rgba(10,10,12,.13);
--ui:'Geist',-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',sans-serif;
--mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,monospace;
--wrap:1160px;
--gap:clamp(88px,11vw,180px);
--ease:cubic-bezier(.2,.9,.25,1);
--spring:cubic-bezier(.34,1.26,.44,1);
--shadow:0 1px 2px rgba(10,10,12,.04),0 8px 26px rgba(10,10,12,.06);
--shadow-lg:0 2px 4px rgba(10,10,12,.04),0 22px 60px rgba(10,10,12,.10);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{
margin:0;background:var(--bg);color:var(--t1);
font-family:var(--ui);line-height:1.5;
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:#fff;padding:10px 16px;border-radius:0 0 10px 0}
.skip:focus{left:0}
.wrap{width:min(var(--wrap),calc(100% - 44px));margin-inline:auto}
.center{text-align:center}
.mid{margin-inline:auto}
/* ── type ──────────────────────────────────────────────────────────────── */
h1,h2,h3{margin:0;font-weight:500;letter-spacing:-.035em;line-height:1.05}
h1{font-size:clamp(46px,7.4vw,92px);letter-spacing:-.045em;margin-top:22px}
h2{font-size:clamp(29px,3.9vw,46px);margin-top:14px}
h3{font-size:19px;letter-spacing:-.022em}
.eyebrow{
margin:0;font-family:var(--mono);font-size:9.5px;
letter-spacing:.22em;text-transform:uppercase;color:var(--t3);
}
.lede{font-size:clamp(15.5px,1.4vw,18px);line-height:1.62;color:var(--t2);max-width:31em;margin:22px 0 0}
.lede em{font-style:normal;color:var(--t1)}
.lede.mid{max-width:26em}
/* ── chrome: the app's floating nav ────────────────────────────────────── */
.chrome{
position:fixed;inset:14px 0 auto;z-index:50;
display:flex;align-items:center;gap:16px;
width:min(var(--wrap),calc(100% - 44px));margin-inline:auto;
}
.brand{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:500;letter-spacing:-.02em}
.brand-dot{width:7px;height:7px;border-radius:50%;background:var(--work);box-shadow:0 0 0 3.5px rgba(38,36,31,.10)}
.brand.small{font-size:13px;color:var(--t2)}
.pillnav{
position:relative;margin-inline:auto;display:flex;gap:2px;padding:3px;
background:var(--surface);border:1px solid var(--hair-2);border-radius:22px;
backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
box-shadow:var(--shadow);
}
.pillnav a{
position:relative;z-index:1;font-size:12.5px;color:var(--t2);
padding:7px 15px;border-radius:19px;transition:color .2s ease;white-space:nowrap;
}
.pillnav a.on{color:var(--t1)}
.thumb{
position:absolute;top:3px;height:calc(100% - 6px);border-radius:19px;
background:#fff;box-shadow:0 1px 3px rgba(10,10,12,.10);
transition:transform .58s cubic-bezier(.22,1,.36,1),width .58s cubic-bezier(.22,1,.36,1);
left:0;width:0;
}
.chrome-right{display:flex;align-items:center;gap:9px}
.statepill{
display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 13px;
font-size:12px;color:var(--t2);
background:var(--surface);border:1px solid var(--hair-2);border-radius:16px;
backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
transition:color .2s ease,background .2s ease;
}
.statepill:hover{color:var(--t1);background:var(--surface-2)}
.livedot{width:5px;height:5px;border-radius:50%;background:var(--work);animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.28}}
/* ── buttons ───────────────────────────────────────────────────────────── */
.btn{
appearance:none;border:0;cursor:pointer;white-space:nowrap;
background:#111114;color:#fff;font-size:14px;font-weight:500;letter-spacing:-.012em;
height:44px;padding:0 22px;border-radius:22px;
display:inline-flex;align-items:center;justify-content:center;
transition:transform .24s var(--spring),opacity .18s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:none;opacity:.9}
.btn-sm{height:32px;padding:0 15px;font-size:12.5px;border-radius:16px}
.ghost{
display:inline-flex;align-items:center;height:44px;padding:0 20px;
font-size:14px;color:var(--t1);
background:var(--surface);border:1px solid var(--hair);border-radius:22px;
backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
transition:background .2s ease,transform .24s var(--spring);
}
.ghost:hover{background:var(--surface-2);transform:translateY(-1px)}
:where(a,button,input):focus-visible{outline:2px solid var(--work);outline-offset:3px;border-radius:8px}
/* ── no blue anywhere ────────────────────────────────────────────────────
Every blue on this page was one the browser supplied, not one anybody
chose: the autofill wash Chrome paints over a filled field, the selection
highlight, the accent on native controls, and the tap flash on iOS. They are
all ink now, because the palette has no blue in it. */
::selection{background:rgba(38,36,31,.16);color:var(--t1)}
:root{accent-color:#111114;caret-color:#111114}
html{-webkit-tap-highlight-color:rgba(10,10,12,.08)}
/* Chrome paints autofilled inputs with its own light-blue background and will
not let a background rule near it. An inset shadow the size of the field is
the only thing it does respect. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{
-webkit-text-fill-color:var(--t1);
-webkit-box-shadow:0 0 0 60px #fff inset;
box-shadow:0 0 0 60px #fff inset;
transition:background-color 600000s 0s;
caret-color:#111114;
}
.signup input:-webkit-autofill,
.signup input:-webkit-autofill:hover,
.signup input:-webkit-autofill:focus{
/* The field is transparent inside the capsule, so it fills with the capsule. */
-webkit-box-shadow:0 0 0 60px rgba(255,255,255,.9) inset;
box-shadow:0 0 0 60px rgba(255,255,255,.9) inset;
}
/* Safari's own validity styling, which is red-to-blue and not ours. */
input:invalid{box-shadow:none}
/* ── hero ──────────────────────────────────────────────────────────────── */
.hero{padding:clamp(120px,15vw,190px) 0 0}
.signup{display:flex;gap:9px;margin-top:34px;max-width:460px}
.signup.mid{max-width:420px}
.signup input{
flex:1;height:44px;padding:0 18px;font-size:14px;
background:var(--surface-2);border:1px solid var(--hair);border-radius:22px;
transition:border-color .2s ease,box-shadow .2s ease;
}
.signup input::placeholder{color:var(--t3)}
.signup input:focus{outline:none;border-color:rgba(10,10,12,.26);box-shadow:0 0 0 4px rgba(10,10,12,.04)}
.signup.busy{opacity:.55;pointer-events:none}
.formnote{
min-height:1.3em;margin:10px 0 0;font-size:12.5px;color:var(--t3);
opacity:0;transform:translateY(-3px);transition:opacity .26s var(--ease),transform .26s var(--ease);
}
.formnote.on{opacity:1;transform:none}
.formnote.bad{color:var(--dist)}
.formnote{transition:color .2s ease}
.formnote.mid{text-align:center}
.herolinks{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap}
/* ── the drawn app ─────────────────────────────────────────────────────── */
.showcase{position:relative;margin-top:clamp(64px,8vw,110px);padding-bottom:clamp(30px,5vw,60px);perspective:1400px}
.window{
max-width:960px;margin-inline:auto;border-radius:14px;overflow:hidden;
background:var(--surface-2);border:1px solid var(--hair);
box-shadow:var(--shadow-lg);
backdrop-filter:saturate(180%) blur(24px);-webkit-backdrop-filter:saturate(180%) blur(24px);
transform:translateY(var(--py,0)) scale(var(--ps,1));
transition:transform .5s var(--ease);
}
.titlebar{
display:flex;align-items:center;gap:14px;padding:10px 14px;
border-bottom:1px solid var(--hair-2);background:rgba(255,255,255,.5);
}
.traffic{display:flex;gap:6px}
.traffic i{width:10px;height:10px;border-radius:50%;background:var(--hair);display:block}
.traffic i:first-child{background:#F0655A}.traffic i:nth-child(2){background:#F3BE4E}.traffic i:nth-child(3){background:#5CC45E}
.apptabs{
margin-inline:auto;display:flex;gap:1px;padding:2px;
background:var(--fill);border-radius:14px;
}
.apptabs b{font-size:10.5px;font-weight:400;color:var(--t2);padding:4px 9px;border-radius:12px}
.apptabs b.on{background:#fff;color:var(--t1);font-weight:500;box-shadow:0 1px 2px rgba(10,10,12,.08)}
.apptrack{
display:inline-flex;align-items:center;gap:6px;font-size:10px;color:var(--t2);
padding:4px 9px;background:var(--fill);border-radius:12px;
}
.apptrack em{font-style:normal;color:var(--t3)}
.appbody{padding:22px 24px 24px}
.approw{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.apeyebrow{margin:0;font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--t3)}
.aphero{margin:8px 0 0;font-size:clamp(34px,4.4vw,46px);font-weight:500;letter-spacing:-.04em;line-height:1}
.apsub{margin:6px 0 0;font-size:11px;color:var(--t2)}
.apsub span{color:var(--t3)}
.lasthour{width:190px;padding:11px 12px;background:var(--fill);border-radius:10px}
.lasthour p{margin:0;display:flex;justify-content:space-between;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--t3)}
.lasthour b{font-size:9px;letter-spacing:0;text-transform:none;color:var(--t1);font-weight:500}
.spark{display:flex;align-items:flex-end;gap:2px;height:30px;margin-top:9px}
.spark i{flex:1;height:var(--h);background:rgba(10,10,12,.72);border-radius:1px;display:block}
.spark i.lit{background:var(--dist)}
.aplabel{margin:26px 0 9px;font-size:11px;color:var(--t1);display:flex;justify-content:space-between}
.aplabel span{color:var(--t3);font-size:10px}
.daystrip{display:flex;gap:1px;height:11px;border-radius:3px;overflow:hidden}
.daystrip i{display:block}
.daystrip .work{background:var(--work)}
.daystrip .dist{background:var(--dist)}
.daystrip .other{background:var(--other)}
.daystrip .idle{background:var(--idle)}
.apstats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:24px}
.apstats .k{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--t2)}
.apstats .d{width:5px;height:5px;border-radius:50%;display:block}
.apstats .d.work{background:var(--work)}.apstats .d.dist{background:var(--dist)}
.apstats .d.other{background:var(--other)}.apstats .d.idle{background:rgba(10,10,12,.3)}
.apstats b{display:block;font-size:22px;font-weight:500;letter-spacing:-.03em;margin-top:7px}
.apstats em{display:block;font-style:normal;font-size:10px;color:var(--t3);margin-top:3px;font-family:var(--mono)}
/* the island */
.island{
position:absolute;left:50%;bottom:0;translate:-50% 40%;
display:inline-flex;align-items:center;gap:12px;
height:36px;padding:0 16px;background:#0A0A0B;border-radius:18px;
box-shadow:0 16px 44px rgba(10,10,12,.28);
}
.island-ic{width:14px;height:14px;border-radius:4px;background:linear-gradient(160deg,#4a4a52,#232329)}
.island-w{font-size:12px;font-weight:500;color:#fff}
.island-t{font-family:var(--mono);font-size:12px;color:#E8E4DC}
.island.lg{position:static;translate:none;height:auto;padding:12px 16px;flex-wrap:wrap;box-shadow:none}
.chips{display:flex;gap:6px;width:100%;margin-top:4px}
.chips i{font-style:normal;font-size:10px;color:rgba(255,255,255,.6);background:rgba(255,255,255,.09);padding:4px 10px;border-radius:10px}
.chips i.lit{background:#fff;color:#111}
/* ── sections ──────────────────────────────────────────────────────────── */
.glass{
background:var(--surface);border:1px solid var(--hair-2);border-radius:16px;
backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
box-shadow:var(--shadow);
}
.glass.big{padding:22px;display:grid;place-items:center;min-height:250px}
/* ── product ───────────────────────────────────────────────────────────── */
.feats{margin-top:64px;display:grid;gap:clamp(46px,6vw,84px)}
.feat{display:grid;grid-template-columns:1.25fr .95fr;gap:clamp(28px,5vw,64px);align-items:center}
.feat.rev>.glass{order:2}
.copy h3{margin-bottom:10px}
.copy p{margin:0;font-size:14.5px;line-height:1.68;color:var(--t2);max-width:30em}
.wall{text-align:center;max-width:290px}
.walllock{width:26px;height:21px;border:2px solid var(--dist);border-radius:5px;display:block;margin:0 auto 16px;position:relative}
.walllock::before{content:"";position:absolute;left:50%;top:-11px;translate:-50% 0;width:14px;height:12px;border:2px solid var(--dist);border-bottom:0;border-radius:7px 7px 0 0}
.wallt{margin:0;font-size:15px;font-weight:500}
.walls{margin:8px 0 0;font-size:12px;color:var(--t2);line-height:1.55}
.wallb{display:inline-block;margin-top:16px;font-size:12px;padding:8px 16px;background:#111114;color:#fff;border-radius:15px}
.cal{width:100%;max-width:330px}
.calh{display:flex;gap:6px;margin-bottom:8px}
.calh b{flex:1;font-size:9.5px;font-weight:500;color:var(--t3);letter-spacing:.04em}
.calgrid{position:relative;display:block;height:190px;background:var(--fill);border-radius:8px;overflow:hidden}
.calgrid::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(to bottom,transparent 0 23px,var(--hair-2) 23px 24px)}
.ev{
position:absolute;top:var(--t);left:var(--l);width:30%;height:var(--h);
font-style:normal;font-size:9px;color:var(--t1);
padding:4px 6px;border-radius:4px;background:rgba(92,105,118,.16);overflow:hidden;
}
.ev.prot{background:rgba(38,36,31,.13);border-left:2px solid var(--work)}
.act{width:100%;max-width:330px}
.actline{margin:0 0 16px;font-size:12.5px;color:var(--t2);line-height:1.6}
.actline b{color:var(--t1);font-weight:500}
.actbars{display:grid;gap:10px}
.actbars span{display:grid;grid-template-columns:64px 1fr 52px;align-items:center;gap:10px}
.actbars em{font-style:normal;font-size:10.5px;color:var(--t2)}
.actbars i{height:5px;border-radius:3px;background:var(--work);width:var(--w);display:block}
.actbars b{font-size:10.5px;font-weight:400;font-family:var(--mono);color:var(--t2);text-align:right}
/* ── beta ──────────────────────────────────────────────────────────────── */
.betabox{max-width:520px;margin:36px auto 0;padding:30px 28px 26px;text-align:center}
.betafine{margin:18px 0 0;font-size:11.5px;color:var(--t3)}
.success{display:grid;place-items:center;gap:4px;padding:6px 0 2px}
.tick{width:34px;height:34px;border-radius:50%;background:var(--work);position:relative;margin-bottom:8px;animation:pop .5s var(--spring)}
.tick::after{content:"";position:absolute;left:11px;top:9px;width:8px;height:14px;border:2px solid #fff;border-top:0;border-left:0;rotate:45deg}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.st{margin:0;font-size:16px;font-weight:500}
.sb{margin:4px 0 0;font-size:13px;color:var(--t2)}
/* ── support ───────────────────────────────────────────────────────────── */
.sup{display:flex;align-items:center;justify-content:space-between;gap:36px;padding:34px 34px}
.sup-h{margin-top:10px;font-size:clamp(24px,2.7vw,32px)}
.sup .lede{margin-top:12px;max-width:34em;font-size:15px}
/* ── footer ────────────────────────────────────────────────────────────── */
.foot{border-top:1px solid var(--hair-2);padding:28px 0 40px}
.footin{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.footlinks{display:flex;gap:22px;margin-left:auto}
.footlinks a{font-size:13px;color:var(--t2);transition:color .18s ease}
.footlinks a:hover{color:var(--t1)}
.footc{font-size:12px;color:var(--t3);font-family:var(--mono)}
/* ── motion ────────────────────────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(13px);
transition:opacity .68s var(--ease) var(--d,0s),transform .68s var(--ease) var(--d,0s);
will-change:opacity,transform}
.rv.in{opacity:1;transform:none}
/* ── responsive ────────────────────────────────────────────────────────── */
@media(max-width:940px){
.sup{flex-direction:column;align-items:flex-start;gap:24px}
}
@media(max-width:620px){
.chrome{width:calc(100% - 34px)}
.approw{flex-direction:column}
.lasthour{width:100%}
.apstats{grid-template-columns:repeat(2,1fr);gap:18px}
.herolinks .ghost{flex:1;justify-content:center}
.notes li{flex-direction:column;gap:5px}
.notes .area{width:auto}
.footlinks{margin-left:0}
/* Blur is the expensive part on a phone; the surfaces stay, the sampling goes. */
.glass,.pillnav,.statepill,.window,.ghost{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.86)}
}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.rv{opacity:1;transform:none;transition:none}
*{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
/* ============================================================================
Horizontal pages
----------------------------------------------------------------------------
One page at a time, side by side. The body does not scroll; the rail slides.
Scroll-snap does the physics so a trackpad flick lands where it should
without any of it being animated by hand.
========================================================================= */
html,body{height:100%;overflow:hidden}
.deck{position:fixed;inset:0;overflow:hidden}
.rail{
display:flex;height:100%;
overflow-x:auto;overflow-y:hidden;
scroll-snap-type:x mandatory;
scrollbar-width:none;-ms-overflow-style:none;
scroll-behavior:smooth;
overscroll-behavior-x:contain;
}
.rail::-webkit-scrollbar{display:none}
.rail.dragging{scroll-behavior:auto;cursor:grabbing}
.page{
flex:0 0 100vw;height:100%;scroll-snap-align:center;
display:grid;padding:104px 0 74px;
overflow-y:auto;overscroll-behavior-y:contain;
/* Centred, but safely: when the content is taller than the page — which is
most pages on a phone — plain centring overflows in both directions and
the ends become unreachable, because you cannot scroll above the top.
`safe` falls back to start alignment exactly then, and behaves as ordinary
centring whenever the content fits, which is every desktop page. */
justify-items:center;align-content:safe center;
/* An implicit `auto` column sizes to max-content, so on a narrow screen the
track grew past the page it sits in — 339px of column inside 320px of
phone — and every percentage width underneath resolved against the wrong
number. A single column that cannot exceed its container fixes the
measure everywhere and looks identical wherever the content already fit. */
grid-template-columns:minmax(0,1fr);
}
.pagein{width:min(1120px,calc(100% - 52px));margin-inline:auto}
.page.wide .pagein{width:min(1320px,calc(100% - 44px))}
.pagein.center{text-align:center}
.pagehint{
position:absolute;bottom:96px;left:50%;translate:-50% 0;
font-size:11.5px;color:var(--t3);pointer-events:none;
opacity:0;transform:translateY(4px);
transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.pagehint.shown{opacity:1;transform:none}
.pagehint.gone{opacity:0;transform:translateY(-4px)}
.dots-nav{
position:fixed;left:50%;bottom:26px;translate:-50% 0;z-index:40;
display:flex;gap:9px;padding:8px 12px;border-radius:16px;
background:var(--surface);border:1px solid var(--hair-2);
backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
box-shadow:var(--shadow);
}
.dots-nav button{
appearance:none;border:0;padding:0;cursor:pointer;
width:7px;height:7px;border-radius:50%;background:var(--hair);
transition:background .3s var(--ease),transform .3s var(--spring);
}
.dots-nav button.on{background:var(--work);transform:scale(1.25)}
/* the nav pill can be thrown */
.pillnav{cursor:grab;user-select:none;-webkit-user-select:none}
.pillnav.grabbing{cursor:grabbing}
.pillnav button{
appearance:none;border:0;background:none;cursor:pointer;
position:relative;z-index:1;font-size:12.5px;color:var(--t2);
padding:7px 15px;border-radius:19px;transition:color .2s ease;white-space:nowrap;
}
.pillnav button.on{color:var(--t1)}
/* ── hero on its own page ──────────────────────────────────────────────── */
.hero{padding:0}
.hero .island{position:static;translate:none;margin-top:44px}
/* ── language ──────────────────────────────────────────────────────────── */
.langwrap{position:relative}
.caret{width:0;height:0;border:3.5px solid transparent;border-top-color:var(--t3);margin-top:2px}
.langmenu{
position:absolute;right:0;top:38px;margin:0;padding:6px;list-style:none;min-width:150px;
background:var(--surface-2);border:1px solid var(--hair-2);border-radius:12px;
box-shadow:var(--shadow-lg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);z-index:60;
}
.langmenu button{
appearance:none;border:0;background:none;width:100%;text-align:left;cursor:pointer;
font-size:12.5px;color:var(--t2);padding:8px 10px;border-radius:8px;
}
.langmenu button:hover{background:var(--fill);color:var(--t1)}
.langmenu button.on{color:var(--t1);font-weight:500}
/* ── the applications it knows ─────────────────────────────────────────── */
.apps{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px}
.app{
display:inline-flex;align-items:center;gap:8px;
font-size:12.5px;color:var(--t2);
padding:7px 14px 7px 8px;border-radius:16px;
background:var(--surface);border:1px solid var(--hair-2);
}
.app::before{
content:"";width:18px;height:18px;border-radius:5px;flex:none;
background:var(--logo,linear-gradient(150deg,#3a3a40,#17171b));
}
/* ── the six things it does ────────────────────────────────────────────── */
.fgrid{margin-top:34px;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(288px,1fr))}
.f{padding:20px}
.f h3{font-size:15.5px;margin-top:14px}
.f p{margin:8px 0 0;font-size:13.2px;line-height:1.62;color:var(--t2)}
.fi{width:30px;height:30px;border-radius:9px;background:var(--fill);display:grid;place-items:center}
.fi::after{content:"";width:14px;height:14px;background:var(--t2);
-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.fi[data-i=eye] {--m:url('data:image/svg+xml;utf8,')}
.fi[data-i=lock] {--m:url('data:image/svg+xml;utf8,')}
.fi[data-i=cal] {--m:url('data:image/svg+xml;utf8,')}
.fi[data-i=moon] {--m:url('data:image/svg+xml;utf8,')}
.fi[data-i=globe]{--m:url('data:image/svg+xml;utf8,')}
.fi[data-i=chart]{--m:url('data:image/svg+xml;utf8,')}
/* ── the live demo ─────────────────────────────────────────────────────── */
.demohead{display:flex;align-items:flex-end;justify-content:space-between;gap:34px;flex-wrap:wrap;margin-bottom:20px}
.lede.tight{margin:0;max-width:34em;font-size:15px}
.lede.wide{max-width:44em}
.demoframe{position:relative;height:min(66vh,720px);overflow:hidden;padding:0;border-radius:18px}
.demoframe iframe{width:100%;height:100%;border:0;display:block;opacity:0;transition:opacity .6s var(--ease)}
.demoframe.ready iframe{opacity:1}
.demoload{position:absolute;inset:0;display:grid;place-items:center;transition:opacity .4s ease}
.demoframe.ready .demoload{opacity:0;pointer-events:none}
.spin{width:22px;height:22px;border-radius:50%;border:2px solid var(--hair);border-top-color:var(--t2);animation:spin .8s linear infinite}
@keyframes spin{to{rotate:360deg}}
.demohint{display:inline-flex;align-items:center;gap:8px;margin:14px 0 0;font-size:12px;color:var(--t3)}
/* ── responsive ────────────────────────────────────────────────────────── */
@media(max-width:620px){
.pagein{width:calc(100% - 34px)}
.page{padding:92px 0 92px}
.notes li{flex-direction:column;gap:4px}
.notes .area{width:auto}
.glass,.pillnav,.statepill,.dots-nav,.ghost{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.88)}
}
/* ============================================================================
Fixes
========================================================================= */
/* `hidden` lost to every display rule in this file, so the beta panel showed a
success tick before anybody had typed anything. It wins now. */
[hidden]{display:none!important}
/* ── the brand inside the pill ──────────────────────────────────────────── */
.pillbrand{
display:inline-flex!important;align-items:center;gap:8px;
padding-left:5px!important;padding-right:16px!important;
font-weight:500;color:var(--t1)!important;
border-right:1px solid var(--hair-2);margin-right:4px;
border-radius:19px 4px 4px 19px!important;
}
.pillbrand .mark{
width:22px;height:22px;flex:none;border-radius:50%;display:block;
background:var(--logo) center/contain no-repeat;
box-shadow:0 1px 3px rgba(10,10,12,.16);
}
/* The sliding thumb must never land on it — the brand is not a page tab. */
.pillbrand.on{background:none}
/* ── the hero, centred ──────────────────────────────────────────────────── */
.page#p-hero .pagein{text-align:center;max-width:900px;transform:translateY(-4vh)}
.page#p-hero .lede{margin-inline:auto;max-width:33em}
.page#p-hero .signup{margin-inline:auto;justify-content:center}
.page#p-hero .herolinks{justify-content:center}
.page#p-hero h1{margin-top:26px}
/* ── the site's own notch ───────────────────────────────────────────────── */
.sitenotch{
position:fixed;left:50%;top:0;translate:-50% 0;z-index:60;
display:flex;align-items:center;gap:11px;
height:32px;padding:0 15px;background:#0A0A0B;color:#fff;
border-radius:0 0 17px 17px;
box-shadow:0 8px 26px rgba(10,10,12,.26);
transform-origin:top center;
animation:notchDrop .7s var(--spring) .6s backwards;
cursor:default;
transition:height .45s var(--spring),padding .45s var(--spring),gap .45s var(--spring);
}
@keyframes notchDrop{from{translate:-50% -100%}to{translate:-50% 0}}
.sitenotch:hover{height:40px;padding:0 19px;gap:13px}
.sitenotch .sn-logo{width:16px;height:16px;flex:none;border-radius:50%}
.sitenotch .sn-w{font-size:11.5px;font-weight:500;white-space:nowrap}
.sitenotch .sn-t{font-family:var(--mono);font-size:11.5px;color:#E8E4DC}
/* the hero's island gains the mark and reads like the real one */
.island .island-mark{width:17px;height:17px;border-radius:50%;flex:none}
/* ── beta and donate, properly composed ────────────────────────────────── */
.page#p-beta .pagein,.page#p-donate .pagein{max-width:720px;text-align:center}
.page#p-beta .lede,.page#p-donate .lede{margin:20px auto 0;max-width:30em;text-align:center}
.betabox{margin-top:34px;padding:34px 30px 28px}
.betabox .signup{justify-content:center;margin-top:0}
.betafine{margin-top:20px}
.donatepanel{
margin-top:34px;padding:34px 30px;display:grid;gap:22px;justify-items:center;
}
.donaterow{display:flex;gap:26px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.donaterow div{text-align:center}
.donaterow b{display:block;font-size:22px;font-weight:500;letter-spacing:-.03em}
.donaterow span{display:block;font-size:11.5px;color:var(--t3);margin-top:4px}
/* ── real brand marks ──────────────────────────────────────────────────────
The mark is a CSS variable set from logos.js, drawn once. It used to be a
gradient in this file AND a background-image set on the same element from
script, so every logo drew twice and sat on top of itself. */
.app::before{
background:var(--logo) center/contain no-repeat;
box-shadow:none;
}
.dapp i{
background:var(--logo) center/contain no-repeat!important;
box-shadow:none!important;
}
.app[data-app]::before{background-image:var(--logo)}
/* ── the island you can poke ───────────────────────────────────────────── */
.island{
appearance:none;border:0;font:inherit;cursor:pointer;
display:inline-flex;align-items:center;gap:12px;
height:38px;padding:0 8px 0 10px;background:#0A0A0B;border-radius:19px;
box-shadow:0 14px 40px rgba(10,10,12,.24);
transition:transform .42s var(--spring),box-shadow .42s var(--ease),gap .42s var(--spring),padding .42s var(--spring);
}
.island:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 18px 50px rgba(10,10,12,.3)}
.island:active{transform:translateY(0) scale(.99)}
.island-w{font-size:12.5px;font-weight:500;color:#fff;white-space:nowrap}
.island-t{font-family:var(--mono);font-size:12.5px;color:#E8E4DC}
.island-verdict{
font-size:10.5px;padding:4px 11px;border-radius:11px;white-space:nowrap;
opacity:0;width:0;padding-inline:0;overflow:hidden;
transition:opacity .3s var(--ease),width .42s var(--spring),padding .42s var(--spring);
}
.island[data-state=work] .island-verdict{opacity:1;width:auto;padding-inline:11px;background:#EDEBE6;color:#111}
.island[data-state=dist] .island-verdict{opacity:1;width:auto;padding-inline:11px;background:#8A7455;color:#fff}
.island[data-state=other] .island-verdict{opacity:1;width:auto;padding-inline:11px;background:#5C6976;color:#fff}
.island[data-state=ask] .island-verdict{opacity:1;width:auto;padding-inline:11px;background:#fff;color:#111}
.islandhint{margin:14px 0 0;font-size:11.5px;color:var(--t3)}
/* The pill is centred on the page, with the language and donate controls
floating at the right rather than pushing it off-centre. */
.chrome{justify-content:center;position:fixed;left:0;right:0;width:auto;padding-inline:22px}
.pillnav{margin-inline:auto}
.chrome-right{position:absolute;right:22px;top:50%;translate:0 -50%}
@media(max-width:940px){ .chrome-right{position:static;translate:none} }
/* ── built in public ─────────────────────────────────────────────────────
The streams are the page. Two of them, side by side, at a size worth
looking at — the log goes underneath as a row rather than a tall column
with nothing beside it. */
.pubpage{max-width:1100px;width:100%;display:flex;flex-direction:column}
.pubtop{text-align:center;max-width:46em;margin-inline:auto}
.pubtop .lede.mid{margin:13px auto 0;max-width:34em;text-align:center}
.watch{
display:inline-flex;align-items:center;gap:10px;margin-top:20px;
height:42px;padding:0 20px;border-radius:21px;max-width:min(560px,92vw);
background:var(--surface);border:1px solid var(--hair-2);
backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
box-shadow:var(--shadow);
font-size:13px;color:var(--t1);
transition:transform .3s var(--spring),box-shadow .3s var(--ease),background .3s var(--ease);
}
.watch>[data-livelabel]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.watch:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.watch .arr{color:var(--t3);transition:transform .3s var(--spring);flex:none}
.watch:hover .arr{transform:translateX(3px)}
.watch .livedot{width:7px;height:7px;border-radius:50%;background:rgba(10,10,12,.28);display:block;flex:none}
/* Only a stream that is actually running gets the pulse. */
.watch.islive{background:#111114;border-color:#111114;color:#fff}
.watch.islive .arr{color:rgba(255,255,255,.5)}
.watch.islive .livedot{
background:#E0362C;box-shadow:0 0 0 0 rgba(224,54,44,.5);
animation:live 2.2s var(--ease) infinite;
}
@keyframes live{
0%{box-shadow:0 0 0 0 rgba(224,54,44,.5)}
70%{box-shadow:0 0 0 8px rgba(224,54,44,0)}
100%{box-shadow:0 0 0 0 rgba(224,54,44,0)}
}
/* ── the streams ── */
.streams{margin-top:30px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.stream{
display:block;border-radius:18px;overflow:hidden;cursor:pointer;text-align:left;
background:var(--surface);border:1px solid var(--hair-2);box-shadow:var(--shadow);
transition:transform .45s var(--ease),box-shadow .45s var(--ease);
appearance:none;padding:0;width:100%;font:inherit;color:inherit;
}
.stream:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.stream.playing{transform:none}
.thumbwrap{position:relative;aspect-ratio:16/9;background:var(--fill);overflow:hidden}
.thumbwrap img,.thumbwrap iframe{width:100%;height:100%;display:block;border:0;object-fit:cover}
.thumbwrap img{transition:transform .7s var(--ease)}
.stream:hover .thumbwrap img{transform:scale(1.04)}
/* A soft floor under the play button, so a bright frame does not swallow it. */
.thumbwrap::after{
content:"";position:absolute;inset:auto 0 0;height:46%;pointer-events:none;
background:linear-gradient(to top,rgba(10,10,12,.32),transparent);
opacity:0;transition:opacity .45s var(--ease);
}
.stream:hover .thumbwrap::after{opacity:1}
.stream.playing .thumbwrap::after{content:none}
.play{
position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:2;
width:54px;height:54px;border-radius:50%;
background:rgba(255,255,255,.94);
backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
display:grid;place-items:center;box-shadow:0 6px 22px rgba(10,10,12,.28);
transition:transform .35s var(--spring);
}
.stream:hover .play{transform:translate(-50%,-50%) scale(1.1)}
.play::after{content:"";border-left:14px solid #111;border-block:9px solid transparent;margin-left:4px}
.streambody{padding:16px 18px 18px}
.streamt{
margin:0;font-size:14.5px;font-weight:500;letter-spacing:-.015em;line-height:1.45;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.streamm{margin:8px 0 0;font-size:11px;color:var(--t3);font-family:var(--mono);display:flex;gap:12px;flex-wrap:wrap}
/* ── the log, along the bottom ── */
.pubfoot{margin-top:26px}
.notefilters{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.notefilters .chip{font-size:11px;padding:5px 12px}
.pubfoot .notes{
list-style:none;margin:18px 0 0;padding:0;
display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;
}
.pubfoot .notes li{
display:block;padding:14px 16px;border:0;border-radius:12px;
background:var(--surface);border:1px solid var(--hair-2);
font-size:12.5px;line-height:1.55;color:var(--t2);
}
.pubfoot .notes .area{
display:block;width:auto;padding:0 0 6px;
font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--t3);
}
@media(max-width:820px){ .streams{grid-template-columns:1fr} }
/* ── the beta, which is what the site is for ─────────────────────────────── */
.navcta{
background:#111114!important;color:#fff!important;font-weight:500;
transition:background .25s var(--ease),color .25s var(--ease);
}
.navcta:hover{background:#26241F!important}
/* The sliding thumb would sit under it and win, so it stays black when live. */
.pillnav button.navcta.on{color:#fff!important}
.betapage{max-width:640px;width:100%}
/* One row: the field and the button are one object, not two stacked ones. */
.signup{
display:flex;align-items:center;gap:6px;margin:30px auto 0;
width:min(440px,100%);padding:5px;border-radius:31px;
background:rgba(255,255,255,.9);border:1px solid var(--hair);
box-shadow:0 2px 10px rgba(10,10,12,.06);
transition:border-color .2s ease,box-shadow .2s ease;
}
.signup:focus-within{border-color:rgba(10,10,12,.34);box-shadow:0 0 0 4px rgba(10,10,12,.06)}
.signup input{
appearance:none;flex:1;min-width:0;height:42px;padding:0 8px 0 16px;
border:0;background:none;outline:none;font:inherit;font-size:15px;color:var(--t1);
}
.signup input::placeholder{color:var(--t3)}
.signup .btn{height:42px;padding:0 22px;flex:none;font-size:14px}
.signup.busy{opacity:.55;pointer-events:none}
.microcopy{margin:12px 0 0;font-size:11.5px;color:var(--t3)}
.formnote{margin:11px 0 0;min-height:1.2em;font-size:12.5px;color:var(--t2)}
.formnote.bad{color:var(--dist)}
.formnote{transition:color .2s ease}
.betalist{
list-style:none;margin:34px auto 0;padding:0;max-width:560px;
display:grid;grid-template-columns:repeat(3,1fr);gap:18px;text-align:left;
}
.betalist li{display:grid;gap:9px;font-size:12.5px;color:var(--t2);line-height:1.5}
.tick{
width:20px;height:20px;border-radius:50%;flex:none;display:grid;place-items:center;
background:#111114;
}
.tick svg{width:12px;height:12px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.betapage .betafine{margin:28px 0 0;font-size:11.5px;color:var(--t3)}
.pagecta{margin:26px 0 0;text-align:center}
/* ── the footer row ─────────────────────────────────────────────────────── */
.footlinks{
display:flex;justify-content:center;align-items:center;gap:22px;
margin:44px 0 0;flex-wrap:wrap;
}
.footlinks a,.footlinks button{
appearance:none;border:0;background:none;padding:0;cursor:pointer;
font:inherit;font-size:13px;color:var(--t2);
transition:color .18s ease;
}
.footlinks a:hover,.footlinks button:hover{color:var(--t1)}
.footc{font-size:12px;color:var(--t3);font-family:var(--mono)}
@media(max-width:620px){
.betalist{grid-template-columns:1fr;max-width:26em;gap:12px}
.betalist li{grid-template-columns:20px 1fr;align-items:start;gap:11px}
}
/* ============================================================================
Product — one desktop you can actually drive
========================================================================= */
.prodpage{max-width:1180px;width:100%}
.prodtop{text-align:center;max-width:44em;margin-inline:auto}
.prodtop h2{margin:6px 0 0}
.prodtop .lede.mid{margin:14px auto 0;max-width:36em;text-align:center}
/* the tabs are the navigation pill, because they are the same idea */
.featnav{margin:24px auto 20px;width:max-content;max-width:100%}
.featnav .thumb{border-radius:17px}
.featnav button{padding:8px 15px;border-radius:17px}
/* ── the desktop ─────────────────────────────────────────────────────────
Big enough to read as a machine rather than a thumbnail. */
.desk{
position:relative;border-radius:16px;overflow:hidden;
width:100%;height:clamp(370px,calc(100vh - 400px),620px);
background:radial-gradient(120% 90% at 22% 0%,#F7F6F3 0%,#E9E7E2 46%,#D9D6CF 100%);
border:1px solid var(--hair);box-shadow:var(--shadow-lg);
transition:background .9s var(--ease);
}
.desk[data-night=on]{background:radial-gradient(80% 70% at 50% 45%,#15151A 0%,#08080A 100%)}
.deskbar{
position:absolute;inset:0 0 auto;height:30px;z-index:4;
display:flex;align-items:center;justify-content:space-between;
padding:0 14px;font-size:11.5px;color:rgba(10,10,12,.66);
background:rgba(255,255,255,.5);
backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);
border-bottom:1px solid rgba(10,10,12,.06);
}
.dleft{display:flex;align-items:center;gap:13px}
.dleft b{font-weight:600}
.dleft span:not(.dmark){color:rgba(10,10,12,.55)}
.dmark{width:14px;height:14px;border-radius:4px;background:var(--logo,#111);display:block}
.dright{font-family:var(--mono);font-size:11px}
/* the whole machine goes to sleep together, bar and dock with it */
.deskbar,.dleft,.dleft span:not(.dmark),.dright,.deskdock,.deskdock i{
transition:background .9s var(--ease),color .9s var(--ease),
border-color .9s var(--ease),opacity .9s var(--ease);
}
.desk[data-night=on] .deskbar{background:rgba(255,255,255,.05);color:rgba(255,255,255,.62);border-bottom-color:rgba(255,255,255,.07)}
.desk[data-night=on] .dleft span:not(.dmark){color:rgba(255,255,255,.45)}
.desk[data-night=on] .deskdock{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.09);opacity:.42}
.desk[data-night=on] .deskdock i{opacity:.6}
/* ── the island ──────────────────────────────────────────────────────────
The one from the app. It hangs off the menu bar, counts in compact, grows
into the question when it meets something it does not know, asks what to
call it when the answer is neither, and says the answer once. The sizes are
the app's own: a 40-tall capsule row, a 48 icon, 20 of side padding. */
.dnotch{
position:absolute;left:50%;top:0;translate:-50% 0;z-index:6;
display:block;overflow:hidden;
background:#0A0A0B;color:#fff;
border-radius:0 0 16px 16px;
box-shadow:0 14px 40px rgba(10,10,12,.34);
/* Every face is absolutely placed, so the shell carries its own size — and
JS measures the live one, because a panel with a hand's width of black
under the last word is a panel that was given a number instead of asked. */
--nw:252px;--nh:30px;
width:var(--nw);height:var(--nh);
transition:width .52s var(--spring),height .52s var(--spring),border-radius .4s var(--ease);
}
.dnotch[data-mode=ask],
.dnotch[data-mode=name],
.dnotch[data-mode=done]{--nw:420px;border-radius:0 0 22px 22px}
.dnotch[data-mode=name]{--nw:440px}
.dn-compact,.dn-ask,.dn-done,.dn-name{
position:absolute;left:0;top:0;width:100%;
opacity:0;pointer-events:none;
transition:opacity .22s var(--ease);
}
.dnotch[data-mode=compact] .dn-compact,
.dnotch[data-mode=ask] .dn-ask,
.dnotch[data-mode=name] .dn-name,
.dnotch[data-mode=done] .dn-done{opacity:1;pointer-events:auto;transition-delay:.1s}
/* counting */
.dn-compact{
display:flex;align-items:center;justify-content:center;gap:10px;
height:30px;padding:0 12px;white-space:nowrap;
}
.dn-mark{width:15px;height:15px;border-radius:4px;flex:none;background:var(--logo,#2a2a30)}
.dn-w{font-size:12px;font-weight:600;letter-spacing:-.01em}
.dn-t{font-family:var(--mono);font-size:11.5px;color:#E8E4DC}
.dn-v{
font-size:10px;padding:3px 9px;border-radius:10px;
background:rgba(255,255,255,.14);color:#fff;
transition:background .3s var(--ease),color .3s var(--ease);
}
.dnotch[data-state=work] .dn-v{background:#EDEBE6;color:#111}
.dnotch[data-state=dist] .dn-v{background:var(--dist);color:#fff}
.dnotch[data-state=other] .dn-v{background:var(--other);color:#fff}
.dnotch[data-state=sleep] .dn-v,
.dnotch[data-state=skip] .dn-v{background:rgba(255,255,255,.16);color:rgba(255,255,255,.85)}
/* asking */
.dn-ask{display:flex;flex-direction:column;padding:18px 20px 20px;text-align:left}
.dn-askhead{display:flex;align-items:center;gap:13px}
.dn-big{width:48px;height:48px;border-radius:11px;flex:none;display:block;background:var(--logo,#2a2a30)}
.dn-asktext{display:block;min-width:0}
.dn-asktext b{display:block;font-size:16.5px;font-weight:600;letter-spacing:-.02em;line-height:1.24}
.dn-asktext em{display:block;font-style:normal;font-size:11.5px;color:rgba(255,255,255,.56);margin-top:3px}
.dn-actions{display:flex;gap:9px;margin-top:18px}
.dn-actions button{
appearance:none;border:0;cursor:pointer;font:inherit;
/* 1 1 0, not 1 — with a basis of auto the longest label sized its own slot
and pushed its icon out past the capsule's left edge. Equal thirds, and
the label truncates rather than escaping. */
flex:1 1 0;min-width:0;height:40px;border-radius:20px;padding:0 10px;
display:inline-flex;align-items:center;justify-content:center;gap:7px;
background:rgba(255,255,255,.13);color:#fff;
font-size:13.5px;font-weight:500;overflow:hidden;
transition:background .2s ease,transform .3s var(--spring);
}
.dn-actions button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.dn-actions button:hover{background:rgba(255,255,255,.22);transform:translateY(-1px)}
.dn-actions svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;
stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.dn-link{
appearance:none;border:0;background:none;cursor:pointer;font:inherit;
margin-top:12px;height:24px;width:100%;font-size:12px;color:rgba(255,255,255,.56);
}
.dn-link:hover{color:rgba(255,255,255,.85)}
/* naming — "Other" is a question of its own */
.dn-name{display:flex;flex-direction:column;padding:18px 20px 20px;text-align:left;gap:16px}
.dn-back{
appearance:none;border:0;cursor:pointer;padding:0;margin-left:auto;flex:none;
width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
background:rgba(255,255,255,.13);color:#fff;
}
.dn-back svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dn-back:hover{background:rgba(255,255,255,.22)}
.dn-suggest{display:flex;gap:9px}
.dn-suggest button{
appearance:none;border:0;cursor:pointer;font:inherit;
flex:1 1 0;min-width:0;height:40px;border-radius:20px;padding:0 10px;overflow:hidden;
display:inline-flex;align-items:center;justify-content:center;gap:8px;
background:rgba(255,255,255,.13);color:#fff;font-size:13.5px;font-weight:500;
transition:background .2s ease;
}
.dn-suggest button:hover{background:rgba(255,255,255,.22)}
.dn-suggest i{width:9px;height:9px;border-radius:50%;flex:none;background:currentColor}
.dn-suggest button:nth-child(1) i{color:#8393FF}
.dn-suggest button:nth-child(2) i{color:#C59400}
.dn-suggest button:nth-child(3) i{color:#00B35A}
.dn-field{
display:flex;align-items:center;gap:11px;height:40px;padding:0 16px;border-radius:20px;
background:rgba(255,255,255,.10);border:1.5px solid rgba(255,255,255,.14);
}
.dn-field i{width:11px;height:11px;border-radius:50%;flex:none;background:#C59400;transition:background .2s ease}
.dn-field input{
flex:1;min-width:0;appearance:none;border:0;background:none;outline:none;
color:#fff;font:inherit;font-size:14.5px;
}
.dn-field input::placeholder{color:rgba(255,255,255,.42)}
.dn-namerow{display:flex;align-items:center;gap:14px}
.dn-palette{display:flex;gap:8px;flex:1}
.dn-palette button{
appearance:none;border:0;cursor:pointer;padding:0;position:relative;
width:20px;height:20px;border-radius:50%;background:var(--c);flex:none;
}
/* The ring sits outside the swatch and takes up no room, so the row stays the
width it was given and the panel does not widen to hold a selection. */
.dn-palette button.on::after{
content:"";position:absolute;inset:-4px;border-radius:50%;
border:1.5px solid rgba(255,255,255,.85);
}
.dn-create{
appearance:none;border:0;cursor:pointer;font:inherit;flex:none;
height:40px;padding:0 20px;border-radius:20px;
background:#fff;color:#000;font-size:13.5px;font-weight:600;
}
.dn-create:hover{background:rgba(255,255,255,.88)}
/* answered */
.dn-done{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:20px;text-align:center}
.dn-disc{
position:relative;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
background:var(--verdict,#EDEBE6);transform:scale(.4);opacity:0;
}
/* The colour spills a little past its own edge. On a black panel a flat disc
reads as a sticker; one that lights the black around it reads as arriving. */
.dn-disc::before{
content:"";position:absolute;width:72px;height:72px;border-radius:50%;
background:radial-gradient(circle,color-mix(in srgb,var(--verdict,#EDEBE6) 50%,transparent) 55%,transparent 72%);
opacity:0;transform:scale(.6);
}
.dnotch[data-mode=done] .dn-disc{animation:discIn .45s var(--spring) .10s both}
.dnotch[data-mode=done] .dn-disc::before{animation:haloIn .45s var(--spring) .10s both}
@keyframes discIn{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
@keyframes haloIn{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.dn-disc svg{width:26px;height:26px;overflow:visible}
.dn-check{
fill:none;stroke:var(--glyph,#111);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
stroke-dasharray:24;stroke-dashoffset:24;
}
/* the tick draws itself, which is the only part of this that has to be animated */
.dnotch[data-mode=done] .dn-check{animation:draw .28s ease-out .34s both}
@keyframes draw{to{stroke-dashoffset:0}}
.dn-done b{font-size:15.5px;font-weight:600;letter-spacing:-.02em;opacity:0;animation:lineIn .42s var(--spring) .44s both}
.dn-done em{font-style:normal;font-size:12px;color:rgba(255,255,255,.56);margin-top:-13px;opacity:0;animation:lineIn .42s var(--spring) .52s both}
@keyframes lineIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* ── the stage where the scenes live ── */
.deskstage{position:absolute;inset:30px 0 74px;display:grid;place-items:center;padding:20px 26px}
.scene{display:none;width:100%;height:100%;grid-template-columns:1fr;place-items:center;gap:16px}
.scene.on{display:grid;animation:sceneIn .45s var(--ease)}
@keyframes sceneIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.appwin{
width:min(560px,100%);border-radius:11px;overflow:hidden;
background:rgba(255,255,255,.94);border:1px solid rgba(10,10,12,.09);
box-shadow:0 26px 60px rgba(10,10,12,.2),0 2px 6px rgba(10,10,12,.08);
display:flex;flex-direction:column;
}
.appwin.wide{width:min(760px,100%)}
.awbar{display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:1px solid var(--hair-2);font-size:11.5px}
.awbar i{width:9px;height:9px;border-radius:50%;background:var(--hair);flex:none}
.awbar i:first-child{background:#F0655A}.awbar i:nth-child(2){background:#F3BE4E}.awbar i:nth-child(3){background:#5CC45E}
.awbar em{width:14px;height:14px;border-radius:4px;margin-left:8px;background:var(--logo,#111);flex:none}
.awbar b{font-weight:500;color:var(--t2)}
.awbar b.url{font-family:var(--mono);font-size:10.5px;background:var(--fill);padding:3px 10px;border-radius:8px;color:var(--t3)}
.awbody{padding:20px;min-height:190px;display:flex;flex-direction:column;justify-content:center}
/* knows — the app is genuinely open, and the island does the asking */
.figmabody{padding:0;flex-direction:row;min-height:220px}
.fgtool{width:38px;border-right:1px solid var(--hair-2);background:var(--fill);flex:none}
.fgcanvas{flex:1;position:relative;background:
linear-gradient(rgba(10,10,12,.035) 1px,transparent 1px) 0 0/22px 22px,
linear-gradient(90deg,rgba(10,10,12,.035) 1px,transparent 1px) 0 0/22px 22px}
.fgcanvas i{position:absolute;display:block;border-radius:6px}
.fgcanvas .r1{left:16%;top:20%;width:34%;height:34%;background:rgba(38,36,31,.16)}
.fgcanvas .r2{left:56%;top:20%;width:26%;height:16%;background:rgba(138,116,85,.28)}
.fgcanvas .r3{left:16%;top:62%;width:66%;height:12%;background:rgba(92,105,118,.2)}
.fgpanel{width:74px;border-left:1px solid var(--hair-2);background:var(--fill);padding:12px 10px;display:grid;gap:8px;align-content:start;flex:none}
.fgpanel i{height:7px;border-radius:3px;background:rgba(10,10,12,.1);display:block}
.fgpanel i:nth-child(2){width:70%}.fgpanel i:nth-child(4){width:52%}
/* blocks — the wall, and the exceptions that survive it */
.wallbody{align-items:center;text-align:center;gap:0}
.wallbody .wallt{margin-top:2px}
.excepts{margin-top:20px;padding-top:15px;border-top:1px solid var(--hair-2);width:100%}
.exlabel{margin:0 0 9px;font-size:10.5px;color:var(--t3);letter-spacing:.02em}
.exrow{display:flex;gap:7px;justify-content:center;flex-wrap:wrap}
.exrow b{
display:inline-flex;align-items:center;gap:6px;font-weight:400;
font-size:11px;font-family:var(--mono);color:var(--t2);
padding:5px 11px;border-radius:12px;background:var(--fill);
}
.exrow i{width:12px;height:12px;border-radius:3px;background:var(--logo,#111);display:block}
/* plans — a template, visibly repeating */
.planbody{padding:16px 18px}
.plnote{margin:0 0 12px;font-size:11.5px;color:var(--t3)}
.plweek{display:flex;gap:7px;height:190px}
.pd{flex:1;position:relative;display:block;background:var(--fill);border-radius:7px;overflow:hidden}
.pd b{position:absolute;top:5px;left:0;right:0;text-align:center;font-size:9.5px;font-weight:500;color:var(--t3);z-index:2}
.pd .ev{position:absolute;left:5%;width:90%;top:var(--t);height:var(--h);
font-style:normal;font-size:8.5px;line-height:1.3;color:var(--t1);
padding:4px 5px;border-radius:4px;background:rgba(92,105,118,.16);overflow:hidden}
.pd .ev.prot{background:rgba(38,36,31,.14);border-left:2px solid var(--work)}
.pd .ev.fix{background:rgba(138,116,85,.22);border-left:2px solid var(--dist)}
/* sleeps */
.sleepover{position:relative;z-index:2;text-align:center;color:#fff}
.slt{margin:0;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.slv{margin:10px 0 0;font-family:var(--mono);font-size:clamp(40px,6vw,64px);font-weight:300;letter-spacing:-.03em}
.sls{margin:14px auto 0;max-width:26em;font-size:13px;line-height:1.6;color:rgba(255,255,255,.62)}
.slgo{display:inline-block;margin-top:20px;font-size:11.5px;padding:8px 18px;border-radius:16px;
background:rgba(255,255,255,.1);color:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.14)}
/* browser */
.awtabs{display:flex;gap:4px;padding:8px 12px;border-bottom:1px solid var(--hair-2)}
.awtabs b{
display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-weight:400;
font-size:11px;padding:6px 11px;border-radius:9px;color:var(--t3);
transition:background .22s ease,color .22s ease;
}
.awtabs b:hover{background:var(--fill)}
.awtabs b.on{background:var(--fill);color:var(--t1);font-weight:500}
.awtabs i{width:12px;height:12px;border-radius:3px;background:var(--logo,#111);display:block}
.webbody{align-items:center;text-align:center;gap:0}
.webread{margin:0;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--t3)}
.website{margin:10px 0 0;font-family:var(--mono);font-size:19px}
.webverdict{
margin:14px 0 0;display:inline-block;font-size:12px;padding:6px 15px;border-radius:14px;
background:var(--fill);color:var(--t1);transition:background .3s var(--ease),color .3s var(--ease);
}
.webverdict[data-kind=dist]{background:var(--dist);color:#fff}
.webverdict[data-kind=work]{background:#EDEBE6;color:#111}
.webnote{margin:14px 0 0;font-size:11.5px;color:var(--t3)}
/* ── the dock ── */
.deskdock{
position:absolute;left:50%;bottom:14px;translate:-50% 0;z-index:5;
display:flex;align-items:center;gap:7px;padding:8px 10px;border-radius:20px;
background:rgba(255,255,255,.58);border:1px solid rgba(255,255,255,.7);
backdrop-filter:saturate(180%) blur(22px);-webkit-backdrop-filter:saturate(180%) blur(22px);
box-shadow:0 14px 34px rgba(10,10,12,.18);
}
.deskdock button{
appearance:none;border:0;background:none;cursor:pointer;padding:0;position:relative;
transition:transform .34s var(--spring);
}
.deskdock button:hover{transform:translateY(-6px) scale(1.06)}
.deskdock i{
width:38px;height:38px;border-radius:11px;display:block;
background:var(--logo,linear-gradient(150deg,#3a3a40,#17171b));
box-shadow:0 3px 10px rgba(10,10,12,.2);
}
.deskdock button.live::after{
content:"";position:absolute;left:50%;bottom:-5px;translate:-50% 0;
width:4px;height:4px;border-radius:50%;background:rgba(10,10,12,.5);
}
.docksep{width:1px;height:26px;background:rgba(10,10,12,.14);display:block;margin:0 3px}
.deskhint{
margin:14px 0 0;display:flex;align-items:center;justify-content:center;
gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--t3);
}
.reset{
appearance:none;border:1px solid var(--hair);background:#fff;cursor:pointer;font:inherit;
font-size:11.5px;color:var(--t2);padding:5px 13px;border-radius:13px;
transition:background .2s ease,color .2s ease;
}
.reset:hover{background:var(--fill);color:var(--t1)}
/* ── truth: the Boredom window ───────────────────────────────────────────
Not a sketch of it — the window as the app draws it. */
.scene[data-scene=truth].on{place-items:stretch}
.bwin{
width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden;
border-radius:12px;background:rgba(252,252,251,.97);
border:1px solid rgba(10,10,12,.09);
box-shadow:0 26px 60px rgba(10,10,12,.2),0 2px 6px rgba(10,10,12,.08);
}
.bwbar{display:flex;align-items:center;gap:14px;padding:12px 16px;position:relative}
.bwlights{display:flex;gap:6px;flex:none}
.bwlights i{width:11px;height:11px;border-radius:50%;display:block;background:#F0655A}
.bwlights i:nth-child(2){background:#F3BE4E}.bwlights i:nth-child(3){background:#5CC45E}
.bwtabs{
position:absolute;left:50%;translate:-50% 0;
display:flex;gap:2px;padding:3px;border-radius:19px;background:rgba(10,10,12,.045);
}
.bwtabs b{font-size:11.5px;font-weight:400;color:var(--t2);padding:6px 13px;border-radius:16px;white-space:nowrap}
.bwtabs b.on{background:#fff;color:var(--t1);font-weight:500;box-shadow:0 1px 3px rgba(10,10,12,.1)}
.bwright{margin-left:auto;display:flex;align-items:center;gap:7px;flex:none}
.bwtrack{
display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 13px;border-radius:14px;
background:rgba(10,10,12,.045);font-size:11px;color:var(--t1);white-space:nowrap;
}
.bwtrack i{width:5px;height:5px;border-radius:50%;background:var(--t1);display:block}
.bwtrack em{font-style:normal;color:var(--t3)}
.bwicon{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
background:rgba(10,10,12,.045);font-size:11px;color:var(--t2)}
.bwbody{flex:1;min-height:0;overflow:auto;padding:14px 26px 22px;container-type:inline-size}
.bwbody::-webkit-scrollbar{width:0;height:0}
.bwhead{display:flex;align-items:flex-start;justify-content:space-between;gap:30px}
.bweyebrow{margin:0;font-size:10.5px;letter-spacing:.14em;color:var(--t3)}
.bwhero{margin:6px 0 0;font-size:clamp(34px,5cqi,52px);font-weight:500;letter-spacing:-.045em;line-height:1}
.bwsub{margin:9px 0 0;font-size:12.5px;color:var(--t2)}
.bwsub b{font-weight:500;color:var(--t1)}
.bwlast{flex:none;width:min(300px,38%);padding:13px 15px;border-radius:12px;background:rgba(10,10,12,.038)}
.bwlasttop{margin:0;display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.bwlasttop span{font-size:10px;letter-spacing:.12em;color:var(--t3)}
.bwlasttop b{font-size:13px;font-weight:500}
.bwbars{display:flex;align-items:flex-end;gap:3px;height:38px;margin-top:11px}
.bwbars i{flex:1;height:var(--h);background:#1B1A18;border-radius:1.5px;display:block}
.bwbars i.d{background:var(--dist)}
.bwlastfoot{margin:9px 0 0;display:flex;justify-content:space-between;font-size:9px;letter-spacing:.1em;color:var(--t3)}
.bwstriptop{margin:26px 0 10px;display:flex;justify-content:space-between;font-size:12px;color:var(--t2)}
.bwstriptop span:last-child{color:var(--t3)}
.bwstrip{display:flex;height:13px;border-radius:2px;overflow:hidden;background:rgba(10,10,12,.05)}
.bwstrip i{display:block}
.bwstrip .work{background:#1B1A18}
.bwstrip .dist{background:var(--dist)}
.bwstrip .other{background:var(--other)}
.bwstrip .idle{background:transparent}
.bwticks{margin:7px 0 0;display:flex;justify-content:space-between;font-size:9.5px;color:var(--t3)}
.bwtotals{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:26px}
.bwtotals .k{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--t2)}
.bwtotals .d{width:6px;height:6px;border-radius:50%;display:block}
.bwtotals .d.work{background:#1B1A18}.bwtotals .d.dist{background:var(--dist)}
.bwtotals .d.other{background:var(--other)}.bwtotals .d.idle{background:rgba(10,10,12,.28)}
.bwtotals b{display:block;font-size:clamp(20px,2.6cqi,30px);font-weight:500;letter-spacing:-.035em;margin-top:8px}
.bwtotals em{display:block;font-style:normal;font-size:10.5px;color:var(--t3);margin-top:5px}
.bwrule{border:0;border-top:1px solid rgba(10,10,12,.08);margin:26px 0 0}
.bwcomm{margin-top:22px}
.bwcommtop{margin:0;display:flex;align-items:center;justify-content:space-between;gap:20px}
.bwcommtop b{font-size:14px;font-weight:500}
.bwcommtop em{font-style:normal;font-size:12px;color:var(--t3)}
.bwseg{display:inline-flex;gap:2px;padding:3px;border-radius:15px;background:rgba(10,10,12,.045)}
.bwseg i{font-style:normal;font-size:11px;color:var(--t2);padding:5px 13px;border-radius:12px;cursor:pointer}
.bwseg i.on{background:#fff;color:var(--t1);font-weight:500;box-shadow:0 1px 2px rgba(10,10,12,.08)}
.bwcommgrid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:32px;margin-top:16px;align-items:start}
.bwrank{position:relative}
.bwrankline{margin:0;display:flex;justify-content:space-between;gap:14px;font-size:11px;color:var(--t3)}
.bwhash{margin:8px 0 0;display:flex;align-items:baseline;gap:11px;font-size:clamp(26px,3.4cqi,40px);
font-weight:500;letter-spacing:-.045em;line-height:1}
.bwhash em{font-style:normal;font-size:12px;font-weight:400;letter-spacing:0;color:var(--t2);line-height:1.5}
.bwhash em span{color:var(--t3)}
.bwspark{display:block;width:100%;height:56px;margin-top:14px;overflow:visible}
.bwspark path{fill:none;stroke:rgba(10,10,12,.55);stroke-width:1.4}
.bwsparkdot{position:absolute;right:2px;bottom:34px;width:9px;height:9px;border-radius:50%;background:#1B1A18;display:block}
.bwnobody{margin:12px 0 0;font-size:11px;color:var(--t3);line-height:1.5;max-width:22em}
.bwboard{padding-top:4px}
.bwrow{margin:0;display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid rgba(10,10,12,.05)}
.bwrow .n{font-family:var(--mono);font-size:10.5px;color:var(--t3)}
.bwrow .av{width:26px;height:26px;border-radius:50%;background:var(--logo) center/contain no-repeat,rgba(10,10,12,.08);flex:none}
.bwrow .who{font-size:13px}
.bwrow .amt{margin-left:auto;font-size:13px}
.bwtiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px}
.bwtile{display:flex;align-items:center;justify-content:space-between;
padding:14px 16px;border-radius:11px;background:rgba(10,10,12,.038)}
.bwtile b{font-size:12.5px;font-weight:400;color:var(--t2)}
.bwtile .go{font-size:12px;color:var(--t3)}
@media(max-width:900px){
.desk{height:520px}
.featnav{max-width:100%;overflow-x:auto}
.deskstage{padding:14px}
.appwin,.appwin.wide{width:100%}
.bwhead{flex-direction:column;gap:12px}
.bwlast{width:100%}
.bwtotals{grid-template-columns:repeat(2,1fr)}
.bwcommgrid{grid-template-columns:1fr;gap:18px}
}
/* ── community ───────────────────────────────────────────────────────────
Two columns of equal height. You move; everybody else stays put and the
ranking rearranges around you, which is the only part of this that is a
claim about anything. */
.commtop{text-align:center;max-width:36em;margin-inline:auto}
.commtop .lede.mid{margin:13px auto 0;max-width:24em;text-align:center}
/* The whole thing is bounded by the viewport, so the board never pushes the
call to action off the bottom of the page. Thirteen names do not need to be
on screen at once; the ones around you do. */
.commwrap{
margin-top:26px;display:grid;
grid-template-columns:minmax(0,1.55fr) minmax(250px,.72fr);
gap:16px;align-items:stretch;
height:clamp(300px,calc(100vh - 440px),500px);
}
.commboard{padding:20px 24px 18px;display:flex;flex-direction:column;min-width:0;min-height:0}
.commhead{margin:0;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.commhead b{font-size:14px;font-weight:500}
.commhead em{font-style:normal;font-size:12px;color:var(--t3)}
/* Rank and dial sit on one row and settle on the same centre line, so the
panel does not read as two things that happen to be near each other. */
.commrank{
display:flex;align-items:flex-start;justify-content:space-between;
gap:clamp(20px,4vw,44px);margin-top:14px;
}
/* Fixed width and a fixed two-line label. "today · behind by 36m" and "this
week · behind by 3h 18m" are different lengths, and letting the block size
itself meant the rank jumped every time the range changed. */
.rankblock{flex:none;width:186px}
.rankn{margin:0;font-size:clamp(28px,3.2vw,38px);font-weight:500;letter-spacing:-.045em;
line-height:1;font-variant-numeric:tabular-nums}
.ranks{
margin:7px 0 0;font-size:11.5px;color:var(--t2);line-height:1.45;
min-height:2.9em;display:flex;flex-direction:column;
}
.ranks em{font-style:normal;color:var(--t3)}
.commdial{flex:1;min-width:0;padding-top:4px}
.dialtop{margin:0;display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.dialtop span{font-size:10.5px;letter-spacing:.08em;color:var(--t3);text-transform:uppercase}
.dialtop b{font-size:17px;font-weight:500;letter-spacing:-.03em;font-family:var(--mono)}
input[type=range][data-hours]{
appearance:none;-webkit-appearance:none;width:100%;height:22px;margin-top:6px;
background:none;cursor:grab;display:block;
}
input[type=range][data-hours]:active{cursor:grabbing}
input[type=range][data-hours]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:rgba(10,10,12,.1)}
input[type=range][data-hours]::-webkit-slider-thumb{
-webkit-appearance:none;width:20px;height:20px;border-radius:50%;margin-top:-7px;
background:#111114;border:3px solid #fff;box-shadow:0 2px 8px rgba(10,10,12,.28);
}
input[type=range][data-hours]::-moz-range-track{height:6px;border-radius:3px;background:rgba(10,10,12,.1)}
input[type=range][data-hours]::-moz-range-thumb{
width:14px;height:14px;border-radius:50%;background:#111114;border:3px solid #fff;
box-shadow:0 2px 8px rgba(10,10,12,.28);
}
/* The list fades out rather than being sliced through a row. A half-drawn
name with a scrollbar across it is a layout accident; a fade is a decision. */
.boardwrap{
position:relative;flex:1;min-height:0;margin-top:14px;
/* Faded at both ends, because it scrolls in both directions. */
--fade:linear-gradient(to bottom,transparent 0,#000 22px,#000 calc(100% - 30px),transparent 100%);
-webkit-mask:var(--fade);mask:var(--fade);
}
.board{
list-style:none;margin:0;padding:18px 0 26px;display:grid;gap:1px;
height:100%;overflow:auto;scrollbar-width:none;
}
.board::-webkit-scrollbar{width:0;height:0}
.board li{
display:grid;grid-template-columns:22px 26px minmax(76px,1fr) minmax(0,1.9fr) auto;
align-items:center;gap:12px;padding:7px 0;border-bottom:1px solid rgba(10,10,12,.05);
border-radius:8px;transition:background .3s var(--ease);
}
.board .pos{font-family:var(--mono);font-size:10.5px;color:var(--t3)}
.board .av{
width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
font-size:10.5px;font-weight:500;color:#fff;background:hsl(var(--seed) 24% 46%);
background-image:var(--logo);background-size:contain;background-repeat:no-repeat;background-position:center;
}
.board .who{font-size:12.5px;display:flex;flex-direction:column;line-height:1.25;min-width:0}
.board .who em{font-style:normal;font-size:9.5px;color:var(--t3);letter-spacing:.02em}
.board .hrs{font-size:12px;font-family:var(--mono);color:var(--t2)}
.board .bar{display:block;height:6px;border-radius:3px;background:rgba(10,10,12,.055);overflow:hidden}
.board .bar i{display:block;height:100%;width:var(--w);background:rgba(10,10,12,.28);border-radius:3px;
transition:width .45s var(--ease)}
.board li.me{background:rgba(10,10,12,.05);padding-inline:10px;margin-inline:-10px}
.board li.me .who{font-weight:600}
.board li.me .hrs{color:var(--t1);font-weight:500}
.board li.me .bar i{background:var(--work)}
.rankfoot{margin:14px 0 0;font-size:11px;color:var(--t3);line-height:1.5}
/* The side column fills the same height, so the two are one shape. */
.commside{display:grid;grid-template-rows:auto 1fr;gap:16px;min-width:0}
.mini{padding:20px 22px;display:flex;flex-direction:column}
.minik{margin:0;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--t3)}
.miniv{margin:7px 0 0;font-size:25px;font-weight:500;letter-spacing:-.04em}
.miniv span:last-child{font-size:12px;color:var(--t3);font-weight:400;letter-spacing:0;margin-left:5px}
.minis{margin:auto 0 0;padding-top:14px;font-size:11px;color:var(--t3);line-height:1.55}
.week{display:flex;gap:6px;margin-top:14px}
.week button{appearance:none;border:0;background:none;cursor:pointer;padding:0;
display:grid;gap:5px;justify-items:center;flex:1}
.week i{width:100%;height:26px;border-radius:7px;display:block;
background:rgba(10,10,12,.07);transition:background .25s var(--ease),transform .3s var(--spring)}
.week button.on i{background:var(--work)}
.week button:hover i{transform:translateY(-2px)}
.week em{font-style:normal;font-size:9.5px;color:var(--t3)}
.week.broken button.on i{background:rgba(10,10,12,.22)}
.grouprow{display:flex;gap:6px;margin-top:14px;flex-wrap:wrap}
.chip{
appearance:none;border:1px solid var(--hair);background:#fff;cursor:pointer;font:inherit;
font-size:11.5px;color:var(--t2);padding:6px 12px;border-radius:14px;
transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.chip:hover{background:var(--fill)}
.chip.on{background:#111114;border-color:#111114;color:#fff}
@media(max-width:1040px){
.commwrap{grid-template-columns:1fr;align-items:start}
.commside{grid-template-rows:auto auto;grid-template-columns:1fr 1fr}
.boardwrap{height:300px}
}
@media(max-width:720px){
.commside{grid-template-columns:1fr}
.board li{grid-template-columns:20px 24px minmax(60px,1fr) minmax(0,1.2fr) auto;gap:9px}
}
/* ── donate, given the room it deserves ─────────────────────────────────── */
.donatecard{
margin:34px auto 0;max-width:640px;width:100%;padding:44px 40px 38px;
border-radius:26px;position:relative;overflow:hidden;
background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.72));
border:1px solid var(--hair);box-shadow:var(--shadow-lg);
backdrop-filter:saturate(180%) blur(26px);-webkit-backdrop-filter:saturate(180%) blur(26px);
}
.donatemark{width:52px;height:52px;display:block;margin:0 auto 26px;
background:var(--logo) center/contain no-repeat}
.donatequote{margin:0;font-size:clamp(17px,2vw,20px);line-height:1.62;letter-spacing:-.02em;
color:var(--t1);max-width:26em;margin-inline:auto}
.donatewho{margin:18px 0 0;font-size:12px;color:var(--t3);font-family:var(--mono)}
.btn.big{margin-top:30px;height:52px;padding:0 34px;font-size:15px;display:inline-flex;align-items:center}
.donatecard .betafine{margin-top:22px;font-size:11.5px;color:var(--t3)}
/* ── joined ─────────────────────────────────────────────────────────────── */
.joined{
margin:30px auto 0;width:min(440px,100%);
display:grid;justify-items:center;gap:14px;text-align:center;
animation:sceneIn .5s var(--ease) both;
}
.joinedtick{
width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
background:#111114;position:relative;
animation:discIn .45s var(--spring) .05s both;
}
.joinedtick::before{
content:"";position:absolute;width:70px;height:70px;border-radius:50%;
background:radial-gradient(circle,rgba(10,10,12,.16) 55%,transparent 72%);
animation:haloIn .45s var(--spring) .05s both;
}
.joinedtick svg{
width:24px;height:24px;fill:none;stroke:#fff;stroke-width:2.6;
stroke-linecap:round;stroke-linejoin:round;
stroke-dasharray:24;stroke-dashoffset:24;
animation:draw .3s ease-out .3s both;
}
.joined b{font-size:17px;font-weight:600;letter-spacing:-.025em;
animation:lineIn .42s var(--spring) .4s both}
.joined em{font-style:normal;font-size:12.5px;color:var(--t2);line-height:1.55;max-width:28em;
animation:lineIn .42s var(--spring) .48s both}
/* ── less on every page ──────────────────────────────────────────────────
A line the eye takes in at once, rather than a paragraph it has to read.
Nothing here needed four lines to say what it says in one. */
.lede{max-width:26em}
.lede.mid,.pagein.center .lede{max-width:26em;margin-inline:auto}
.hero .lede{max-width:24em;font-size:clamp(15px,1.6vw,18px)}
.prodtop .lede.mid,.commtop .lede.mid,.pubtop .lede.mid{max-width:24em}
.betapage .lede.mid,.donatepage .lede.mid{max-width:22em}
.prodtop,.commtop,.pubtop{max-width:36em}
.rankfoot,.minis{max-width:30em}
.deskhint{max-width:34em;margin-inline:auto}
.rankfoot{margin-inline:0}
/* ============================================================================
Phones and tablets
----------------------------------------------------------------------------
The desktop above is the design. Nothing here alters it; everything here is
the same design re-laid for a hand. Three ideas run through it:
· A phone is portrait, so rows become stacks and the desktop mock becomes
a tall device rather than a wide one shrunk to nothing.
· 100vh is a lie on a phone — it counts the URL bar that is about to slide
away. Every full-height measure is dvh.
· Blur is the expensive part of this style. The surfaces stay; on small
screens the sampling goes.
========================================================================= */
/* ── the deck, measured against the visible viewport ─────────────────────── */
@supports (height: 100dvh) {
.page{height:100dvh}
.desk{height:clamp(360px,calc(100dvh - 400px),620px)}
}
/* Notched phones in landscape put the page under the rounded corners. */
.page{
padding-left:env(safe-area-inset-left);
padding-right:env(safe-area-inset-right);
}
/* ── tablets ─────────────────────────────────────────────────────────────── */
@media(max-width:1024px){
.pagein{width:min(1120px,calc(100% - 40px))}
.page.wide .pagein{width:calc(100% - 40px)}
/* The dashboard is a real window at this width; it just needs fewer columns. */
.bwtiles{grid-template-columns:repeat(3,1fr)}
.betalist{max-width:620px}
}
/* ── phones ──────────────────────────────────────────────────────────────── */
@media(max-width:760px){
/* ── navigation ──
The pill is the tab manager, so it stays a pill and scrolls the way the
app's tabs do, rather than collapsing into a hamburger that belongs to a
different product. The brand mark pins to the left; the language chip sits
beside it rather than floating over the page. */
.chrome{
position:fixed;top:12px;left:0;right:0;width:auto;
display:flex;align-items:center;gap:8px;
padding-inline:max(14px,env(safe-area-inset-left)) max(14px,env(safe-area-inset-right));
justify-content:flex-start;
}
.pillnav{
margin:0;flex:1;min-width:0;
overflow-x:auto;overflow-y:hidden;
scrollbar-width:none;-ms-overflow-style:none;
scroll-behavior:smooth;overscroll-behavior-x:contain;
-webkit-overflow-scrolling:touch;
/* Dragging the pill sideways is how you change page on desktop; on a phone
that gesture has to belong to the pill's own scrolling instead. */
cursor:default;
}
.pillnav::-webkit-scrollbar{display:none}
.pillnav button{flex:none;padding:9px 13px;font-size:12.5px}
.pillbrand{position:sticky;left:0;z-index:2;background:var(--surface)}
.chrome-right{position:static;translate:none;flex:none}
/* ── page frame ── */
.pagein,.page.wide .pagein{width:calc(100% - 32px)}
.page{padding:74px 0 92px}
.page#p-hero .pagein{transform:none}
/* ── type ──
Down a step, but only down a step. The headline is the argument. */
h1{font-size:clamp(34px,10.5vw,52px);letter-spacing:-.045em;line-height:1.02}
h2{font-size:clamp(27px,7.6vw,38px);letter-spacing:-.04em;line-height:1.08}
.lede,.hero .lede{font-size:15px;line-height:1.6;max-width:100%}
.eyebrow{font-size:10px}
/* ── the signup, which is what the site is for ──
One capsule, still. The field and its button are one object at every size;
splitting them was the old design and it read as two controls. */
.signup{width:100%;max-width:420px;gap:5px;padding:5px}
.signup input{font-size:16px;padding-left:15px} /* 16px, or iOS zooms the page */
.signup .btn{padding:0 17px;font-size:13.5px;white-space:nowrap}
.betapage .lede.mid{max-width:100%}
.betalist{grid-template-columns:1fr;gap:11px;max-width:22em;margin-top:26px}
.betalist li{grid-template-columns:20px 1fr;align-items:start;gap:11px;font-size:13px}
/* ── the desktop mock: a device, not a shrunken desk ──
Portrait, taller, with the chrome slimmed so the content inside it is the
part that gets the room. */
.desk{height:clamp(400px,68dvh,560px);border-radius:14px}
.deskstage{inset:26px 0 66px;padding:12px}
.deskbar{height:26px;padding:0 10px;font-size:10.5px}
.dleft{gap:9px}
.dleft span:not(.dmark),.dright{display:none}
.featnav{margin:18px auto 14px;width:100%;overflow-x:auto;scrollbar-width:none}
.featnav::-webkit-scrollbar{display:none}
.featnav button{flex:none}
.appwin,.appwin.wide{width:100%}
.awbody{padding:16px;min-height:150px}
.figmabody{min-height:150px}
.fgpanel{display:none}
.deskhint{gap:10px;font-size:11px}
.prodtop{max-width:100%}
/* ── the island ──
420 wide is wider than the phone it was sitting on. It takes the width it
is given now, and the answers wrap onto their own line rather than being
squeezed into thirds of a thumb. */
.dnotch{--nw:min(252px,calc(100% - 24px))}
.dnotch[data-mode=ask],
.dnotch[data-mode=name],
.dnotch[data-mode=done]{--nw:calc(100% - 20px);border-radius:0 0 18px 18px}
.dn-compact{height:26px;gap:8px;padding:0 10px}
.dn-w{font-size:11px}
.dn-t{font-size:10.5px}
.dn-v{font-size:9.5px;padding:2px 8px}
.dn-ask,.dn-name{padding:14px 15px 16px}
.dn-big{width:40px;height:40px}
.dn-asktext b{font-size:15px}
.dn-actions{flex-wrap:wrap;gap:7px;margin-top:14px}
.dn-actions button{flex:1 1 calc(50% - 4px);min-height:42px;font-size:12.5px}
.dn-actions button:last-child{flex-basis:100%}
.dn-suggest{flex-wrap:wrap;gap:7px}
.dn-suggest button{flex:1 1 calc(50% - 4px);min-height:42px;font-size:12.5px}
.dn-namerow{flex-wrap:wrap;gap:10px}
.dn-palette{flex:1 1 100%;justify-content:space-between}
.dn-create{flex:1 1 100%;min-height:44px}
.dn-done{gap:14px;padding:16px}
.dn-done b{font-size:14.5px}
/* the dock scrolls rather than shrinking its icons past tapping */
.deskdock{
left:0;right:0;translate:none;bottom:10px;
margin-inline:12px;justify-content:flex-start;
overflow-x:auto;scrollbar-width:none;border-radius:18px;
}
.deskdock::-webkit-scrollbar{display:none}
.deskdock i{width:34px;height:34px}
.deskdock button{flex:none;min-width:34px}
/* ── the dashboard window ── */
.bwbar{padding:9px 11px;gap:9px}
.bwtabs{position:static;translate:none;order:3;width:100%;overflow-x:auto;scrollbar-width:none;margin-top:8px}
.bwtabs::-webkit-scrollbar{display:none}
.bwtabs b{flex:none;font-size:10.5px;padding:5px 10px}
.bwbar{flex-wrap:wrap}
.bwright{gap:6px}
.bwtrack{height:24px;padding:0 10px;font-size:10px}
.bwtrack em{display:none}
.bwicon{width:24px;height:24px;font-size:10px}
.bwbody{padding:12px 14px 18px}
.bwhead{flex-direction:column;gap:14px}
.bwlast{width:100%}
.bwtotals{grid-template-columns:repeat(2,1fr);gap:14px;margin-top:20px}
.bwticks span:nth-child(even){display:none}
.bwcommgrid{grid-template-columns:1fr;gap:16px}
.bwtiles{grid-template-columns:1fr;gap:8px}
.bwsparkdot{bottom:30px}
/* ── plans, blocks, browser ── */
.plweek{height:150px;gap:5px}
.pd .ev{font-size:7.5px;padding:3px}
.exrow{gap:6px}
.exrow b{font-size:10px;padding:4px 9px}
.awtabs{overflow-x:auto;scrollbar-width:none}
.awtabs::-webkit-scrollbar{display:none}
.awtabs b{flex:none}
.website{font-size:16px}
.slv{font-size:clamp(38px,13vw,54px)}
.sls{font-size:12.5px}
/* ── community ──
The two columns become one, the board keeps a fixed run of names so the
call to action stays on screen, and each row loses the bar it has no width
for — the number is the ranking, the bar was only ever the picture of it. */
.commwrap{grid-template-columns:1fr;height:auto;gap:12px;margin-top:22px}
.commboard{padding:18px 16px 16px}
.commhead{gap:12px}
.commhead b{font-size:13px}
.commrank{flex-direction:column;align-items:stretch;gap:14px;margin-top:14px}
.rankblock{width:auto;display:flex;align-items:baseline;gap:12px}
.rankn{font-size:32px}
.ranks{min-height:0;flex-direction:row;flex-wrap:wrap;gap:4px;margin-top:0;font-size:11.5px}
.commdial{padding-top:0;min-width:0;width:100%}
input[type=range][data-hours]{height:34px} /* a thumb-sized target */
input[type=range][data-hours]::-webkit-slider-thumb{width:24px;height:24px;margin-top:-9px}
.boardwrap{height:260px;flex:none}
.board li{grid-template-columns:20px 26px 1fr auto;gap:10px;padding:9px 0}
.board .bar{display:none}
.board .who{font-size:13px}
.board .hrs{font-size:12px}
.commside{grid-template-rows:auto auto;gap:12px}
.mini{padding:17px 18px}
.week i{height:30px} /* tappable */
.grouprow .chip,.notefilters .chip{min-height:36px;display:inline-flex;align-items:center}
/* ── build in public ── */
.pubtop{max-width:100%}
.streams{grid-template-columns:1fr;gap:14px;margin-top:24px}
.watch{max-width:100%;height:44px}
.pubfoot .notes{grid-template-columns:1fr;gap:8px}
.notefilters{justify-content:flex-start;overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap;padding-bottom:2px}
.notefilters::-webkit-scrollbar{display:none}
.notefilters .chip{flex:none}
/* ── donate ── */
.donatecard{padding:32px 22px 28px;border-radius:22px}
.donatemark{width:44px;height:44px;margin-bottom:20px}
.donatequote{font-size:16px;line-height:1.6}
.btn.big{height:50px;padding:0 26px;width:100%;justify-content:center}
/* ── the hero island ── */
.island{width:100%;max-width:320px;justify-content:center}
.footlinks{gap:16px;font-size:12.5px}
/* ── tap targets, everywhere ── */
.dots-nav{bottom:max(14px,env(safe-area-inset-bottom));gap:2px;padding:6px 8px}
/* The dot stays the size it is; only the thing your thumb lands on grows.
Painting a 22px circle instead was six black coins across the bottom. */
.dots-nav button{position:relative;width:7px;height:7px}
.dots-nav button::after{content:"";position:absolute;inset:-13px -9px}
.bwseg i{padding:7px 12px}
.reset{min-height:34px;display:inline-flex;align-items:center}
/* Blur is the expensive part on a phone. The surfaces stay, the sampling goes. */
.glass,.pillnav,.statepill,.ghost,.deskdock,.deskbar,.watch,.signup,.donatecard,.dots-nav{
backdrop-filter:none;-webkit-backdrop-filter:none;
}
.glass,.pillnav,.watch,.dots-nav{background:rgba(255,255,255,.9)}
.deskdock{background:rgba(255,255,255,.78)}
.deskbar{background:rgba(255,255,255,.72)}
}
/* ── small phones: 320–380 ───────────────────────────────────────────────── */
@media(max-width:400px){
.pagein,.page.wide .pagein{width:calc(100% - 24px)}
h1{font-size:clamp(30px,10vw,40px)}
h2{font-size:clamp(24px,7.4vw,30px)}
.signup input{padding-left:13px}
.signup .btn{padding:0 14px;font-size:13px}
.desk{height:clamp(380px,64dvh,500px)}
.deskdock i{width:30px;height:30px}
.deskdock{gap:5px;padding:7px 8px}
.docksep{margin:0 1px}
.bwtotals{gap:10px}
.bwtotals b{font-size:18px}
.board li{grid-template-columns:18px 24px 1fr auto;gap:8px}
.board .who em{display:none}
.rankn{font-size:28px}
.pillnav button{padding:9px 11px;font-size:12px}
.donatequote{font-size:15px}
}
/* ── landscape phones: short, not narrow ─────────────────────────────────── */
@media(max-height:560px) and (orientation:landscape){
.page{padding:60px 0 68px}
.chrome{top:8px}
h1{font-size:clamp(26px,5.2vw,38px)}
h2{font-size:clamp(22px,4.4vw,30px)}
.lede,.hero .lede{font-size:13.5px}
.island{margin-top:20px}
.islandhint{display:none}
.desk{height:calc(100dvh - 250px);min-height:240px}
/* The board keeps a fixed run of names and the block sizes to its content.
A fixed-height wrap here let the streak and groups cards spill out of the
bottom of it and sit on top of the call to action. */
.commwrap{grid-template-columns:1.5fr .9fr;height:auto}
.boardwrap{height:190px;flex:none}
.commside{gap:10px}
.mini{padding:15px 16px}
.donatecard{padding:24px 22px 22px}
.donatemark{width:36px;height:36px;margin-bottom:14px}
.betalist{margin-top:18px}
.dots-nav{bottom:10px}
}
/* Touch devices never get the hover lift; it sticks after a tap. */
@media(hover:none){
.stream:hover,.deskdock button:hover,.watch:hover,
.askchips button:hover,.week button:hover i{transform:none}
}
/* ── the last few, found by measuring rather than guessing ──────────────── */
@media(max-width:900px){
/* Tap targets. Apple's floor is 44; these were 20 to 29. */
.footlinks a,.footlinks button{min-height:44px;display:inline-flex;align-items:center}
.grouprow .chip,.notefilters .chip,.bwseg i{min-height:36px;display:inline-flex;align-items:center}
.dn-back{width:40px;height:40px}
/* The swatch stays 20px to the eye and 44px to the thumb. */
.dn-palette button::before{content:"";position:absolute;inset:-12px;border-radius:50%}
.dn-palette{gap:10px}
/* 9px uppercase is a label, not a word. */
.pubfoot .notes .area{font-size:10px}
.board .pos,.bwrow .n{font-size:11px}
}
@media(max-width:760px){
/* The pill scrolls, so its right edge should say so rather than looking
like a word that ran out of room. */
.pillnav{
--edge:linear-gradient(to right,#000 0,#000 calc(100% - 26px),transparent 100%);
-webkit-mask:var(--edge);mask:var(--edge);
}
.pillnav.at-end{-webkit-mask:none;mask:none}
}