:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  --display:"Archivo",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --paper:#F7F5EF; --tint:var(--ink);
  --font:"Archivo",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --wall:#EEEEEA; --panel:#FFFFFF; --raise:#F6F6F2; --ink:#111111; --ink-2:#4F4F4A; --ink-3:#7A7A73;
  --line:rgba(0,0,0,.1); --line-2:rgba(0,0,0,.2);
  --hot:#FF4A1C; --sun:#FFD21F; --pop:#FF62A5; --mint:#1DC983; --tint-ink:var(--wall); --mine:#2233F0; --mine-ink:#fff; --scrim:rgba(20,20,20,.55);
  --warn:#B3261E;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --wall:#1F1F21; --panel:#2B2B2E; --raise:#353539; --ink:#F2F2EE; --ink-2:#A6A6A0; --ink-3:#7D7D77;
    --line:rgba(255,255,255,.11); --line-2:rgba(255,255,255,.22); --mine:#7B86FF; --mine-ink:#0B0F3A; --scrim:rgba(0,0,0,.6);
    --warn:#FF8A80; --paper:#3B3A36; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#3B3A36;
  --wall:#1F1F21; --panel:#2B2B2E; --raise:#353539; --ink:#F2F2EE; --ink-2:#A6A6A0; --ink-3:#7D7D77;
  --line:rgba(255,255,255,.11); --line-2:rgba(255,255,255,.22); --mine:#7B86FF; --mine-ink:#0B0F3A; --scrim:rgba(0,0,0,.6);
  --warn:#FF8A80; color-scheme:dark;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px);height:100%}
body{margin:0;min-height:100%;background:var(--wall);color:var(--ink);font:400 15px/1.45 var(--font);-webkit-font-smoothing:antialiased}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
:focus-visible{outline:2px solid var(--mine);outline-offset:2px;border-radius:3px}
img{max-width:100%;display:block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}

/* ---------- top bar ---------- */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--wall);padding:14px clamp(14px,3vw,32px) 0}
.bar{display:flex;align-items:center;gap:14px}
.mark{display:flex;align-items:center;gap:9px;font-weight:650;font-size:18px;letter-spacing:-.02em;white-space:nowrap}
.mark svg{width:22px;height:22px}
.search{flex:1;display:flex;align-items:center;gap:8px;background:var(--panel);border-radius:999px;padding:0 14px;min-width:0;max-width:640px}
.search svg{width:16px;height:16px;flex:none;color:var(--ink-3)}
.search input{flex:1;border:0;background:none;padding:10px 0;font-size:15px;min-width:0}
.search input:focus{outline:none}
.search:focus-within{box-shadow:0 0 0 2px var(--mine)}
.search kbd{font:inherit;font-size:12px;color:var(--ink-3);border:1px solid var(--line-2);border-radius:4px;padding:0 5px}
.spacer{flex:1}
.btn{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:9px 16px;font-weight:550;white-space:nowrap;background:var(--panel);transition:background .15s}
.btn:hover{background:var(--raise)}
.btn.ink{background:var(--ink);color:var(--wall)}
.btn.ink:hover{opacity:.88}
.btn.mine{background:var(--mine);color:var(--mine-ink)}
.btn.sm{padding:6px 12px;font-size:14px}
.btn.plain{background:none;padding-left:4px;padding-right:4px;color:var(--ink-2)}
.btn.plain:hover{color:var(--ink)}
.btn.danger{color:var(--warn)}
.btn:disabled{opacity:.5;cursor:default}
.sheet .btn:not(.ink):not(.mine):not(.plain),.side .btn:not(.ink):not(.mine):not(.plain){background:var(--raise)}
.sheet .btn:not(.ink):not(.mine):not(.plain):hover,.side .btn:not(.ink):not(.mine):not(.plain):hover{background:var(--wall)}
.btn svg{width:16px;height:16px}
.iconbtn{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;color:var(--ink-2)}
.iconbtn:hover{background:var(--panel);color:var(--ink)}
.iconbtn svg{width:19px;height:19px}

.tabs{display:flex;align-items:center;gap:20px;margin-top:12px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{padding:9px 0 10px;color:var(--ink-2);font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tab[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink)}
.tab .n{color:var(--ink-3);font-weight:400;margin-left:5px;font-variant-numeric:tabular-nums}
.tabs .spacer{min-width:12px}

/* ---------- colour index ---------- */
.index{display:flex;align-items:center;gap:12px;padding:12px 0;min-height:52px}
.swatches{display:flex;flex:1;min-width:0;height:26px;border-radius:4px;overflow:hidden}
.sw{flex:1 1 0;min-width:10px;position:relative;transition:flex .2s}
.sw:hover{flex-grow:1.8}
.sw[aria-pressed="true"]{flex-grow:2.4;box-shadow:inset 0 0 0 2px var(--wall),inset 0 0 0 4px var(--ink)}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 11px;background:var(--panel);font-size:14px;color:var(--ink)}
.chip .dot{width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line-2)}
.chip svg{width:12px;height:12px;color:var(--ink-3)}
.chip:hover svg{color:var(--ink)}
.seg{display:inline-flex;background:var(--panel);border-radius:999px;padding:3px}
.seg button{border-radius:999px;padding:4px 11px;font-size:14px;color:var(--ink-2)}
.seg button[aria-pressed="true"]{background:var(--raise);color:var(--ink);font-weight:550}

/* ---------- library grid ---------- */
main{padding:6px clamp(14px,3vw,32px) 80px}
.grid{columns:5 240px;column-gap:18px}
/* the wall is dealt into real columns by gridHtml(); column-gap still sets the gutter */
.grid.dealt{columns:auto;display:flex;align-items:flex-start}.grid.dealt>.wcol{flex:1 1 0;min-width:0}.gridmore{height:1px}
.tile{break-inside:avoid;margin:0 0 22px;display:block;width:100%;text-align:left;position:relative}
.tile .pic{position:relative;border-radius:3px;overflow:hidden;background:var(--panel)}
.tile .pic img{width:100%;height:auto;transition:transform .35s ease}
.tile:hover .pic img{transform:scale(1.015)}
.tile .cap{display:flex;gap:8px;align-items:baseline;padding:7px 1px 0;font-size:13.5px;line-height:1.3}
.tile .cap .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile .cap .m{color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:45%}
.tile.mine .pic{box-shadow:0 0 0 3px var(--mine)}
.stage{display:inline-block;font-size:12px;font-weight:600;background:var(--mine);color:var(--mine-ink);border-radius:2px;padding:1px 6px;position:absolute;left:8px;top:8px}
.tile .strip{display:flex;height:5px}
.tile .strip i{flex:1}
.card{padding:18px 18px 20px;background:var(--raise);border-radius:3px;min-height:120px;display:flex;flex-direction:column;gap:8px}
.card .kind{font-size:12.5px;color:var(--ink-3);display:flex;align-items:center;gap:6px}
.card .kind svg{width:13px;height:13px}
.card .big{font-size:21px;line-height:1.15;letter-spacing:-.015em;font-weight:500;word-break:break-word}
.card .body{color:var(--ink-2);font-size:14px;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.card.note .big{font-style:italic;font-weight:450}
.tile.mine .card{box-shadow:0 0 0 3px var(--mine)}
.tile.mine .card .stage{position:static;align-self:flex-start}

.empty{max-width:560px;margin:10vh auto 0;text-align:center}
.empty h2{font-size:clamp(30px,5vw,46px);line-height:1.02;letter-spacing:-.035em;font-weight:600;margin:0 0 14px}
.empty p{color:var(--ink-2);margin:0 0 24px;font-size:16px}
.empty .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.loading{padding:30vh 0;text-align:center;color:var(--ink-3)}

/* ---------- projects ---------- */
.phead{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin:18px 0 22px}
.phead h1{font-size:clamp(32px,5vw,54px);line-height:1;letter-spacing:-.04em;font-weight:600;margin:0}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:26px 20px;margin-top:20px}
.proj{text-align:left;display:block}
.proj .collage{aspect-ratio:4/3;display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:3px;border-radius:3px;overflow:hidden;background:var(--panel)}
.proj .collage>*:first-child{grid-row:span 2}
.proj .collage img{width:100%;height:100%;object-fit:cover}
.proj .collage .ph{background:var(--raise)}
.proj h3{margin:10px 0 2px;font-size:18px;font-weight:600;letter-spacing:-.015em}
.proj p{margin:0;color:var(--ink-3);font-size:13.5px}
.newproj{aspect-ratio:4/3;border:1.5px dashed var(--line-2);border-radius:3px;display:grid;place-items:center;color:var(--ink-2);font-weight:550;width:100%}
.newproj:hover{color:var(--ink);border-color:var(--ink-3)}
.back{color:var(--ink-2);font-size:14px;display:inline-flex;gap:6px;align-items:center;margin-top:16px}
.back:hover{color:var(--ink)}
.back svg{width:14px;height:14px}
.brief{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;margin:0 0 30px;align-items:start}
.brief .b{font-size:18px;line-height:1.5;max-width:62ch;white-space:pre-wrap}
.brief .b.none{color:var(--ink-3)}
.reading{background:var(--raise);border-radius:3px;padding:18px 20px;font-size:15px;line-height:1.55}
.reading h4{margin:0 0 8px;font-size:14px;font-weight:600;display:flex;gap:8px;align-items:center}
.reading p{margin:0 0 10px;max-width:68ch}
.reading p:last-child{margin-bottom:0}
.reading .muted{color:var(--ink-3)}
@media (max-width:800px){.brief{grid-template-columns:1fr}}

