/* The Social Body – styles (split from index.html, 2026-11-05). Fonts and accent adapted to shifts.dance. */
/* Website fonts (self-hosted, no Google Fonts) */
@font-face{font-family:'GraebenbachGrotesk';src:url('../fonts/Graebenbach-Regular.woff') format('woff');font-display:swap}
@font-face{font-family:'GraebenbachMedium';src:url('../fonts/Graebenbach-Medium.woff') format('woff');font-display:swap}
@font-face{font-family:'SourceSansItalic';src:url('../fonts/sourcesanspro-400-italic.woff') format('woff');font-display:swap}

/* Layout: one dark field. The body floats full-bleed; glass panels sit over it (index left, sheet right). Single deliberate dark world. */
:root{
  --bg:#040708; --bg2:#0a1214; --panel:rgba(10,16,18,.74); --panel-solid:#0b1315; --ink:#e4ece9; --muted:#8c9d9b; --faint:#5b6c6b;
  --rule:rgba(190,225,222,.13); --glow:#d6eeee; --amber:#2bff88; --focus:#9dffc6;
  --f-display:"GraebenbachMedium","Helvetica Neue",Helvetica,sans-serif;
  --f-body:"GraebenbachGrotesk","Helvetica Neue",Helvetica,sans-serif;
  --f-mono:ui-monospace,Menlo,Consolas,monospace;
  color-scheme:dark;
}
html,body{height:100%}
body{margin:0;background:radial-gradient(120% 90% at 50% 40%,var(--bg2) 0%,var(--bg) 70%);color:var(--ink);font:13.5px/1.5 var(--f-body);overflow:hidden;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));box-sizing:border-box}
*,*::before,*::after{box-sizing:border-box}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:1.5px solid var(--focus);outline-offset:2px}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
#gl.drag{cursor:grabbing} #gl.place{cursor:crosshair} #gl.draw{cursor:cell}
#labels{position:fixed;inset:0;pointer-events:none;overflow:hidden}

