/* HK Content Brain - the writing room. Ice-blue glass over a living 3D room (static/scene.js).
   One blue ramp carries everything; green / amber / red only ever mean done / wait / problem. */
:root{
  --bg:#06080b; --panel:rgba(15,21,31,.62); --panel2:rgba(20,28,41,.58); --well:rgba(5,8,12,.55);
  --line:rgba(134,182,239,.14); --line2:rgba(134,182,239,.26); --line3:rgba(134,182,239,.5);
  --text:#eef3fa; --soft:#bcc7d6; --muted:#8290a3; --dim:#56627a;
  --ice:#86b6ef; --ice2:#3987e5; --ice3:#184f95; --frost:#eaf3ff;
  --good:#7ce0a3; --warn:#f0b860; --bad:#ef8377;
  --grad:linear-gradient(120deg,#f4f9ff,#86b6ef 46%,#3987e5);
  --ink:#06101f; --r:22px;
  --shadow:0 24px 60px -26px rgba(0,0,0,.9),0 0 0 1px var(--line) inset;
  --sans:"Manrope",system-ui,-apple-system,"Segoe UI","Nirmala UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --display:"Instrument Serif",Georgia,"Times New Roman",serif;
  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text)}
body{font:400 15px/1.55 var(--sans);letter-spacing:-.005em;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  background:radial-gradient(1100px 700px at 86% -10%,rgba(57,135,229,.16),transparent 60%),radial-gradient(900px 600px at -10% 110%,rgba(24,79,149,.16),transparent 60%),var(--bg);background-attachment:fixed}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
a,button,input,select,textarea,label{touch-action:manipulation}
h1,h2,h3,h4,p{margin:0}
#bg{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none;transition:opacity .4s}
.noise{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hidden{display:none!important}
.muted{color:var(--muted)}
.err{color:var(--bad);min-height:1.2em;font-size:.9rem}
.mono{font-family:var(--mono)}
::selection{background:rgba(134,182,239,.32)}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:rgba(134,182,239,.18);border-radius:99px;border:3px solid transparent;background-clip:padding-box}
.glass{background:var(--panel);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);box-shadow:var(--shadow)}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:shine 7s linear infinite}
@keyframes shine{to{background-position:200% 0}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
@keyframes fade{from{opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{50%{opacity:.35}}
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes rot{to{--a:360deg}}
/* a thin line of light that keeps travelling round the edge of the thing you are working in */
.glow-edge{position:relative}
.glow-edge::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
  background:conic-gradient(from var(--a,0deg),transparent 0 62%,var(--ice2),var(--frost),var(--ice2),transparent 96%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:rot 6s linear infinite;opacity:.9}
.glow-edge.busy::before{animation-duration:1.5s}

/* ---------- icons (CSS masks) ---------- */
[class^="i-"],[class*=" i-"]{display:inline-block;width:18px;height:18px;background:currentColor;flex:none;
  -webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.i-bolt{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2L4 14h6l-1 8 9-12h-6z'/%3E%3C/svg%3E")}
.i-wave{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M3 10v4M7 6v12M11 9v6M15 3v18M19 8v8'/%3E%3C/svg%3E")}
.i-rank{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V10M10 20V4M16 20v-7M21 20H3'/%3E%3C/svg%3E")}
.i-orbit{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='3' fill='black'/%3E%3Cellipse cx='12' cy='12' rx='10' ry='4.5' transform='rotate(-30 12 12)'/%3E%3C/svg%3E")}
.i-file{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l5 5v13H6zM14 3v5h5M9 13h7M9 17h5'/%3E%3C/svg%3E")}
.i-screen{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='7' y='2.5' width='10' height='19' rx='2.5'/%3E%3Cpath d='M3 7v10M21 7v10' stroke-linecap='round'/%3E%3Cpath d='M10.5 9.5l4 2.5-4 2.5z' fill='black'/%3E%3C/svg%3E")}
.i-play{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4l13 8-13 8z'/%3E%3C/svg%3E")}
.i-pause{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 4h4v16H6zM14 4h4v16h-4z'/%3E%3C/svg%3E")}
.i-next{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E")}
.i-prev{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E")}
.i-x{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E")}
.i-check{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E")}
.i-copy{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='8' y='8' width='12' height='12' rx='2.5'/%3E%3Cpath d='M16 8V6a2 2 0 00-2-2H6a2 2 0 00-2 2v8a2 2 0 002 2h2'/%3E%3C/svg%3E")}
.i-send{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M21 3L3 10.5l7 2.5 2.5 7z'/%3E%3Cpath d='M10 13l5-5' stroke-linecap='round'/%3E%3C/svg%3E")}
.i-refresh{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 10-2.3 5.6M20 5v7h-7'/%3E%3C/svg%3E")}
.i-search{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E")}
.i-heart{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8-5.2-8-11a4.6 4.6 0 018-3 4.6 4.6 0 018 3c0 5.800-8 11-8 11z'/%3E%3C/svg%3E")}
.i-eye{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M2 12s3.600-7 10-7 10 7 10 7-3.600 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3' fill='black'/%3E%3C/svg%3E")}
.i-chat{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3C/svg%3E")}
.i-clock{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E")}
.i-plus{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E")}
.i-user{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1-4.500 4.500-6 8-6s7 1.500 8 6'/%3E%3C/svg%3E")}
.i-wand{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 20L15 9M14 4v3M12.500 5.500h3M19 9v4M17 11h4M19 3v2'/%3E%3C/svg%3E")}
.i-globe{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c3 3.500 3 14.500 0 18M12 3c-3 3.500-3 14.500 0 18'/%3E%3C/svg%3E")}
.i-hook{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12a4 4 0 01-8 0v-2M12 3l3 3M12 3L9 6'/%3E%3C/svg%3E")}
.i-twist{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h4c6 0 6 10 12 10h2M3 17h4c2 0 3.300-1 4.300-2.500M21 7h-2c-2 0-3.300 1-4.300 2.500M18 4l3 3-3 3M18 14l3 3-3 3'/%3E%3C/svg%3E")}
.i-link{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M10 14a4.500 4.500 0 006.400 0l3-3a4.500 4.500 0 00-6.400-6.400l-1 1M14 10a4.500 4.500 0 00-6.400 0l-3 3a4.500 4.500 0 006.400 6.400l1-1'/%3E%3C/svg%3E")}
.i-text{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 11h16M4 16h10'/%3E%3C/svg%3E")}
.i-music{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l11-2v13'/%3E%3Ccircle cx='6.500' cy='18' r='2.500' fill='black'/%3E%3Ccircle cx='17.500' cy='16' r='2.500' fill='black'/%3E%3C/svg%3E")}
.i-mic{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0014 0M12 18v3'/%3E%3C/svg%3E")}
.i-star{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.500l2.900 6.200 6.600.800-4.900 4.600 1.300 6.700L12 17.500l-5.900 3.300 1.300-6.700L2.500 9.500l6.600-.800z'/%3E%3C/svg%3E")}
.i-vol{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h4l5-4v14l-5-4H4z' fill='black'/%3E%3Cpath d='M16.500 8.500a5 5 0 010 7M19 6a8.500 8.500 0 010 12'/%3E%3C/svg%3E")}
.i-mute{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h4l5-4v14l-5-4H4z' fill='black'/%3E%3Cpath d='M17 9.500l5 5M22 9.500l-5 5'/%3E%3C/svg%3E")}
.i-dots{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='5' cy='12' r='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='19' cy='12' r='2'/%3E%3C/svg%3E")}
.i-out{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 01-1 1H5a1 1 0 01-1-1V7a1 1 0 011-1h5'/%3E%3C/svg%3E")}

/* ---------- brand, top bar ---------- */
#app{position:relative;z-index:2;padding:14px clamp(12px,3vw,34px) 140px;max-width:1500px;margin:0 auto}
.topbar{position:sticky;top:10px;z-index:30;display:flex;align-items:center;gap:16px;padding:10px 12px 10px 16px;border-radius:20px}
.brand{display:flex;align-items:center;gap:11px;white-space:nowrap}
.mark{position:relative;width:34px;height:34px;border-radius:11px;flex:none;background:linear-gradient(160deg,#1c2a40,#0c121c);box-shadow:0 0 0 1px var(--line2) inset,0 0 22px -4px rgba(57,135,229,.8)}
.mark i{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--frost)}
.mark i:nth-child(1){left:8px;top:14px;background:var(--ice);box-shadow:0 0 12px var(--ice)}
.mark i:nth-child(2){right:8px;top:8px}.mark i:nth-child(3){right:8px;bottom:8px}
.mark::before,.mark::after{content:"";position:absolute;left:12px;top:16.500px;width:15px;height:1.500px;background:rgba(234,243,255,.5);transform-origin:0 50%}
.mark::before{transform:rotate(-27deg)}.mark::after{transform:rotate(27deg)}
.brand-t{display:grid;line-height:1}
.brand-t b{font:400 italic 23px/1 var(--display);letter-spacing:.01em}
.brand-t small{font:500 9.500px/1 var(--mono);letter-spacing:.24em;color:var(--muted);margin-top:4px}
.brand.big{justify-content:center}.brand.big .brand-t b{font-size:30px}
.tabs{display:flex;gap:4px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;padding:2px}
.tabs::-webkit-scrollbar{display:none}
.tabs a{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:13px;font:600 13.500px/1 var(--sans);color:var(--muted);white-space:nowrap;transition:color .2s,background .25s,transform .2s var(--ease)}
.tabs a i{width:16px;height:16px}
.tabs a:hover{color:var(--text);background:rgba(134,182,239,.08);transform:translateY(-1px)}
.tabs a.on{color:var(--ink);background:var(--grad);box-shadow:0 10px 26px -10px rgba(57,135,229,.9),0 0 0 1px rgba(255,255,255,.4) inset}
.screen-btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 8px 0 14px;border:0;border-radius:13px;cursor:pointer;font:700 13.500px/1 var(--sans);color:var(--frost);
  background:linear-gradient(160deg,rgba(57,135,229,.35),rgba(24,79,149,.25));box-shadow:0 0 0 1px var(--line3) inset,0 10px 26px -14px rgba(57,135,229,.9);transition:transform .2s var(--ease),box-shadow .25s}
.screen-btn:hover{transform:translateY(-1px);box-shadow:0 0 0 1px var(--ice) inset,0 14px 30px -12px rgba(57,135,229,1)}
.screen-btn em{font:600 12px/1 var(--mono);font-style:normal;min-width:26px;height:26px;display:grid;place-items:center;border-radius:9px;background:rgba(0,0,0,.4);color:var(--ice)}
.screen-btn.has em{background:var(--frost);color:var(--ink)}

/* ---------- login ---------- */
.login{position:relative;z-index:2;min-height:100vh;display:grid;place-items:center;padding:20px}
.login-card{width:min(400px,100%);padding:36px 30px 26px;border-radius:26px;text-align:center;display:grid;gap:14px;background:var(--panel);backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px);box-shadow:var(--shadow),0 0 80px -24px rgba(57,135,229,.7)}

/* ---------- fields, buttons ---------- */
input[type=text],input[type=password],input[type=search],input[type=number],textarea,select{width:100%;background:var(--well);border:1px solid var(--line);border-radius:14px;padding:.8rem 1rem;outline:none;transition:border .2s,box-shadow .2s}
textarea{resize:vertical;line-height:1.5}
input:focus,textarea:focus,select:focus{border-color:var(--line3);box-shadow:0 0 0 4px rgba(57,135,229,.16)}
::placeholder{color:var(--dim)}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:0;cursor:pointer;color:var(--text);font:700 .92rem var(--sans);padding:.82rem 1.2rem;border-radius:14px;
  transition:transform .2s var(--ease),box-shadow .3s,background .3s;overflow:hidden;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn.primary{color:var(--ink);background:var(--grad);background-size:180% 100%;box-shadow:0 12px 30px -10px rgba(57,135,229,.95),0 0 0 1px rgba(255,255,255,.35) inset}
.btn.primary:hover{background-position:100% 0;transform:translateY(-1px)}
.btn.primary::after{content:"";position:absolute;inset:-2px;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.5),transparent 70%);transform:translateX(-120%);animation:sweep 3.400s ease-in-out infinite}
@keyframes sweep{60%,100%{transform:translateX(120%)}}
.btn.ghost{background:rgba(134,182,239,.07);box-shadow:0 0 0 1px var(--line) inset;color:var(--soft)}
.btn.ghost:hover{background:rgba(134,182,239,.14);color:var(--text);box-shadow:0 0 0 1px var(--line2) inset}
.btn.small{padding:.5rem .8rem;font-size:.8rem;border-radius:11px;gap:.4rem}
.btn.small i{width:14px;height:14px}
.btn[disabled]{opacity:.38;pointer-events:none}
.btn em{font:600 .75rem var(--mono);font-style:normal;background:rgba(0,0,0,.3);padding:.1rem .5rem;border-radius:99px}
.icon-btn{border:0;background:rgba(134,182,239,.08);color:var(--soft);width:36px;height:36px;border-radius:12px;cursor:pointer;display:grid;place-items:center;flex:none;transition:.2s}
.icon-btn:hover{background:rgba(134,182,239,.18);color:var(--text)}
.seg{display:inline-flex;background:var(--well);border-radius:12px;padding:3px;box-shadow:0 0 0 1px var(--line) inset;flex-wrap:wrap}
.seg button{border:0;background:none;cursor:pointer;color:var(--muted);font:600 .8rem var(--sans);padding:.42rem .75rem;border-radius:9px;transition:.2s;white-space:nowrap}
.seg button:hover{color:var(--text)}
.seg button.on{color:var(--ink);background:var(--grad);box-shadow:0 6px 16px -8px rgba(57,135,229,.9)}
.chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:99px;font:600 .76rem var(--sans);color:var(--soft);background:rgba(134,182,239,.08);box-shadow:0 0 0 1px var(--line) inset;white-space:nowrap}
.chip i{width:13px;height:13px}
.chip.ice{color:var(--ice);box-shadow:0 0 0 1px var(--line2) inset}
.chip.good{color:var(--good);background:rgba(124,224,163,.08);box-shadow:0 0 0 1px rgba(124,224,163,.3) inset}
.chip.warn{color:var(--warn);background:rgba(240,184,96,.08);box-shadow:0 0 0 1px rgba(240,184,96,.3) inset}
.chip.bad{color:var(--bad);background:rgba(239,131,119,.08);box-shadow:0 0 0 1px rgba(239,131,119,.3) inset}
button.chip{border:0;cursor:pointer;transition:.2s}
button.chip:hover{color:var(--text);background:rgba(134,182,239,.16)}
button.chip.on{color:var(--ink);background:var(--grad)}
.label{font:600 .68rem var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
select.mini{width:auto;height:34px;padding:0 .6rem;border-radius:11px;font-size:.8rem}

/* ---------- a view: words on the left, the live picture on the right ---------- */
.view{animation:fade .35s var(--ease);min-width:0}
.hero{display:grid;grid-template-columns:minmax(0,600px) 1fr;gap:24px;min-height:min(560px,calc(100vh - 150px));align-items:center;margin:26px 4px 10px}
.hero-l{display:grid;gap:18px;align-content:center}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font:500 .72rem var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ice)}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ice);box-shadow:0 0 12px var(--ice);animation:pulse 2.400s ease-in-out infinite}
.hero h1{font:800 clamp(2rem,4.200vw,3.300rem)/1.02 var(--sans);letter-spacing:-.03em}
.hero h1 em{font:400 italic 1.120em/1 var(--display);letter-spacing:0;padding-right:.08em}
.hero .sub{color:var(--soft);max-width:520px;font-size:1rem}
.stage-cap{align-self:end;justify-self:end;text-align:right;display:grid;gap:4px;padding:0 6px 8px;pointer-events:none}
.stage-cap b{font:400 italic 1.300rem var(--display);color:var(--frost)}
.stage-cap small{font:500 .68rem var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

/* the box you type into */
.composer{border-radius:var(--r);padding:14px;display:grid;gap:12px;background:var(--panel);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);box-shadow:var(--shadow),0 30px 80px -40px rgba(57,135,229,.7)}
.composer textarea{min-height:92px;border-radius:16px;font-size:.95rem}
.composer .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.composer .row .grow{flex:1;min-width:0}
.opts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.hint{font-size:.8rem;color:var(--muted)}
.count-pill{font:600 .75rem var(--mono);color:var(--ice);padding:.3rem .6rem;border-radius:99px;background:rgba(134,182,239,.08);box-shadow:0 0 0 1px var(--line) inset}

/* pick-a-client button + its list */
.pick{position:relative}
.pick-btn{display:inline-flex;align-items:center;gap:9px;height:42px;padding:0 12px 0 6px;border:0;border-radius:13px;cursor:pointer;background:var(--well);box-shadow:0 0 0 1px var(--line) inset;font:600 .86rem var(--sans);color:var(--soft);max-width:260px;transition:.2s}
.pick-btn:hover{box-shadow:0 0 0 1px var(--line2) inset;color:var(--text)}
.pick-btn b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.pick-btn .av{width:30px;height:30px;border-radius:10px;font-size:.78rem}
.pick-btn.set{color:var(--text);box-shadow:0 0 0 1px var(--line3) inset}
.av{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:12px;font:800 .9rem var(--sans);color:var(--ink);background:var(--grad)}
.av.none{background:rgba(134,182,239,.1);color:var(--muted)}
.pop{position:absolute;z-index:40;top:calc(100% + 8px);left:0;width:min(340px,86vw);max-height:380px;display:grid;grid-template-rows:auto minmax(0,1fr);border-radius:18px;overflow:hidden;background:rgba(12,17,26,.96);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:var(--shadow),0 30px 60px -20px #000;animation:rise .2s var(--ease)}
.pop input{border-radius:0;border:0;border-bottom:1px solid var(--line);background:none}
.pop-list{overflow:auto;padding:6px;overscroll-behavior:contain}
.pop-item{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;cursor:pointer;text-align:left;padding:7px 8px;border-radius:11px;color:var(--soft)}
.pop-item:hover,.pop-item.on{background:rgba(134,182,239,.12);color:var(--text)}
.pop-item .av{width:30px;height:30px;border-radius:10px;font-size:.75rem}
.pop-item span{display:grid;min-width:0;line-height:1.25}
.pop-item b{font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pop-item small{font-size:.72rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- live steps ---------- */
.steps{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.step{display:inline-flex;align-items:center;gap:7px;font:600 .72rem var(--mono);letter-spacing:.06em;color:var(--dim);transition:color .3s}
.step::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.6;transition:.3s}
.step+.step::after{content:"";order:-1;width:22px;height:1px;background:var(--line2);margin-right:2px}
.step.on{color:var(--ice)}.step.on::before{opacity:1;box-shadow:0 0 12px var(--ice);animation:pulse 1s ease-in-out infinite}
.step.done{color:var(--good)}.step.done::before{opacity:1}
.step.fail{color:var(--bad)}

/* ---------- results ---------- */
.results{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:8px}
.res-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;border-radius:18px;position:sticky;top:76px;z-index:20}
.res-head h2{font:700 1rem var(--sans);display:flex;align-items:center;gap:10px}
.res-head h2 em{font:400 italic 1.350rem var(--display)}
.res-head .sp{flex:1}
.bar{height:3px;border-radius:99px;background:rgba(134,182,239,.12);overflow:hidden;flex-basis:100%}
.bar i{display:block;height:100%;width:0;background:var(--grad);border-radius:inherit;transition:width .4s var(--ease);box-shadow:0 0 12px var(--ice2)}
.empty{display:grid;justify-items:center;gap:8px;text-align:center;color:var(--muted);padding:26px}

/* one Reel that was read: the Reel on the left, what was written on the right */
.rcard{position:relative;border-radius:var(--r);animation:rise .45s var(--ease) both}
.rcard-in{position:relative;border-radius:inherit;display:grid;grid-template-columns:190px minmax(0,1fr);gap:16px;padding:14px;background:linear-gradient(160deg,rgba(21,30,45,.74),rgba(9,13,20,.78));backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:var(--shadow)}
.rcard.sel .rcard-in{box-shadow:0 0 0 1.500px var(--ice) inset,0 24px 60px -26px rgba(57,135,229,.8)}
.thumb{position:relative;aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:#05070a center/cover no-repeat;box-shadow:0 0 0 1px var(--line) inset;cursor:pointer;display:grid;place-items:center;transition:transform .3s var(--ease),box-shadow .3s}
.thumb:hover{transform:translateY(-3px) scale(1.012);box-shadow:0 0 0 1px var(--line3) inset,0 20px 40px -18px rgba(57,135,229,.9)}
.thumb img,.thumb video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.75))}
.thumb .playdot{position:relative;z-index:2;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:rgba(6,10,16,.55);backdrop-filter:blur(8px);box-shadow:0 0 0 1px rgba(255,255,255,.25) inset;opacity:0;transform:scale(.8);transition:.25s var(--ease)}
.thumb:hover .playdot{opacity:1;transform:none}
.thumb .rank{position:absolute;z-index:2;top:8px;left:8px;font:600 .72rem var(--mono);padding:.2rem .5rem;border-radius:8px;background:rgba(6,10,16,.7);backdrop-filter:blur(6px);color:var(--frost)}
.thumb .nums{position:absolute;z-index:2;left:8px;right:8px;bottom:8px;display:flex;gap:8px;flex-wrap:wrap;font:600 .7rem var(--mono);color:#fff}
.thumb .nums span{display:inline-flex;align-items:center;gap:4px}
.thumb .nums i{width:12px;height:12px}
.thumb .tick{position:absolute;z-index:3;top:8px;right:8px;width:28px;height:28px;border-radius:9px;border:0;cursor:pointer;display:grid;place-items:center;background:rgba(6,10,16,.6);backdrop-filter:blur(6px);color:transparent;box-shadow:0 0 0 1.500px rgba(255,255,255,.4) inset;transition:.2s}
.thumb .tick i{width:14px;height:14px}
.thumb .tick.on{background:var(--frost);color:var(--ink);box-shadow:0 0 18px rgba(134,182,239,.9)}
.thumb .scan{position:absolute;z-index:2;left:0;right:0;height:38%;background:linear-gradient(180deg,transparent,rgba(134,182,239,.35),transparent);animation:scan 1.600s linear infinite}
@keyframes scan{from{top:-40%}to{top:100%}}
.rbody{display:grid;gap:10px;align-content:start;min-width:0}
.rhead{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rhead .who{font:600 .82rem var(--mono);color:var(--ice);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.rhead .sp{flex:1}
.field{display:grid;gap:4px}
.field .label{display:flex;align-items:center;gap:8px}
.field .label button{border:0;background:none;color:var(--dim);cursor:pointer;padding:0;display:inline-flex}
.field .label button:hover{color:var(--ice)}
.field .label button i{width:13px;height:13px}
.field p,.field pre{font:400 .92rem/1.55 var(--sans);white-space:pre-wrap;word-break:break-word;margin:0;color:var(--text)}
.field.big p{font:400 1.250rem/1.3 var(--display);color:var(--frost)}
.field.box{background:var(--well);border-radius:14px;padding:10px 12px;box-shadow:0 0 0 1px var(--line) inset}
.field.clamp p{max-height:9.400em;overflow:auto}
.fields2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;align-items:start}
.tags{display:flex;flex-wrap:wrap;gap:5px;align-items:flex-start;align-content:flex-start}
.tags span{font:500 .74rem var(--mono);padding:.2rem .5rem;border-radius:7px;background:rgba(134,182,239,.08);color:var(--soft)}
.acts{display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding-top:10px;border-top:1px solid var(--line)}
.acts .sp{flex:1}
.ask{display:flex;gap:8px}
.ask input{height:38px;border-radius:11px;padding:0 .8rem;font-size:.86rem}
.wait{display:grid;gap:10px;align-content:center;min-height:150px}
.skel{height:12px;border-radius:99px;background:linear-gradient(90deg,rgba(134,182,239,.06),rgba(134,182,239,.2),rgba(134,182,239,.06));background-size:200% 100%;animation:shine 1.400s linear infinite}
.fail-note{color:var(--bad);font-size:.88rem}
.versions{display:flex;gap:5px;flex-wrap:wrap}

/* sticky tray: what is ticked, and what to do with it */
.tray{position:fixed;z-index:35;left:50%;bottom:18px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:10px 12px 10px 18px;border-radius:20px;background:rgba(12,17,26,.92);backdrop-filter:blur(24px);box-shadow:var(--shadow),0 30px 60px -20px rgba(57,135,229,.7);animation:rise .3s var(--ease);max-width:calc(100vw - 24px);flex-wrap:wrap;justify-content:center}
.tray b{font:700 .9rem var(--sans);white-space:nowrap}
.tray b em{font:400 italic 1.300rem var(--display);color:var(--ice);margin-right:4px}

/* ---------- Top Reels + creators grids ---------- */
.rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:14px}
.rtile{display:grid;gap:8px;animation:rise .45s var(--ease) both}
.rtile .cap{font-size:.78rem;color:var(--soft);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.700em}
.rtile .meta{display:flex;gap:8px;font:500 .68rem var(--mono);color:var(--muted);flex-wrap:wrap}
.controls{display:grid;gap:12px}
.ctl{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ctl .label{min-width:54px}
.dial{display:flex;align-items:center;gap:12px;flex:1;min-width:200px}
.dial output{font:400 italic 1.900rem/1 var(--display);color:var(--frost);min-width:44px;text-align:center}
input[type=range]{-webkit-appearance:none;appearance:none;flex:1;height:6px;border-radius:99px;background:linear-gradient(90deg,var(--ice2) var(--p,30%),rgba(134,182,239,.14) var(--p,30%));outline:none;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,var(--ice) 55%,var(--ice2));box-shadow:0 0 0 4px rgba(57,135,229,.25),0 6px 16px -4px rgba(57,135,229,1);transition:transform .15s}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.150)}
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.ccard{position:relative;border-radius:var(--r);padding:14px;display:grid;gap:10px;background:linear-gradient(160deg,rgba(21,30,45,.74),rgba(9,13,20,.78));backdrop-filter:blur(18px);box-shadow:var(--shadow);animation:rise .45s var(--ease) both;transition:transform .3s var(--ease),box-shadow .3s}
.ccard:hover{transform:translateY(-3px);box-shadow:0 0 0 1px var(--line2) inset,0 30px 60px -28px rgba(57,135,229,.8)}
.ccard .top{display:flex;gap:11px;align-items:center}
.ccard .top img,.ccard .top .av{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 1.500px var(--line2)}
.ccard .nm{display:grid;min-width:0;line-height:1.25;flex:1}
.ccard .nm b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ccard .nm small{font:500 .74rem var(--mono);color:var(--ice);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ccard .fol{font:400 italic 1.300rem var(--display);color:var(--frost);white-space:nowrap}
.ccard .why{font-size:.82rem;color:var(--soft);line-height:1.4}
.ccard .bio{font-size:.78rem;color:var(--muted);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.match{height:4px;border-radius:99px;background:rgba(134,182,239,.12);overflow:hidden}
.match i{display:block;height:100%;background:var(--grad);border-radius:inherit}
.understood{border-radius:var(--r);padding:16px;display:grid;gap:12px;animation:rise .4s var(--ease)}
.understood h3{font:400 italic 1.500rem/1.2 var(--display);color:var(--frost)}
.words{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.word{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 6px 0 12px;border-radius:99px;font:600 .8rem var(--sans);background:rgba(134,182,239,.12);box-shadow:0 0 0 1px var(--line2) inset;color:var(--frost)}
.word button{border:0;background:none;color:var(--muted);cursor:pointer;display:grid;place-items:center;padding:2px}
.word button:hover{color:var(--bad)}
.word button i{width:12px;height:12px}
.word-in{height:32px;width:170px;border-radius:99px;padding:0 12px;font-size:.8rem}

/* ---------- Client Data ---------- */
.cl-wrap{display:grid;grid-template-columns:330px minmax(0,1fr);gap:16px;align-items:start;margin-top:8px}
.cl-list{border-radius:var(--r);padding:10px;display:grid;gap:8px;position:sticky;top:76px;max-height:calc(100vh - 96px);grid-template-rows:auto 1fr}
.cl-items{overflow:auto;display:grid;gap:2px;align-content:start;padding-right:2px}
.cl-item{display:flex;align-items:center;gap:10px;border:0;background:none;cursor:pointer;text-align:left;padding:7px 8px;border-radius:12px;color:var(--soft);transition:.15s;width:100%}
.cl-item:hover{background:rgba(134,182,239,.08);color:var(--text)}
.cl-item.on{background:rgba(134,182,239,.16);color:var(--text);box-shadow:0 0 0 1px var(--line2) inset}
.cl-item .av{width:34px;height:34px;border-radius:11px;font-size:.8rem;flex:none}
.cl-item span{display:grid;min-width:0;line-height:1.25;flex:1}
.cl-item b{font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-item small{font-size:.72rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-item .dots{display:flex;gap:3px;flex:none}
.cl-item .dots u{width:6px;height:6px;border-radius:50%;background:var(--dim);text-decoration:none}
.cl-item .dots u.y{background:var(--ice);box-shadow:0 0 8px var(--ice)}
.cl-detail{display:grid;gap:14px;min-width:0}
.cl-top{border-radius:var(--r);padding:18px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.cl-top .av{width:64px;height:64px;border-radius:20px;font-size:1.400rem}
.cl-top h2{font:400 italic 2.200rem/1.05 var(--display)}
.cl-top .sp{flex:1}
.cl-facts{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.cl-facts .chip{white-space:normal;height:auto;min-height:30px;padding:4px 11px;line-height:1.3}
.block{border-radius:var(--r);padding:16px;display:grid;gap:12px;animation:rise .4s var(--ease) both}
.block h3{font:700 .95rem var(--sans);display:flex;align-items:center;gap:9px}
.block h3 i{color:var(--ice)}
.block h3 small{font:500 .7rem var(--mono);color:var(--muted);letter-spacing:.08em;margin-left:auto;text-align:right;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.kv div{background:var(--well);border-radius:14px;padding:10px 12px;box-shadow:0 0 0 1px var(--line) inset;display:grid;gap:3px;align-content:start}
.kv dt{font:600 .66rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.kv dd{margin:0;font-size:.9rem;white-space:pre-wrap;word-break:break-word}
.prose{font-size:.9rem;line-height:1.6;color:var(--soft);white-space:pre-wrap;word-break:break-word}
.prose b,.prose strong{color:var(--text)}
.prose h4{font:700 .9rem var(--sans);color:var(--frost);margin:10px 0 2px}

/* ---------- the Screen (player) ---------- */
.player{position:fixed;inset:0;z-index:60;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;overscroll-behavior:contain;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background:radial-gradient(1200px 800px at 50% 40%,rgba(24,79,149,.35),transparent 65%),rgba(4,6,9,.94);backdrop-filter:blur(26px) saturate(140%);-webkit-backdrop-filter:blur(26px) saturate(140%);animation:fade .25s}
.player > *{min-width:0}
.pl-top{display:flex;align-items:center;gap:12px;padding:14px clamp(12px,3vw,28px)}
.pl-top > *{flex:none}
.pl-top .sp{flex:1 1 0}
.pl-tools{display:flex;align-items:center;gap:8px}
.pl-top h2{font:400 italic 1.700rem/1 var(--display)}
.pl-top .sp{flex:1}
.pl-top .pl-boards{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;min-width:0;flex:0 1 auto}
.pl-boards .chip{flex:none}
.pl-boards .chip em{font:600 .66rem var(--mono);font-style:normal;margin-left:2px;opacity:.7}
.pl-boards::-webkit-scrollbar{display:none}
.pl-main{position:relative;display:grid;grid-template-columns:minmax(0,1fr) min(380px,32vw);gap:10px;min-height:0;padding:0 clamp(12px,3vw,28px)}
.flow{position:relative;min-height:0;min-width:0;perspective:1600px;overflow:hidden;container-type:size;touch-action:none}
.flow-in{position:absolute;inset:0;transform-style:preserve-3d}
.fcard{position:absolute;top:50%;left:50%;height:100%;height:min(100cqh,calc(100cqw * 16 / 9));max-width:100%;aspect-ratio:9/16;margin:0;border-radius:22px;overflow:hidden;background:#05070a center/cover no-repeat;cursor:pointer;
  box-shadow:0 0 0 1px var(--line) inset,0 40px 80px -30px #000;transition:transform .55s var(--ease),opacity .45s,filter .45s,box-shadow .4s;will-change:transform;transform:translate(-50%,-50%)}
.fcard video,.fcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fcard.cur{cursor:default;box-shadow:0 0 0 1.500px var(--line3) inset,0 50px 120px -30px rgba(57,135,229,.75),0 0 90px -30px rgba(134,182,239,.8)}
.fcard.picked{box-shadow:0 0 0 2.500px var(--frost) inset,0 50px 120px -30px rgba(57,135,229,.9)}
.fcard .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),transparent 22%,transparent 62%,rgba(0,0,0,.8));pointer-events:none}
.fcard .fr{position:absolute;top:12px;left:12px;font:600 .74rem var(--mono);padding:.22rem .55rem;border-radius:9px;background:rgba(6,10,16,.65);backdrop-filter:blur(6px)}
.fcard .fp{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:var(--frost);color:var(--ink);box-shadow:0 0 20px rgba(134,182,239,.9)}
.fcard .fp i{width:15px;height:15px}
.fcard .fn{position:absolute;left:14px;right:60px;bottom:20px;display:grid;gap:6px;pointer-events:none;text-shadow:0 1px 6px rgba(0,0,0,.8)}
.fcard .fm{position:absolute;z-index:3;right:10px;bottom:16px;width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;display:none;place-items:center;color:#fff;background:rgba(6,10,16,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 0 0 1px rgba(255,255,255,.25) inset}
.fcard.cur .fm{display:grid}
.player.muted .fcard .fm{background:var(--frost);color:var(--ink)}
.player:not(.muted) .fm .i-mute,.player.muted .fm .i-vol{display:none}
.fcard .fn b{font:600 .82rem var(--mono)}
.fcard .fn span{display:flex;gap:12px;font:600 .78rem var(--mono);flex-wrap:wrap}
.fcard .fn span u{text-decoration:none;display:inline-flex;gap:5px;align-items:center}
.fcard .fn i{width:13px;height:13px}
.fcard .seek{position:absolute;left:0;right:0;bottom:0;height:5px;background:rgba(255,255,255,.14);cursor:pointer}
.fcard .seek::before{content:"";position:absolute;left:0;right:0;top:-12px;bottom:0}
.fcard .seek i{display:block;height:100%;width:0;background:var(--frost);box-shadow:0 0 12px var(--ice)}
.fcard .big{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;opacity:0;transition:opacity .25s}
.fcard .big span{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;background:rgba(6,10,16,.5);backdrop-filter:blur(10px);box-shadow:0 0 0 1px rgba(255,255,255,.25) inset}
.fcard .big i{width:28px;height:28px}
.fcard.paused .big,.fcard.loading .big{opacity:1}
.fcard.loading .big span{animation:pulse 1s ease-in-out infinite}
.fcard .msg{position:absolute;inset:auto 14px 46%;text-align:center;font-size:.82rem;color:var(--soft)}
.pl-nav{position:absolute;top:50%;z-index:5;width:52px;height:52px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;color:var(--frost);background:rgba(12,17,26,.7);backdrop-filter:blur(12px);box-shadow:0 0 0 1px var(--line2) inset;transform:translateY(-50%);transition:.2s var(--ease)}
.pl-nav:hover{background:var(--frost);color:var(--ink);transform:translateY(-50%) scale(1.080)}
.pl-nav.l{left:max(8px,calc(50% - min(31vh,300px) - 150px))}.pl-nav.r{right:max(8px,calc(50% - min(31vh,300px) - 150px))}
.pl-side{min-height:0;min-width:0;overflow:auto;border-radius:var(--r);padding:16px;display:grid;gap:12px;align-content:start}
.pl-sheet{display:contents}
.pl-side .o1{order:1}.pl-side .pl-acts{order:2}.pl-side .o3{order:3}
.pl-side .who{display:flex;align-items:center;gap:10px}
.pl-side .who b{font:600 .95rem var(--mono);color:var(--ice);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.statrow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.statrow div{background:var(--well);border-radius:14px;padding:10px 6px;text-align:center;box-shadow:0 0 0 1px var(--line) inset;display:grid;gap:2px}
.statrow b{font:400 italic 1.450rem/1 var(--display);color:var(--frost)}
.statrow small{font:600 .6rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pl-acts{display:grid;gap:8px}
.pl-acts .btn{width:100%}
.pl-strip{position:relative;display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;padding:12px clamp(12px,3vw,28px) 16px;scrollbar-width:thin;align-items:center}
.pl-strip button{position:relative;flex:none;width:46px;aspect-ratio:9/16;border-radius:9px;border:0;cursor:pointer;background:#0a0f17 center/cover no-repeat;box-shadow:0 0 0 1px var(--line) inset;opacity:.55;transition:.2s var(--ease)}
.pl-strip button:hover{opacity:.9;transform:translateY(-2px)}
.pl-strip button.on{opacity:1;box-shadow:0 0 0 2px var(--frost),0 10px 24px -8px rgba(57,135,229,1);transform:translateY(-3px)}
.pl-strip button.picked::after{content:"";position:absolute;top:-4px;right:-4px;width:12px;height:12px;border-radius:50%;background:var(--frost);box-shadow:0 0 10px var(--ice)}
.pl-strip .sp{flex:1}
.keys{font:500 .68rem var(--mono);color:var(--dim);white-space:nowrap;display:flex;gap:12px}
.keys kbd{font:inherit;color:var(--soft);padding:.1rem .4rem;border-radius:6px;background:rgba(134,182,239,.1);margin-right:4px}

/* ---------- sheet (send to Telegram etc.) ---------- */
.sheet{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:16px;background:rgba(3,5,8,.7);backdrop-filter:blur(10px);animation:fade .2s}
.sheet-card{width:min(560px,100%);max-height:calc(100vh - 40px);overflow:auto;border-radius:24px;padding:20px;display:grid;gap:14px;background:rgba(13,18,28,.97);box-shadow:var(--shadow),0 40px 100px -30px rgba(57,135,229,.7);animation:rise .3s var(--ease)}
.sheet-card h3{font:400 italic 1.700rem/1.1 var(--display)}
.sheet-card .row{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;position:sticky;bottom:0;z-index:2;margin:0 -4px -20px;padding:10px 4px 20px;background:linear-gradient(180deg,rgba(13,18,28,0),rgba(13,18,28,.98) 28%)}
.chat-list{display:grid;gap:4px;max-height:230px;overflow:auto}
.preview{max-height:200px;overflow:auto;font:400 .82rem/1.5 var(--mono);white-space:pre-wrap;word-break:break-word;background:var(--well);border-radius:14px;padding:12px;box-shadow:0 0 0 1px var(--line) inset;color:var(--soft)}

.toasts{position:fixed;z-index:90;right:18px;bottom:18px;display:grid;gap:8px;justify-items:end;pointer-events:none}
.toast{pointer-events:auto;max-width:min(420px,90vw);padding:11px 14px;border-radius:14px;font-size:.88rem;background:rgba(13,18,28,.96);box-shadow:var(--shadow),0 20px 40px -18px #000;animation:rise .3s var(--ease);display:flex;gap:9px;align-items:flex-start}
.toast i{margin-top:2px;color:var(--ice)}
.toast.bad i{color:var(--bad)}.toast.good i{color:var(--good)}

/* cards lean a little toward the pointer */
.tilt{transform-style:preserve-3d;transition:transform .25s var(--ease)}

/* a one-column grid takes its width from the page, never from a long unbreakable line inside it
   (that is what pushed the Screen and a client's file wider than a phone) */
.hero-l,.composer,.rbody,.field,.wait,.rtile,.controls,.ccard,.understood,.cl-list,.cl-items,.cl-detail,.block,.kv div,.pl-side,.pl-acts,.pl-sheet,.pl-tools-m,
.sheet-card,.chat-list,.login-card,.empty,.pop{grid-template-columns:minmax(0,1fr)}
.block h3{min-width:0}
.block h3 small{flex:1;min-width:0}
.res-head h2,.rhead,.acts,.opts,.cl-facts,.words,.tags,.versions{min-width:0}

/* ---------- small screens ---------- */
.dock{display:none}
.pl-more,.pl-tools-m{display:none}
.player.single .pl-nav{display:none}

@media (max-width:1180px){
  .hero{grid-template-columns:minmax(0,560px) 1fr}
  .tabs a{padding:0 10px;gap:6px;font-size:12.500px}
  .brand-t small{display:none}
  .screen-btn span{display:none}
  .pl-main{grid-template-columns:minmax(0,1fr) min(330px,36vw)}
  .pl-tools .btn span{display:none}
}
@media (max-width:1000px) and (min-width:821px){
  .tabs a i{display:none}
}

/* a finger, not a mouse: nothing may wait for a hover */
@media (hover:none){
  .thumb .playdot{opacity:1;transform:none}
  .fcard .seek{height:6px}
  .btn.primary:hover{transform:none}
}

/* phones and narrow tablets: the panels move to a dock under the thumb, the picture sits in a band above the words,
   and nothing is ever wider than the screen */
@media (max-width:820px){
  input[type=text],input[type=password],input[type=search],input[type=number],textarea,select{font-size:16px}      /* under 16px iOS zooms the whole page when a field is touched */
  .composer textarea,.composer input,.ask input,.pop input,select.mini,.word-in,.sheet-card input{font-size:16px}
  select.mini{height:38px}
  #app{padding:calc(8px + env(safe-area-inset-top)) 12px calc(104px + env(safe-area-inset-bottom));overflow-x:clip}
  .topbar{top:calc(8px + env(safe-area-inset-top));padding:8px 8px 8px 12px;border-radius:18px;gap:10px}
  .topbar .tabs{display:none}
  .brand{flex:1;min-width:0}
  .brand-t b{font-size:21px}
  .screen-btn{height:38px}
  .screen-btn span{display:inline}
  .dock{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;position:fixed;z-index:40;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));padding:6px;border-radius:22px;
    background:rgba(11,16,25,.92);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);box-shadow:var(--shadow),0 20px 50px -18px #000}
  .dock a{display:grid;justify-items:center;align-content:center;gap:5px;height:54px;border-radius:16px;font:600 10.500px/1 var(--sans);color:var(--muted);min-width:0;transition:color .2s,background .25s}
  .dock a i{width:19px;height:19px}
  .dock a span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .dock a.on{color:var(--ink);background:var(--grad);box-shadow:0 10px 26px -10px rgba(57,135,229,.9),0 0 0 1px rgba(255,255,255,.4) inset}
  .toasts{left:12px;right:12px;bottom:calc(88px + env(safe-area-inset-bottom));justify-items:center}

  .hero{grid-template-columns:minmax(0,1fr);min-height:0!important;margin:172px 2px 8px;gap:0}
  .hero-l{gap:12px}
  .hero h1{font-size:1.720rem;line-height:1.08}
  .hero .sub{font-size:.92rem;line-height:1.45}
  .stage-cap{display:none}
  .composer{padding:10px;gap:10px;border-radius:20px}
  .composer textarea{min-height:76px}
  .composer .row{gap:8px}
  .composer .row > span.grow{display:none}
  .composer .row > .btn.primary{flex:1 1 100%;min-height:48px}
  .pick-btn{max-width:100%}
  .controls{gap:10px}
  .ctl{gap:8px}
  .ctl .label{min-width:38px}
  .dial{min-width:0}
  .ctl .seg{flex:1;min-width:0}
  .ctl .seg button{flex:1 1 auto}
  .word-in{width:150px}

  .results{gap:12px}
  .res-head{position:static;gap:8px;padding:10px 12px}
  .res-head .sp{flex-basis:100%;height:0}
  .res-head > .btn,.res-head > .pick{flex:1 1 auto}
  .res-head > .pick .pick-btn{width:100%;height:36px}
  .rcard-in{grid-template-columns:104px minmax(0,1fr);gap:12px;padding:12px}
  .fields2{grid-template-columns:minmax(0,1fr)}
  .rcard .acts .sp{flex-basis:100%;height:0}
  .rcard .acts .sp ~ .btn{flex:1}
  .ask input,.ask .btn{height:44px}
  .thumb .tick{width:32px;height:32px}
  .cgrid{grid-template-columns:minmax(0,1fr)}
  .understood{padding:14px}
  .understood h3{font-size:1.300rem}

  .cl-wrap{grid-template-columns:minmax(0,1fr);gap:12px}
  .cl-list{position:static;max-height:290px}
  .cl-list.min{max-height:none}
  .cl-list.min .cl-item:not(.on){display:none}
  .cl-list.min .cl-item.on::after{content:"Change";font:600 .72rem var(--mono);color:var(--ice);padding-left:6px}
  .cl-detail,.cl-wrap{scroll-margin-top:72px}
  .cl-top{flex-direction:column;align-items:flex-start;padding:14px}
  .cl-top > div:last-child{width:100%}
  .cl-top .av{width:48px;height:48px;border-radius:15px;font-size:1.100rem}
  .cl-top h2{font-size:1.800rem}
  .block{padding:14px}
  .kv{grid-template-columns:minmax(0,1fr)}

  /* the client list, as a sheet from the bottom */
  .pop.as-sheet{position:fixed;z-index:85;left:10px;right:10px;top:auto;bottom:calc(10px + env(safe-area-inset-bottom));width:auto;max-height:min(70vh,520px);max-height:min(70dvh,520px);
    box-shadow:var(--shadow),0 -30px 70px -20px #000}
  .pop-back{position:fixed;inset:0;z-index:84;background:rgba(3,5,8,.62);animation:fade .2s}
  .pop.as-sheet .pop-item{padding:10px 8px}
  .sheet{place-items:end center;padding:10px 10px calc(10px + env(safe-area-inset-bottom))}
  .sheet-card{max-height:calc(100vh - 40px);max-height:calc(100dvh - 30px - env(safe-area-inset-top));padding:16px}
  .chat-list{max-height:26vh}
  .preview{max-height:20vh}
  .sheet-card .row{margin-bottom:-16px;padding-bottom:16px}
  .sheet-card .row .btn{flex:1}

  /* the Screen on a phone: the Reel takes the room; Pick and Details sit under it; swipe to move */
  .pl-top{gap:8px;padding:8px 10px 6px 14px;flex-wrap:wrap}
  .pl-top h2{font-size:1.350rem}
  .pl-top .pl-tools{display:none}
  #plPicked.none{display:none}
  .pl-top .pl-boards{order:9;flex:1 1 100%;padding-bottom:2px}
  .pl-main{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:8px;padding:0 10px 10px}
  .player:not(.single) .pl-main{padding-bottom:0}
  .pl-nav{width:36px;height:36px;background:rgba(12,17,26,.5)}
  .pl-nav.l{left:2px}.pl-nav.r{right:2px}
  .pl-side{position:relative;overflow:visible;padding:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;display:block}
  .pl-side .pl-acts{display:flex;gap:8px}
  .pl-side .pl-acts .btn{width:auto;flex:1;min-height:46px}
  .pl-side .pl-acts .pl-more{display:inline-flex;flex:none}
  .pl-sheet{display:none}
  .pl-side.open .pl-sheet{display:grid;gap:10px;position:absolute;z-index:20;left:0;right:0;bottom:calc(100% + 8px);max-height:min(62vh,540px);max-height:min(62dvh,540px);overflow:auto;overscroll-behavior:contain;
    padding:14px;border-radius:20px;background:rgba(13,18,28,.97);box-shadow:var(--shadow),0 -30px 70px -20px #000;animation:rise .22s var(--ease)}
  .pl-side.open .pl-tools-m{display:grid;gap:8px}
  .pl-tools-m .opts .btn{flex:1 1 auto}
  .statrow{gap:6px}
  .statrow div{padding:8px 4px}
  .statrow b{font-size:1.200rem}
  .pl-strip{padding:8px 10px 10px;gap:6px}
  .pl-strip button{width:34px;border-radius:7px}
  .player.single .pl-strip,.player.single .pl-nav{display:none}
  .keys{display:none}
}

@media (max-width:520px){
  /* a Reel that was read: a small cover beside its title, then every field the full width of the phone */
  .rcard-in{grid-template-columns:74px minmax(0,1fr);gap:10px 12px}
  .rcard .rbody{display:contents}
  .rcard .rbody > *{grid-column:1 / -1}
  .rcard .thumb{grid-column:1;grid-row:1 / span 2;align-self:start;border-radius:12px}
  .rcard .rbody > .rhead{grid-column:2;grid-row:1;align-self:start}
  .rcard .rbody > .field.big,.rcard .rbody > .steps,.rcard .rbody > .fail-note{grid-column:2;grid-row:2;align-self:start}
  .rcard .field.big p{font-size:1.120rem}
  .rcard .thumb .tick{width:28px;height:28px;top:5px;right:5px}
  .rcard .thumb .playdot{width:32px;height:32px}
  .rcard .thumb .playdot i{width:13px;height:13px}
  .rgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .rtile .cap{font-size:.74rem}
}
/* a phone on its side: very little height. The Reel gets all of it, the strip goes, and Pick comes first */
@media (max-height:520px) and (min-width:821px){
  .pl-top{padding:6px 12px;gap:8px;flex-wrap:nowrap}
  .pl-top h2{font-size:1.300rem}
  .pl-top .btn span{display:none}
  .pl-strip{display:none}
  .pl-main{padding-bottom:8px}
  .pl-side{padding:10px;gap:8px}
  .pl-side .pl-acts{order:0}
  .statrow b{font-size:1.150rem}
}
@media (max-width:820px) and (max-height:520px) and (orientation:landscape){
  .hero{margin-top:118px}
  .pl-top{flex-wrap:nowrap;padding:6px 10px}
  .pl-top .pl-boards{order:0;flex:0 1 auto}
  .pl-main{grid-template-columns:minmax(0,1fr) 190px;grid-template-rows:minmax(0,1fr);padding-bottom:8px}
  .pl-side{align-self:end}
  .pl-side .pl-acts{flex-direction:column}
  .pl-side.open .pl-sheet{left:auto;right:0;width:min(380px,62vw);max-height:66vh}
  .pl-strip{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Content Month */
/* the Month, Keywords and Teach panels: the same glass, chips and buttons; chips here may wrap (long category names, faults) */
#view-month .chip,#view-keywords .chip,#view-teach .chip,.cm-who-sheet .chip{white-space:normal;height:auto;min-height:30px;line-height:1.25;padding-top:4px;padding-bottom:4px;max-width:100%}
.cm-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:6px 0 12px}
.cm-tools input[type=search],.cm-tools input[type=text]{flex:1 1 240px;width:auto;min-width:0}
.cm-tools .grow,.cm-top .grow,.tc-head .grow,.tc-book-head .grow,.tc-rule-top .grow,.tc-rule-meta .grow,.tc-input .grow{flex:1}
.cm-banner{display:flex;gap:10px;align-items:center;padding:12px 14px;margin-bottom:12px;border-radius:16px;font-weight:700;color:var(--warn);background:rgba(240,184,96,.08);box-shadow:0 0 0 1px rgba(240,184,96,.32) inset}
.cm-warn{color:var(--warn);font-size:.86rem}
.cm-err{color:var(--bad);font-size:.84rem;word-break:break-word}
.cm-stepnow{font:600 .74rem var(--mono);color:var(--soft);letter-spacing:.02em}
.cm-prog{flex:0 0 140px;max-width:100%}
.cm-me{border:0;cursor:pointer}
.cm-me:hover{color:var(--text);background:rgba(134,182,239,.16)}

/* the list: a row per client */
.cm-rows{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
.cm-row{border-radius:18px;padding:12px 14px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;animation:rise .35s var(--ease) both}
.cm-row-main{display:grid;gap:6px;min-width:0}
.cm-row-main > b{font-size:.98rem;overflow-wrap:anywhere}
.cm-row-sub{display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:.78rem;color:var(--muted)}
.cm-row-sub .chip{font-size:.7rem;min-height:24px}
.cm-state{display:flex;gap:8px;flex-wrap:wrap;align-items:center;min-width:0}
.cm-row-acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;align-items:center;max-width:340px}
.cm-refuse{font-size:.8rem;color:var(--warn);max-width:280px;text-align:right}

/* the Make and Who sheets */
.cm-form{display:grid;gap:12px}
.cm-form label{display:grid;gap:6px}
.cm-form .two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.sheet-card input[type=date]{width:100%;min-width:0;background:var(--well);border:1px solid var(--line);border-radius:14px;padding:.75rem 1rem;outline:none;color-scheme:dark}
.cm-who-sheet{z-index:86}
.cm-who-pick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cm-who-pick .btn{min-height:52px}

/* one month */
#cmMonth{scroll-margin-top:84px}
.cm-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 12px}
.cm-head,.cm-voice{margin-bottom:14px}
.cm-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cm-title h2{font:400 italic 2.1rem/1.05 var(--display);color:var(--frost);overflow-wrap:anywhere}
.cm-facts,.cm-times{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.cm-times .label{margin-right:4px}
.cm-times .chip b{font:600 .74rem var(--mono);color:var(--text);margin-left:4px}
.cm-voice audio{width:100%;max-width:560px;height:42px}
.cm-bar{margin-bottom:14px}
.cm-bar .btn{white-space:normal;text-align:left;line-height:1.2}
.cm-cards{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
.cm-card{position:relative;display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;padding:14px;border-radius:var(--r);background:linear-gradient(160deg,rgba(21,30,45,.74),rgba(9,13,20,.78));backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:var(--shadow);animation:rise .4s var(--ease) both}
.cm-card.ok{box-shadow:0 0 0 1px rgba(124,224,163,.38) inset,var(--shadow)}
.cm-ref{display:grid;gap:6px;align-content:start;min-width:0}
.cm-refmeta{display:flex;flex-wrap:wrap;gap:4px 8px;font:500 .72rem var(--mono);color:var(--muted);min-width:0}
.cm-refmeta b{color:var(--ice);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.cm-noref{aspect-ratio:9/16;border-radius:16px;display:grid;place-items:center;padding:8px;text-align:center;font-size:.78rem;color:var(--dim);background:var(--well);box-shadow:0 0 0 1px var(--line) inset}
.cm-body{display:grid;gap:10px;align-content:start;min-width:0;grid-template-columns:minmax(0,1fr)}
.cm-date{font:700 1.02rem var(--sans)}
.cm-date span{font:600 .78rem var(--mono);letter-spacing:.06em;color:var(--muted)}
.cm-shoot{margin:0;padding-left:1.1em;display:grid;gap:3px;font-size:.88rem;color:var(--soft)}
.cm-why{font-size:.84rem;line-height:1.45;color:var(--soft);overflow-wrap:anywhere}
.cm-why b{color:var(--text)}
.cm-faults{display:flex;gap:6px;flex-wrap:wrap}
.cm-busy{display:flex;align-items:center;gap:9px;font:600 .8rem var(--mono);color:var(--ice)}
.cm-busy::before{content:"";width:14px;height:14px;border-radius:50%;border:2px solid var(--line2);border-top-color:var(--ice);animation:spin .8s linear infinite;flex:none}
.cm-edit{display:grid;gap:10px}
.cm-edit textarea,.cm-edit input{font-size:.92rem}
.cm-spares{display:grid;gap:8px;max-height:min(56vh,520px);overflow:auto;overscroll-behavior:contain}
.cm-spare{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:start;width:100%;padding:8px;border:0;border-radius:14px;cursor:pointer;text-align:left;color:var(--soft);background:var(--well);box-shadow:0 0 0 1px var(--line) inset;transition:.2s}
.cm-spare:hover{box-shadow:0 0 0 1px var(--line3) inset;color:var(--text)}
.cm-spare-t{aspect-ratio:9/16;border-radius:10px;background:#05070a center/cover no-repeat;box-shadow:0 0 0 1px var(--line) inset}
.cm-spare-b{display:grid;gap:3px;min-width:0;font-size:.8rem;line-height:1.4}
.cm-spare-b b{color:var(--ice);font:600 .8rem var(--mono)}
.cm-spare-b small{color:var(--muted);font-size:.72rem}
.cm-spare-b span{overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}

/* Keywords */
.kw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(380px,100%),1fr));gap:14px;align-items:start}
.kw-card{border-radius:var(--r);padding:16px;display:grid;gap:10px;grid-template-columns:minmax(0,1fr);animation:rise .4s var(--ease) both}
.kw-name{display:flex;align-items:center;gap:8px;min-width:0}
.kw-name h3{flex:1;min-width:0;font:400 italic 1.45rem/1.15 var(--display);color:var(--frost);overflow-wrap:anywhere}
.kw-name input{flex:1;min-width:0}
.kw-words{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-width:0}
.kw-card .word{height:auto;min-height:32px;padding:4px 6px 4px 12px;line-height:1.25;max-width:100%;overflow-wrap:anywhere}
.kw-card .word small{font:600 .66rem var(--mono);color:var(--ice);margin-left:2px}
.kw-card .word button{min-width:24px;min-height:24px}
.kw-add{display:grid;gap:8px}
.kw-add textarea{min-height:64px;font-size:.88rem}
.kw-add .row{display:flex;justify-content:flex-end}
.kw-pick .pick-btn{height:32px;border-radius:99px;padding:0 12px 0 4px;font-size:.8rem}
.kw-pick .pick-btn .av{width:24px;height:24px;border-radius:50%}

/* Teach: the chat, and the rule book beside it */
.tc-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,410px);gap:16px;align-items:start;margin-top:8px}
.tc-chat{border-radius:var(--r);padding:14px;display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.tc-head,.tc-book-head{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tc-book-head h3{font:700 .95rem var(--sans);display:flex;align-items:center;gap:8px}
.tc-book-head h3 i{color:var(--ice)}
.tc-thread{display:grid;gap:10px;align-content:start;grid-template-columns:minmax(0,1fr);max-height:min(60vh,680px);min-height:180px;overflow:auto;overscroll-behavior:contain;padding:4px 2px}
.tc-msg{justify-self:start;max-width:min(92%,640px);min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:6px;padding:10px 12px;border-radius:16px 16px 16px 6px;background:var(--well);box-shadow:0 0 0 1px var(--line) inset}
.tc-msg.me{justify-self:end;border-radius:16px 16px 6px 16px;background:rgba(57,135,229,.16);box-shadow:0 0 0 1px var(--line2) inset}
.tc-msg.err{box-shadow:0 0 0 1px rgba(239,131,119,.4) inset}
.tc-msg.wide{justify-self:stretch;max-width:min(100%,680px)}
.tc-msg.tc-typing p{color:var(--ice);animation:pulse 1.4s ease-in-out infinite}
.tc-who{display:flex;gap:8px;flex-wrap:wrap;font:600 .7rem var(--mono);color:var(--muted)}
.tc-who b{color:var(--soft)}
.tc-msg > p{font-size:.92rem;white-space:pre-wrap;overflow-wrap:anywhere}
.tc-piece{min-width:0}
.tc-piece summary{cursor:pointer;display:flex;align-items:center;gap:6px;font:600 .74rem var(--mono);color:var(--ice);list-style:none}
.tc-piece summary::-webkit-details-marker{display:none}
.tc-piece summary i{width:13px;height:13px}
.tc-piece pre{margin:6px 0 0;max-height:260px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;font:400 .78rem/1.5 var(--mono);color:var(--soft)}
.tc-props{display:grid;gap:8px;grid-template-columns:minmax(0,1fr)}
.tc-prop{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding:10px;border-radius:14px;background:rgba(5,8,12,.55);box-shadow:0 0 0 1px var(--line2) inset}
.tc-prop.done{box-shadow:0 0 0 1px var(--line) inset;opacity:.8}
.tc-prop-top{display:flex;gap:6px;flex-wrap:wrap}
.tc-prop textarea{font-size:.88rem;min-height:56px}
.tc-prop .row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tc-prop select{width:auto;flex:1 1 150px;min-width:0;max-width:100%;padding:.5rem .7rem;border-radius:11px;font-size:.82rem}
.tc-prop-text{font-size:.88rem;white-space:pre-wrap;overflow-wrap:anywhere}
.tc-input{display:grid;gap:8px;grid-template-columns:minmax(0,1fr)}
.tc-input .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tc-input textarea{min-height:70px}
.tc-attach{display:flex;gap:8px;align-items:flex-start;padding:8px 10px;border-radius:14px;background:rgba(134,182,239,.08);box-shadow:0 0 0 1px var(--line2) inset}
.tc-attach .tc-piece{flex:1}
.tc-attach .icon-btn{width:30px;height:30px}
.tc-book{border-radius:var(--r);padding:14px;display:grid;gap:12px;grid-template-columns:minmax(0,1fr);position:sticky;top:76px;max-height:calc(100vh - 96px);overflow:auto;overscroll-behavior:contain}
.tc-group{display:grid;gap:8px}
.tc-group h4{font:600 .66rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.tc-rule{display:grid;gap:6px;padding:10px;border-radius:14px;background:var(--well);box-shadow:0 0 0 1px var(--line) inset}
.tc-rule.off > p{opacity:.5;text-decoration:line-through;text-decoration-color:rgba(130,144,163,.5)}
.tc-rule > p{font-size:.86rem;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.tc-rule textarea{font-size:.86rem}
.tc-rule-top,.tc-rule-meta{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.tc-rule-meta small{font:500 .68rem var(--mono);color:var(--dim)}
.tc-switch{position:relative;flex:none;width:42px;height:24px;border:0;border-radius:99px;cursor:pointer;background:rgba(134,182,239,.14);box-shadow:0 0 0 1px var(--line2) inset;transition:background .2s}
.tc-switch i{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--muted);transition:left .2s var(--ease),background .2s}
.tc-switch.on{background:var(--ice2)}
.tc-switch.on i{left:21px;background:#fff}

@media (max-width:1000px){
  .tc-wrap{grid-template-columns:minmax(0,1fr)}
  .tc-book{position:static;max-height:none;overflow:visible}
}
@media (max-width:820px){
  /* eight panels: the dock slides sideways under the thumb; the page itself never does */
  .dock{display:flex;gap:2px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
  .dock::-webkit-scrollbar{display:none}
  .dock a{flex:1 0 66px;scroll-snap-align:start}
  .sheet-card input[type=date]{font-size:16px}
  .cm-tools input[type=search],.cm-tools input[type=text]{flex-basis:100%}
  .cm-row{grid-template-columns:auto minmax(0,1fr);padding:12px}
  .cm-row-acts{grid-column:1 / -1;justify-content:stretch;max-width:none}
  .cm-row-acts .btn{flex:1 1 auto;min-height:42px}
  .cm-refuse{text-align:left;max-width:none}
  .cm-title h2{font-size:1.75rem}
  .cm-bar{position:static}
  .cm-bar h2{flex-basis:100%}
  .cm-bar .btn{flex:1 1 auto;min-height:42px}
  .cm-card{grid-template-columns:minmax(0,1fr);gap:12px;padding:12px}
  .cm-ref{grid-template-columns:76px minmax(0,1fr);align-items:center;gap:12px}
  .cm-ref .thumb{border-radius:12px}
  .cm-ref .thumb .playdot{width:30px;height:30px}
  .cm-ref .thumb .playdot i{width:12px;height:12px}
  .cm-noref{aspect-ratio:auto;min-height:60px}
  .cm-card .acts .btn{flex:1 1 auto;min-height:40px}
  .tc-msg{max-width:96%}
  .tc-thread{max-height:62vh;max-height:62dvh}
  .tc-head .seg{flex:1 1 100%}
  .tc-head .seg button{flex:1}
  .tc-head .btn,.tc-input .row .btn{flex:1 1 auto;min-height:44px}
  .tc-input .row .hint{display:none}
  .kw-card{padding:14px}
}