/* ---------- overlays ---------- */
.scrim{position:fixed;inset:0;z-index:50;background:var(--scrim);display:flex;align-items:center;justify-content:center;padding:20px;animation:fade .15s ease}
@keyframes fade{from{opacity:0}}
.sheet{background:var(--panel);border-radius:8px;width:min(620px,100%);max-height:calc(100% - 20px);overflow:auto;padding:22px 24px 20px;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.sheet h2{margin:0 0 16px;font-size:24px;letter-spacing:-.025em;font-weight:600;display:flex;align-items:center;gap:10px}
.sheet h2 .spacer{flex:1}
@media (max-width:640px){.scrim.bottom{align-items:flex-end;padding:0}.scrim.bottom .sheet{border-radius:14px 14px 0 0;max-height:92%;padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}}
.drop{border:1.5px dashed var(--line-2);border-radius:6px;padding:22px;text-align:center;color:var(--ink-2);background:var(--raise)}
.drop.on{border-color:var(--mine);color:var(--ink)}
.drop label{color:var(--ink);text-decoration:underline;cursor:pointer}
.drop input{display:none}
.thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.thumbs div{position:relative;width:72px;height:72px;border-radius:3px;overflow:hidden;background:var(--raise)}
.thumbs img{width:100%;height:100%;object-fit:cover}
.thumbs button{position:absolute;right:3px;top:3px;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;display:grid;place-items:center}
.thumbs button svg{width:11px;height:11px}
.thumbs .pdf{display:grid;place-items:center;font-size:12px;font-weight:600;color:var(--ink-2)}
.f{display:grid;gap:5px;margin-top:14px}
.f>span{font-size:13.5px;color:var(--ink-2);font-weight:500}
.f input,.f textarea,.f select{width:100%;border:1px solid var(--line-2);border-radius:5px;background:var(--raise);padding:9px 11px;font-size:15px}
.f textarea{resize:vertical;min-height:70px}
.f input:focus,.f textarea:focus,.f select:focus{outline:none;border-color:var(--mine);box-shadow:0 0 0 1px var(--mine)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){.two{grid-template-columns:1fr}}
.whose{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.whose button{border:1.5px solid var(--line-2);border-radius:6px;padding:11px 13px;text-align:left;background:var(--raise)}
.whose button b{display:block;font-weight:600}
.whose button span{font-size:13px;color:var(--ink-2)}
.whose button[aria-pressed="true"]{border-color:var(--ink)}
.whose button.m[aria-pressed="true"]{border-color:var(--mine);box-shadow:inset 0 0 0 1px var(--mine)}
.stages{display:flex;gap:6px;flex-wrap:wrap}
.stages button{border:1px solid var(--line-2);border-radius:999px;padding:5px 12px;font-size:14px}
.stages button[aria-pressed="true"]{background:var(--mine);border-color:var(--mine);color:var(--mine-ink)}
.actions{display:flex;gap:10px;justify-content:flex-end;align-items:center;margin-top:22px}
.actions .note{flex:1;color:var(--ink-3);font-size:13px}
.modeseg{margin-bottom:14px}

/* ---------- viewer ---------- */
.viewer{position:fixed;inset:0;z-index:40;background:var(--wall);display:grid;grid-template-columns:minmax(0,1fr) 380px;animation:fade .15s ease}
.viewer .stagebox{position:relative;display:flex;align-items:center;justify-content:center;padding:max(24px,env(safe-area-inset-top,0px)) 64px calc(24px + env(safe-area-inset-bottom,0px));min-height:0}
.viewer .stagebox img{max-height:100%;max-width:100%;object-fit:contain;border-radius:2px;box-shadow:0 20px 60px rgba(0,0,0,.18)}
.viewer .stagebox .card{max-width:560px;width:100%}
.viewer .stagebox .card .big{font-size:30px}
.viewer .stagebox .card .body{-webkit-line-clamp:unset;font-size:16px;white-space:pre-wrap}
.viewer .nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:var(--panel);display:grid;place-items:center}
.viewer .nav svg{width:18px;height:18px}
.viewer .nav.l{left:12px}.viewer .nav.r{right:12px}
.viewer .nav:disabled{opacity:.3}
.side{background:var(--panel);overflow:auto;padding:max(18px,env(safe-area-inset-top,0px)) 22px calc(30px + env(safe-area-inset-bottom,0px))}
.side .toprow{display:flex;justify-content:flex-end;gap:4px;margin:-4px -8px 6px 0}
.side h2{margin:0 0 4px;font-size:26px;line-height:1.1;letter-spacing:-.025em;font-weight:600;word-break:break-word}
.side .by{color:var(--ink-2);margin:0 0 14px}
.side .by button{text-decoration:underline;text-underline-offset:2px}
.side .src{display:inline-flex;gap:6px;align-items:center;color:var(--ink-2);font-size:14px;margin-bottom:16px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side .src svg{width:13px;height:13px;flex:none}
.side .src:hover{color:var(--ink)}
.sec{border-top:1px solid var(--line);padding:14px 0}
.sec h3{margin:0 0 9px;font-size:13.5px;font-weight:600;color:var(--ink-2);display:flex;align-items:center;gap:8px}
.sec h3 .spacer{flex:1}
.why{font-size:16px;line-height:1.5;margin:0;white-space:pre-wrap}
.desc{margin:0;color:var(--ink-2);font-size:14.5px}
.pal{display:flex;gap:0;border-radius:4px;overflow:hidden;height:54px}
.pal button{flex:1;position:relative}
.pal button span{position:absolute;left:0;right:0;bottom:4px;text-align:center;font-size:11px;opacity:0;transition:opacity .15s;font-variant-numeric:tabular-nums}
.pal button:hover span,.pal button:focus-visible span{opacity:1}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{border-radius:999px;background:var(--raise);padding:4px 10px;font-size:13.5px}
.tag:hover{background:var(--wall)}
.mini{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.mini button{aspect-ratio:1;border-radius:3px;overflow:hidden;background:var(--raise);position:relative}
.mini img{width:100%;height:100%;object-fit:cover}
.mini .tx{font-size:11px;padding:5px;text-align:left;color:var(--ink-2);line-height:1.2;overflow:hidden;height:100%}
.mini button.mine{box-shadow:inset 0 0 0 2px var(--mine)}
.projlist{display:flex;flex-wrap:wrap;gap:6px}
.edit .f:first-child{margin-top:0}
.muted{color:var(--ink-3)}
.small{font-size:13.5px}
@media (max-width:860px){
  .viewer{grid-template-columns:1fr;grid-template-rows:auto auto;overflow:auto;display:block}
  .viewer .stagebox{height:62vh;padding:max(16px,env(safe-area-inset-top,0px)) 14px 16px}
  .viewer .nav{display:none}
  .side{overflow:visible}
  .side .toprow{position:fixed;top:max(10px,env(safe-area-inset-top,0px));right:12px;margin:0;z-index:2}
  .side .toprow .iconbtn{background:var(--panel)}
}

/* picker */
.picker .pgridmini{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;margin-top:12px;max-height:52vh;overflow:auto;padding:2px}
.picker .pgridmini button{aspect-ratio:1;border-radius:3px;overflow:hidden;background:var(--raise);position:relative;text-align:left}
.picker .pgridmini img{width:100%;height:100%;object-fit:cover}
.picker .pgridmini button[aria-pressed="true"]{box-shadow:0 0 0 3px var(--mine)}
.picker .pgridmini .tx{font-size:12px;padding:7px;color:var(--ink-2);line-height:1.25}

/* ---------- drift ---------- */
.drift{position:fixed;inset:0;z-index:45;background:#1E1E1D;color:#ECECE8;display:grid;grid-template-rows:auto 1fr auto;animation:fade .2s ease}
.drift .dtop,.drift .dbot{display:flex;align-items:center;gap:10px;padding:max(14px,env(safe-area-inset-top,0px)) 20px 14px}
.drift .dbot{padding:14px 20px calc(18px + env(safe-area-inset-bottom,0px));flex-wrap:wrap}
.drift .dtop b{font-weight:600}
.drift .iconbtn,.drift .btn.plain{color:#BDBDB7}
.drift .iconbtn:hover{background:#2E2E2D;color:#fff}
.drift .btn{background:#2E2E2D;color:#ECECE8}
.drift .btn:hover{background:#3A3A38}
.drift .btn.ink{background:#ECECE8;color:#1E1E1D}
.drift .stagebox{display:flex;align-items:center;justify-content:center;gap:24px;padding:0 20px;min-height:0}
.drift .stagebox figure{margin:0;display:flex;flex-direction:column;align-items:center;min-height:0;max-height:100%;max-width:100%;flex:0 1 auto}
.drift .stagebox figure img{max-height:calc(100% - 44px);object-fit:contain;border-radius:2px;min-height:0}
.drift .stagebox figure.two{max-width:calc(50% - 12px)}
.drift figcaption{margin-top:12px;color:#A6A6A0;font-size:14px;text-align:center}
.drift figcaption b{color:#ECECE8;font-weight:550}
.drift .card{background:#2E2E2D;color:#ECECE8;max-width:460px}
.drift .card .body{color:#BDBDB7}
.spark{flex:1 0 100%;text-align:center;padding:4px 0 10px}
.spark p{max-width:720px;margin-left:auto!important;margin-right:auto!important}
.spark p.q{font-size:clamp(20px,2.6vw,28px);line-height:1.25;letter-spacing:-.02em;margin:0 0 8px;font-weight:500}
.spark p.w{color:#A6A6A0;margin:0;font-size:14.5px}
@media (max-width:700px){.drift .stagebox{flex-direction:column;gap:10px}.drift .stagebox figure.two{max-width:100%;max-height:calc(50% - 5px)}}

/* toast + drop overlay */
.toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--wall);padding:10px 16px;border-radius:999px;font-size:14px;z-index:90;display:flex;gap:12px;align-items:center;max-width:calc(100% - 28px)}
.toast button{color:var(--wall);text-decoration:underline;font-weight:600}
.dropall{position:fixed;inset:10px;z-index:80;border:2px dashed var(--mine);border-radius:12px;background:color-mix(in srgb,var(--wall) 82%,transparent);display:grid;place-items:center;font-size:28px;font-weight:600;letter-spacing:-.02em;pointer-events:none}
.menu{position:absolute;right:0;top:calc(100% + 6px);background:var(--raise);border-radius:8px;box-shadow:0 14px 40px rgba(0,0,0,.22);padding:6px;min-width:230px;z-index:30}
.menu button,.menu .row{display:flex;width:100%;align-items:center;gap:10px;padding:9px 11px;border-radius:5px;text-align:left;font-size:14.5px}
.menu button:hover{background:var(--panel)}
.menu hr{border:0;border-top:1px solid var(--line);margin:5px 4px}
.menu .row{justify-content:space-between}
.rel{position:relative}
/* save sheet */
.sheet.save h2 .seg{font-size:14px;font-weight:400;letter-spacing:0}
.seg button.minepick[aria-pressed="true"]{background:var(--mine);color:var(--mine-ink)}
.smart{border:1.5px solid var(--line-2);border-radius:8px;background:var(--raise);padding:4px 4px 6px}
.smart.on,.smart:focus-within{border-color:var(--mine)}
.smart textarea{width:100%;border:0;background:none;resize:vertical;padding:10px 11px;font-size:16px;line-height:1.45;min-height:84px}
.smart textarea:focus{outline:none}
.smart .thumbs{padding:0 8px;margin-top:4px}
.srow{display:flex;align-items:center;gap:8px;padding:0 6px 0 11px}
.shint{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:var(--ink-2)}
.shint svg{width:14px;height:14px}
.details{margin-top:4px}
.sheet.save .actions{margin-top:16px}
.kbadge{position:absolute;left:8px;bottom:8px;display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;background:rgba(20,20,20,.72);color:#fff;border-radius:3px;padding:2px 7px}
.kbadge svg{width:12px;height:12px}
.card .kt{margin-left:auto;font-size:12px;color:var(--ink-3)}
.viewer .stagebox.reading{align-items:flex-start;overflow:auto;padding-top:40px}
.reader{max-width:66ch;width:100%;margin:0 auto;font-size:17.5px;line-height:1.62;padding-bottom:60px}
.reader img{width:100%;max-height:none;box-shadow:none;border-radius:3px;margin-bottom:24px}
.reader h1{font-size:clamp(28px,3.4vw,40px);line-height:1.08;letter-spacing:-.03em;margin:4px 0 10px;font-weight:600}
.reader .rsite,.reader .rby{color:var(--ink-2);font-size:14.5px;margin:0}
.reader .rby{margin-bottom:26px}
.reader p{margin:0 0 1.05em}
@media (max-width:860px){.viewer .stagebox.reading{height:auto;padding:64px 18px 10px}}
/* ideas */
.sparkbar{display:flex;align-items:center;gap:6px;padding:10px 0 0;color:var(--ink-2);flex-wrap:wrap}
.sparkbar .si svg{width:16px;height:16px;color:var(--mine);display:block}
.sparkbar .st{color:var(--ink);font-size:15.5px;font-style:italic;margin-left:4px}
.iconbtn.sm{width:30px;height:30px}.iconbtn.sm svg{width:14px;height:14px}
.sheet.tool{width:min(820px,100%)}
.mixgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.mc{background:var(--raise);border-radius:6px;display:flex;flex-direction:column;min-height:190px;box-shadow:inset 0 0 0 1.5px transparent}
.mc.on{box-shadow:inset 0 0 0 1.5px var(--mine)}
.mh{display:flex;align-items:center;justify-content:space-between;padding:8px 10px 0;font-size:12.5px;color:var(--ink-3)}
.lock{font-size:12px;border-radius:999px;padding:2px 8px;color:var(--ink-2);border:1px solid var(--line-2)}
.lock[aria-pressed="true"]{background:var(--mine);border-color:var(--mine);color:var(--mine-ink)}
.mbody{flex:1;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:10px;text-align:left;border-radius:6px}
.mbody:hover{background:var(--wall)}
.mbody img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:3px}
.mbody .mt{aspect-ratio:1;display:flex;align-items:center;font-size:13px;color:var(--ink-2);overflow:hidden}
.mbody .ml{font-size:12.5px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mbody .mw{font-size:19px;line-height:1.15;letter-spacing:-.01em;font-weight:550}
.mpal{display:flex;height:64px;border-radius:3px;overflow:hidden}.mpal i{flex:1}
.mixline{font-size:clamp(19px,2.3vw,24px);line-height:1.3;letter-spacing:-.015em;margin:20px 0 0;max-width:62ch;font-weight:500}
@media (max-width:700px){.mixgrid{grid-template-columns:1fr 1fr}.mc{min-height:0}.mc:first-child{grid-column:span 2}.mbody img{aspect-ratio:16/9}}
.qs{margin:18px 0 0;padding-left:22px;display:grid;gap:10px;font-size:18px;line-height:1.35;letter-spacing:-.01em}
.step{margin:16px 0 0;padding:12px 14px;background:var(--raise);border-radius:5px}
.vlist{display:grid;gap:2px}
.vrow{display:flex;gap:14px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--line)}
.vrow:first-child{border-top:0}
.vtext{flex:1;display:grid;gap:3px}.vtext b{font-weight:600}.vtext span{color:var(--ink-2)}
.vref{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2);margin-top:4px;text-align:left}
.vref img{width:28px;height:28px;object-fit:cover;border-radius:2px}
.vref:hover{color:var(--ink)}
.dirs{margin:0 0 30px}
.dhead{display:flex;align-items:center;gap:10px;margin-bottom:10px}.dhead h3{margin:0;font-size:18px;font-weight:600;letter-spacing:-.015em}
.dgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:800px){.dgrid{grid-template-columns:1fr}}
.dcard{display:flex;flex-direction:column;gap:6px}
.dcard b{font-size:17px;font-weight:600;letter-spacing:-.01em;margin-top:4px}
.dcard p{margin:0;color:var(--ink-2);font-size:14.5px}
.dcard .btn{align-self:flex-start;margin-left:-4px}
.dimgs{display:flex;height:120px;gap:3px;border-radius:3px;overflow:hidden}
.dimgs button{flex:1;min-width:0;background:var(--raise);overflow:hidden}
.dimgs img{width:100%;height:100%;object-fit:cover}
.dimgs span{font-size:11px;padding:4px;display:block;color:var(--ink-2);text-align:left}
/* character type */
.phead h1{font-size:clamp(40px,7vw,96px);line-height:.92;font-weight:650;letter-spacing:-.05em}
.empty h2{font-size:clamp(38px,6vw,68px);font-weight:650;letter-spacing:-.045em}
.side h2{font-size:28px;line-height:1.05;letter-spacing:-.03em}
.reader h1{letter-spacing:-.035em}
.card.note .big{font-weight:500;font-size:22px;line-height:1.18;letter-spacing:-.02em}
.card.idea{background:var(--paper)}
.card.idea .big{font-size:24px;font-weight:600}
.sparkbar .st{font-size:16px;font-style:normal;font-weight:500}
.proj h3{font-weight:650;font-size:22px;letter-spacing:-.03em}
/* tint: projects and colour filters lend their colour to the chrome */
.tab[aria-current="page"]{border-bottom-color:var(--tint)}
.sparkbar .si svg{color:var(--tint)}
:root{transition:none}
.spine{display:flex;height:18px;border-radius:3px;overflow:hidden;margin:-6px 0 26px}
.spine button{min-width:6px;transition:flex .3s}
.spine button:hover{flex-grow:40!important}
.pspine{display:flex;height:6px;margin-top:3px;border-radius:2px;overflow:hidden}
/* tiles */
.tile{display:block}
.tbtn{display:block;width:100%;text-align:left}
.traybtn{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:rgba(20,20,20,.72);color:#fff;opacity:0;transition:opacity .15s}
.traybtn svg{width:16px;height:16px}
.tile:hover .traybtn,.traybtn:focus-visible{opacity:1}
.traybtn[aria-pressed="true"]{opacity:1;background:var(--mine);color:var(--mine-ink)}
.tile:not(.haspic) .traybtn{top:10px;right:10px}
.hpal{position:absolute;left:0;right:0;bottom:0;height:8px;display:flex;transform:translateY(100%);transition:transform .2s ease}
.hpal i{flex:1}
.tile:hover .hpal{transform:none}
.tile .kbadge{transition:bottom .2s}.tile:hover .kbadge{bottom:14px}
.grid.salon{columns:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-auto-rows:150px;grid-auto-flow:dense;gap:12px}
.grid.salon .tile{margin:0;height:100%;min-height:0}
.grid.salon .tbtn{height:100%}
.grid.salon .pic{height:100%;aspect-ratio:auto!important}
.grid.salon .pic img{width:100%;height:100%;object-fit:cover}
.grid.salon .cap{position:absolute;left:0;right:0;bottom:0;padding:26px 10px 9px;background:linear-gradient(transparent,rgba(0,0,0,.62));color:#fff;opacity:0;transition:opacity .2s;pointer-events:none}
.grid.salon .tile.mine .cap{bottom:0}
.grid.salon .tile:hover .cap{opacity:1}.grid.salon .cap .m{color:rgba(255,255,255,.78)}
.grid.salon .card{height:100%;overflow:hidden;min-height:0}
.grid.salon .hpal{display:none}
.grid.focus{columns:1;max-width:1040px;margin:0 auto}
.grid.focus .tile{margin-bottom:72px}
.grid.focus .cap{font-size:17px;padding-top:12px}
.grid.focus .cap .t{font-size:24px;font-weight:600;letter-spacing:-.025em;white-space:normal}
.grid.focus .fnote{margin:6px 0 0;color:var(--ink-2);max-width:62ch;font-size:15.5px}
.grid.focus .card{padding:48px 52px;min-height:0}.grid.focus .card .big{font-size:40px}.grid.focus .card .body{-webkit-line-clamp:12;font-size:17px}
@media (max-width:640px){.grid.salon{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));grid-auto-rows:96px;gap:6px}.grid.focus .card{padding:22px}.grid.focus .card .big{font-size:26px}.seg.lay button{padding:4px 8px}}
.search .kbd{font:inherit;font-size:12px;color:var(--ink-3);border:1px solid var(--line-2);border-radius:4px;padding:0 6px;line-height:1.5}
.search .kbd:hover{color:var(--ink)}
/* desk */
.desk{position:fixed;left:50%;transform:translate(-50%,140%);bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:25;background:var(--ink);color:var(--wall);border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.28);display:flex;align-items:center;gap:10px;padding:8px 8px 8px 14px;max-width:calc(100% - 24px);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.desk.show,body.dragging-out .desk{transform:translate(-50%,0)}
.desk.over,.sdesk.over{box-shadow:0 0 0 3px var(--mine),0 18px 50px rgba(0,0,0,.28)}
.desk .dl{display:flex;align-items:center;gap:7px;font-size:14px;white-space:nowrap}
.desk .dl svg{width:16px;height:16px}
.desk .n{font-variant-numeric:tabular-nums;opacity:.6}
.dthumbs{display:flex;gap:6px;overflow-x:auto;max-width:min(58vw,720px);scrollbar-width:none}
.dt{position:relative;flex:none;width:50px;height:50px;border-radius:5px;overflow:hidden;background:rgba(255,255,255,.1)}
.dt.mine{box-shadow:inset 0 0 0 2px var(--mine)}
.dt>button:first-child{width:100%;height:100%}
.dt img{width:100%;height:100%;object-fit:cover}
.dt .tx,.ci .tx{font-size:9.5px;line-height:1.15;padding:4px;display:block;text-align:left;overflow:hidden;height:100%;color:inherit;opacity:.8}
.dt .dx{position:absolute;top:2px;right:2px;width:17px;height:17px;border-radius:50%;background:rgba(0,0,0,.65);color:#fff;display:none;place-items:center}
.dt .dx svg{width:9px;height:9px}
.dt:hover .dx,.dt .dx:focus-visible{display:grid}
.dhint{font-size:13px;opacity:.7;padding:0 10px;white-space:nowrap}
.desk .btn{background:rgba(255,255,255,.12);color:inherit}
.desk .btn:hover{background:rgba(255,255,255,.2)}
.desk .iconbtn{color:inherit;opacity:.7}.desk .iconbtn:hover{background:rgba(255,255,255,.12);opacity:1}
body.hasdesk main{padding-bottom:130px}
body.hasdesk .toast{bottom:calc(92px + env(safe-area-inset-bottom,0px))}
@media (max-width:640px){.desk{left:12px;right:12px;transform:translateY(140%);max-width:none}.desk.show,body.dragging-out .desk{transform:none}.desk .dl b,.desk .btn{display:none}.dthumbs{max-width:none;flex:1}}
/* studio */
.studio{max-width:560px;margin:0 auto;padding:14px 16px 60px}
.sthead{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.sthead svg{width:20px;height:20px}
.studio .search{max-width:none}
.sresults{display:grid;gap:2px;margin-top:8px;background:var(--panel);border-radius:8px;padding:6px}
.srow2{display:flex;align-items:center;gap:10px;padding:4px;border-radius:5px}
.srow2:hover{background:var(--raise)}
.sthumb{width:44px;height:44px;border-radius:4px;overflow:hidden;flex:none;background:var(--raise)}
.sthumb img{width:100%;height:100%;object-fit:cover}.sthumb .tx{font-size:9.5px;padding:3px;display:block;text-align:left}
.stitle{flex:1;min-width:0;text-align:left;display:grid;font-size:14.5px;line-height:1.25}
.stitle .muted{font-size:12.5px}
.sdesk{display:grid;gap:26px;margin-top:22px;border-radius:8px;min-height:120px;padding:2px}
.sitem{margin:0}
.sitem>button{display:block;width:100%}
.sitem img{width:100%;border-radius:3px}
.sitem.mine img,.sitem.mine .card{box-shadow:0 0 0 3px var(--mine)}
.spal{display:flex;height:22px;margin-top:6px;border-radius:3px;overflow:hidden}
.spal button{flex:1}
.sitem figcaption{display:flex;align-items:center;gap:8px;margin-top:7px;font-size:14.5px}
.sitem figcaption>span{flex:1}
.sempty{border:1.5px dashed var(--line-2);border-radius:8px;padding:28px 20px;text-align:center}
.sempty p{margin:0 0 6px}
.sfoot{text-align:center;margin-top:30px}
/* command bar */
.scrim.top{align-items:flex-start;padding-top:12vh}
.sheet.cmd{padding:0;width:min(640px,100%);overflow:hidden;display:flex;flex-direction:column;max-height:70vh}
.sheet.cmd h2{padding:16px 18px 0}
.sheet.cmd .cmdin{margin-top:4px}
.cmdin{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line)}
.cmdin svg{width:18px;height:18px;color:var(--ink-3)}
.cmdin input{flex:1;border:0;background:none;font-size:18px;padding:4px 0}
.cmdin input:focus{outline:none}
.cmdin kbd{font:inherit;font-size:12px;color:var(--ink-3);border:1px solid var(--line-2);border-radius:4px;padding:0 5px}
#cmdlist{overflow:auto;padding:6px}
.ch{font-size:12.5px;color:var(--ink-3);padding:10px 12px 4px}
.crow{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:7px 10px;border-radius:6px}
.crow[aria-selected="true"]{background:var(--raise)}
.ci{width:34px;height:34px;border-radius:4px;overflow:hidden;flex:none;background:var(--raise);display:grid;place-items:center}
.ci img{width:100%;height:100%;object-fit:cover}
.ci svg{width:16px;height:16px;color:var(--ink-2)}
.cm{font-weight:600;color:var(--ink-2)}
.cl{display:grid;line-height:1.25}.cl .muted{font-size:12.5px}
/* drift, cinematic */
.drift{background:color-mix(in srgb,var(--dbg) 24%,#141413)}
.drift .stagebox figure{animation:driftin .7s cubic-bezier(.2,.8,.2,1)}
@keyframes driftin{from{opacity:0;transform:scale(.985)}}
.drift figcaption b{font-weight:600;font-size:16px}
/* the one orchestrated motion */
::view-transition-group(hero){animation-duration:.36s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
/* ================= vibrant layer ================= */
body{font-size:15.5px}
.top{background:color-mix(in srgb,var(--wall) 92%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px)}
.mark{font-size:19px;font-weight:700;letter-spacing:-.03em}
.search{background:var(--panel);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn{font-weight:600;padding:10px 18px}
.btn.ink,.btn.save{background:var(--hot);color:#111}
.btn.ink:hover{opacity:1;filter:brightness(1.06)}
.btn.mine{background:var(--mine);color:#fff}
.mixbtn{background:var(--sun)!important;color:#111!important;padding:9px 15px!important}
.mixbtn:hover{filter:brightness(1.05)}
.tabs{border-bottom:0;gap:6px;margin-top:14px}
.tab{padding:8px 14px;border-radius:999px;border:0;margin:0;font-weight:600;font-size:15px;color:var(--ink-2)}
.tab:hover{background:var(--panel);color:var(--ink)}
.tab[aria-current="page"]{background:var(--ink);color:var(--wall)}
.tab[aria-current="page"] .n{color:inherit;opacity:.6}
.tab[data-v="mine"][aria-current="page"]{background:var(--mine);color:#fff}
.tab[data-act="projects"][aria-current="page"]{background:var(--tint);color:var(--tint-ink)}
.sparkbar{background:var(--sun);color:#111;border-radius:12px;padding:8px 8px 8px 14px;margin-top:14px}
.sparkbar .si svg{color:#111}
.sparkbar .st{color:#111;font-weight:600}
.sparkbar .btn.plain{color:#111}.sparkbar .btn.plain:hover{background:rgba(0,0,0,.08);color:#111}
.sparkbar .iconbtn{color:#111}.sparkbar .iconbtn:hover{background:rgba(0,0,0,.08)}
.index{padding:14px 0 16px}
.swatches{height:34px;border-radius:10px;gap:3px;background:none}
.sw{border-radius:5px}
.sw[aria-pressed="true"]{box-shadow:0 0 0 3px var(--wall),0 0 0 5px var(--ink)}
.seg{background:var(--panel);box-shadow:inset 0 0 0 1.5px var(--line)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--wall)}
.chip{background:var(--ink);color:var(--wall);font-weight:600}
.chip svg{color:inherit;opacity:.7}
.tile .pic,.tile .card{border-radius:8px}
.tile.mine .pic,.tile.mine .card{box-shadow:0 0 0 4px var(--mine)}
.tile .cap{font-size:14px;font-weight:500}
.stage{border-radius:4px;font-weight:700;padding:2px 7px}
.card{background:var(--panel)}
.card .kind{color:var(--hot);font-weight:600}
.card .kt{color:var(--ink-3);font-weight:500}
.card.note{background:var(--sun);color:#111}
.card.note .kind{color:#111;opacity:.65}
.card.note .body{color:rgba(17,17,17,.75)}
.card.idea{background:#2233F0;color:#fff}
.card.idea .kind{color:#fff;opacity:.75}
.card.idea .body{color:rgba(255,255,255,.82)}
.tile.mine .card.idea{box-shadow:none}
.card.idea .stage{background:#fff;color:#2233F0}
.sw{box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.1)}
.hero .spine button{box-shadow:inset 0 0 0 2px rgba(0,0,0,.14)!important}
.traybtn{background:#111;z-index:3}
.traybtn[aria-pressed="true"]{background:var(--hot);color:#111}
/* project hero: the board's own colour */
.hero{background:var(--tint);color:var(--tint-ink);margin:14px calc(-1 * clamp(14px,3vw,32px)) 28px;padding:18px clamp(14px,3vw,32px) 22px}
.hero .back{color:inherit;opacity:.8;margin-top:0}
.hero .back:hover{opacity:1;color:inherit}
.hero .phead{margin:14px 0 20px}
.hero .count{opacity:.75}
.hero .btn{background:rgba(255,255,255,.92);color:#111}
.hero .btn.plain{background:none;color:inherit}
.hero .btn.plain:hover{background:rgba(0,0,0,.08);color:inherit}
.hero .spine{margin:0;height:22px;border-radius:6px;gap:3px}
.hero .spine button{border-radius:4px;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.08)}
.reading{background:var(--panel);border-radius:12px}
.proj .collage{border-radius:10px}
.proj h3{font-size:24px}
.newproj{border-radius:10px;border-color:var(--ink-3)}
/* empty */
.blocks{display:flex;gap:10px;justify-content:center;margin-bottom:28px}
.blocks i{width:46px;height:46px;border-radius:12px;animation:blockin .6s cubic-bezier(.2,.8,.2,1) both}
.blocks i:nth-child(2){animation-delay:.06s;border-radius:50%}.blocks i:nth-child(3){animation-delay:.12s}.blocks i:nth-child(4){animation-delay:.18s;border-radius:50%}.blocks i:nth-child(5){animation-delay:.24s}
@keyframes blockin{from{opacity:0;transform:translateY(14px) scale(.8)}}
/* sheets */
.sheet{background:var(--panel);border-radius:16px}
.smart{background:var(--raise);border-radius:12px}
.f input,.f textarea,.f select{background:var(--raise);border-radius:8px}
.side{background:var(--panel)}
.pal{border-radius:10px;height:60px}
/* mix: each ingredient its own colour */
.mc{border-radius:12px;background:var(--raise)}
.mc:nth-child(3){background:var(--sun);color:#111}
.mc:nth-child(4){background:var(--pop);color:#111}
.mc:nth-child(5){background:var(--mint);color:#111}
.mc:nth-child(n+3) .mh{color:rgba(17,17,17,.65)}
.mc:nth-child(n+3) .lock{color:#111;border-color:rgba(17,17,17,.35)}
.mc:nth-child(n+3) .mbody:hover{background:rgba(255,255,255,.2)}
.mc.on{box-shadow:inset 0 0 0 3px #111}
.lock[aria-pressed="true"]{background:#111;border-color:#111;color:#fff}
.mixline{font-size:clamp(20px,2.4vw,26px);font-weight:600;letter-spacing:-.025em}
.step{background:var(--sun);color:#111;border-radius:10px}
/* desk */
.desk{border-radius:18px;background:#111;color:#fff}
.desk .n{background:var(--hot);color:#111;opacity:1;border-radius:999px;padding:0 7px;font-weight:700;font-size:12.5px}
/* drift */
.drift{background:color-mix(in srgb,var(--dbg) 42%,#111)}
.toast{background:#111;color:#fff}
.toast button{color:var(--sun)}
/* ================= editorial layer (superseded by the graphic layer below) ================= */
:root{--wall:#FBFAF4;--panel:#FFFFFF;--raise:#F3F1E8;--ink:#111111;--ink-2:#55544D;--ink-3:#8C8B83;--line:rgba(17,17,17,.1);--line-2:rgba(17,17,17,.2);
  --hot:#EE5A45;--sun:#FFED5F;--pop:#F6A9C9;--mint:#34C98B;--frame:#D8CEBB}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--wall:#111111;--panel:#262626;--raise:#2F2F2F;--ink:#F5F5F0;--ink-2:#B5B5AE;--ink-3:#85857E;--line:rgba(255,255,255,.1);--line-2:rgba(255,255,255,.2);--frame:#000}}
:root[data-theme="dark"]{--wall:#111111;--panel:#262626;--raise:#2F2F2F;--ink:#F5F5F0;--ink-2:#B5B5AE;--ink-3:#85857E;--line:rgba(255,255,255,.1);--line-2:rgba(255,255,255,.2);--frame:#000}
body{font-family:var(--font);font-variation-settings:"wdth" 100;letter-spacing:-.005em;font-size:15px}
.top{background:color-mix(in srgb,var(--wall) 94%,transparent)}
.mark{font-weight:900;font-stretch:125%;font-variation-settings:"wdth" 125;letter-spacing:-.02em;font-size:18px;text-transform:uppercase}
.mark svg{display:none}
.search{box-shadow:inset 0 0 0 1px var(--line-2);background:transparent}
.btn.ink,.btn.save{background:var(--ink);color:var(--wall)}
.btn{border-radius:10px;font-weight:600}
.btn.sm{border-radius:8px}
.mixbtn{background:var(--sun)!important;border-radius:10px!important}
.tabs{gap:26px;margin-top:10px}
.tab{background:none!important;padding:6px 0;border-radius:0;font-weight:600;font-size:15.5px;color:var(--ink-3)}
.tab:hover{color:var(--ink)}
.tab[aria-current="page"],.tab[data-v="mine"][aria-current="page"],.tab[data-act="projects"][aria-current="page"]{background:none;color:var(--ink)}
.tab .n{font-size:10.5px;font-weight:600;margin-left:2px;vertical-align:super;line-height:0;color:inherit;opacity:.65}
.tab[data-v="mine"][aria-current="page"]{color:var(--mine)}
/* two-tone stacks and the big number */
.stack{margin:0;font-weight:800;font-variation-settings:"wdth" 112;letter-spacing:-.045em;line-height:.9}
.stack span{display:block}
.stack .g{color:var(--ink-3);opacity:.55}
.lhero{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t n" "m m";gap:18px 30px;align-items:end;padding:34px 0 8px}
.lhero .stack{grid-area:t;font-size:clamp(44px,7.4vw,112px)}
.lhero .stack .g{font-size:.52em;line-height:1.05;letter-spacing:-.035em;margin-top:.12em}
.hdot{display:inline-block;width:.55em;height:.55em;border-radius:50%;margin-left:.18em;vertical-align:.08em}
.bignum{grid-area:n;display:flex;align-items:flex-start;line-height:.8}
.bignum b{font-size:clamp(56px,8vw,120px);font-weight:800;font-variation-settings:"wdth" 70;letter-spacing:-.04em}
.bignum sup{font-size:12px;font-weight:600;color:var(--ink-3);margin-left:6px;text-transform:uppercase;letter-spacing:.04em;line-height:1}
.move{grid-area:m;display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:12px}
.move .ml{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3)}
.move .mt{margin:0;flex:1;min-width:220px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;line-height:1.25}
.move .ma{display:flex;gap:14px}
.move .ma button{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-3)}
.move .ma button:hover{color:var(--ink)}
.empty h2.stack{font-size:clamp(48px,8vw,104px)}
.empty .blocks{margin-bottom:34px}
/* colour index and controls */
.index{padding:22px 0 20px}
.swatches{height:26px;border-radius:4px;gap:2px}
.sw{border-radius:3px}
.seg{box-shadow:none;background:var(--raise);border-radius:10px}
.seg button{border-radius:8px;font-weight:600}
.chip{border-radius:8px}
/* tiles */
.tile .pic,.tile .card{border-radius:4px}
.tile.mine .pic,.tile.mine .card{box-shadow:0 0 0 3px var(--mine)}
.tile .cap{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.02em;padding-top:8px}
.tile .cap .m{text-transform:none;letter-spacing:0;font-weight:500}
.stage{border-radius:3px;font-size:11px;text-transform:uppercase;letter-spacing:.03em}
.card{position:relative;overflow:hidden;background:var(--panel);padding:18px 18px 22px}
.card .kind{position:relative;z-index:1;text-transform:uppercase;font-size:11px;letter-spacing:.04em;font-weight:700}
.card>.big,.card>.body,.card>.stage{position:relative;z-index:1}
.card .big{font-weight:700;letter-spacing:-.025em;font-variation-settings:"wdth" 104}
.card.note{--cb:var(--sun);background:var(--cb);color:#111;min-height:210px}
.card.note .big{font-style:normal;font-weight:800;font-size:24px;line-height:1.02;letter-spacing:-.03em}
.card.note .body{color:color-mix(in srgb,var(--cb) 45%,#111);font-weight:700;font-size:17px;line-height:1.12;letter-spacing:-.02em;-webkit-line-clamp:6}
.card.note .kind{color:#111;opacity:.55}
.card .shape{position:absolute;right:-14%;bottom:-16%;width:78%;height:auto;color:color-mix(in srgb,var(--cb) 80%,#000);opacity:.55;z-index:0;pointer-events:none}
.card.idea{--cb:#2233F0;background:#2233F0;color:#fff}
.card.idea .body{color:rgba(255,255,255,.62)}
.card.idea .shape{color:#fff;opacity:.12}
.card.idea .kind{color:#fff}
/* project hero: name filled with the board's lead image */
.hero{background:none!important;color:var(--ink)!important;margin:6px 0 26px;padding:0}
.hero .meta{display:flex;justify-content:space-between;align-items:center;gap:16px;border-bottom:1px solid var(--line);padding:10px 0;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.hero .meta .back{margin:0;font-size:11px;font-weight:700;color:var(--ink);opacity:1}
.hero .phead{margin:22px 0 18px;align-items:flex-end}
.hero .phead h1{font-size:clamp(56px,11vw,190px);line-height:.84;font-weight:900;font-variation-settings:"wdth" 125;letter-spacing:-.045em;text-transform:uppercase;margin:0 0 -.06em}
.hero .phead h1{width:fit-content;max-width:100%}
.hero .phead h1.fill{background-size:cover;background-position:center 30%;-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .btn{background:var(--raise);color:var(--ink)}
.hero .btn.plain{background:none}
.hero .spine{height:12px;border-radius:2px;gap:2px}
.hero .spine button{border-radius:2px;box-shadow:inset 0 0 0 1px var(--line)!important}
.reading{background:var(--raise);border-radius:6px}
.reading h4{text-transform:uppercase;font-size:11px;letter-spacing:.05em}
.brief .b{font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.3}
.proj .collage{border-radius:4px}
.proj h3{font-weight:900;font-variation-settings:"wdth" 118;text-transform:uppercase;letter-spacing:-.03em;font-size:22px}
.phead h1{font-weight:900;font-variation-settings:"wdth" 118;letter-spacing:-.045em;text-transform:uppercase}
/* focus layout: editorial captions */
.grid.focus .fcap{display:flex;justify-content:space-between;gap:20px;padding-top:12px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;line-height:1.3}
/* viewer + sheets */
.side h2{font-weight:800;font-variation-settings:"wdth" 110;letter-spacing:-.035em;font-size:30px;line-height:.98}
.sec h3{text-transform:uppercase;font-size:11px;letter-spacing:.05em;font-weight:700}
.sheet{border-radius:14px}
.sheet h2,.mixline{font-weight:800;font-variation-settings:"wdth" 108;letter-spacing:-.035em}
.mc{border-radius:8px}
.mh{text-transform:uppercase;font-size:10.5px;letter-spacing:.05em;font-weight:700}
.mbody .mw{font-weight:800;font-size:21px;letter-spacing:-.03em;line-height:1}
.desk{border-radius:12px}
.reader h1{font-weight:800;font-variation-settings:"wdth" 108}
.dcard b{font-weight:800;text-transform:uppercase;font-variation-settings:"wdth" 115;letter-spacing:-.02em}
@media (max-width:700px){.hero .phead{flex-direction:column;align-items:flex-start;gap:10px}.hero .phead .spacer{display:none}.lhero{grid-template-columns:1fr auto;padding-top:20px}.hero .meta span:nth-child(3){display:none}}
/* ================= graphic layer: clean, white, one signature colour ================= */
:root{--wall:#FFFFFF;--panel:#F3F3F1;--raise:#ECECE9;--ink:#111111;--ink-2:#55554F;--ink-3:#8E8E88;--line:rgba(17,17,17,.09);--line-2:rgba(17,17,17,.18);--acid:#E9FF57;--acid-ink:#111}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--wall:#0F0F0F;--panel:#1C1C1C;--raise:#262626;--ink:#F4F4F0;--ink-2:#B4B4AD;--ink-3:#7F7F79;--line:rgba(255,255,255,.09);--line-2:rgba(255,255,255,.18)}}
:root[data-theme="dark"]{--wall:#0F0F0F;--panel:#1C1C1C;--raise:#262626;--ink:#F4F4F0;--ink-2:#B4B4AD;--ink-3:#7F7F79;--line:rgba(255,255,255,.09);--line-2:rgba(255,255,255,.18)}
body{font-size:15px;letter-spacing:0}
.cond{font-weight:800;font-variation-settings:"wdth" 68;text-transform:uppercase;letter-spacing:-.01em;line-height:.9}
.top{background:color-mix(in srgb,var(--wall) 92%,transparent);padding-top:16px}
.mark{font-weight:800;font-variation-settings:"wdth" 68;font-size:26px;letter-spacing:-.01em;line-height:1}
.search{background:var(--panel);box-shadow:none;border-radius:14px}
.search:focus-within{box-shadow:0 0 0 2px var(--ink)}
.btn{border-radius:14px;font-weight:600}
.btn.sm{border-radius:10px}
.btn.ink,.btn.save{background:var(--ink);color:var(--wall)}
.mixbtn{background:var(--acid)!important;color:var(--acid-ink)!important;border-radius:14px!important}
.tabs{gap:24px;margin-top:12px}
.tab{font-size:15px;font-weight:600;color:var(--ink-3);padding:6px 0 8px;border-bottom:2px solid transparent!important;border-radius:0}
.tab[aria-current="page"],.tab[data-v="mine"][aria-current="page"],.tab[data-act="projects"][aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink)!important}
.tab .n{font-size:11px;opacity:.55}
.index{padding:18px 0 22px}
.swatches{height:14px;border-radius:999px;gap:0;overflow:hidden}
.sw{border-radius:0;box-shadow:none}
.sw:hover{flex-grow:3}
.sw[aria-pressed="true"]{flex-grow:5;box-shadow:inset 0 0 0 2px var(--wall)}
.seg{background:var(--panel);border-radius:12px}
.seg button{border-radius:9px}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--wall)}
.chip{border-radius:10px;background:var(--ink);color:var(--wall)}
/* the grid: rounded cards, simple captions */
.grid{column-gap:20px}
.tile{margin-bottom:28px}
.tile .pic,.tile .card{border-radius:20px}
.tile .pic img{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.tile:hover .pic img{transform:scale(1.025)}
.tile.mine .pic,.tile.mine .card{box-shadow:0 0 0 3px var(--mine)}
.gcap{display:flex;align-items:center;gap:8px;padding:10px 40px 0 4px;font-size:15.5px;font-weight:500;line-height:1.25}
.gcap span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hpal{height:6px;border-radius:0 0 20px 20px}
.traybtn{top:auto;bottom:0;right:2px;width:32px;height:32px;background:none;color:var(--ink-3);opacity:0;z-index:3}
.tile:hover .traybtn,.traybtn:focus-visible{opacity:1}
.traybtn:hover{background:var(--panel);color:var(--ink)}
.traybtn[aria-pressed="true"]{opacity:1;background:none;color:var(--mine)}
.tile:not(.haspic) .traybtn{top:12px;right:12px;bottom:auto;background:rgba(0,0,0,.08);color:currentColor}
.tile .kbadge{border-radius:999px;left:12px;bottom:12px;background:rgba(17,17,17,.78)}
.stage{border-radius:999px;padding:3px 9px;font-size:11.5px;font-weight:700;text-transform:none;letter-spacing:0;left:12px;top:12px}
.card{padding:20px 20px 24px;background:var(--panel);min-height:150px}
.card .kind{text-transform:none;letter-spacing:0;font-size:13px;font-weight:600;color:var(--ink-3)}
.card .big{font-weight:700;font-size:22px;letter-spacing:-.02em;line-height:1.1;font-variation-settings:"wdth" 100}
.card .body{color:var(--ink-2)}
.card.note,.card.note[style]{background:var(--acid);color:#111;min-height:190px}
.card.note .kind{color:#111;opacity:.55}
.card.note .big,.card.idea .big{font-weight:800;font-variation-settings:"wdth" 68;text-transform:uppercase;font-size:34px;line-height:.92;letter-spacing:-.005em;font-style:normal}
.card.note .body{color:#111;opacity:.72;font-weight:500;font-size:14.5px;line-height:1.35;letter-spacing:0;margin-top:4px}
.card.idea{background:#2233F0;color:#fff}
.card.idea .body{color:#fff;opacity:.72}
.card.idea .stage{position:static;align-self:flex-start;background:#fff;color:#2233F0}
.grid.salon .tile .pic,.grid.salon .tile .card{border-radius:16px}
.grid.salon .gcap{display:none}
.grid.focus .card.note .big,.grid.focus .card.idea .big{font-size:64px}
.grid.focus .fcap{text-transform:none;letter-spacing:0;font-size:15px;font-weight:500}
/* project hero: acid block, condensed title */
.hero{background:var(--acid)!important;color:#111!important;border-radius:24px;padding:18px 26px 22px!important;margin:10px 0 30px!important}
.hero .meta{border-bottom:0;padding:0;text-transform:none;letter-spacing:0;font-size:13.5px;font-weight:600;justify-content:flex-start;gap:22px}
.hero .meta .back{font-size:13.5px;text-transform:none;color:#111}
.hero .meta span{opacity:.6}
.hero .phead{margin:26px 0 20px}
.hero .phead h1{font-weight:800;font-variation-settings:"wdth" 64;font-size:clamp(64px,12vw,200px);line-height:.84;letter-spacing:-.01em;text-transform:uppercase;color:#111;margin:0}
.hero .btn{background:#111;color:var(--acid)}
.hero .btn.plain{background:none;color:#111}
.hero .btn.plain:hover{background:rgba(0,0,0,.08)}
.hero .spine{height:10px;border-radius:999px;gap:0}
.hero .spine button{border-radius:0;box-shadow:none!important}
.brief .b{font-size:19px;font-weight:500;letter-spacing:-.01em}
.reading{background:var(--panel);border-radius:20px}
.reading h4{text-transform:none;letter-spacing:0;font-size:14px}
.proj .collage{border-radius:20px}
.proj h3{font-weight:800;font-variation-settings:"wdth" 68;text-transform:uppercase;font-size:30px;letter-spacing:0;line-height:.95;margin-top:12px}
.newproj{border-radius:20px}
.pspine{border-radius:999px;height:6px}
.dcard b{text-transform:none;font-variation-settings:"wdth" 100;letter-spacing:-.01em}
.dimgs{border-radius:14px}
/* viewer, sheets, desk */
.side h2{font-weight:800;font-variation-settings:"wdth" 70;text-transform:uppercase;font-size:40px;line-height:.9;letter-spacing:-.005em}
.sec h3{text-transform:none;letter-spacing:0;font-size:13.5px}
.pal{border-radius:14px}
.viewer .stagebox img{border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.14)}
.sheet{border-radius:22px;background:var(--wall)}
.smart{border-radius:16px;background:var(--panel);border-color:transparent}
.smart:focus-within{border-color:var(--ink)}
.f input,.f textarea,.f select{border-radius:12px;background:var(--panel);border-color:transparent}
.sheet h2{font-weight:800;font-variation-settings:"wdth" 70;text-transform:uppercase;font-size:30px;letter-spacing:0}
.mc{border-radius:16px;background:var(--panel)}
.mc:nth-child(3),.mc:nth-child(4),.mc:nth-child(5){background:var(--panel);color:var(--ink)}
.mc:nth-child(3){background:var(--acid);color:#111}
.mh{text-transform:none;letter-spacing:0;font-size:12.5px}
.mc:nth-child(n+3) .mh{color:inherit;opacity:.6}
.mc:nth-child(4) .lock,.mc:nth-child(5) .lock{color:var(--ink);border-color:var(--line-2)}
.mbody .mw{font-variation-settings:"wdth" 70;text-transform:uppercase;font-size:28px;line-height:.92;letter-spacing:0}
.mixline{font-weight:700;font-variation-settings:"wdth" 100;letter-spacing:-.02em}
.step{background:var(--acid);border-radius:14px}
.desk{border-radius:20px}
.desk .n{background:var(--acid);color:#111}
.toast{border-radius:14px}
.empty h2.stack .g{opacity:1;color:var(--ink-3)}
.empty h2.stack{font-weight:800;font-variation-settings:"wdth" 64;text-transform:uppercase;letter-spacing:-.005em;line-height:.86;font-size:clamp(64px,11vw,150px)}
.blocks i{border-radius:14px}
.blocks i:nth-child(1){background:var(--acid)!important}.blocks i:nth-child(2){background:var(--ink)!important}.blocks i:nth-child(3){background:#2233F0!important}.blocks i:nth-child(4),.blocks i:nth-child(5){display:none}
.card.idea .kind{color:#fff;opacity:.7}
.mbody .mw{font-size:clamp(18px,2.2vw,26px);overflow-wrap:anywhere}
@media (max-width:640px){.mark span{display:inline}.mark{font-size:22px}.grid{column-gap:12px}.tile{margin-bottom:18px}.tile .pic,.tile .card{border-radius:14px}.gcap{font-size:13.5px;padding-right:32px}.card.note .big,.card.idea .big{font-size:24px}.hero{padding:14px 16px 18px!important}}
/* ================= scrawl layer (from the portfolio) ================= */
:root,:root[data-theme="dark"]{--wall:#000000;--panel:#0F0F0F;--raise:#1A1A1A;--ink:#F4F4F0;--ink-2:#BDBDB6;--ink-3:#7C7C77;--line:rgba(255,255,255,.14);--line-2:rgba(255,255,255,.28);--mine:#7B4CF2;--mine-ink:#fff;--acid:#7B4CF2;--acid-ink:#fff;--scrim:rgba(0,0,0,.72);color-scheme:dark}
:root[data-theme="light"]{--wall:#FAFAF7;--panel:#F0F0EC;--raise:#E8E8E3;--ink:#0A0A0A;--ink-2:#4A4A45;--ink-3:#85857F;--line:rgba(0,0,0,.14);--line-2:rgba(0,0,0,.28);--mine:#6A38EC;--scrim:rgba(250,250,247,.8);color-scheme:light}
:root{--hand:"Patrick Hand SC","Patrick Hand","Comic Neue","Segoe Print",cursive;
  --uline:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 200 12%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M3.0 7.6 7.3 7.8 11.5 7.8 15.6 7.8 19.6 7.8 23.6 7.8 27.6 7.8 31.5 7.8 35.4 7.8 39.2 7.8 43.0 7.8 46.7 7.9 50.4 8.1 54.1 8.2 57.7 8.4 61.4 8.6 65.0 8.8 68.5 8.9 72.1 8.9 75.6 8.9 79.2 8.8 82.7 8.7 86.2 8.5 89.7 8.3 93.2 8.1 96.6 7.8 100.1 7.6 103.6 7.4 107.1 7.3 110.6 7.2 114.2 7.1 117.8 7.0 121.5 6.9 125.2 6.8 128.9 6.7 132.6 6.6 136.4 6.5 140.1 6.4 143.9 6.3 147.7 6.3 151.5 6.3 155.4 6.4 159.2 6.4 163.0 6.5 166.8 6.5 170.6 6.5 174.5 6.5 178.3 6.4 182.1 6.3 185.8 6.1 189.6 5.9 193.3 5.7 197.0 5.4 197.0 5.0 193.3 4.9 189.6 4.8 185.8 4.7 182.0 4.6 178.3 4.5 174.5 4.4 170.7 4.3 166.9 4.3 163.0 4.2 159.2 4.2 155.4 4.1 151.6 4.1 147.8 4.0 144.0 3.9 140.2 3.7 136.4 3.6 132.6 3.5 128.9 3.4 125.1 3.3 121.4 3.3 117.8 3.3 114.1 3.5 110.5 3.6 106.9 3.9 103.4 4.1 99.9 4.4 96.4 4.7 93.0 4.9 89.5 5.0 86.1 5.1 82.6 5.1 79.1 5.0 75.6 5.0 72.1 5.0 68.6 5.0 65.0 5.0 61.4 5.1 57.8 5.1 54.2 5.2 50.5 5.2 46.8 5.2 43.0 5.2 39.2 5.1 35.4 5.1 31.5 5.1 27.6 5.2 23.6 5.3 19.6 5.4 15.5 5.7 11.4 6.0 7.2 6.5 3.0 7.2Z%27 fill=%27black%27/%3E%3Cpath d=%27M150.0 8.7 151.5 9.2 153.0 9.4 154.5 9.5 156.0 9.6 157.5 9.6 159.0 9.6 160.5 9.7 161.9 9.7 163.4 9.8 164.9 9.9 166.4 9.8 167.8 9.8 169.3 9.7 170.7 9.6 172.1 9.6 173.6 9.6 175.0 9.6 176.4 9.5 177.8 9.5 179.1 9.3 180.5 9.2 181.8 9.1 183.2 9.0 184.5 8.9 185.8 8.8 187.1 8.7 188.3 8.6 189.6 8.5 190.8 8.3 192.0 8.1 192.0 7.9 190.8 7.8 189.5 7.8 188.3 7.8 187.0 7.9 185.7 7.9 184.4 8.0 183.1 8.1 181.8 8.1 180.4 8.1 179.1 8.0 177.7 8.0 176.3 8.0 174.9 8.1 173.5 8.2 172.1 8.2 170.7 8.3 169.2 8.2 167.8 8.2 166.3 8.1 164.9 8.1 163.4 8.1 162.0 8.2 160.5 8.2 159.0 8.2 157.5 8.2 156.0 8.1 154.5 8.1 153.0 8.1 151.5 8.1 150.0 8.5Z%27 fill=%27black%27  fill-opacity=%27.6%27/%3E%3C/svg%3E");
  --circle:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 200 80%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M120.0 4.8 113.3 4.1 106.7 3.6 100.1 3.3 93.6 3.1 87.1 3.2 80.8 3.3 74.5 3.6 68.5 4.1 62.5 4.8 56.8 5.6 51.2 6.5 45.9 7.7 40.8 8.9 35.9 10.4 31.3 12.0 27.0 13.7 23.0 15.6 19.3 17.6 16.0 19.8 13.0 22.2 10.3 24.7 8.1 27.4 6.2 30.3 4.8 33.3 3.9 36.6 3.5 39.9 3.4 43.3 4.0 46.6 5.1 49.7 6.7 52.6 8.7 55.3 11.2 57.9 14.1 60.2 17.4 62.4 21.0 64.4 25.0 66.2 29.2 67.9 33.7 69.4 38.5 70.7 43.5 71.9 48.6 72.9 54.0 73.9 59.5 74.6 65.1 75.3 70.9 75.8 76.7 76.3 82.6 76.6 88.5 76.8 94.4 76.9 100.3 76.9 106.2 76.9 112.1 76.7 117.8 76.4 123.4 76.1 128.9 75.6 134.2 75.1 139.4 74.5 144.4 73.8 149.2 72.9 153.9 72.0 158.3 70.9 162.6 69.8 166.7 68.5 170.5 67.2 174.1 65.7 177.5 64.1 180.7 62.4 183.6 60.6 186.2 58.7 188.6 56.6 190.6 54.5 192.4 52.3 193.9 49.9 195.0 47.5 195.9 44.9 196.4 42.3 196.5 39.6 196.3 36.8 195.7 33.8 194.6 31.0 193.1 28.3 191.2 25.9 188.9 23.5 186.3 21.4 183.3 19.4 180.0 17.6 176.4 15.9 172.4 14.4 168.2 13.1 163.6 11.9 158.8 10.9 153.8 10.0 148.5 9.3 143.0 8.7 137.2 8.3 131.3 8.0 125.2 7.9 118.8 7.9 112.4 8.0 105.7 8.3 99.0 8.7 92.1 9.3 85.1 10.0 78.0 10.8 78.0 11.2 85.1 10.6 92.1 10.0 99.0 9.7 105.8 9.4 112.4 9.3 118.8 9.3 125.1 9.4 131.2 9.7 137.1 10.1 142.8 10.7 148.2 11.3 153.4 12.2 158.4 13.1 163.1 14.2 167.5 15.4 171.6 16.7 175.4 18.2 178.9 19.8 182.0 21.5 184.8 23.4 187.3 25.4 189.3 27.5 191.0 29.7 192.3 32.1 193.2 34.5 193.7 37.2 193.9 39.6 193.7 42.0 193.2 44.2 192.4 46.3 191.3 48.4 189.9 50.4 188.2 52.3 186.3 54.1 184.1 55.8 181.6 57.5 178.8 59.1 175.8 60.6 172.6 62.1 169.1 63.4 165.4 64.7 161.5 65.9 157.4 67.1 153.0 68.1 148.5 69.1 143.8 70.0 138.9 70.8 133.8 71.5 128.5 72.1 123.1 72.6 117.6 73.0 111.9 73.3 106.2 73.5 100.3 73.6 94.5 73.6 88.6 73.4 82.7 73.2 76.9 72.8 71.2 72.3 65.5 71.7 60.0 70.9 54.6 70.1 49.4 69.1 44.3 68.0 39.5 66.8 34.9 65.5 30.6 64.0 26.6 62.5 22.8 60.8 19.5 59.0 16.4 57.0 13.8 55.0 11.5 52.9 9.6 50.6 8.2 48.2 7.2 45.7 6.6 43.0 6.5 40.1 6.8 37.1 7.5 34.3 8.7 31.6 10.3 29.0 12.3 26.5 14.7 24.2 17.5 21.9 20.7 19.8 24.2 17.8 28.1 16.0 32.2 14.3 36.7 12.7 41.5 11.3 46.5 10.0 51.7 8.9 57.2 7.9 62.8 7.0 68.7 6.2 74.7 5.6 80.9 5.2 87.2 4.8 93.6 4.6 100.1 4.6 106.7 4.7 113.3 4.9 120.0 5.2Z%27 fill=%27black%27/%3E%3C/svg%3E")}
body{background:var(--wall);color:var(--ink)}
.hand,.tab,.btn,.seg button,.mark,.gcap,.tile .cap,.sec h3,.card .kind,.stage,.back,.chip,.move,.hero .meta,.fcap,.toast,.desk .dl,.dhint,.lock,.mh,.reading h4,.dhead h3,.ch,.sheet h2,.kbd,.sthead b{font-family:var(--hand);letter-spacing:.02em}
.top{background:var(--wall)!important;backdrop-filter:none}
.mark{font-weight:400;font-variation-settings:normal;font-size:26px;text-transform:uppercase;letter-spacing:.04em;position:relative}
.mark span::after{content:"";position:absolute;left:0;right:6px;bottom:-5px;height:7px;background:currentColor;-webkit-mask:var(--uline) center/100% 100% no-repeat;mask:var(--uline) center/100% 100% no-repeat}
.mark{position:relative}.mark span{position:relative}
.search{background:transparent!important;border-radius:0;box-shadow:none!important;border-bottom:1.5px solid var(--line-2);padding:0 2px}
.search:focus-within{border-bottom-color:var(--ink)}
.search input{font-size:15.5px}
.search .kbd{border-color:var(--line-2)}
/* scribbled marks */
.tab{position:relative;font-size:19px;font-weight:400;text-transform:uppercase;color:var(--ink-2);border:0!important;padding:4px 2px 10px}
.tab .n{font-family:var(--font);font-size:11px;opacity:.5}
.tab:hover{color:var(--ink)}
.tab[aria-current="page"],.tab[data-v="mine"][aria-current="page"],.tab[data-act="projects"][aria-current="page"]{color:var(--ink);background:none!important}
.tab[aria-current="page"]::after{content:"";position:absolute;left:-4px;right:-4px;bottom:0;height:8px;background:currentColor;-webkit-mask:var(--uline) center/100% 100% no-repeat;mask:var(--uline) center/100% 100% no-repeat}
.tabs{justify-content:space-between;gap:10px}
.tabs .spacer{display:none}
.seg{background:transparent!important;box-shadow:none;padding:0;gap:4px}
.seg button{position:relative;background:none!important;color:var(--ink-2);font-size:17px;text-transform:uppercase;padding:6px 12px;border-radius:0}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{color:var(--ink)}
.seg button[aria-pressed="true"]::before,.mixbtn::before{content:"";position:absolute;inset:-3px -6px;background:currentColor;-webkit-mask:var(--circle) center/100% 100% no-repeat;mask:var(--circle) center/100% 100% no-repeat;pointer-events:none}
/* buttons: hand-drawn outlines */
.btn{position:relative;background:transparent!important;color:var(--ink)!important;font-size:17.5px;font-weight:400;text-transform:uppercase;border-radius:0!important;padding:8px 16px}
.btn::after{content:"";position:absolute;inset:1px;border:1.8px solid currentColor;border-radius:12px 8px 14px 9px;filter:url(#wobble-sm);pointer-events:none;opacity:.9}
.btn.plain::after,.mixbtn::after,.side .toprow .btn:not(.mine)::after{display:none}
.btn.plain{color:var(--ink-2)!important}.btn.plain:hover{color:var(--ink)!important}
.btn:hover::after{opacity:1;border-width:2.2px}
.btn.ink,.btn.save{background:var(--ink)!important;color:var(--wall)!important}
.btn.ink::after,.btn.save::after{border-color:var(--ink)}
.btn.mine{background:var(--mine)!important;color:#fff!important}.btn.mine::after{border-color:var(--mine)}
.btn svg{width:15px;height:15px}
.mixbtn{background:transparent!important;color:var(--ink)!important;font-size:19px!important;padding:8px 18px!important}
.mixbtn svg{display:none}
.iconbtn{color:var(--ink-2)}.iconbtn:hover{background:var(--raise);color:var(--ink)}
.chip{background:transparent;color:var(--ink);border:1.5px solid var(--line-2);border-radius:999px;font-size:15px;text-transform:uppercase}
/* colour strip, quieter on black */
.swatches{height:10px}
/* tiles */
.tile .pic,.tile .card{border-radius:3px}
.tile.mine .pic,.tile.mine .card{box-shadow:0 0 0 2.5px var(--mine)}
.gcap{justify-content:center;text-align:center;padding:10px 30px 0;font-size:15px;text-transform:uppercase;color:var(--ink-2);font-weight:400}
.tile:hover .gcap{color:var(--ink)}
.traybtn{color:var(--ink-3)}.traybtn[aria-pressed="true"]{color:var(--mine)}
.stage{background:var(--mine)!important;color:#fff!important;font-size:14px!important;text-transform:uppercase;border-radius:3px!important;padding:1px 8px!important}
.kbadge{font-family:var(--hand);text-transform:uppercase;font-size:13px;background:#000!important;border-radius:3px!important}
.card{background:transparent!important;color:var(--ink)!important;position:relative;min-height:170px;padding:22px 22px 26px}
.card::before{content:"";position:absolute;inset:3px;border:1.8px solid currentColor;border-radius:6px 10px 5px 9px;filter:url(#wobble);pointer-events:none;opacity:.85}
.card .kind{font-size:14px;text-transform:uppercase;color:var(--ink-3)!important;opacity:1!important}
.card .big,.card.note .big,.card.idea .big{font-family:var(--hand);font-weight:400;font-variation-settings:normal;text-transform:uppercase;font-size:30px;line-height:1;letter-spacing:.01em}
.card .body,.card.note .body{color:var(--ink-2)!important;opacity:1!important;font-size:14.5px;line-height:1.4;font-weight:400}
.card.idea{background:var(--mine)!important;color:#fff!important}
.card.idea::before{display:none}
.card.idea .kind,.card.idea .body{color:var(--wall)!important}
.card.idea .stage{background:#fff!important;color:var(--mine)!important}
.tile:not(.haspic) .traybtn{background:transparent;color:inherit}
.grid.focus .card .big{font-size:56px}
.grid.focus .fcap{font-size:16px;text-transform:uppercase;justify-content:center;gap:40px;color:var(--ink-2)}
/* giant hand-drawn words: outline, filling with chalk on hover */
.giant{margin:6px 0 0;line-height:.86;white-space:nowrap;overflow:hidden;text-align:center;cursor:default;padding:.02em 0 .04em}
.giant span{display:inline-block;font-family:"Archivo",sans-serif;font-weight:900;font-variation-settings:"wdth" 62;text-transform:uppercase;letter-spacing:-.005em;color:transparent;-webkit-text-stroke:2.4px var(--ink);filter:url(#wobble);transition:color .35s ease}
.giant:hover span{color:var(--ink);-webkit-text-stroke:1px var(--ink);filter:url(#chalk)}
.tagline{text-align:center;font-family:var(--hand);text-transform:uppercase;font-size:clamp(17px,1.8vw,23px);letter-spacing:.03em;margin:18px auto 6px;max-width:60ch}
.tagline u,.tagline em{font-style:normal;text-decoration:none;position:relative;white-space:nowrap}
.tagline u::after{content:"";position:absolute;left:-2px;right:-2px;bottom:-7px;height:8px;background:currentColor;-webkit-mask:var(--uline) center/100% 100% no-repeat;mask:var(--uline) center/100% 100% no-repeat}
.tagline em{padding:0 6px}
.tagline em::before{content:"";position:absolute;inset:-9px -10px;background:currentColor;-webkit-mask:var(--circle) center/100% 100% no-repeat;mask:var(--circle) center/100% 100% no-repeat}
.hero{background:none!important;color:var(--ink)!important;border-radius:0;padding:0!important;margin:4px 0 26px!important}
.hero .meta{justify-content:space-between;font-size:16px;text-transform:uppercase;color:var(--ink-2);border:0;padding:8px 0 0}
.hero .meta span{opacity:1}
.hero .meta .back{font-family:var(--hand);font-size:16px;color:var(--ink)}
.hero .phead{margin:10px 0 18px;justify-content:center;gap:8px}
.hero .phead .spacer{display:none}
.hero .btn{background:transparent!important;color:var(--ink)!important}
.hero .btn.plain{color:var(--ink-2)!important}
.hero .spine{height:8px;border-radius:0;margin-top:6px}
.empty .blocks{display:none}
.empty .giant{margin-bottom:6px}
.empty p:not(.tagline){font-family:var(--font)}
.brief .b{font-weight:400}
.reading{background:transparent;position:relative}
.reading::before{content:"";position:absolute;inset:2px;border:1.6px solid var(--line-2);border-radius:10px 6px 12px 7px;filter:url(#wobble);pointer-events:none}
.reading h4{font-size:17px;font-weight:400;text-transform:uppercase}
.proj h3{font-family:var(--hand);font-weight:400;font-variation-settings:normal;font-size:28px;text-transform:uppercase;letter-spacing:.02em;text-align:center}
.proj p{text-align:center}
.proj .collage{border-radius:3px}
.newproj{border:0;position:relative;border-radius:0;font-family:var(--hand);font-size:20px;text-transform:uppercase}
.newproj::before{content:"";position:absolute;inset:4px;border:1.8px dashed var(--line-2);border-radius:8px;filter:url(#wobble)}
.dhead h3{font-size:22px;font-weight:400;text-transform:uppercase}
.dcard b{font-family:var(--hand);font-weight:400;font-variation-settings:normal;text-transform:uppercase;font-size:22px}
/* viewer, sheets, desk */
.viewer{background:var(--wall)}
.side{background:var(--wall);border-left:1px solid var(--line)}
.side h2{font-family:var(--hand);font-weight:400;font-variation-settings:normal;font-size:36px;line-height:1;letter-spacing:.01em}
.sec{border-top-color:var(--line)}
.sec h3{font-size:15.5px;font-weight:400;text-transform:uppercase;color:var(--ink-2)}
.tag{background:transparent;border:1.4px solid var(--line-2);font-size:13.5px}
.tag:hover{background:var(--raise)}
.viewer .stagebox img{border-radius:2px;box-shadow:none}
.viewer .nav{background:transparent;border:1.5px solid var(--line-2)}
.sheet{background:var(--wall);border-radius:6px;box-shadow:none;position:relative;border:0}
.sheet::before{content:"";position:absolute;inset:2px;border:2px solid var(--ink);border-radius:14px 9px 16px 10px;filter:url(#wobble);pointer-events:none}
.sheet h2{font-weight:400;font-variation-settings:normal;font-size:30px;letter-spacing:.03em}
.smart{background:var(--raise);border-color:transparent}
.f input,.f textarea,.f select{background:var(--raise)}
.f>span,.shint{font-family:var(--hand);font-size:15px;text-transform:uppercase;letter-spacing:.02em}
.mc{background:transparent!important;color:var(--ink)!important;position:relative}
.mc::before{content:"";position:absolute;inset:2px;border:1.6px solid var(--line-2);border-radius:10px 7px 12px 8px;filter:url(#wobble);pointer-events:none}
.mc.on{box-shadow:none}.mc.on::before{border-color:var(--mine);border-width:2.4px}
.mc .mh,.mc:nth-child(n+3) .mh{color:var(--ink-3)!important;opacity:1;font-size:14px;text-transform:uppercase}
.lock{font-size:13px;text-transform:uppercase;color:var(--ink-2)!important;border-color:var(--line-2)!important}
.lock[aria-pressed="true"]{background:var(--mine)!important;border-color:var(--mine)!important;color:#fff!important}
.mbody:hover{background:var(--raise)!important}
.mbody .mw{font-family:var(--hand);font-weight:400;font-variation-settings:normal;font-size:clamp(20px,2.2vw,28px);line-height:1}
.mixline{font-family:var(--hand);font-weight:400;font-variation-settings:normal;text-transform:uppercase;letter-spacing:.02em;line-height:1.15}
.step{background:transparent;border:1.5px solid var(--mine);color:var(--ink)}
.qs{font-family:var(--hand);text-transform:uppercase;letter-spacing:.02em;font-size:20px}
.ptext{background:var(--raise)}
.desk{background:var(--wall)!important;color:var(--ink)!important;box-shadow:0 0 0 1px var(--line-2),0 20px 60px rgba(0,0,0,.6)}
.desk .dl{font-size:17px;text-transform:uppercase}
.desk .n{background:var(--mine)!important;color:#fff!important;font-family:var(--font)}
.desk .btn{font-size:15px}
.toast{background:var(--ink);color:var(--wall);font-size:16px;text-transform:uppercase;border-radius:6px}
.toast button{color:var(--mine);font-family:var(--hand)}
.menu{background:var(--panel);box-shadow:0 0 0 1px var(--line-2),0 20px 50px rgba(0,0,0,.5)}
.drift{background:#000}
.drift figcaption,.drift figcaption b{font-family:var(--hand);text-transform:uppercase;font-weight:400;font-size:17px;letter-spacing:.02em}
.spark p.q{font-family:var(--hand);text-transform:uppercase;font-weight:400}
.sheet.cmd::before{display:none}.sheet.cmd{box-shadow:0 0 0 1.5px var(--line-2)}
.crow[aria-selected="true"]{background:var(--raise)}
@media (max-width:640px){.mark span{display:inline!important}.mark{font-size:22px}.tab{font-size:16px}.tabs{gap:6px}.giant span{-webkit-text-stroke-width:1.6px}.hero .meta span:nth-child(3){display:none}.card .big{font-size:24px}}
@media (prefers-reduced-motion:reduce){.giant span{transition:none}}
/* ================= all type handwritten ================= */
:root{--font:"Patrick Hand SC","Patrick Hand","Comic Neue","Segoe Print",cursive}
body,button,input,textarea,select,.ptext{font-family:var(--hand);font-synthesis:none}
body{font-size:16.5px;letter-spacing:.015em;line-height:1.4}
h1,h2,h3,h4,.big,.side h2,.sheet h2,.mixline,.qs,.reader h1,.proj h3,.dcard b,.mw,.card .big,.empty h2,.reading h4{font-family:var(--hand)!important;font-weight:400!important;font-variation-settings:normal!important;letter-spacing:.015em!important;font-style:normal!important}
.empty h2{font-size:clamp(40px,6vw,72px)!important;line-height:1!important;text-transform:uppercase}
.empty p{font-size:18px}
.card .body,.desc,.why,.brief .b,.reading p,.reader p,.tile .fnote,.spark p.w,.pwhy,.step,.card .kind,.muted,.small{font-family:var(--hand)}
.desc,.why,.reading p,.card .body{font-size:16px!important;line-height:1.4!important}
.brief .b{font-size:22px}
.reader{font-size:19px}
.search input,.cmdin input,.smart textarea,.f input,.f textarea,.ptext{font-size:17px!important;letter-spacing:.02em}
.tab .n,.desk .n,.search .kbd,.cmdin kbd{font-family:var(--hand)!important}
.stack,.bignum b{font-family:var(--hand)!important}
/* HIVEMIND: heavy condensed chalk letters, like SCRAWLS */
.mark{font-family:"Archivo",sans-serif!important;font-weight:900!important;font-variation-settings:"wdth" 62!important;font-size:38px!important;line-height:.9;letter-spacing:.005em!important;text-transform:uppercase}
.mark span{filter:url(#chalk-sm)}
.mark span::after{display:none}
/* search fills the width of the nav */
.bar .search{flex:1 1 auto;max-width:none}
.bar>.spacer{display:none}
/* ================= sketched controls ================= */
.sk{filter:url(#wobble-sm);display:block}
.index{padding:14px 0 16px;min-height:0;align-items:center}
.index .filters{flex-wrap:wrap}
.skicons{display:flex;align-items:center;gap:2px}
.skbtn{position:relative;width:44px;height:38px;display:grid;place-items:center;color:var(--ink-3);border-radius:0}
.skbtn svg{width:26px;height:22px}
.skbtn:hover{color:var(--ink)}
.skbtn[aria-pressed="true"]{color:var(--ink)}
.skbtn[aria-pressed="true"]::before{content:"";position:absolute;inset:0 -2px;background:currentColor;-webkit-mask:var(--circle) center/100% 100% no-repeat;mask:var(--circle) center/100% 100% no-repeat;pointer-events:none}
.skdiv{width:1.5px;height:20px;margin:0 8px;background:var(--line-2);border-radius:2px;transform:rotate(8deg)}
.colourbar{padding:0 0 22px;animation:fade .2s ease}
.colourbar .swatches{height:14px}
/* search: hand-drawn magnifier and a scribbled underline */
.bar .search,.studio .search{border-bottom:0!important;position:relative}
.bar .search::after,.studio .search::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:8px;background:var(--line-2);-webkit-mask:var(--uline) center/100% 100% no-repeat;mask:var(--uline) center/100% 100% no-repeat;pointer-events:none}
.bar .search:focus-within::after,.studio .search:focus-within::after{background:var(--ink)}
.search svg.sk{width:19px;height:19px;color:var(--ink-3)}
.search:focus-within svg.sk{color:var(--ink)}
/* desk: sketched outline */
.desk{box-shadow:0 20px 60px rgba(0,0,0,.6)!important;border-radius:0!important;isolation:isolate}
.desk::before{content:"";position:absolute;inset:2px;border:1.8px solid var(--ink-2);border-radius:22px 16px 24px 18px;filter:url(#wobble);pointer-events:none;background:var(--wall);z-index:-1}
.desk{background:transparent!important}
/* filled buttons get rough, sketched edges too */
.btn.ink,.btn.save,.btn.mine{background:transparent!important;isolation:isolate}
.btn.ink::after,.btn.save::after,.btn.mine::after{background:var(--ink);border-color:var(--ink);z-index:-1;inset:1px;opacity:1;filter:url(#wobble-sm);border-radius:11px 8px 13px 9px}
.btn.mine::after{background:var(--mine);border-color:var(--mine)}
.btn.ink:hover::after,.btn.save:hover::after{border-width:1.8px;filter:url(#wobble)}
/* ================= scrapbook edges on tiles ================= */
.tile .pic,.tile .card{border-radius:0!important;clip-path:var(--rough)}
.tile .pic{box-shadow:none!important}
.tile.mine .card{box-shadow:none!important}
.tile .pw{position:relative}
.tile.mine .pw{filter:drop-shadow(2.5px 0 0 var(--mine)) drop-shadow(-2.5px 0 0 var(--mine)) drop-shadow(0 2.5px 0 var(--mine)) drop-shadow(0 -2.5px 0 var(--mine))}
.tile .hpal{border-radius:0}
.grid.salon .tile .pw{height:100%}
/* studio header: the big wordmark with a handwritten label */
.sthead{gap:12px;margin-bottom:16px}
.sthead .mark{font-size:34px!important}
.stlabel{font-family:var(--hand);font-size:19px;text-transform:uppercase;letter-spacing:.02em;color:var(--ink);transform:translateY(2px)}
/* notebook dot grid behind the work, like a dotted Moleskine page */
:root,:root[data-theme="dark"]{--dot:rgba(255,255,255,.085)}
:root[data-theme="light"]{--dot:rgba(0,0,0,.11)}
body{background-color:var(--wall);background-image:radial-gradient(circle at center,var(--dot) 1.1px,transparent 1.6px);background-size:22px 22px;background-position:11px 11px}
.top{background:var(--wall)!important}
.viewer,.drift{background-image:none}
/* prompt maker */
a.btn{color:inherit;text-decoration:none}
.sheet a.btn:not(.ink):not(.mine){background:var(--panel)}
.sheet.prompt{width:min(720px,100%)}
.psrc{display:flex;align-items:center;gap:12px;margin:-4px 0 14px;flex-wrap:wrap}
.pthumbs{display:flex;gap:4px}
.pthumb{width:34px;height:34px;border-radius:8px;overflow:hidden;background:var(--panel);display:block}
.pthumb img{width:100%;height:100%;object-fit:cover}.pthumb .tx{font-size:8px;padding:3px;display:block;line-height:1.1}
.ptarget{margin-bottom:12px}
.popts{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.ptoggle{display:inline-flex;gap:7px;align-items:center;font-size:14px;color:var(--ink-2)}
.ptext{width:100%;border:0;border-radius:16px;background:var(--panel);padding:16px 18px;font:500 15.5px/1.5 var(--font);resize:vertical;min-height:150px;color:var(--ink)}
.ptext:focus{outline:none;box-shadow:0 0 0 2px var(--ink)}
.ptext.busy{opacity:.55}
.pwhy{margin:10px 2px 0;min-height:1.2em}
/* no replaying entrance animations, and no layout jump when overlays lock scrolling */
.still{animation:none!important}
html{scrollbar-gutter:stable}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:640px){
  .mark span{display:none}.search kbd{display:none}.btn.save span{display:none}.btn.save{padding:9px 11px}.mixbtn span{display:none}
  .bar{flex-wrap:wrap;row-gap:10px}.search{order:5;flex-basis:100%;max-width:none}
  .grid{columns:2;column-gap:10px}.sparkbar .btn:not([data-act=nextmove]){display:none}.tile{margin-bottom:14px}.tile .cap{font-size:12.5px}.tile .cap .m{display:none}
  .card{padding:12px 12px 14px;min-height:0}.card .big{font-size:16px}.card .body{font-size:13px;-webkit-line-clamp:4}
  .stage{left:5px;top:5px;font-size:11px}
}
@media (max-width:860px){.viewer .stagebox.noimg{height:auto;padding-top:64px}}
/* ================= type scale: four sizes, used everywhere ================= */
:root{--t-s:14px;--t-m:17px;--t-l:28px;--t-xl:48px}
@media (max-width:640px){:root{--t-s:13px;--t-m:16px;--t-l:24px;--t-xl:36px}}
.search kbd,
.btn.sm,
.chip,
.tile .cap,
.stage,
.card .kind,
.proj p,
.back,
.reading,
.thumbs .pdf,
.f>span,
.f select,
.whose button span,
.stages button,
.actions .note,
.side .src,
.sec h3,
.pal button span,
.tag,
.mini .tx,
.small,
.picker .pgridmini .tx,
.spark p.w,
.menu button,
.menu .row,
.sheet.save h2 .seg,
.shint,
.kbadge,
.card .kt,
.reader .rsite,
.reader .rby,
.mh,
.lock,
.mbody .mt,
.mbody .ml,
.vref,
.dcard p,
.dimgs span,
.grid.focus .fnote,
.search .kbd,
.dt .tx,
.ci .tx,
.dhint,
.sthumb .tx,
.stitle,
.stitle .muted,
.sitem figcaption,
.cmdin kbd,
.ch,
.cl .muted,
.desk .n,
.tab .n,
.move .ml,
.move .mt,
.move .ma button,
.gcap,
.mc .mh,
.mc:nth-child(n+3) .mh,
.desk .btn,
.pthumb .tx,
.ptoggle{font-size:var(--t-s)!important}
.search input,
.seg button,
.card .body,
.reading h4,
.f input,
.f textarea,
.desc,
.drift figcaption,
.toast,
.sparkbar .st,
.desk .dl,
body,
.tab,
.hero .meta,
.hero .meta .back,
.grid.focus .fcap,
.card.note .body,
.empty p,
.viewer .stagebox .card .body,
.why,
.smart textarea,
.reader,
.qs,
.grid.focus .cap,
.grid.focus .card .body,
.cmdin input,
.drift figcaption b,
.btn,
.mixbtn,
.newproj,
.reading p,
.ptext,
.stlabel{font-size:var(--t-m)!important}
.proj h3,
.brief .b,
.mbody .mw,
.dhead h3,
.dcard b,
.card .big,
.sheet h2,
.viewer .stagebox .card .big,
.spark p.q,
.dropall,
.mixline,
.card.note .big,
.card.idea .big,
.grid.focus .cap .t,
.tagline{font-size:var(--t-l)!important}
.side h2,
.grid.focus .card .big,
.empty h2,
.reader h1,
.grid.focus .card.note .big,
.grid.focus .card.idea .big{font-size:var(--t-xl)!important}
body,button,input,textarea,select{font-size:var(--t-m)}
.tab .n,.desk .n{vertical-align:super;line-height:0}
.side h2{font-size:var(--t-l)!important;line-height:1!important}
.brief .b{font-size:var(--t-m)!important}
.phead h1{font-size:var(--t-xl)!important;line-height:1!important;font-family:var(--hand)!important;font-weight:400!important;font-variation-settings:normal!important;letter-spacing:.015em!important}
.card .big{line-height:1!important}
/* ================= tape, pile, sticking-in, drawing ================= */
.tile{position:relative}
.tape{position:absolute;z-index:4;width:62px;height:20px;top:-8px;pointer-events:none;background:repeating-linear-gradient(90deg,rgba(236,229,206,.8) 0 3px,rgba(226,218,192,.8) 3px 6px);box-shadow:0 1px 2px rgba(0,0,0,.35);clip-path:polygon(0 12%,6% 0,12% 14%,18% 2%,24% 10%,30% 0,100% 0,100% 100%,94% 88%,88% 100%,82% 90%,76% 100%,70% 88%,0 100%)}
.tape.tl{left:-14px;transform:rotate(-38deg)}
.tape.tr{right:-14px;transform:rotate(36deg)}
:root[data-theme="light"] .tape{background:repeating-linear-gradient(90deg,rgba(214,206,178,.85) 0 3px,rgba(204,196,166,.85) 3px 6px)}
.tapebtn{position:absolute;right:34px;bottom:0;width:32px;height:32px;display:grid;place-items:center;color:var(--ink-3);opacity:0;z-index:3}
.tapebtn svg{width:17px;height:17px}
.tile:hover .tapebtn,.tapebtn:focus-visible,.tapebtn[aria-pressed="true"]{opacity:1}
.tapebtn[aria-pressed="true"]{color:var(--ink)}
.tile:not(.haspic) .tapebtn{top:12px;right:48px;bottom:auto}
.grid.salon .tapebtn,.grid.salon .traybtn{display:none}
@media (hover:none){.tapebtn,.traybtn{opacity:1}}
.tile.fresh{animation:stickin .7s cubic-bezier(.3,1.4,.4,1) both}
@keyframes stickin{0%{opacity:0;transform:translateY(-22px) rotate(-3deg) scale(1.04)}60%{opacity:1;transform:translateY(2px) rotate(.8deg)}100%{transform:none}}
.tile.pending .pic{opacity:.55}
.tile.pending .pic img{width:100%;height:100%;object-fit:cover;filter:grayscale(.6)}
.pencil{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--hand);text-transform:uppercase;font-size:var(--t-s);background:var(--wall);color:var(--ink);padding:5px 12px;border-radius:999px;white-space:nowrap;animation:pencil 1.2s ease-in-out infinite}
.tile.pending.queued .pencil{animation:none;border:1.5px dashed var(--ink-2)}
@keyframes pencil{50%{transform:translate(-50%,-50%) rotate(-2deg)}}
/* the pile */
.pile{display:flex;flex-direction:column;align-items:center;padding:8px 0 20px;user-select:none}
.pstack{position:relative;width:min(560px,100%);height:min(62vh,640px);touch-action:none}
.pcard{position:absolute;inset:0;margin:auto;display:flex;align-items:center;justify-content:center;transform:rotate(var(--r)) translateY(calc(var(--d) * 8px)) scale(calc(1 - var(--d) * .035));transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.pcard img{max-width:100%;max-height:100%;object-fit:contain;clip-path:var(--rough);display:block}
.pcard .card{width:min(420px,92%);min-height:260px;clip-path:var(--rough)}
.pcard .card .big{font-size:var(--t-l)!important}
.pcard.under{filter:brightness(.55);pointer-events:none}
.pcard.top{cursor:grab;z-index:3}
.pcard.top:active{cursor:grabbing}
.pcard.mine img,.pcard.mine .card{filter:drop-shadow(2.5px 0 0 var(--mine)) drop-shadow(-2.5px 0 0 var(--mine)) drop-shadow(0 2.5px 0 var(--mine)) drop-shadow(0 -2.5px 0 var(--mine))}
.pcard .tape{top:auto}
.pcard .tape.tl{left:calc(50% - 150px);top:-4px}.pcard .tape.tr{right:calc(50% - 150px);top:-4px}
.pmeta{display:grid;justify-items:center;text-align:center;gap:2px;margin-top:18px;font-family:var(--hand);text-transform:uppercase}
.pmeta .pt{font-size:var(--t-m)}
.pmeta .ps,.pmeta .pn{font-size:var(--t-s);color:var(--ink-3)}
.pactions{display:flex;gap:6px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.pa{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:62px;min-height:58px;justify-content:center;color:var(--ink-2);font-family:var(--hand);font-size:var(--t-s);text-transform:uppercase;position:relative}
.pa svg{width:22px;height:22px;filter:url(#wobble-sm)}
.pa:hover,.pa[aria-pressed="true"]{color:var(--ink)}
.pa[aria-pressed="true"]::before{content:"";position:absolute;inset:0 -4px;background:currentColor;-webkit-mask:var(--circle) center/100% 100% no-repeat;mask:var(--circle) center/100% 100% no-repeat}
.pa:disabled{opacity:.3}
.pendline{text-align:center;font-family:var(--hand);text-transform:uppercase;font-size:var(--t-s);color:var(--ink-2);margin:0 0 6px;animation:pencil 1.2s ease-in-out infinite}
.phint{color:var(--ink-3);font-size:var(--t-s);text-align:center;margin:10px 0 0}
@media (max-width:640px){.pile{padding-top:0}.pstack{height:calc(100svh - 440px);min-height:230px}body.hasdesk .pstack{height:calc(100svh - 510px)}.pmeta{margin-top:10px}.pactions{margin-top:6px;gap:0}.pa{min-width:58px}.phint{display:none}.pcard .tape.tl{left:4px}.pcard .tape.tr{right:4px}.pendline{margin-top:-4px}}
/* drawing */
.drawpad{position:fixed;inset:0;z-index:60;background:var(--wall);display:grid;grid-template-rows:auto 1fr auto;padding:max(10px,env(safe-area-inset-top,0px)) 10px calc(10px + env(safe-area-inset-bottom,0px))}
.dtools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:4px 4px 10px}
.dcanvas{display:grid;place-items:center;min-height:0;overflow:hidden}
#dcv{touch-action:none;clip-path:polygon(0 1px,100% 0,100% calc(100% - 1px),0 100%);box-shadow:0 0 0 1.5px var(--line-2);cursor:crosshair;max-width:100%;max-height:100%}
.dhint2{text-align:center;color:var(--ink-3);font-size:var(--t-s);margin:8px 0 0}
.smart.listening{border-color:var(--mine)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--mine) 35%,transparent)}
.mfab.held::before{background:var(--mine)}
.mfab.held{transform:scale(1.08)}
@media (max-width:640px){.capgrid{grid-template-columns:1fr 1fr}.capbtn{aspect-ratio:1.5}.capgrid .capbtn:nth-child(5):last-child{grid-column:span 2;aspect-ratio:3}}
/* ================= saved piles ================= */
.pilesrow{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;padding:14px 0 0}
.plbl{font-family:var(--hand);text-transform:uppercase;font-size:var(--t-s);color:var(--ink-3);margin-right:2px}
.pchip{position:relative;font-family:var(--hand);text-transform:uppercase;font-size:var(--t-s);color:var(--ink-2);padding:6px 10px}
.pchip sup{font-size:.8em;opacity:.6;margin-left:2px}
.pchip:hover{color:var(--ink)}
.pchip[aria-pressed="true"]{color:var(--ink)}
.pchip[aria-pressed="true"]::before{content:"";position:absolute;inset:-2px -4px;background:currentColor;-webkit-mask:var(--circle) center/100% 100% no-repeat;mask:var(--circle) center/100% 100% no-repeat}
@media (max-width:640px){.pilesrow{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.pchip{white-space:nowrap}}
.savepilebtn svg{width:13px;height:13px}
.sheet.savepile{width:min(480px,100%)}
.tpiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:20px}
.tpc{display:grid;justify-items:start;gap:4px;text-align:left}
.tpimgs{position:relative;width:100%;aspect-ratio:4/3;display:block}
.tpimgs img{position:absolute;width:62%;height:78%;object-fit:cover;box-shadow:0 8px 20px rgba(0,0,0,.45);clip-path:polygon(1% 2%,99% 0,100% 98%,0 100%)}
.tpimgs img[style*="--i:0"]{left:4%;top:8%;transform:rotate(-5deg);z-index:1}
.tpimgs img[style*="--i:1"]{left:22%;top:4%;transform:rotate(3deg);z-index:2}
.tpimgs img[style*="--i:2"]{left:36%;top:12%;transform:rotate(-1deg);z-index:3}
.tpc:empty .tpimgs,.tpimgs:empty{border:1.8px dashed var(--line-2);border-radius:10px}
.tpname{font-family:var(--hand);text-transform:uppercase;font-size:var(--t-m);margin-top:8px}
.tpcount{font-size:var(--t-s);color:var(--ink-3)}
.tpc:hover .tpname{text-decoration:underline}
@media (max-width:640px){.tpiles{grid-template-columns:1fr 1fr;gap:14px}}
/* ================= Today ================= */
.today{padding:4px 0 40px}
.tgreet{font-family:var(--hand);text-transform:uppercase;font-size:var(--t-l);line-height:1.1;margin:8px 0 22px;color:var(--ink-2)}
.tgreet span{color:var(--ink)}
.tpile{position:relative;display:flex;align-items:center;gap:18px;width:100%;text-align:left;padding:18px 22px;margin-bottom:30px;color:var(--ink)}
.tpile::before{content:"";position:absolute;inset:2px;border:2px solid var(--ink);border-radius:18px 12px 20px 14px;filter:url(#wobble)}
.tpn{font-family:"Archivo",sans-serif;font-weight:900;font-variation-settings:"wdth" 62;font-size:var(--t-xl);line-height:.9;filter:url(#chalk-sm)}
.tpt{flex:1;display:grid;font-family:var(--hand);text-transform:uppercase;font-size:var(--t-m)}
.tpt span{color:var(--ink-3);font-size:var(--t-s);text-transform:none}
.tpile svg{width:22px;height:22px}
.tsec{margin-bottom:34px}
.thead{display:flex;align-items:baseline;gap:14px;margin-bottom:12px}
.thead h2{margin:0;font-size:var(--t-l)!important;text-transform:uppercase}
.tlink{font-family:var(--hand);text-transform:uppercase;font-size:var(--t-s);color:var(--ink-2);position:relative}
.tlink:hover{color:var(--ink)}
.tlink::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:6px;background:currentColor;-webkit-mask:var(--uline) center/100% 100% no-repeat;mask:var(--uline) center/100% 100% no-repeat;opacity:.6}
.trow{display:flex;gap:18px;overflow-x:auto;padding:10px 4px 6px;scrollbar-width:none;scroll-snap-type:x proximity}
.trow::-webkit-scrollbar{display:none}
.trow .tile{flex:none;width:220px;margin:0;scroll-snap-align:start}
.tarch{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center}
.tarchpic{display:block;max-width:300px}
.tarchpic img{max-width:300px;max-height:300px;width:auto;height:auto;display:block;transform:rotate(-1.2deg);box-shadow:0 10px 30px rgba(0,0,0,.4)}
.tarchpic .card{min-height:220px}
.tago{margin:0;font-family:var(--hand);text-transform:uppercase;font-size:var(--t-l);line-height:1.05}
.tq{margin:4px 0 14px;color:var(--ink-2)}
.tbtns{display:flex;gap:8px;flex-wrap:wrap}
.still2{animation:none!important}
@media (max-width:640px){.trow .tile{width:150px}.tarch{grid-template-columns:120px 1fr;gap:16px}.tarchpic,.tarchpic img{max-width:120px;max-height:150px}.tago{font-size:var(--t-m)}.tgreet{margin-top:4px;font-size:var(--t-m)}}
/* Make sheet + keys */
.sheet.make{width:min(520px,100%)}
.mklist{display:grid;gap:2px}
.sheet.keys dl{display:grid;grid-template-columns:1fr 1fr;gap:10px 28px;margin:0}
.sheet.keys dl div{display:flex;gap:12px;align-items:center}
.sheet.keys dt{min-width:52px}
.sheet.keys dd{margin:0;color:var(--ink-2)}
.sheet.keys kbd{font-family:var(--hand);border:1.5px solid var(--line-2);border-radius:6px;padding:1px 8px}
@media (max-width:640px){.sheet.keys dl{grid-template-columns:1fr}}
/* viewer: essentials first */
.more{border-top:1px solid var(--line);padding:6px 0}
.more summary{cursor:pointer;list-style:none;font-family:var(--hand);text-transform:uppercase;font-size:var(--t-s);color:var(--ink-2);padding:10px 0;position:relative;display:inline-block}
.more summary::-webkit-details-marker{display:none}
.more summary::after{content:" +";}
.more[open] summary::after{content:" −"}
.more summary:hover{color:var(--ink)}
.more .sec:first-of-type{border-top:0}
/* marks draw themselves in, like a pen stroke */
@property --sweep{syntax:'<angle>';inherits:false;initial-value:360deg}
.tab.draw::after,.tagline.draw u::after{animation:penline .42s cubic-bezier(.3,.7,.2,1) both}
.tagline.draw u::after{animation-delay:.45s}
@keyframes penline{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 -2% 0 0)}}
.vrow2.draw .vico::before,.pa.draw::before,.tagline.draw em::before{-webkit-mask:var(--circle) center/100% 100% no-repeat,conic-gradient(from 20deg,#000 var(--sweep),transparent 0);-webkit-mask-composite:source-in;mask:var(--circle) center/100% 100% no-repeat,conic-gradient(from 20deg,#000 var(--sweep),transparent 0);mask-composite:intersect;animation:pencircle .5s ease-out both}
.tagline.draw em::before{animation-delay:.25s}
@keyframes pencircle{from{--sweep:0deg}to{--sweep:360deg}}
.giant.draw span{animation:sketchin .9s cubic-bezier(.4,.1,.2,1) both}
@keyframes sketchin{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(-10% -2% -10% 0)}}
/* easier-to-read grey */
:root,:root[data-theme="dark"]{--ink-3:#9B9B95}
:root[data-theme="light"]{--ink-3:#6C6C66}
@media (prefers-reduced-motion:reduce){.draw,.draw *,.draw::before,.draw::after{animation:none!important}}
/* ================= view menu ================= */
.viewbtn svg{width:24px;height:21px}
.viewbtn[aria-expanded="true"]{color:var(--ink)}
.viewmenu{min-width:270px;padding:8px;right:-6px}
.vrow2{display:flex!important;align-items:center;gap:14px;width:100%;padding:10px 12px!important;border-radius:8px;text-align:left;color:var(--ink-2)}
.vrow2:hover{background:var(--raise)}
.vrow2[aria-checked="true"]{color:var(--ink)}
.vico{position:relative;width:44px;height:38px;display:grid;place-items:center;flex:none}
.vico svg{width:26px;height:22px}
.vrow2[aria-checked="true"] .vico::before{content:"";position:absolute;inset:0 -2px;background:currentColor;-webkit-mask:var(--circle) center/100% 100% no-repeat;mask:var(--circle) center/100% 100% no-repeat}
.vl{display:grid;font-family:var(--hand);text-transform:uppercase;font-size:var(--t-m);line-height:1.15}
.vl span{text-transform:none;font-size:var(--t-s);color:var(--ink-3)}
.gridtop{height:18px}
.colourbar{padding-top:6px}
@media (max-width:640px){.viewmenu{position:fixed;left:12px;right:12px;top:auto;bottom:calc(104px + env(safe-area-inset-bottom,0px));min-width:0}.vrow2{min-height:60px}}
.menu{background:var(--wall)!important;box-shadow:0 20px 50px rgba(0,0,0,.55)!important;isolation:isolate}
.menu::before{content:"";position:absolute;inset:2px;border:1.8px solid var(--ink-2);border-radius:14px 10px 16px 11px;filter:url(#wobble);pointer-events:none;z-index:-1}
/* ================= phone: capture first ================= */
.mbar{display:none}
.mpicker{display:none}
.msec{white-space:nowrap}
@media (max-width:640px){
  :root{--t-s:14px;--t-m:18px;--t-l:26px;--t-xl:36px}
  .bar .mixbtn,.bar [data-act=drift],.bar .save,.search .kbd{display:none!important}
  .bar{gap:8px}.bar .mark{margin-right:auto}
  .bar .iconbtn{width:46px;height:46px}
  /* Find, in the bottom bar, already opens search — the full bar up top is one job too many */
  .top .bar .search{display:none!important}
  .top{padding-top:calc(10px + env(safe-area-inset-top,0px))}
  /* The scrolling row of sections becomes one tappable label with a dropdown, sitting right in the header row like a native app's nav title */
  .tabs{display:none}
  .mpicker{display:flex;margin-left:auto}
  .bar .spacer{display:none}
  .msec{display:flex;align-items:center;gap:4px;font-family:var(--hand);text-transform:uppercase;font-size:var(--t-m);padding:8px 4px}
  .msec .sk{width:13px;height:13px;margin-top:1px}
  .secmenu{left:auto;right:0;top:calc(100% + 4px);min-width:220px}
  .bar{flex-wrap:nowrap!important;gap:4px}
  .mark{flex:none}
  .bar .iconbtn{width:38px;height:38px;flex:none}
  .msec{padding:6px 2px;gap:2px}
  .msec .sk{width:11px;height:11px}
  .top .bar{min-height:38px}
  @media (max-width:380px){.mark{font-size:19px!important}}
  .desk:not(.show){display:none}
  .desk{bottom:calc(96px + env(safe-area-inset-bottom,0px))!important}
  body{padding-bottom:0}
  main{padding-bottom:calc(130px + env(safe-area-inset-bottom,0px))!important}
  body.hasdesk main{padding-bottom:calc(200px + env(safe-area-inset-bottom,0px))!important}
  .toast,body.hasdesk .toast{bottom:auto!important;top:calc(12px + env(safe-area-inset-top,0px));min-height:48px;font-size:var(--t-m)!important}
  .mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:26;align-items:center;justify-content:space-around;padding:10px 16px calc(12px + env(safe-area-inset-bottom,0px));background:linear-gradient(to top,var(--wall) 70%,transparent)}
  .mb{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:64px;min-height:52px;justify-content:center;color:var(--ink-2);font-family:var(--hand);font-size:var(--t-s);text-transform:uppercase}
  .mb svg{width:28px;height:26px}
  .mb:active{color:var(--ink)}
  .mfab{position:relative;width:74px;height:74px;display:grid;place-items:center;color:var(--wall);isolation:isolate;margin-top:-18px}
  .mfab::before{content:"";position:absolute;inset:2px;background:var(--ink);border-radius:47% 53% 49% 51%;filter:url(#wobble);z-index:-1}
  .mfab svg{width:30px;height:30px;stroke-width:2.6}
  .mfab:active{transform:scale(.94)}
  /* the capture sheet */
  .sheet.capture{padding:22px 18px}
  .capwhose{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
  .capwhose button{position:relative;min-height:52px;font-family:var(--hand);font-size:var(--t-m);text-transform:uppercase;color:var(--ink-2)}
  .capwhose button::before{content:"";position:absolute;inset:2px;border:1.8px solid var(--line-2);border-radius:12px 9px 13px 10px;filter:url(#wobble-sm)}
  .capwhose button[aria-pressed="true"]{color:var(--ink)}
  .capwhose button[aria-pressed="true"]::before{border-color:var(--ink);border-width:2.2px}
  .capwhose button[data-v=mine][aria-pressed="true"]{color:#fff}
  .capwhose button[data-v=mine][aria-pressed="true"]::before{background:var(--mine);border-color:var(--mine)}
  .capwhose button span,.capwhose button{z-index:0}
  .capgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .capbtn{position:relative;aspect-ratio:1.5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-family:var(--hand);font-size:var(--t-s);text-transform:uppercase;color:var(--ink)}
  .capbtn::before{content:"";position:absolute;inset:3px;border:2px solid currentColor;border-radius:16px 11px 18px 12px;filter:url(#wobble);opacity:.9}
  .capbtn svg{width:34px;height:30px}
  .capbtn:active::before{background:var(--raise)}
  .caphint{text-align:center;color:var(--ink-3);font-size:var(--t-s);margin:10px 0 0}
  /* bigger, simpler save sheet on a phone */
  .sheet.save{padding:20px 16px calc(20px + env(safe-area-inset-bottom,0px))}
  .smart textarea{min-height:170px!important}
  .sheet.save .actions .btn:last-child{min-height:54px;min-width:120px}
}

/* ---------- doodles ---------- */
.doodle{display:inline-block;height:64px;width:auto;vertical-align:middle;pointer-events:none;user-select:none;-webkit-user-drag:none}
[data-theme="light"] .doodle{filter:invert(1)}
.toast .doodle{height:34px;margin:-6px -2px -6px -6px;filter:invert(1)}
[data-theme="light"] .toast .doodle{filter:none}
.loading .dload{display:block;height:96px;margin:0 auto 14px}
.dline{height:40px;margin:-8px 8px -8px -4px}
.pencil .dpen,.tile.pending .pic img.dpen{display:block;width:auto;height:44px;object-fit:contain;filter:none;margin:0 auto 2px}
[data-theme="light"] .tile.pending .pic img.dpen{filter:invert(1)}
.tile.pending.saving .pencil,.tile.pending:not(.queued) .pencil{border-radius:14px;text-align:center;padding:6px 12px 7px;animation:none}
.thinking{display:flex;align-items:center}
@media (prefers-reduced-motion:reduce){.doodle.dpen,.doodle.dline{opacity:.9}}
/* ---------- Today, on the normal wall ---------- */
.tday{margin:6px 0 20px}
.tday .tgreet{margin:0 0 6px}
.tfile{display:flex;align-items:center;gap:10px;margin:0;min-height:40px;font-family:var(--hand);text-transform:uppercase;font-size:var(--t-s);color:var(--ink-2)}
.tfile .tlink{color:var(--ink)}
.tago{margin:-4px 0 14px;color:var(--ink-2)}
.tsug{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;padding:14px 18px;margin:0 0 26px}
.tsug::before{content:"";position:absolute;inset:2px;border:2px dashed var(--ink-2);border-radius:18px 12px 20px 14px;filter:url(#wobble);pointer-events:none}
.tsimgs{display:flex}
.tsimgs button{width:52px;height:52px;border-radius:8px;overflow:hidden;margin-left:-12px;transform:rotate(calc((var(--r,0) * 1deg)));box-shadow:0 4px 12px rgba(0,0,0,.35);background:var(--panel)}
.tsimgs button:first-child{margin-left:0;--r:-4}.tsimgs button:nth-child(2){--r:3}.tsimgs button:nth-child(3){--r:-2}.tsimgs button:nth-child(4){--r:5}
.tsimgs img{width:100%;height:100%;object-fit:cover;display:block}
.tsimgs .tx{display:block;padding:4px;font-size:9px;line-height:1.1;overflow:hidden;height:100%;text-align:left}
.tsug p{margin:0;font-family:var(--hand);text-transform:uppercase;font-size:var(--t-m);line-height:1.15}
.tsug p span{color:var(--ink-2)}
.tsact{display:flex;align-items:center;gap:14px}
@media (max-width:640px){.tsug{grid-template-columns:auto 1fr;gap:12px}.tsact{grid-column:1/-1}.tsimgs button{width:42px;height:42px}}

/* ---------- all caps everywhere: no small caps ---------- */
html{text-transform:uppercase}
input,textarea,select,option,button{text-transform:inherit}
input::placeholder,textarea::placeholder{text-transform:uppercase}
.tile .cap .m,.stage,.card .kind,.grid.focus .fcap,.hero .meta,.hero .meta .back,.reading h4,.dcard b,.sec h3,.mh,.tpt span,.vl span{text-transform:uppercase}
/* long articles stay readable: the same hand, normal case */
.reader p,.reader li,.reader blockquote{text-transform:none;font-family:"Patrick Hand","Comic Neue","Segoe Print",cursive}
/* ---------- a bigger, calmer save window ---------- */
.sheet.save{width:min(860px,100%);padding:34px 38px 30px}
.sheet.save h2{font-size:44px!important;margin-bottom:24px;gap:18px}
.sheet.save h2 .seg{font-size:20px!important}
.sheet.save h2 .seg button{padding:8px 18px}
.sheet.save h2 .iconbtn svg{width:26px;height:26px}
.sheet.save .smart{padding:8px 8px 10px;border-radius:18px}
.sheet.save .smart textarea{font-size:24px!important;line-height:1.35;min-height:220px;padding:16px 18px}
.sheet.save .srow{padding:0 10px 0 18px}
.sheet.save .shint,.sheet.save .srow .btn{font-size:18px!important}
.sheet.save .srow .btn svg,.sheet.save .shint svg{width:18px;height:18px}
.sheet.save .stages button{font-size:18px}
.sheet.save .details .f>span{font-size:17px!important}
.sheet.save .details input,.sheet.save .details textarea,.sheet.save .details select{font-size:20px!important}
.sheet.save .actions{margin-top:22px;gap:16px}
.sheet.save .actions .btn{font-size:19px!important}
.sheet.save .actions .note{font-size:17px}
.sheet.save .actions .btn:last-child{font-size:22px!important;padding:12px 30px;min-height:54px}
.sheet.save .muted.small{font-size:17px}
@media (max-width:640px){
  .sheet.save{padding:22px 18px calc(22px + env(safe-area-inset-bottom,0px))}
  .sheet.save h2{font-size:30px!important;margin-bottom:16px;gap:4px}
  .sheet.save h2 .spacer{min-width:0}
  .sheet.save h2{flex-wrap:wrap;row-gap:12px}
  .sheet.save h2 .seg{order:3;flex:1 0 100%;display:grid;grid-template-columns:1fr 1fr;font-size:18px!important;white-space:nowrap}
  .sheet.save h2 .seg button{padding:8px 10px;white-space:nowrap}
  .sheet.save h2 .iconbtn{margin-right:-6px}
  .sheet.save h2 .iconbtn{flex:none}
  .sheet.save .smart textarea{font-size:21px!important;min-height:180px}
  .sheet.save .actions .note{display:none}
}

/* ---------- pencil lines: pressure, grain, crumbly edges ---------- */
.smart{position:relative;border-color:transparent!important}
.smart::before{content:"";position:absolute;inset:1px;border:2.3px solid var(--ink-2);border-radius:18px 12px 20px 14px;filter:url(#wobble);pointer-events:none}
.smart.on::before,.smart:focus-within::before{border-color:var(--ink)}
.btn.ink::after,.btn.save::after,.btn.mine::after,.btn.ink:hover::after,.btn.save:hover::after{filter:url(#pencil-fill)!important}
.mfab::before{filter:url(#pencil-fill)!important}
.btn::after,.card::before,.menu::before,.desk::before,.capwhose button::before,.mc::before,.reading::before{border-width:2.3px}
.sheet::before,.tpile::before,.tsug::before,.capbtn::before{border-width:2.6px}
.mark span::after,.tab[aria-current="page"]::after,.seg button[aria-pressed="true"]::before,.mixbtn::before,.tagline u::after,.tagline em::before,.skbtn[aria-pressed="true"]::before,.bar .search::after,.studio .search::after,.pa[aria-pressed="true"]::before,.pchip[aria-pressed="true"]::before,.tlink::after,.vrow2[aria-checked="true"] .vico::before{filter:url(#grain)}

/* ---------- Today opens like the empty screen: centred ---------- */
.thero{max-width:620px;margin:6vh auto 44px;text-align:center}
.thero .giant{margin:0}
.thero .tagline{margin:16px auto 10px}
.thero .tfile{justify-content:center;margin:0 0 22px}
.thero .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.today .pilesrow{justify-content:center}
.today .thead{justify-content:center}
.today .tago{text-align:center}
.today .tsug{max-width:860px;margin-left:auto;margin-right:auto}
@media (max-width:640px){.thero{margin:2.5vh auto 22px;padding:0 6px}.thero .row{display:none}.thero .tfile{margin-bottom:0}
  .thero .tagline,.thero .tagline *{font-size:var(--t-m)!important}
  .thero .tagline{white-space:nowrap;margin-top:10px}
  .thero .tagline em{padding:0 4px}
  .thero .tagline em::before{inset:-6px -7px}}

/* ---------- empty screen: tagline truly centred ---------- */
.empty .tagline{margin:18px auto 22px;max-width:none}
/* ---------- transparent images: the colour placeholder only shows while loading ---------- */
.pic.ld{background:transparent!important}

/* ---------- Matt's brush hand: Nanum Brush Script (Latin subset, SIL OFL) ---------- */
@font-face{font-family:"HM Brush";src:url(../fonts/hm-brush.woff2) format("woff2");font-display:block;size-adjust:142%;ascent-override:84%;descent-override:14%;line-gap-override:0%}
body,button,input,textarea,select{letter-spacing:.005em!important}
:root{--hand:"HM Brush","Patrick Hand SC","Patrick Hand","Segoe Print",cursive;--font:"HM Brush","Patrick Hand SC","Patrick Hand","Segoe Print",cursive}

/* ================================================================
   Black and white only. Every accent is the ink colour; anything that
   sat on an accent now uses the wall colour, so it flips cleanly between
   Black and Paper.
   ================================================================ */
html:root,html:root[data-theme="dark"],html:root[data-theme="light"]{--mine:var(--ink)!important;--mine-ink:var(--wall)!important;--hot:var(--ink)!important;--sun:var(--ink)!important;--pop:var(--ink)!important;--mint:var(--ink)!important;--acid:var(--ink)!important;--acid-ink:var(--wall)!important;--tint:var(--ink)!important;--tint-ink:var(--wall)!important}
.btn.mine,.stage,.card.idea,.lock[aria-pressed="true"],.desk .n,.stages button[aria-pressed="true"],.seg button.minepick[aria-pressed="true"],.traybtn[aria-pressed="true"],.tab[data-v="mine"][aria-current="page"],.mixbtn,.sparkbar,.step,.mc:nth-child(n+3),.capwhose button[data-v=mine][aria-pressed="true"]{color:var(--wall)!important}
.card.idea .stage{background:var(--wall)!important;color:var(--ink)!important}
.card .kind{color:inherit!important;opacity:.7}
.hero .btn{background:var(--wall)!important;color:var(--ink)!important}
.toast button{color:var(--wall)!important;text-decoration:underline;text-underline-offset:3px}
.tab[data-v="mine"][aria-current="page"],.tab[data-act="projects"][aria-current="page"]{background:none!important;color:var(--ink)!important}
.smart.listening{box-shadow:0 0 0 3px color-mix(in srgb,var(--ink) 30%,transparent)!important}
.mfab.held::before{background:var(--ink-2)!important}
.blocks i{background:var(--ink)!important}

/* ================================================================
   Type: three sizes and one tracking.
   S for labels and meta, M for everything you read or press, L for headings.
   The giant display words and the logo keep their own.
   ================================================================ */
:root{--ts:16px;--tm:21px;--tl:36px;--t-s:var(--ts)!important;--t-m:var(--tm)!important;--t-l:var(--tl)!important}
@media (max-width:640px){:root{--ts:15px;--tm:18px;--tl:28px}}
*:not(.giant):not(.giant *):not(.mark):not(.mark *){letter-spacing:-.01em!important}
/* M: reading and pressing */
body,p,li,dd,dt,label,input,textarea,select,option,.btn,.tab,.seg button,.back,.toast,.toast *,.vl,.desc,.tsug p,.menu button,.menu .row,.search input,.cmdin input,.smart textarea,.f input,.f textarea,.f select,.ptext,.vrow2,.srow2,.tpt,.empty p,.reader p,.reading p,h4,.reading h4,.dcard b,.dcard p,.sheet p,.pendline,.tago,.btn.ink,.btn.save,.sheet.save .smart textarea,.sheet.save .actions .btn,.sheet.save .actions .btn:last-child,.sheet.save h2 .seg,.sheet.save .details input,.sheet.save .details textarea,.sheet.save .details select,.sheet.save .actions .note,.sheet.save .muted.small,.sheet.save .stages button,.capwhose button,.mixline,.qs{font-size:var(--tm)!important}
/* S: labels, meta, small actions */
.btn.sm,.btn.plain,.btn.plain.sm,.tlink,.kbd,kbd,.search kbd,.sec h3,.small,.muted.small,p.muted.small,.tile .cap,.tile .cap *,.gcap,.fcap,.fcap *,.fnote,.vl span,.tfile,.tfile *,.shint,.srow .btn,.sheet.save .shint,.sheet.save .srow .btn,.f>span,.sheet.save .details .f>span,.chip,.pchip,.plbl,.stage,.kbadge,.desk .dl,.dhint,.lock,.mh,.menu .row>span:first-child,.ch,.tpcount,.tpname,.by,.rby,.sthead b,.move .ml,.tpt span,.dhead .btn,.thead .tlink{font-size:var(--ts)!important}
.tag{font-size:var(--tm)!important}
/* L: headings */
h1:not(.giant),h2,h3.big,.thead h2,.dhead h3,.sheet h2,.sheet.save h2,.tagline,.tagline *,.empty h2,.tgreet,.side h2,.proj h3,.reader h1{font-size:var(--tl)!important}
sup,.tab .n{font-size:.6em!important}

.thero{max-width:960px}
.thero .giant{max-width:620px;margin:0 auto}
.btn.plain.mixbtn,.btn.plain.mixbtn span,.bar .btn,.bar .btn.save{font-size:var(--tm)!important}

.empty{max-width:960px}
.empty .giant{max-width:560px;margin-left:auto;margin-right:auto}
.empty p:not(.tagline){max-width:560px;margin-left:auto;margin-right:auto}
.empty .tagline,.empty .tagline *{font-size:var(--tl)!important}

/* ---------- Today, trimmed: the day, one line, then the wall ---------- */
.thero{margin:5vh auto 40px}
.thero .tagline{margin:14px auto 0}
.tagline .tl-loose{font:inherit!important;color:inherit;text-transform:inherit}
.tagline .tl-loose::after{height:8px;bottom:-6px}
.tagline .dline{height:34px;margin:-10px 0 -6px 6px}
.today .tsec{margin-top:44px}

/* ---------- drop in two halves: inspiration | my work ---------- */
.dropall.split{display:grid!important;grid-template-columns:1fr 1fr;place-items:stretch!important;gap:14px;padding:0;border:0!important;background:color-mix(in srgb,var(--wall) 90%,transparent)!important;pointer-events:none}
.dhalf{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--ink-2);transition:color .12s}
.dhalf::before{content:"";position:absolute;inset:6px;border:2.6px dashed var(--ink-3);border-radius:22px 16px 24px 18px;filter:url(#wobble);transition:border-color .12s}
.dhalf b{font-family:var(--hand);text-transform:uppercase;font-weight:400;font-size:var(--tl)!important}
.dhalf .dsub{font-size:var(--ts)!important;text-transform:uppercase}
.dhalf.on{color:var(--ink)}
.dhalf.on::before{border-style:solid;border-color:var(--ink);background:color-mix(in srgb,var(--ink) 6%,transparent)}
/* ---------- the sorter ---------- */
.sheet.sorter{width:min(980px,100%)}
.sortgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;max-height:58vh;overflow:auto;padding:6px 4px 10px;margin:8px 0 14px}
.sortgrid button{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--panel);opacity:.55;transition:opacity .12s,transform .12s}
.sortgrid button img{width:100%;height:100%;object-fit:cover;display:block}
.sortgrid button .tx{display:block;padding:8px;text-align:left;font-size:var(--ts)!important}
.sortgrid button[aria-pressed="true"]{opacity:1}
.sortgrid button[aria-pressed="true"]::after{content:"";position:absolute;inset:3px;border:2.6px solid var(--ink);border-radius:10px 7px 11px 8px;filter:url(#wobble-sm);pointer-events:none}
.sortgrid button .sk{position:absolute;left:8px;top:8px;font-family:var(--hand);text-transform:uppercase;font-size:var(--ts)!important;background:var(--ink);color:var(--wall);padding:0 7px;border-radius:4px}
.sortgrid button .sk:empty{display:none}
.sortgrid button.cur{outline:2px dashed var(--ink-2);outline-offset:3px}
.sortgrid button:hover{opacity:.85}
.sorter .actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.sorter .keyline{margin:12px 0 0}
@media (max-width:640px){.sortgrid{grid-template-columns:repeat(3,1fr);gap:8px}.sorter .keyline{display:none}}
@media (pointer:coarse){.sorter .keyline{display:none}}

/* ---------- no colour bar on hover; instead, whose is it? for anything not yet sorted ---------- */
.hpal{display:none!important}
.tile{position:relative}
.kindpick{position:absolute;top:10px;right:10px;z-index:4;display:flex;gap:6px;opacity:0;transform:translateY(-3px);transition:opacity .15s,transform .15s;pointer-events:none}
.tile:hover .kindpick,.kindpick:focus-within{opacity:1;transform:none;pointer-events:auto}
.kindpick button{position:relative;font-family:var(--hand);text-transform:uppercase;font-size:var(--ts)!important;line-height:1;padding:6px 10px 5px;color:var(--wall);background:none}
.kindpick button::before{content:"";position:absolute;inset:0;background:var(--ink);border-radius:9px 6px 10px 7px;filter:url(#pencil-fill);z-index:-1}
.kindpick button+button{color:var(--ink)}
.kindpick button+button::before{background:var(--wall);border:2px solid var(--ink);filter:url(#wobble-sm)}
.kindpick button:hover::before{transform:scale(1.05)}
@media (hover:none){.kindpick{display:none}}

/* ---------- all text in the one ink: no greys ---------- */
html:root,html:root[data-theme="dark"],html:root[data-theme="light"]{--ink-2:var(--ink)!important;--ink-3:var(--ink)!important}
::placeholder{color:var(--ink)!important;opacity:1!important}
.card .kind{opacity:1!important}
.n,.tab .n,.dhint,.muted,.small{opacity:1!important}

/* ---------- no hover zoom: scaling an image inside a filtered, clipped tile made it flash black ---------- */
.tile .pic img,.tile:hover .pic img,.pic img{transform:none!important;transition:none!important}
.kindpick button::before,.kindpick button+button::before{filter:none!important}
.kindpick button:hover::before{transform:none}

/* ---------- pop-up headers in the same bold display face as the giant day/word (FRIDAY, SCRAPS) ---------- */
.sheet.capture h2,.sheet.sorter h2,.sheet.make h2,.sheet.cmd h2{font-family:"Archivo",sans-serif;font-weight:900;font-variation-settings:"wdth" 68;text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(26px,6vw,34px)!important}

/* ---------- no separate outline for your own work: every item keeps just its ordinary ragged edge ---------- */
.tile.mine .pic,.tile.mine .card,.pcard.mine img,.pcard.mine .card,.sitem.mine img,.sitem.mine .card,.dt.mine,.mini button.mine{box-shadow:none!important}
.tile.mine .pw{filter:none!important}

/* ---------- Make, on phone: a grid of real buttons like Keep it, not a list of rows ---------- */
@media (max-width:640px){
  .sheet.make .mklist{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .sheet.make .vrow2{flex-direction:column;justify-content:center;gap:6px;padding:16px 10px!important;text-align:center;position:relative;color:var(--ink)}
  .sheet.make .vrow2::before{content:"";position:absolute;inset:2px;border:2px solid var(--ink-2);border-radius:16px 11px 18px 12px;filter:url(#wobble);pointer-events:none}
  .sheet.make .vrow2:hover{background:none}
  .sheet.make .vico{width:auto;height:auto}
  .sheet.make .vico svg{width:30px;height:26px}
  .sheet.make .vl{font-size:var(--t-s);justify-items:center}
  .sheet.make .vl span{display:none}
}

/* ---------- the ... menu: real checkboxes everywhere ---------- */
.menu button[role="menuitemcheckbox"]{gap:11px}
.mchk{position:relative;width:17px;height:17px;flex:none;border:1.8px solid var(--ink-2);border-radius:4px;background:none}
.menu button[aria-checked="true"] .mchk{background:var(--ink);border-color:var(--ink)}
.menu button[aria-checked="true"] .mchk::after{content:"";position:absolute;left:3px;top:0px;width:5px;height:9px;border:solid var(--wall);border-width:0 2px 2px 0;transform:rotate(40deg)}
/* ---------- and, on desktop, real buttons instead of plain rows for the two actions ---------- */
@media (min-width:641px){
  .menu .mact{justify-content:center;border:1.5px solid var(--line-2);border-radius:6px;margin:3px 0;font-weight:500}
  .menu .mact:hover{background:var(--panel);border-color:var(--ink-2)}
  .menu .mact[data-act="signout"]{color:var(--ink-2)}
}

/* ---------- search placeholders: a quiet hint, not shouting at full ink weight ---------- */
.search input::placeholder{color:color-mix(in srgb,var(--ink) 45%,transparent)!important;font-size:.88em!important;opacity:1!important}

/* ================================================================
   The item viewer's side panel: a notebook page. The headline gets
   the same bold chalk voice as the app's other big headers (FRIDAY,
   KEEP IT); everything under it stays in the hand, but drawn with real
   boxes and torn dividers instead of flat lines — clearer fields, a
   page you'd believe was actually kept, and an obvious top-to-bottom
   order: headline, then content, then quiet meta at the foot.
   ================================================================ */
.side{position:relative;background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 31px,color-mix(in srgb,var(--ink) 7%,transparent) 32px);background-position:0 6px}
.side::before{content:"";position:absolute;top:0;bottom:0;left:54px;width:1.6px;background:color-mix(in srgb,var(--ink) 14%,transparent);pointer-events:none}
.side h2{font-family:"Archivo",sans-serif!important;font-weight:900;font-variation-settings:"wdth" 68;text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(26px,3vw,34px)!important;line-height:1.05!important}
/* torn, hand-drawn divider between sections instead of a machine-straight rule */
.sec{border-top:none!important;position:relative;padding-top:20px!important}
.sec::before{content:"";position:absolute;top:0;left:0;right:14px;height:7px;background:var(--ink);opacity:.4;-webkit-mask:var(--uline) center/100% 100% no-repeat;mask:var(--uline) center/100% 100% no-repeat}
.sec:first-of-type::before,.more .sec:first-of-type::before{display:none}
.sec h3{position:relative;display:inline-flex}
/* tags & project names: read as real content, with a drawn (not machine) outline */
.tag{position:relative;border:none!important;background:none!important;border-radius:0;padding:5px 12px}
.tag::before{content:"";position:absolute;inset:0;border:1.7px solid var(--ink-2);border-radius:11px 7px 12px 8px;filter:url(#wobble-sm);pointer-events:none}
.tag:hover::before{border-color:var(--ink)}
/* edit-form fields: a real drawn box around what you type, not a flat grey rectangle */
.f{position:relative}
.f input,.f textarea,.f select{border:1.8px solid var(--ink-2)!important;border-radius:12px 8px 13px 9px!important;background:transparent!important;padding:11px 13px!important}
.f input:focus,.f textarea:focus,.f select:focus{border-color:var(--ink)!important;border-width:2.2px!important;box-shadow:none!important}
.whose button,.stages button{border:1.7px solid var(--ink-2);border-radius:11px 7px 12px 8px;background:transparent}
.whose button[aria-pressed="true"],.stages button[aria-pressed="true"]{border-color:var(--ink);border-width:2.2px;box-shadow:none}
.whose button.m[aria-pressed="true"]{box-shadow:none}