.chrome{position:fixed;inset:0;pointer-events:none;padding:max(14px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(14px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
  display:grid;grid-template-columns:270px minmax(0,1fr) 360px;grid-template-rows:auto minmax(0,1fr) auto;gap:12px}
.chrome>*{pointer-events:auto}
.title{grid-column:1/3;align-self:start;pointer-events:none}
.title h1{font:400 34px/1 var(--f-display);margin:0;letter-spacing:.005em;color:var(--glow);text-shadow:0 0 24px rgba(160,220,220,.25)}
.title h1 i{color:var(--muted);font-size:.72em}
.guide-b{pointer-events:auto;vertical-align:.32em;margin-left:6px;width:26px;height:26px;border-radius:50%;border:1px solid rgba(43,255,136,.55);background:rgba(43,255,136,.08);color:var(--amber);font:500 14px/1 var(--f-mono);cursor:pointer;padding:0;text-shadow:none}
.guide-b:hover{background:rgba(43,255,136,.18)}
.guide-b[aria-pressed="true"]{background:var(--amber);color:#111}
.title p{margin:6px 0 0;color:var(--muted);max-width:56ch;font-size:12.5px}
.modes{grid-column:3;justify-self:end;display:flex;gap:4px;padding:4px;border:1px solid var(--rule);border-radius:999px;background:var(--panel);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);align-self:start}
.modes button{border:0;background:none;border-radius:999px;padding:7px 14px;cursor:pointer;color:var(--muted);font-size:13px}
.modes button[aria-pressed="true"]{background:rgba(214,238,238,.12);color:var(--ink)}
.modes .msep{width:1px;align-self:stretch;margin:4px 4px;background:var(--rule)}
.modes .bodysel{display:flex;gap:2px}
.modes .bodysel button{padding:7px 11px;font-size:12px}
.credit .fem{display:none}body.body-f .credit .fem{display:inline}
.glass{background:var(--panel);border:1px solid var(--rule);border-radius:14px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);min-height:0;overflow:auto}
.left{grid-column:1;grid-row:2;padding:12px 10px 14px;align-self:stretch}
.right{grid-column:3;grid-row:2;padding:16px 16px 18px;align-self:start;max-height:100%}
.right:empty{display:none}
.foot{grid-column:1/4;grid-row:3;display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;pointer-events:none}
.foot>*{pointer-events:auto}
.readout{font:12px/1.3 var(--f-mono);color:var(--muted);background:var(--panel);border:1px solid var(--rule);border-radius:999px;padding:6px 12px;max-width:min(560px,100%);pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.readout b{color:var(--ink);font-weight:500}
.tools{display:flex;gap:6px;flex-wrap:wrap}
.tbtn{border:1px solid var(--rule);background:var(--panel);border-radius:999px;padding:6px 12px;cursor:pointer;color:var(--ink);font-size:12.5px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.tbtn:hover{border-color:rgba(214,238,238,.35)}
.tbtn[aria-pressed="true"]{border-color:var(--amber);color:var(--amber)}
.mobile-only{display:none}

.eyebrow{font:500 10px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin:14px 6px 6px}
.eyebrow:first-child{margin-top:4px}
.sbtn{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:none;border:0;border-radius:8px;padding:5px 6px;cursor:pointer;color:var(--ink);font-size:12.8px;line-height:1.25}
.sbtn:hover{background:rgba(214,238,238,.06)}
.sbtn[aria-pressed="true"]{background:rgba(43,255,136,.10);color:var(--amber)}
.sbtn .dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--c,var(--glow));box-shadow:0 0 8px var(--c,var(--glow))}
.sbtn .ab{font:500 10.5px var(--f-mono);color:var(--muted);min-width:34px}
.grp{display:flex;align-items:center;justify-content:space-between;gap:8px}
.grp .eyebrow{margin-bottom:4px}
.eye{border:0;background:none;color:var(--faint);cursor:pointer;font:500 10px var(--f-mono);letter-spacing:.1em;padding:10px 6px 2px;text-transform:uppercase}
.eye[aria-pressed="false"]{text-decoration:line-through;opacity:.6}
.lay{border-top:1px solid var(--rule);padding:2px 0}
.lay:first-of-type{border-top:0}
.lay-h{display:flex;align-items:center;gap:2px}
.lay-x,.lay-x0{flex:none;width:24px;height:28px;border:0;background:none;color:var(--faint);cursor:pointer;font-size:11px;transition:transform .18s}
.lay-x[aria-expanded="true"]{transform:rotate(90deg);color:var(--amber)}
.lay-n{flex:1;text-align:left;border:0;background:none;color:var(--ink);font-size:13px;padding:6px 2px;cursor:pointer}
.lay-n small{color:var(--faint);font:500 10px var(--f-mono);margin-left:4px}
.lay.off .lay-n{color:var(--faint)}
.lay-b{padding:0 0 6px 18px}
.lay-b .it{display:flex;align-items:center;gap:4px}
.lay-b .it .sbtn{flex:1;min-width:0}
.lay-b .it .lsw{transform:scale(.8)}
.lay-b details.mreg summary{display:flex;align-items:center;gap:6px}
.lay-b details.mreg summary small{color:var(--faint);font:500 10px var(--f-mono);flex:1}
.lsw{flex:none;position:relative;width:30px;height:17px;border-radius:999px;border:1px solid var(--rule);background:rgba(214,238,238,.06);cursor:pointer;padding:0}
.lsw i{position:absolute;top:2px;left:2px;width:11px;height:11px;border-radius:50%;background:var(--faint);transition:transform .16s,background .16s}
.lsw[aria-checked="true"]{border-color:rgba(43,255,136,.55);background:rgba(43,255,136,.16)}
.lsw[aria-checked="true"] i{transform:translateX(13px);background:var(--amber)}
.layers select{background:var(--panel);color:var(--ink);border:1px solid var(--rule);border-radius:6px;font-size:12px;padding:2px 4px}
.dhud{position:fixed;right:16px;bottom:64px;z-index:30;width:300px;max-width:calc(100vw - 32px);padding:12px 14px 12px}
.dh-top{display:flex;justify-content:space-between;align-items:center}
.dh-x{border:0;background:none;color:var(--muted);font-size:18px;cursor:pointer;padding:0 4px}
.dp-row{display:flex;align-items:center;gap:10px;margin-top:10px}
.dp-row .tbtn{width:34px;height:34px;padding:0;font-size:17px}
.dp-row .tbtn:disabled{opacity:.3;cursor:default}
.dp-mid{flex:1;text-align:center}
.dp-mid b{font-weight:500;font-size:13.5px;color:var(--glow)}
.dp-dots{display:flex;justify-content:center;gap:6px;margin-top:6px}
.dp-dots i{width:7px;height:7px;border-radius:50%;background:rgba(214,238,238,.15)}
.dp-dots i.past{background:rgba(43,255,136,.4)}
.dp-dots i.on{background:var(--amber);box-shadow:0 0 8px var(--amber)}
.dp-dirs{display:flex;flex-wrap:wrap;gap:4px}
.dp-dirs button{border:1px solid var(--rule);background:none;color:var(--ink);border-radius:999px;font-size:11.5px;padding:4px 9px;cursor:pointer}
.dp-dirs button[aria-pressed="true"]{border-color:var(--amber);color:var(--amber)}
#dp-cut{width:100%;margin:10px 0 4px;accent-color:var(--amber)}
.dp-note{font-size:11.5px;color:var(--muted);margin:6px 0 0;line-height:1.4}
@media (max-width:760px){#t-strength,#t-drift,.tools [data-view]{display:none}}
@media (max-width:760px){.dhud{left:16px;right:16px;width:auto;bottom:118px}}
.pnav{display:flex;align-items:center;gap:6px;margin:-4px -4px 2px}
.pn-b{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--rule);background:none;color:var(--ink);font-size:17px;line-height:1;cursor:pointer;padding:0 0 2px}
.pn-b:hover:not(:disabled){border-color:var(--amber);color:var(--amber)}
.pn-b:disabled{opacity:.25;cursor:default}
.pn-trail{flex:1;min-width:0;display:flex;align-items:center;gap:2px;overflow-x:auto;scrollbar-width:none;white-space:nowrap;mask-image:linear-gradient(90deg,transparent,#000 10px,#000 calc(100% - 10px),transparent)}
.pn-trail::-webkit-scrollbar{display:none}
.pn-c{flex:none;border:0;background:none;color:var(--muted);font:500 11px var(--f-mono);padding:4px 5px;border-radius:6px;cursor:pointer;max-width:19ch;overflow:hidden;text-overflow:ellipsis}
.pn-c:hover{color:var(--ink);background:rgba(214,238,238,.06)}
.pn-c[aria-current="step"]{color:var(--c);background:rgba(214,238,238,.07);box-shadow:inset 0 -1.5px 0 var(--c)}
.pn-sep{color:var(--faint);font-size:11px;flex:none}
.pn-meta{display:flex;justify-content:space-between;align-items:center;font:500 10px var(--f-mono);letter-spacing:.08em;color:var(--faint);margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid var(--rule)}
.pn-meta button{border:0;background:none;color:var(--faint);font:inherit;letter-spacing:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:2px;padding:0}
.pn-meta button:hover{color:var(--amber)}
.srch{position:sticky;top:-12px;z-index:2;margin:-12px -10px 6px;padding:10px 10px 8px;background:var(--panel);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--rule)}
.srch input{width:100%;box-sizing:border-box;background:rgba(214,238,238,.05);border:1px solid var(--rule);border-radius:999px;color:var(--ink);font-size:13px;padding:8px 34px 8px 14px;outline:none}
.srch input:focus{border-color:rgba(43,255,136,.6);background:rgba(214,238,238,.08)}
.srch input::placeholder{color:var(--faint)}
.srch kbd{position:absolute;right:20px;top:50%;transform:translateY(-35%);font:500 10px var(--f-mono);color:var(--faint);border:1px solid var(--rule);border-radius:4px;padding:1px 5px;pointer-events:none}
.sres{display:grid;gap:1px}
.sres[hidden],#idx[hidden]{display:none}
.sr{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:none;border:0;border-radius:8px;padding:6px 6px;cursor:pointer;color:var(--ink);font-size:12.8px;line-height:1.25}
.sr[aria-selected="true"]{background:rgba(43,255,136,.10)}
.sr .dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c)}
.sr-n{flex:1;min-width:0}
.sr-n small{display:block;color:var(--muted);font-size:11px;margin-top:2px;line-height:1.35}
.sr-k{flex:none;max-width:10ch;text-align:right;font:500 9px/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.sr-n small{-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.sr-none{color:var(--muted);font-size:12.5px;padding:6px}
.tbar{border:1px solid rgba(143,211,255,.28);background:rgba(143,211,255,.05);border-radius:12px;padding:10px 12px 10px;margin:-4px -4px 14px}
.tb-top{display:flex;justify-content:space-between;align-items:center}
.tbar .kind{color:#8fd3ff}
.tb-name{font:400 17px/1.2 var(--f-display);color:var(--glow);margin:4px 0 6px}
.tb-note{font-size:13px;line-height:1.5;color:var(--ink);border-left:2px solid #8fd3ff;padding:2px 0 2px 10px;margin:6px 0 8px;white-space:pre-wrap}
.tb-nav{display:flex;align-items:center;gap:8px}
.tb-nav .btn{padding:4px 12px;font-size:12px}
.tb-dots{flex:1;display:flex;flex-wrap:wrap;gap:5px;justify-content:center}
.tb-dots button{width:8px;height:8px;border-radius:50%;border:0;padding:0;background:rgba(214,238,238,.18);cursor:pointer}
.tb-dots button.past{background:rgba(143,211,255,.45)}
.tb-dots button.on{background:#8fd3ff;box-shadow:0 0 8px #8fd3ff}
.te-name{width:100%;box-sizing:border-box;background:rgba(214,238,238,.05);border:1px solid var(--rule);border-radius:8px;color:var(--glow);font:400 19px var(--f-display);padding:8px 10px;margin-top:6px}
.te-steps{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.te-steps li{border-left:2px solid var(--c);padding:2px 0 2px 10px}
.te-h{display:flex;align-items:baseline;gap:6px;font-size:13px}
.te-h b{font-weight:500}
.te-h small{color:var(--faint);font-size:11px}
.te-n{font:500 10px var(--f-mono);color:var(--faint);min-width:14px}
.te-x{margin-left:auto;border:0;background:none;color:var(--faint);cursor:pointer;font-size:15px}
.te-x:hover{color:var(--amber)}
.te-steps textarea{width:100%;box-sizing:border-box;margin-top:4px;background:rgba(214,238,238,.04);border:1px solid var(--rule);border-radius:6px;color:var(--ink);font:13px/1.4 inherit;padding:6px 8px;resize:vertical}
.te-share{display:flex;gap:8px;align-items:center;font-size:12.5px;margin:12px 0 4px}
.te-share small{color:var(--faint)}
.tcard{display:flex;align-items:flex-start;gap:8px;border:1px solid var(--rule);border-radius:10px;padding:2px;margin:0 0 8px}
.tplay{flex:1;text-align:left;border:0;background:none;color:var(--ink);padding:8px 10px;cursor:pointer;border-radius:8px}
.tplay:hover{background:rgba(143,211,255,.07)}
.tplay b{display:block;font-weight:500;font-size:13.5px;color:var(--glow)}
.tplay small{display:block;color:var(--muted);font-size:11.5px;margin-top:3px;line-height:1.35}
.tc-acts{display:flex;flex-direction:column;align-items:flex-end;gap:2px;padding:8px 8px 0 0}
.lnk{border:0;background:none;color:var(--faint);font:500 10.5px var(--f-mono);cursor:pointer;text-decoration:underline;text-underline-offset:2px;padding:0}
.lnk:hover{color:var(--amber)}
.mv-grid{display:flex;flex-wrap:wrap;gap:5px;margin:4px 0 12px}
.mv{border:1px solid var(--rule);background:none;color:var(--ink);border-radius:999px;font-size:12px;padding:5px 11px;cursor:pointer}
.mv:hover{border-color:rgba(143,211,255,.5)}
.mv[aria-pressed="true"]{border-color:#8fd3ff;color:#8fd3ff;background:rgba(143,211,255,.08)}
.mv-side{display:flex;gap:4px;margin:-4px 0 10px}
.mv-side button{border:1px solid var(--rule);background:none;color:var(--muted);border-radius:6px;font-size:11.5px;padding:3px 9px;cursor:pointer}
.mv-side button[aria-pressed="true"]{color:var(--ink);border-color:var(--ink)}
.mv-key{display:flex;flex-wrap:wrap;gap:12px;font:500 10.5px var(--f-mono);color:var(--muted);margin:2px 0 10px}
.mv-key i{display:inline-block;width:14px;height:4px;border-radius:2px;vertical-align:middle;margin-right:5px}
.dio{margin:-6px 0 12px;font:500 10.5px var(--f-mono);color:var(--faint)}
.dio .lnk{cursor:pointer}
.tl{border:1px solid var(--rule);border-radius:10px;padding:8px 10px 10px;margin:0 0 12px}
.tl-h{display:flex;justify-content:space-between;align-items:center}
.tl-on{border:1px solid var(--rule);background:none;color:var(--muted);border-radius:999px;font-size:11px;padding:2px 9px;cursor:pointer}
.tl-on[aria-pressed="true"]{color:var(--amber);border-color:var(--amber)}
.tl-track{position:relative;margin:8px 0 4px}
.tl-ticks{position:relative;height:12px;margin:0 7px}
.tl-ticks i{position:absolute;bottom:0;width:3px;height:10px;margin-left:-1.5px;border-radius:2px;opacity:.85}
.tl-track input{width:100%;margin:2px 0 0;accent-color:var(--amber)}
.tl-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tl-row .btn{padding:4px 12px;font-size:12px}
.tl-lab{flex:1;font:500 11px var(--f-mono);color:var(--muted);min-width:120px}
.tl-row select{background:var(--panel);color:var(--ink);border:1px solid var(--rule);border-radius:6px;font-size:11.5px;padding:2px 4px}
.layers{display:grid;gap:5px;padding:0 6px}
.layers label{display:flex;gap:8px;align-items:center;cursor:pointer;font-size:12.5px;color:var(--ink)}
.layers input{accent-color:var(--amber);margin:0}

.sheet h2{font:400 30px/1.02 var(--f-display);margin:2px 0 8px;text-wrap:balance;color:var(--glow)}
.sheet .kind{font:500 10px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--amber)}
.sheet p{margin:0 0 12px;color:#cfd9d6;max-width:60ch}
.facts{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:12px 0 14px;font-size:12.5px}
.facts dt{font:500 10px/1.8 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.facts dd{margin:0}
.meter{display:inline-flex;gap:3px;vertical-align:middle;margin-right:8px}
.meter i{width:16px;height:5px;border-radius:3px;background:rgba(214,238,238,.12)}
.meter i.on{background:linear-gradient(90deg,#9fd8e0,#fff1d6);box-shadow:0 0 8px rgba(255,241,214,.5)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 14px}
.chip{border:1px solid var(--rule);background:rgba(214,238,238,.04);border-radius:999px;padding:4px 10px;cursor:pointer;font-size:12px;color:var(--ink)}
.chip:hover{border-color:var(--amber);color:var(--amber)}
.acts{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 12px}
.btn{border:1px solid var(--rule);background:rgba(214,238,238,.05);border-radius:9px;padding:7px 12px;cursor:pointer;font-size:12.8px;color:var(--ink)}
.btn:hover{border-color:rgba(214,238,238,.35)}
.btn.pri{border-color:var(--amber);color:var(--amber);background:rgba(43,255,136,.08)}
.btn.danger{color:#ff8f86}
ol.st{list-style:none;margin:0;padding:0}
ol.st li{position:relative;padding:0 0 0 30px}
ol.st li::before{content:"";position:absolute;left:10px;top:22px;bottom:-2px;width:1px;background:var(--amber);opacity:.35}
ol.st li:last-child::before{display:none}
.stb{display:block;width:100%;text-align:left;background:none;border:0;border-radius:7px;padding:5px 6px;cursor:pointer;position:relative;color:var(--ink)}
.stb:hover{background:rgba(214,238,238,.06)}
.stb .n{position:absolute;left:-30px;top:4px;width:21px;height:21px;border-radius:50%;border:1px solid var(--amber);font:500 10px/19px var(--f-mono);text-align:center;color:var(--amber);background:var(--panel-solid)}
.stb b{font-weight:500;font-size:13px}
.stb small{display:block;color:var(--muted);font-size:12px;margin-top:1px}
.legend{font-size:12px;color:var(--muted);border-top:1px solid var(--rule);padding-top:10px;margin-top:14px}

/* diary */
.feelings{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 12px}
.feel{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--rule);background:none;border-radius:999px;padding:5px 10px;cursor:pointer;font-size:12.5px;color:var(--ink)}
.feel i{width:9px;height:9px;border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c)}
.feel[aria-pressed="true"]{border-color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent)}
.field{display:grid;gap:5px;margin:0 0 12px}
.field>span{font:500 10px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.field input[type=text],.field input[type=date],.field textarea{background:rgba(0,0,0,.25);border:1px solid var(--rule);border-radius:9px;padding:8px 10px;color:var(--ink);width:100%}
.field textarea{min-height:110px;resize:vertical;font-family:var(--f-display);font-size:17px;line-height:1.35}
.field input[type=range]{accent-color:var(--amber);width:100%}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.where{font-size:12.5px;color:var(--muted);margin:-4px 0 12px}
.where b{color:var(--ink);font-weight:500}
.status{font:11px/1.4 var(--f-mono);color:var(--faint);margin:2px 0 10px}
.entries{display:grid;gap:2px}
.entry{display:grid;grid-template-columns:12px minmax(0,1fr);gap:10px;align-items:start;text-align:left;background:none;border:0;border-radius:9px;padding:8px 8px;cursor:pointer;color:var(--ink)}
.entry:hover,.entry[aria-current="true"]{background:rgba(214,238,238,.06)}
.entry i{width:10px;height:10px;border-radius:50%;margin-top:5px;background:var(--c);box-shadow:0 0 10px var(--c)}
.entry b{font-weight:500}
.entry small{color:var(--muted);font:11px var(--f-mono)}
.entry em{display:block;font:italic 15px/1.3 var(--f-display);color:#cbd6d3;margin-top:2px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.empty{color:var(--muted);font-size:13px;padding:6px 8px 10px}
.quote{font:italic 21px/1.32 var(--f-display);color:var(--ink);margin:6px 0 14px;white-space:pre-wrap}

.lab{position:absolute;left:0;top:0;display:flex;align-items:center;gap:6px;white-space:nowrap;font-size:11.5px;line-height:1;color:var(--ink);transform:translate(-8px,-8px);text-shadow:0 0 6px #000,0 0 3px #000}
.lab .n{width:16px;height:16px;border-radius:50%;border:1px solid var(--amber);display:grid;place-items:center;font:500 9px/1 var(--f-mono);color:var(--amber);background:rgba(4,7,8,.8)}
.lab.flip{flex-direction:row-reverse;transform:translate(calc(-100% + 8px),-8px)}
.tip{position:fixed;left:0;top:0;pointer-events:none;font:12px/1.2 var(--f-body);color:var(--amber);text-shadow:0 0 8px #000,0 0 3px #000;white-space:nowrap;transform:translate(14px,-22px);opacity:0;transition:opacity .15s}
.loading{position:fixed;inset:0;display:grid;place-items:center;pointer-events:none;text-align:center}
.loading div{font:italic 22px var(--f-display);color:var(--glow)}
.loading small{display:block;font:11px var(--f-mono);color:var(--muted);margin-top:8px;letter-spacing:.1em}
.fams{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0 6px}
.fam{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--rule);background:none;border-radius:7px;padding:3px 8px;cursor:pointer;font:500 10.5px/1.4 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.fam i{width:7px;height:7px;border-radius:50%;background:var(--c)}
.fam[aria-pressed="true"]{border-color:var(--c);color:var(--ink)}
.pk-q{width:100%;background:rgba(0,0,0,.25);border:1px solid var(--rule);border-radius:9px;padding:8px 10px;color:var(--ink);margin:2px 0 4px}
.hint{display:block;width:100%;font:11px var(--f-mono);color:var(--faint);margin:2px 0 2px}
.lc{font:400 11.5px/1.4 var(--f-body);letter-spacing:0;text-transform:none;color:var(--faint)}
.chk{display:flex;gap:8px;align-items:flex-start;font-size:12.8px;margin:2px 0 8px;cursor:pointer}
.chk input{accent-color:var(--amber);margin-top:3px}
.newword{border:1px solid var(--rule);border-radius:10px;padding:10px;margin:6px 0 10px;background:rgba(0,0,0,.18)}
.newword .sub{display:block;font:500 10px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin:10px 0 2px}
.newword select{width:100%;background:rgba(0,0,0,.3);border:1px solid var(--rule);border-radius:8px;padding:6px;color:var(--ink);min-width:0}
.feel small{font:10.5px var(--f-mono);color:var(--muted)}
.feel:disabled{cursor:default;opacity:.85}
.rank{display:grid;gap:2px}
.rk{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 28px;gap:10px;align-items:center;background:none;border:0;border-radius:7px;padding:6px 6px;cursor:pointer;color:var(--ink);text-align:left;font-size:12.5px}
.rk:hover{background:rgba(214,238,238,.06)}
.rn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.swatches{display:flex;flex-wrap:wrap;gap:7px;margin:4px 0 10px}
.sw{width:26px;height:26px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:var(--c);cursor:pointer;padding:0;position:relative;box-shadow:0 0 10px color-mix(in srgb,var(--c) 45%,transparent)}
.sw[aria-pressed="true"]{outline:2px solid var(--ink);outline-offset:2px}
.sw.any{background:conic-gradient(#e0453c,#f2c94c,#4fbf73,#3f8fe0,#a66ad9,#e0453c)}.sw.any[aria-pressed="true"]{background:var(--c)}
.sw.any input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0}
.tag{display:inline-block;font:500 10.5px/1.3 var(--f-mono);letter-spacing:.02em;border:1px solid var(--rule);border-radius:999px;padding:3px 8px;margin:0 4px 5px 0;color:var(--muted)}
.tis{display:grid;gap:3px;margin:2px 0 4px}
.tisb{display:grid;grid-template-columns:18px minmax(0,1fr);column-gap:8px;text-align:left;background:none;border:1px solid transparent;border-radius:9px;padding:5px 8px;color:var(--ink);cursor:pointer;font-size:13px}
.tisb .n{grid-row:span 2;font:500 10.5px var(--f-mono);color:var(--c);align-self:center}
.tisb small{color:var(--faint);font-size:11px}
.tisb:hover{background:rgba(214,238,238,.05)}
.tisb[aria-pressed="true"]{border-color:var(--c);background:rgba(214,238,238,.08)}
details.mreg{margin:0 0 2px}details.mreg summary{cursor:pointer;list-style:none;padding:5px 8px;border-radius:7px;color:var(--muted);font-size:12.5px}details.mreg summary::-webkit-details-marker{display:none}details.mreg summary::before{content:'▸';display:inline-block;width:12px;color:var(--faint);transition:transform .15s}details.mreg[open] summary::before{transform:rotate(90deg)}details.mreg summary small{color:var(--faint);font:500 10.5px var(--f-mono);margin-left:4px}details.mreg summary:hover{background:rgba(214,238,238,.05)}
.entry .you{font:normal 500 10px var(--f-mono);color:var(--amber);margin-left:4px}
.sbtn .you{font:normal 500 10px var(--f-mono);color:var(--amber);margin-left:4px}
.rn .you{font:normal 500 10px var(--f-mono);color:var(--amber);margin-left:4px}
.rb{height:5px;border-radius:3px;background:rgba(214,238,238,.08);overflow:hidden}
.rb i{display:block;height:100%;border-radius:3px;box-shadow:0 0 8px currentColor}
.rc{font:500 11px var(--f-mono);color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
body.nopanels .left,body.nopanels .right,body.nopanels .title p{display:none}
body.noinfo .right{display:none}
body.noindex .left{display:none}
#leaders{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
#callouts{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.co{position:absolute;left:0;top:0;pointer-events:auto;max-width:200px;background:rgba(5,9,10,.8);border:1px solid color-mix(in srgb,var(--c) 40%,transparent);border-radius:10px;padding:6px 10px;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:border-color .15s}
.co:hover,.co.open{border-color:var(--c)}
.co.open{max-width:250px;z-index:2}
.co .ct{display:flex;align-items:baseline;gap:7px;font:italic 16px/1.2 var(--f-display);color:var(--ink)}
.co .ct i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c);transform:translateY(-1px)}
.co .ct small{font:normal 10.5px var(--f-mono);color:var(--muted)}
.co .cd{font:12px/1.45 var(--f-body);color:#cfd9d6;margin-top:6px;display:grid;gap:3px}
.co .cd small{font:10.5px var(--f-mono);color:var(--muted)}
.co .cmo{font:10.5px var(--f-mono);color:var(--faint)}
.co .btn{justify-self:start;padding:4px 10px;font-size:12px;margin-top:4px}
.segs{display:flex;gap:4px;padding:3px;border:1px solid var(--rule);border-radius:10px;margin:2px 0 10px;flex-wrap:wrap}
.seg{flex:1 1 auto;border:0;background:none;border-radius:7px;padding:6px 10px;cursor:pointer;color:var(--muted);font-size:12.8px}
.seg[aria-pressed="true"]{background:rgba(43,255,136,.12);color:var(--amber)}
.segs.sub2 .seg{font-size:12px;padding:5px 8px}
.follow{display:grid;gap:8px;margin-bottom:6px}
.follow select,#f-fill{background:rgba(0,0,0,.3);border:1px solid var(--rule);border-radius:8px;padding:6px;color:var(--ink);min-width:0;width:100%}
.mini{display:grid;gap:3px;font:500 10px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);min-width:0}
body.mode-shared .left{display:none}
.player{position:fixed;left:50%;bottom:max(112px,calc(env(safe-area-inset-bottom,0px) + 112px));transform:translateX(-50%);width:min(420px,calc(100% - 32px));z-index:5;background:var(--panel);border:1px solid var(--rule);border-radius:14px;padding:12px 14px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);display:grid;gap:10px}
.pl-top{display:flex;align-items:center;gap:10px}
.pl-title{flex:1;min-width:0;display:grid}
.pl-title .kind{font:500 10px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--amber)}
.pl-title b{font:italic 400 18px/1.2 var(--f-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-src{display:flex;gap:8px;align-items:center}
.pl-src select{flex:1;min-width:0;background:rgba(0,0,0,.3);border:1px solid var(--rule);border-radius:8px;padding:6px;color:var(--ink)}
.pl-src label.btn{white-space:nowrap}
.pl-seek{display:flex;gap:10px;align-items:center;font:11px var(--f-mono);color:var(--muted)}
.pl-seek input,.pl-vol input{flex:1;accent-color:var(--amber);min-width:0}
.pl-vol{display:flex;gap:10px;align-items:center;font:500 10px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.pl-bands{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.pb{display:grid;gap:3px;justify-items:center;text-align:center;min-width:0}
.pb .bar{display:block;width:10px;height:38px;border-radius:5px;background:rgba(214,238,238,.08);overflow:hidden;position:relative}
.pb .bar i{position:absolute;inset:0;background:linear-gradient(to top,#9fd8e0,#fff1d6);transform-origin:bottom;transform:scaleY(.04);border-radius:5px;box-shadow:0 0 8px rgba(255,241,214,.5)}
.pb b{font:500 11px/1.2 var(--f-body)}
.pb small{font:10px var(--f-mono);color:var(--faint)}
@media (max-width:960px){.player{bottom:max(150px,calc(env(safe-area-inset-bottom,0px) + 150px))}}
.player[hidden],.breathhud[hidden]{display:none}
.breathhud{position:fixed;left:50%;top:max(18px,env(safe-area-inset-top,0px));transform:translateX(-50%);display:flex;align-items:center;gap:12px;pointer-events:none;z-index:4;
  font:italic 20px/1 var(--f-display);color:var(--glow);text-shadow:0 0 14px rgba(160,220,220,.35)}
.breathhud #bh-bar{width:120px;height:3px;border-radius:2px;background:rgba(214,238,238,.12);overflow:hidden}
.breathhud #bh-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#9fd8e0,#fff1d6);border-radius:2px}
.breathhud small{font:500 11px var(--f-mono);font-style:normal;color:#ffb0a0;letter-spacing:.06em}
@media (max-width:960px){.breathhud{top:auto;bottom:max(200px,calc(env(safe-area-inset-bottom,0px) + 200px))}}
.credit{font:10.5px/1.4 var(--f-mono);color:var(--faint);text-align:right;max-width:60ch}
.credit a{color:var(--muted)}

@media (max-width:960px){
  .chrome{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto;gap:8px}
  .title{grid-column:1}.title h1{font-size:26px}.title p{display:none}
  .modes{grid-column:1;grid-row:1;justify-self:end}
  .left{grid-column:1;grid-row:2;align-self:start;max-height:62vh;display:none}
  .left.open{display:block}
  .right{grid-column:1;grid-row:3;max-height:44vh}
  .foot{grid-column:1;grid-row:4}
  .mobile-only{display:inline-block}
  .credit{display:none}
  .modes button{padding:6px 9px;font-size:12px}.modes .bodysel button{padding:6px 7px;font-size:11.5px}.modes .msep{margin:4px 1px}
  .readout{max-width:100%}
}
@media (prefers-reduced-motion:reduce){.tip{transition:none}}