/* Look: modern and bright, made for 16–22. Clean white cards with soft shadows, vivid gradients
   (think "Wrapped"), bold rounded type. Every section has its own gradient (--vg) and tint (--vt). */
:root{
  color-scheme:light;
  --bg:#F5F4FA; --surface:#FFFFFF; --surface-2:#F1EFF7; --ink:#14121C; --muted:#6B6880; --line:#E7E4F0;
  --violet:#6D5BFF; --pink:#FF4FA3; --orange:#FF8A3D; --yellow:#FFC93C; --green:#1FC98A; --blue:#3D8BFF; --teal:#12B5C9;
  --g-main:linear-gradient(135deg,#6D5BFF 0%,#B04DFF 38%,#FF4FA3 70%,#FF8A3D 100%);
  --g-violet:linear-gradient(135deg,#6D5BFF,#3D8BFF);
  --g-pink:linear-gradient(135deg,#FF4FA3,#FF8A3D);
  --g-green:linear-gradient(135deg,#1FC98A,#12B5C9);
  --g-orange:linear-gradient(135deg,#FF8A3D,#FFC93C);
  --g-night:linear-gradient(135deg,#2A1E5C,#6D5BFF);
  --vg:var(--g-main); --vt:#EFEBFF; --vc:var(--violet);
  --accent:var(--violet); --hi:var(--yellow); --ok:#12A871; --warn:#E0600F; --wa:#1DB954;
  --shadow:0 1px 2px rgba(20,18,40,.06),0 10px 30px -12px rgba(40,24,120,.22);
  --shadow-lg:0 2px 4px rgba(20,18,40,.06),0 24px 48px -18px rgba(60,30,160,.32);
  --r:22px;
  --navh:0px;
  --disp:'Bricolage Grotesque',system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Space Mono',ui-monospace,Menlo,Consolas,monospace;
}
body[data-view="people"]{--vg:var(--g-pink);--vt:#FFECF5;--vc:var(--pink)}
body[data-view="rank"]{--vg:var(--g-violet);--vt:#ECEBFF;--vc:var(--violet)}
body[data-view="teach"]{--vg:var(--g-green);--vt:#E3FAF1;--vc:#0FA776}
body[data-view="pages"]{--vg:var(--g-orange);--vt:#FFF1E4;--vc:var(--orange)}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased;min-height:100vh}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(50vmax 40vmax at 100% -10%,rgba(176,77,255,.13),transparent 60%),radial-gradient(45vmax 35vmax at -10% 30%,rgba(255,79,163,.09),transparent 60%),radial-gradient(50vmax 40vmax at 90% 110%,rgba(61,139,255,.10),transparent 60%)}
button{font:inherit;color:inherit;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--violet);outline-offset:2px}
h1,h2,h3,h4{margin:0;text-wrap:balance}
p{margin:0}
a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding-inline:16px;padding-block:14px 120px}
svg.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;min-height:70vh;padding:24px 16px;color:var(--muted);font-family:var(--disp);font-weight:700;font-size:19px;text-align:center}
/* waiting: a gradient ring (the app's colours), on buttons, in overlays and on the start screen */
.spinner{display:inline-block;flex:none;width:38px;height:38px;border-radius:50%;background:conic-gradient(from 90deg,rgba(109,91,255,0),#6D5BFF,#B04DFF,#FF4FA3,#FF8A3D);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));animation:spin .8s linear infinite}
.spinner.xs{width:15px;height:15px;-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px));vertical-align:-2px}
@keyframes spin{to{transform:rotate(360deg)}}
.btn.is-busy,.btn.is-busy[disabled],.linkbtn.is-busy,.iconbtn.is-busy{pointer-events:none;opacity:.85}
.btn.is-busy>svg.i{display:none}
.btn.is-busy::before{content:"";width:16px;height:16px;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite;flex:none}
.linkbtn.is-busy,.iconbtn.is-busy{animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{opacity:.4}}
.busyov{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:16px;background:rgba(245,244,250,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .2s}
.busyov.in{opacity:1}
.busy-card{display:flex;flex-direction:column;align-items:center;gap:8px;max-width:340px;text-align:center;background:var(--surface);border-radius:var(--r);padding:26px 28px;box-shadow:var(--shadow-lg)}
.busy-card .spinner{margin-bottom:6px}
.busy-card b{font-family:var(--disp);font-size:19px;letter-spacing:-.01em}
.busy-card small{color:var(--muted);font-size:14px}
.busy-t{font-variant-numeric:tabular-nums}
#netnote{position:fixed;left:50%;top:max(12px,env(safe-area-inset-top));transform:translateX(-50%);z-index:250;display:flex;align-items:center;gap:8px;background:var(--ink);color:#fff;font-weight:600;font-size:13.5px;padding:8px 14px;border-radius:99px;box-shadow:var(--shadow-lg);max-width:calc(100% - 32px)}
@media (min-width:760px){#netnote{top:86px}}
.offline{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:400px;background:var(--surface);border-radius:var(--r);padding:28px 24px;box-shadow:var(--shadow-lg);color:var(--ink);font-family:var(--body);font-weight:400;font-size:16px}
.offline h2{font-family:var(--disp);font-size:24px}
.offline p{color:var(--muted)}
.offline .btn{margin-top:6px}
.off-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--g-main);color:#fff}
.off-ic svg{width:26px;height:26px}
/* photos in the book fade in: a soft shimmer while they load */
img[data-ref]:not([src]){background:linear-gradient(90deg,var(--surface-2),#fff,var(--surface-2));background-size:200% 100%;animation:shimmer 1.2s linear infinite}
@media (prefers-reduced-motion:reduce){.spinner,.btn.is-busy::before{animation-duration:1.6s}.linkbtn.is-busy,.iconbtn.is-busy,img[data-ref]:not([src]){animation:none}}

/* top */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:4px 18px}
.top-l{display:flex;align-items:center;gap:12px;min-width:0}
.logo{font-family:var(--disp);font-weight:800;font-size:clamp(20px,3.4vw,24px);line-height:1;letter-spacing:-.6px;display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.logo mark{background:var(--g-main);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo-dot{width:36px;height:36px;border-radius:12px;background:var(--g-main);color:#fff;display:grid;place-items:center;box-shadow:0 6px 16px -6px rgba(176,77,255,.7)}
.logo-dot svg{width:21px;height:21px}
.book-name{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 12px;font-weight:700;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40vw;box-shadow:var(--shadow)}
.book-name:empty{display:none}
.top-r{display:flex;align-items:center;gap:10px}
.lang{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 12px;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.08em;box-shadow:var(--shadow)}
.nav{display:flex;gap:2px;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);border:1px solid var(--line);border-radius:999px;padding:5px;box-shadow:var(--shadow)}
.nav button{display:flex;align-items:center;gap:7px;border:0;background:none;border-radius:999px;padding:8px 13px;font-weight:700;font-size:14.5px;color:var(--muted);transition:background .2s,color .2s}
.nav button[aria-current="page"]{background:var(--ink);color:#fff}
.nav button:hover:not([aria-current="page"]){color:var(--ink);background:var(--surface-2)}
@media (max-width:860px){
  :root{--navh:70px}
  .nav{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:40;border-radius:24px;justify-content:space-around;padding:6px;box-shadow:0 12px 36px -10px rgba(30,20,80,.35)}
  .nav button{flex-direction:column;gap:2px;font-size:10.5px;padding:7px 2px;border-radius:17px;min-width:0;flex:1}
  .nav button[aria-current="page"]{background:var(--vt);color:var(--vc)}
  .wrap{padding-bottom:130px}
}
@media (max-width:420px){.logo span:last-child{display:none}}

.demo-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:rgba(255,255,255,.7);border:1px solid var(--line);border-radius:16px;padding:10px 14px;font-size:14px;color:var(--muted);margin-bottom:18px}
.demo-bar span{flex:1;min-width:200px}
.linkbtn{border:0;background:none;padding:4px 2px;font-weight:700;color:var(--violet)}
.linkbtn:hover{text-decoration:underline;text-underline-offset:3px}
.linkbtn.danger{color:#D92D4A}
.linkbtn.arm,.iconbtn.arm{background:#E5334F;color:#fff;border-radius:999px;padding:6px 12px;width:auto;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;border:0}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:11px 19px;font-weight:700;font-size:15px;background:var(--ink);color:#fff;text-decoration:none;transition:transform .15s,box-shadow .15s,filter .15s}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px -8px rgba(20,18,40,.45)}
.btn:active{transform:scale(.97)}
.btn.hi{background:var(--g-main);color:#fff;box-shadow:0 8px 22px -8px rgba(176,77,255,.65)}
.btn.hi:hover{filter:brightness(1.06)}
.btn.ghost{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.btn.sm{padding:7px 13px;font-size:13.5px}
.btn.big{padding:14px 22px;font-size:16.5px}
.btn.wa{background:var(--wa);color:#fff;box-shadow:0 8px 20px -10px rgba(29,185,84,.8)}
.btn[disabled]{opacity:.5;pointer-events:none}
.iconbtn{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:999px;border:0;background:var(--surface-2);color:var(--muted);flex:none}
.iconbtn:hover{color:var(--ink);background:var(--line)}
.iconbtn svg{width:16px;height:16px}

/* avatars */
.av{--c:#999;display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--c);color:#fff;font-family:var(--disp);font-weight:800;font-size:14px;letter-spacing:.02em;overflow:hidden;flex:none}
.av img{width:100%;height:100%;object-fit:cover;display:block}
.av.sq{border-radius:14px}
.av.xs{width:28px;height:28px;font-size:10.5px}
.av.lg{width:78px;height:78px;font-size:26px}
.av.xl{width:96px;height:96px;font-size:32px;border-radius:30px}

/* cover: a glowing gradient card */
.cover{position:relative;background:#1A1433;color:#fff;border-radius:30px;padding:clamp(26px,5vw,48px);overflow:hidden;box-shadow:var(--shadow-lg);isolation:isolate}
.cover::before{content:"";position:absolute;inset:-20%;z-index:-1;filter:blur(40px);
  background:radial-gradient(40% 50% at 85% 20%,#FF4FA3 0%,transparent 70%),radial-gradient(45% 55% at 15% 110%,#FF8A3D 0%,transparent 70%),radial-gradient(50% 60% at 55% 55%,#6D5BFF 0%,transparent 75%),radial-gradient(35% 45% at 5% 10%,#3D8BFF 0%,transparent 70%);animation:drift 18s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate(4%,-3%) rotate(8deg) scale(1.05)}}
.cv-text{display:flex;flex-direction:column;gap:10px;max-width:640px;position:relative}
.cv-eyebrow{align-self:flex-start;font-weight:700;font-size:13px;letter-spacing:.02em;background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:5px 12px}
.cv-title{font-family:var(--disp);font-weight:800;font-size:clamp(72px,15vw,148px);line-height:.85;letter-spacing:-4px;margin-top:6px}
.cv-school{font-weight:700;font-size:clamp(16px,2.2vw,19px);opacity:.9}
.cv-motto{font-family:var(--disp);font-weight:700;font-size:clamp(19px,2.6vw,24px);line-height:1.2;max-width:30ch;letter-spacing:-.3px}
.cv-faces{display:flex;align-items:center;margin-top:8px}
.cv-faces .av{margin-right:-10px;box-shadow:0 0 0 2.5px #1A1433}
.cv-faces span:last-child{margin-left:20px;font-weight:700;font-size:14px;opacity:.9}
.cv-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.cv-actions .btn.hi{background:#fff;color:var(--ink);box-shadow:0 10px 24px -10px rgba(0,0,0,.5)}
.cv-actions .btn.ghost{background:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.cv-stamp{position:absolute;right:clamp(18px,4vw,44px);top:clamp(18px,4vw,40px);width:126px;height:126px;border-radius:50%;background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.3);color:#fff;display:grid;place-content:center;text-align:center;font-weight:700;font-size:11px;line-height:1.15;padding:0 16px}
.cv-stamp b{font-family:var(--disp);font-weight:800;font-size:44px;line-height:.95;display:block;letter-spacing:-1px}
.cv-doodles{display:none}
@media (max-width:620px){.cv-stamp{width:92px;height:92px;font-size:9px;padding:0 10px}.cv-stamp b{font-size:32px}.cv-title{padding-right:90px}}

/* cards */
.home-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:18px}
@media (max-width:820px){.home-grid{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(18px,3vw,24px);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:12px;min-width:0}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.card-h h2{font-family:var(--disp);font-weight:800;font-size:24px;line-height:1.05;letter-spacing:-.7px}
.pill{background:var(--vt);color:var(--vc);border-radius:999px;padding:4px 11px;font-weight:700;font-size:13px}
.pill.ok{background:#E3FAF1;color:var(--ok)}
.big-pct{font-family:var(--disp);font-weight:800;font-size:44px;line-height:1;letter-spacing:-1.5px;background:var(--g-main);-webkit-background-clip:text;background-clip:text;color:transparent}
.big-pct small{font-size:22px;margin-left:2px}
.mini{font-size:13.5px;color:var(--muted);display:flex;gap:6px;align-items:flex-start}
.mini svg{width:16px;height:16px;margin-top:2px}
.deadlines{margin-top:18px}

.tasks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.task button{width:100%;display:flex;align-items:center;gap:12px;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:16px;padding:11px 12px;transition:transform .15s,box-shadow .15s,border-color .15s}
.task button:hover{transform:translateY(-1px);box-shadow:var(--shadow);border-color:transparent}
.task .tk{--tc:var(--violet);width:38px;height:38px;border-radius:12px;background:color-mix(in srgb,var(--tc) 13%,#fff);color:var(--tc);display:grid;place-items:center;flex:none}
.task:nth-child(2) .tk{--tc:var(--pink)}
.task:nth-child(3) .tk{--tc:var(--blue)}
.task:nth-child(4) .tk{--tc:var(--orange)}
.task:nth-child(5) .tk{--tc:var(--teal)}
.task .tt{flex:1;min-width:0;display:flex;flex-direction:column}
.task .tt b{font-size:15px;font-weight:700}
.task .tt small{color:var(--muted);font-size:13px}
.task>button>svg:last-child{color:#B7B3C8}
.task.done button{background:var(--surface-2);border-color:transparent}
.task.done .tk{background:var(--g-green);color:#fff}
.task.done b{color:var(--muted);text-decoration:line-through}

.bars{display:flex;flex-direction:column;gap:6px}
.bar{display:grid;grid-template-columns:1fr auto;gap:7px 10px;border:0;background:none;text-align:left;padding:7px 4px;border-radius:12px}
.bar:hover{background:var(--surface-2)}
.bar-l{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14.5px}
.bar-l svg{width:17px;height:17px;color:var(--muted)}
.bar-v{font-family:var(--disp);font-size:15px;font-weight:800}
.bar-t{grid-column:1/-1;height:10px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.bar-t i{display:block;height:100%;border-radius:99px;background:var(--c,var(--g-main));transition:width .8s cubic-bezier(.2,.9,.3,1)}
.bar:nth-child(1) .bar-t i{--c:var(--g-pink)}
.bar:nth-child(2) .bar-t i{--c:var(--g-main)}
.bar:nth-child(3) .bar-t i{--c:var(--g-violet)}
.bar:nth-child(4) .bar-t i{--c:var(--g-green)}
.missing{background:var(--surface-2);border-radius:14px;padding:11px 13px;font-size:14px;display:flex;flex-direction:column;gap:6px}
.missing b{margin-right:4px}
.card .btn.wa{align-self:flex-start}

.dl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:760px){.dl{grid-template-columns:1fr}}
.dl li{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;border:1px solid var(--line);border-radius:18px;padding:13px 14px;align-items:start;background:var(--surface)}
.dl li>span:nth-child(2){display:flex;flex-direction:column}
.dl li b{font-weight:700}
.dl li small{color:var(--muted);font-size:13px}
.dl-n{width:32px;height:32px;border-radius:11px;background:var(--surface-2);display:grid;place-items:center;font-family:var(--disp);font-weight:800;font-size:15px;grid-row:span 2;color:var(--muted)}
.dl-d{grid-column:2;font-weight:700;font-size:15px;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.dl-d small{font-weight:700;color:var(--violet)!important}
.dl li.now{background:var(--g-main);color:#fff;border-color:transparent;box-shadow:0 12px 28px -12px rgba(176,77,255,.7)}
.dl li.now small,.dl li.now .dl-d small{color:rgba(255,255,255,.88)!important}
.dl li.now .dl-n{background:rgba(255,255,255,.22);color:#fff}
.dl li.past{opacity:.55}
.dl li.past .dl-n{background:#E3FAF1;color:var(--ok)}

/* section heads: gradient word */
.sec-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 16px;margin:12px 0 18px}
.sec-h h2{font-family:var(--disp);font-weight:800;font-size:clamp(36px,6vw,54px);line-height:1;letter-spacing:-2px;background:var(--vg);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:4px}
.sec-h p{color:var(--muted);font-size:15px;max-width:60ch}
.sec-h+.sec-h,.secret+.sec-h{margin-top:40px}
.empty{color:var(--muted);font-size:14.5px;padding:6px 0}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row.qrow{margin-bottom:16px}
.row.qrow .tabs{margin-bottom:0}
.row .sp{flex:1}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:5px;justify-content:center}
.chip{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:3px 9px;font-size:12px;font-weight:700;background:var(--surface-2);color:var(--muted);border:0}
.chip svg{width:13px;height:13px}
.chip.ok{background:#E3FAF1;color:var(--ok)}
.chip.warn{background:#FFF0E5;color:var(--warn)}
.chip.hi{background:var(--vt);color:var(--vc)}
.chip.big{font-size:14px;padding:7px 13px}
.chip.big svg{width:15px;height:15px}

/* people */
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(156px,1fr));gap:14px}
.person{display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:10px 10px 14px;box-shadow:var(--shadow);transition:transform .2s cubic-bezier(.2,.9,.3,1.2),box-shadow .2s}
.person:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.person .av.lg{width:100%;height:auto;aspect-ratio:1;border-radius:16px;font-size:36px}
.person b{font-family:var(--disp);font-size:17px;font-weight:800;line-height:1.1;letter-spacing:-.3px}
.person b small{font-family:var(--body);font-size:12px;font-weight:600;color:var(--muted);letter-spacing:0}
.person.me{background:var(--g-main);border-color:transparent;color:#fff}
.person.me b small{color:rgba(255,255,255,.85)}
.person.me .chip{background:rgba(255,255,255,.2);color:#fff}

/* person / modals */
.ph{display:flex;gap:16px;align-items:center;margin-bottom:14px}
.ph .m-title{margin:0 44px 2px 0}
.nick{color:var(--muted);font-weight:600}
.emo{font-size:24px;margin-top:4px}
.answers{margin:16px 0 0;display:grid;gap:10px}
.answers div{background:var(--surface-2);border-radius:16px;padding:11px 14px}
.answers dt{font-size:12px;font-weight:700;color:var(--muted);margin-bottom:3px}
.answers dd{margin:0;font-size:16px;white-space:pre-wrap;font-weight:500}
.ftext{border:1px solid var(--line);border-radius:18px;padding:13px 15px;margin-bottom:10px;display:flex;flex-direction:column;gap:8px;background:var(--surface)}
.ftext header{display:flex;align-items:center;gap:8px}
.ftext p{white-space:pre-wrap;font-size:16px;line-height:1.55}
.ftext.mine{border-color:transparent;box-shadow:0 0 0 2px var(--violet)}
.secret{display:flex;gap:12px;align-items:flex-start;background:var(--g-night);color:#fff;border-radius:18px;padding:14px 16px;box-shadow:0 12px 28px -14px rgba(60,30,160,.7)}
.secret svg{margin-top:2px}
.secret b{display:block;margin-bottom:2px}
.secret p{font-size:14.5px;opacity:.92}
.secret.slim{margin:6px 0 20px;font-size:14px;box-shadow:none}

/* photo slot */
.photo-row{display:flex;gap:16px;align-items:flex-start;margin-bottom:6px}
.photo-side{flex:1;min-width:0}
.photo-slot{width:132px;aspect-ratio:1;flex:none;border-radius:24px;border:2px dashed #CFC9E3;background:var(--surface-2);display:grid;place-items:center;cursor:pointer;overflow:hidden;position:relative;transition:border-color .2s}
.photo-slot:hover{border-color:var(--violet)}
.photo-slot:has(img){border:0;box-shadow:var(--shadow)}
.photo-slot img{width:100%;height:100%;object-fit:cover}
.photo-slot span{display:flex;flex-direction:column;align-items:center;gap:4px;font-weight:700;font-size:13px;color:var(--violet)}
.photo-slot.busy::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.7) linear-gradient(90deg,transparent,rgba(176,77,255,.35),transparent) no-repeat;background-size:50% 100%;animation:shimmer 1s linear infinite}
@keyframes shimmer{from{background-position:-100% 0}to{background-position:200% 0}}
@media (max-width:480px){.photo-row{flex-direction:column}.photo-slot{width:120px}.photo-side{width:100%}}
.savest{font-size:13px;color:var(--muted);font-weight:600}
.count{font-size:12px;color:var(--muted);font-weight:600;align-self:flex-end;min-height:0}
.count:empty{display:none}

/* tabs */
.tabs{display:flex;gap:2px;background:var(--surface);border:1px solid var(--line);padding:4px;border-radius:999px;width:max-content;max-width:100%;margin-bottom:14px;overflow-x:auto;box-shadow:var(--shadow)}
.tab{border:0;background:transparent;border-radius:999px;padding:7px 14px;font-weight:700;font-size:14px;color:var(--muted);white-space:nowrap}
.tab small{font-size:11.5px;opacity:.75;margin-left:3px}
.tab.on{background:var(--ink);color:#fff}

/* rankings: gradient cards */
.qs{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.q{--qg:var(--g-violet);background:var(--qg);color:#fff;border-radius:24px;padding:20px;box-shadow:var(--shadow);display:flex;flex-direction:column;justify-content:space-between;gap:18px;min-height:170px;position:relative;overflow:hidden;isolation:isolate;transition:transform .2s}
.q::after{content:"?";position:absolute;right:-6px;bottom:-40px;z-index:-1;font-family:var(--disp);font-weight:800;font-size:170px;line-height:1;color:rgba(255,255,255,.13)}
.q:hover{transform:translateY(-3px)}
.q:nth-child(5n+2){--qg:var(--g-pink)}
.q:nth-child(5n+3){--qg:var(--g-green)}
.q:nth-child(5n+4){--qg:var(--g-night)}
.q:nth-child(5n){--qg:var(--g-orange)}
.q h3{font-family:var(--disp);font-weight:800;font-size:22px;line-height:1.12;letter-spacing:-.6px}
.q-f{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.q-n{font-size:12.5px;font-weight:600;flex:1;min-width:120px;opacity:.88}
.q .btn.sm{background:#fff;color:var(--ink)}
.q .chip.hi{background:rgba(255,255,255,.22);color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.q .iconbtn{background:rgba(255,255,255,.16);color:#fff}
.q .iconbtn:hover{background:rgba(255,255,255,.28)}
.q.add{background:transparent;color:var(--muted);border:2px dashed #CFC9E3;box-shadow:none;align-items:center;justify-content:center;flex-direction:row;font-weight:700}
.q.add::after{display:none}
.q.add:hover{border-color:var(--violet);color:var(--violet)}
.search{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface-2);border-radius:14px;padding:0 12px;margin-bottom:12px;color:var(--muted)}
.search input{border:0;background:none;padding:11px 0;flex:1;min-width:0;font-size:16px;outline:0;color:var(--ink)}
.pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;max-height:52vh;overflow:auto;padding:2px}
.pick-i{display:flex;align-items:center;gap:10px;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:16px;padding:8px 10px;font-weight:600;transition:border-color .15s,background .15s}
.pick-i span{display:flex;flex-direction:column;min-width:0}
.pick-i small{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}
.pick-i:hover{border-color:var(--violet)}
.pick-i.on{background:var(--vt);border-color:var(--violet)}
.ideas{display:flex;flex-wrap:wrap;gap:8px}
.idea{border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:9px 13px;font-weight:600;font-size:14.5px;text-align:left;transition:border-color .15s,background .15s,transform .15s}
.idea:hover{border-color:var(--violet);background:var(--vt);transform:translateY(-1px)}

/* teachers & quotes */
.teachers{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin-bottom:16px}
.tcard{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:18px 10px 14px;box-shadow:var(--shadow);transition:transform .2s cubic-bezier(.2,.9,.3,1.2),box-shadow .2s}
.tcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.tcard b{font-family:var(--disp);font-weight:800;font-size:16.5px;line-height:1.15;letter-spacing:-.3px}
.tcard small{color:var(--muted);font-size:13px;margin-top:-3px}
.tcard.add{border:2px dashed #CFC9E3;box-shadow:none;background:transparent;justify-content:center;min-height:150px;color:var(--muted)}
.tcard.add:hover{border-color:var(--vc);color:var(--vc)}
.quotes{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.quote{position:relative;margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:44px 20px 16px;box-shadow:var(--shadow)}
.quote::before{content:"“";position:absolute;left:16px;top:2px;font-family:var(--disp);font-weight:800;font-size:64px;line-height:1;background:var(--qg,var(--g-main));-webkit-background-clip:text;background-clip:text;color:transparent}
.quote:nth-child(4n+2){--qg:var(--g-pink)}
.quote:nth-child(4n+3){--qg:var(--g-green)}
.quote:nth-child(4n){--qg:var(--g-violet)}
.quote blockquote{margin:0 0 10px;font-family:var(--disp);font-weight:700;font-size:19px;line-height:1.28;letter-spacing:-.3px;padding-right:10px}
.quote figcaption{color:var(--muted);font-size:14px;font-weight:600}
.quote figcaption i{font-style:normal;opacity:.85}
.quote .iconbtn{position:absolute;top:12px;right:12px;width:32px;height:32px;background:transparent}
.quote .iconbtn:hover{background:var(--surface-2)}
.quote .iconbtn.arm{width:auto}

/* free pages */
.fpages{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:20px}
.fpage{border:0;background:none;padding:0;display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center}
.fp-sheet{--fg:var(--g-orange);position:relative;width:100%;aspect-ratio:210/297;background:var(--fg);color:#fff;border-radius:18px;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:8px;padding:16px;overflow:hidden;transition:transform .25s cubic-bezier(.2,.9,.3,1.2),box-shadow .25s}
.fp-sheet>svg{position:absolute;right:14px;top:14px;opacity:.8}
.fpage:nth-child(4n+2) .fp-sheet{--fg:var(--g-violet)}
.fpage:nth-child(4n+3) .fp-sheet{--fg:var(--g-pink)}
.fpage:nth-child(4n) .fp-sheet{--fg:var(--g-green)}
.fpage:hover .fp-sheet{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.fp-t{font-family:var(--disp);font-weight:800;font-size:21px;line-height:1.05;letter-spacing:-.5px;text-align:left}
.fpage small{color:var(--muted);font-size:13px;font-weight:600}
.fpage.add .fp-sheet{background:transparent;border:2px dashed #CFC9E3;box-shadow:none;color:var(--muted);align-items:center;justify-content:center}
.fpage.add .fp-sheet>svg{position:static;opacity:1}
.fpage.add:hover .fp-sheet{border-color:var(--orange);color:var(--orange)}
.fp-big{aspect-ratio:210/297;max-height:44vh;margin:0 auto 16px;border:2px dashed #CFC9E3;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px;text-align:center;color:var(--muted);font-size:14.5px;background:var(--surface-2)}
.fp-big svg{width:34px;height:34px}

/* modal */
.mback{position:fixed;inset:0;z-index:80;background:rgba(20,16,40,.42);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:flex-end;justify-content:center;opacity:0;transition:opacity .2s}
.mback.in{opacity:1}.mback.out{opacity:0}
.modal{position:relative;background:var(--surface);color:var(--ink);width:min(560px,100%);max-height:92vh;overflow:auto;border-radius:28px 28px 0 0;padding:24px 18px calc(22px + env(safe-area-inset-bottom,0px));transform:translateY(40px);transition:transform .35s cubic-bezier(.2,.9,.3,1.1);box-shadow:0 -10px 40px -10px rgba(20,16,40,.3)}
.modal.wide{width:min(720px,100%)}
.mback.in .modal{transform:none}
@media (min-width:640px){.mback{align-items:center}.modal{border-radius:28px;padding:28px}}
.m-x{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:99px;border:0;background:var(--surface-2);display:grid;place-items:center;z-index:2;color:var(--muted)}
.m-x:hover{color:var(--ink)}
.m-title{font-family:var(--disp);font-weight:800;font-size:27px;line-height:1.06;letter-spacing:-.9px;margin:0 48px 12px 0}
.m-p{color:var(--muted);font-size:15px;margin-bottom:14px}
.m-sub{font-family:var(--disp);font-weight:800;font-size:17px;letter-spacing:-.4px;margin:24px 0 10px}
.m-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:16px}
.m-actions .sp{flex:1}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;font-weight:700;font-size:14px}
.field input,.field textarea,.tinput{width:100%;border:1.5px solid var(--line);background:var(--surface-2);border-radius:14px;padding:11px 13px;font-size:16px;font-weight:500;transition:border-color .15s,background .15s,box-shadow .15s}
.field textarea,textarea.tinput{min-height:64px;resize:vertical}
textarea.tinput.big{min-height:180px;font-size:16.5px;line-height:1.55}
select.tinput{appearance:auto}
.field input:focus,.field textarea:focus,.tinput:focus{outline:0;border-color:var(--violet);background:var(--surface);box-shadow:0 0 0 4px rgba(109,91,255,.14)}
.wa-text{font-size:14.5px!important;min-height:220px!important;font-family:var(--body)}
.codebox{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--g-main);color:#fff;border-radius:20px;padding:14px;box-shadow:0 12px 28px -12px rgba(176,77,255,.7)}
.codebox small{font-weight:700;font-size:13px;opacity:.9}
.codebox b{font-family:var(--mono);font-size:32px;letter-spacing:.2em}
.linkbox{margin-top:12px;background:var(--surface-2);border-radius:14px;padding:10px 12px;font-family:var(--mono);font-size:13px;word-break:break-all;color:var(--muted)}

/* account & key */
.acct{border:0;background:none;padding:0;border-radius:50%;display:grid;place-items:center;min-width:36px;min-height:36px}
.acct .av{width:38px;height:38px;font-size:12px;box-shadow:0 0 0 2px #fff,0 0 0 4px rgba(109,91,255,.35)}
.keycard{text-align:center;display:flex;flex-direction:column;align-items:center}
.keycard .m-title{margin:12px 0 12px}
.keycard .m-actions{width:100%}
.kc-ic{width:60px;height:60px;border-radius:20px;background:var(--g-main);color:#fff;display:grid;place-items:center;box-shadow:0 10px 24px -10px rgba(176,77,255,.8)}
.kc-ic svg{width:28px;height:28px}
.kc-ic.blocked{background:var(--g-pink)}
.kc-key{font-family:var(--mono);font-weight:700;font-size:32px;letter-spacing:.14em;background:#1A1433;color:#fff;border-radius:18px;padding:13px 20px;margin-bottom:12px;user-select:all}
.kc-key.sm{font-size:22px;display:inline-block;margin-bottom:6px}
.adm-list{display:flex;flex-direction:column;gap:2px;margin-top:8px}
.adm-row{display:flex;align-items:center;gap:8px;padding:8px 4px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.adm-row .sp{flex:1}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(var(--navh) + 24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:95;background:var(--ink);color:#fff;padding:12px 18px;border-radius:999px;font-weight:700;font-size:14.5px;box-shadow:0 18px 36px -12px rgba(20,16,40,.5);animation:toastIn .4s cubic-bezier(.2,.9,.3,1.3) both;max-width:calc(100% - 32px);text-align:center}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,16px) scale(.96)}}
.view{animation:viewIn .35s ease both}
@keyframes viewIn{from{opacity:0;transform:translateY(8px)}}

/* join screen */
.gate-in{max-width:1080px;margin:0 auto;padding-inline:16px;padding-block:14px 60px}
.g-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:10px}
.g-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,5vw,64px);align-items:center;min-height:min(80vh,740px)}
@media (max-width:820px){.g-grid{grid-template-columns:1fr;min-height:0;padding-top:14px}}
.g-kicker{display:inline-block;font-weight:700;font-size:13px;color:var(--violet);background:#ECEBFF;border-radius:999px;padding:6px 13px;margin-bottom:16px}
.g-hero h1{font-family:var(--disp);font-weight:800;font-size:clamp(48px,7.6vw,96px);line-height:.92;letter-spacing:-3.5px;margin-bottom:18px}
.g-hero h1 em{font-style:normal;background:var(--g-main);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.04em}
.g-hero p{font-size:clamp(17px,2vw,19px);max-width:38ch;color:var(--muted)}
.g-feats{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.g-feats li{display:flex;gap:11px;align-items:flex-start;font-weight:600}
.g-feats svg{border-radius:9px;padding:4px;width:26px;height:26px;flex:none;color:#fff;background:var(--g-violet)}
.g-feats li:nth-child(2) svg{background:var(--g-pink)}
.g-feats li:nth-child(3) svg{background:var(--g-main)}
.g-feats li:nth-child(4) svg{background:var(--g-green)}
.g-card{background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:clamp(22px,4vw,34px);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;gap:4px}
.g-card h2{font-family:var(--disp);font-weight:800;font-size:30px;line-height:1;letter-spacing:-1px;margin-bottom:16px}
.code-in{font-family:var(--mono)!important;font-weight:700;font-size:22px!important;letter-spacing:.16em;text-transform:uppercase}
.g-age{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;margin:2px 0 14px;font-weight:500}
.g-age input{width:20px;height:20px;accent-color:var(--violet);flex:none;margin:1px 0 0}
.g-err{background:#FFEEF1;color:#C8203D;border-radius:14px;padding:10px 12px;font-size:14.5px;font-weight:600;margin-bottom:8px}
.g-links{display:flex;flex-direction:column;gap:2px;margin-top:12px}
.g-links button{display:flex;align-items:center;gap:8px;border:0;background:transparent;padding:7px 2px;font-weight:700;font-size:14.5px;color:var(--violet);text-align:left}
.g-links button:hover{text-decoration:underline;text-underline-offset:3px}
.g-privacy{display:flex;gap:8px;align-items:flex-start;color:var(--muted);font-size:13px;margin-top:10px}
.g-privacy svg{width:16px;height:16px;margin-top:1px}
.legal{color:var(--muted);font-size:12.5px;margin-top:8px}
.legal a{color:inherit;font-weight:600}
.m-actions .legal{margin:0}
.ord-terms{max-width:260px;margin:0;color:var(--muted);font-size:13px;line-height:1.4}
.ord-terms a{color:var(--violet);font-weight:700}
.g-demo{margin-top:12px;font-weight:700;display:inline-flex;align-items:center;gap:6px;align-self:flex-start;color:var(--ink);background:var(--surface-2);border-radius:999px;padding:8px 14px;text-decoration:none}
.g-demo:hover{background:#ECEBFF;color:var(--violet)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- free page editor ---------- */
/* page backgrounds (editor, thumbnails, history) */
.pbg{background:#fff}
.pbg[data-bg="night"]{background:#15122A}
.pbg[data-bg="sunset"]{background:linear-gradient(160deg,#FFD1E6 0%,#E3D4FF 55%,#FFE0C7 100%)}
.pbg[data-bg="mint"]{background:linear-gradient(160deg,#D9FBEC 0%,#E7F6FF 100%)}
.pbg[data-bg="sky"]{background:linear-gradient(170deg,#DDE8FF 0%,#F4ECFF 100%)}
.pbg[data-bg="peach"]{background:linear-gradient(160deg,#FFE8D6 0%,#FFF6E0 100%)}
body.pe-open{overflow:hidden}
.pe{position:fixed;inset:0;z-index:70;background:var(--bg);display:flex;flex-direction:column;animation:viewIn .25s ease both}
.pe-top{display:flex;align-items:center;gap:8px;padding:10px 12px;padding-top:calc(10px + env(safe-area-inset-top,0px));background:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.pe-title{flex:1;min-width:0;border:0;background:transparent;font-family:var(--disp);font-weight:800;font-size:19px;letter-spacing:-.4px;padding:6px 8px;border-radius:10px}
.pe-title:focus{outline:0;background:var(--surface-2)}
.pe-top .savest{white-space:nowrap}
.pe-top .savest[data-s="saved"]{color:var(--ok)}
.pe-top .savest[data-s="save_err"]{color:#D92D4A}
@media (max-width:520px){.pe-top .savest{display:none}}
.pe-top .iconbtn[disabled]{opacity:.35;pointer-events:none}
.pe-stage{flex:1;overflow:auto;display:flex;justify-content:center;align-items:flex-start;padding:18px 14px 24px}
.pe-sheet{position:relative;flex:none;width:min(100%,620px,calc((100dvh - 190px) / 1.414));aspect-ratio:210/297;border-radius:10px;box-shadow:0 2px 4px rgba(20,18,40,.08),0 30px 60px -24px rgba(60,30,160,.35);overflow:hidden;container-type:inline-size;touch-action:pan-y}
.pe-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:12%;color:var(--muted);font-weight:600;pointer-events:none}
.pbg[data-bg="night"] .pe-empty{color:rgba(255,255,255,.6)}
.pe-empty svg{width:34px;height:34px;color:var(--violet)}
.pe-tools{display:flex;justify-content:center;gap:4px;padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line)}
.pe-tools button{display:flex;flex-direction:column;align-items:center;gap:3px;border:0;background:none;border-radius:16px;padding:8px 14px;font-weight:700;font-size:12px;color:var(--muted);min-width:64px;transition:background .15s,color .15s}
.pe-tools button svg{width:24px;height:24px}
.pe-tools button:hover{background:var(--vt);color:var(--violet)}
@media (max-width:420px){.pe-tools button{min-width:0;flex:1;padding:8px 4px}}

/* the things on a page */
.deco{position:absolute;inset:0;overflow:hidden}
.it{position:absolute;left:calc(var(--x) * 1cqw);top:calc(var(--y) * 1cqw);width:calc(var(--s) * 1cqw);transform:translate(-50%,-50%) rotate(var(--r));user-select:none;-webkit-user-select:none;touch-action:none}
.it svg,.it img{display:block;width:100%;height:auto;pointer-events:none}
.it-photo img{border-radius:3cqw;box-shadow:0 1.5cqw 4cqw -1.5cqw rgba(20,16,40,.45);background:#eee;min-height:4cqw}
.it-draw img{filter:drop-shadow(0 .6cqw 1cqw rgba(20,16,40,.18))}
.it-sticker svg{filter:drop-shadow(0 .8cqw 1.4cqw rgba(20,16,40,.22))}
.it-emoji .emo{display:block;text-align:center;font-size:calc(var(--s) * .82cqw);line-height:1.05}
.it-text .tn{display:block;background:var(--c);color:var(--t);font-size:calc(var(--s) * .085cqw);font-weight:600;line-height:1.3;padding:.75em .9em;border-radius:.9em;white-space:pre-wrap;overflow-wrap:anywhere;box-shadow:0 1.2cqw 3cqw -1.4cqw rgba(20,16,40,.4)}
.it-text .tn-bub{border-radius:1.3em;position:relative}
.it-text .tn-bub::after{content:"";position:absolute;left:16%;bottom:-.65em;border:.55em solid transparent;border-top:.8em solid var(--c);border-bottom:0}
.it-text .tn-big{background:none;box-shadow:none;padding:0;color:var(--c);font-family:var(--disp);font-weight:800;font-size:calc(var(--s) * .13cqw);line-height:.98;letter-spacing:-.03em;text-align:center}
.it-text .tn-big[style*="#FFFFFF;"]{color:#14121C}
.pbg[data-bg="night"] .it-text .tn-big[style*="#FFFFFF;"]{color:#fff}
.it-label{width:auto}
.lbl{display:inline-block;font-family:var(--disp);font-weight:800;letter-spacing:.02em;white-space:nowrap;border-radius:999px;padding:.38em .85em;border:0}
.it-label .lbl{font-size:calc(var(--s) * .1cqw);box-shadow:0 1cqw 2.4cqw -1cqw rgba(20,16,40,.45)}
.lbl-0{background:var(--g-main);color:#fff}
.lbl-1{background:#14121C;color:#fff}
.lbl-2{background:#FFE45C;color:#14121C}
.lbl-3{background:var(--g-green);color:#fff}
.it.sel{outline:2px dashed var(--violet);outline-offset:4px;border-radius:6px}
.h{position:absolute;width:30px;height:30px;border-radius:99px;background:#fff;border:3px solid var(--violet);box-shadow:0 3px 8px rgba(20,16,40,.3);touch-action:none;z-index:3;display:grid;place-items:center}
.h-rot{left:50%;top:-50px;margin-left:-15px;cursor:grab}
.h-rot::before{content:"";position:absolute;left:50%;top:27px;width:3px;height:17px;margin-left:-1.5px;background:var(--violet);border-radius:2px}
.h-rot::after{content:"";width:11px;height:11px;border:2.5px solid var(--violet);border-right-color:transparent;border-radius:99px}
.h-scale{right:-18px;bottom:-18px;cursor:nwse-resize}
.h-scale::after{content:"";width:9px;height:9px;border:solid var(--violet);border-width:0 2.5px 2.5px 0;transform:rotate(45deg) translate(-1px,-1px)}
@media (pointer:coarse){.h{width:36px;height:36px}.h-rot{top:-56px;margin-left:-18px}.h-rot::before{top:32px}.h-scale{right:-22px;bottom:-22px}}
.itbar{position:absolute;left:calc(var(--bx) * 1cqw);top:calc(var(--by) * 1cqw);transform:translateX(-50%);display:flex;gap:2px;background:#14121C;color:#fff;border-radius:999px;padding:5px;z-index:99999;box-shadow:0 12px 26px -10px rgba(0,0,0,.6);animation:viewIn .2s ease both}
.itbar button{width:40px;height:40px;border:0;background:transparent;border-radius:99px;display:grid;place-items:center;color:#fff}
.itbar button:hover{background:rgba(255,255,255,.14)}
.itbar button.danger{color:#FF8FB8}
.itbar svg{width:18px;height:18px}
.ab-gesture,.ab-gesture *{touch-action:none!important}

/* page cards with a small preview */
.fp-mini{position:absolute;inset:0;container-type:inline-size;pointer-events:none}
.fpage.has .fp-t{position:relative;z-index:2;background:rgba(20,18,28,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;border-radius:10px;padding:5px 9px;font-size:15px}

/* sticker picker, text notes, backgrounds, drawing, crop, history */
.stk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:8px}
.stk{border:0;background:var(--surface-2);border-radius:18px;aspect-ratio:1;padding:12px;display:grid;place-items:center;transition:transform .2s cubic-bezier(.3,1.6,.5,1),background .2s}
.stk:hover{transform:scale(1.08) rotate(-4deg);background:var(--vt)}
.stk svg{width:100%;height:100%}
.stk-grid.emo .stk{font-size:32px;padding:0}
.lbl-grid{display:flex;flex-wrap:wrap;gap:10px}
.lbl-grid .lbl{font-size:15px;cursor:pointer;transition:transform .15s}
.lbl-grid .lbl:hover{transform:scale(1.05) rotate(-2deg)}
.swatches{display:flex;flex-wrap:wrap;gap:9px}
.sw{width:36px;height:36px;border-radius:99px;border:1px solid var(--line);background:var(--c);transition:transform .15s}
.sw.on{outline:3px solid var(--violet);outline-offset:2px;transform:scale(1.08)}
.bgs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.bgc{aspect-ratio:210/297;border:1px solid var(--line);border-radius:14px;display:flex;align-items:flex-end;justify-content:center;padding:8px;font-weight:700;font-size:13px}
.bgc[data-bg="night"]{color:#fff}
.bgc.on{outline:3px solid var(--violet);outline-offset:2px}
.dr-wrap{border-radius:18px;overflow:hidden;background:#fff;touch-action:none;border:1px solid var(--line)}
.dr-cv{display:block;width:100%;touch-action:none;cursor:crosshair}
.dr-tools{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:12px}
.sizes{display:flex;gap:6px}
.sz{width:38px;height:38px;border-radius:12px;border:1px solid var(--line);background:var(--surface-2);display:grid;place-items:center}
.sz i{display:block;width:var(--s);height:var(--s);border-radius:99px;background:currentColor}
.sz.on{border-color:var(--violet);box-shadow:0 0 0 2px var(--violet)}
.crop-ar{margin-bottom:12px}
.crop{display:grid;place-items:center;background:#15122A;border-radius:18px;padding:12px}
.crop-frame{position:relative;width:min(100%,calc(52vh * var(--ar)));aspect-ratio:var(--ar);overflow:hidden;border-radius:10px;touch-action:none;cursor:grab;background:#000}
.crop-frame img{position:absolute;left:0;top:0;max-width:none;transform-origin:0 0;user-select:none;pointer-events:none}
.crop-zoom{display:flex;align-items:center;gap:10px;margin-top:12px;color:var(--muted)}
.crop-zoom input{flex:1;accent-color:var(--violet)}
.menu{display:flex;flex-direction:column;gap:8px}
.menu button{display:flex;align-items:flex-start;gap:12px;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:16px;padding:12px 14px}
.menu button:hover{background:var(--surface-2)}
.menu button span{display:flex;flex-direction:column}
.menu button small{color:var(--muted);font-size:13px}
.menu button.danger{color:#D92D4A}
.menu button.arm{background:#E5334F;color:#fff}
.menu button.arm small{color:rgba(255,255,255,.85)}
.hist{display:flex;flex-direction:column;gap:8px}
.hist-i{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:16px;padding:10px 12px}
.hist-mini{position:relative;width:52px;flex:none;aspect-ratio:210/297;border-radius:6px;overflow:hidden;container-type:inline-size;border:1px solid var(--line)}
.hist-t{flex:1;min-width:0;display:flex;flex-direction:column}
.hist-t small{color:var(--muted);font-size:13px}
.hist-text{font-size:13.5px;color:var(--ink);margin-top:3px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* ---------- the book (A4 pages, all sizes in cqw = % of the page width) ---------- */
.bk{--b-bg:#fff;--b-ink:#14121C;--b-soft:#6B6880;--b-acc:#6D5BFF;--b-acc2:#FF4FA3;--b-card:#F4F2FB;--b-grad:linear-gradient(135deg,#6D5BFF 0%,#B04DFF 40%,#FF4FA3 75%,#FF8A3D 100%);--b-cover-ink:#fff}
.bk[data-theme="night"]{--b-bg:#12101C;--b-ink:#F4F2FF;--b-soft:#A9A3C9;--b-acc:#C6F35E;--b-acc2:#FF7AB8;--b-card:#1E1A33;--b-grad:linear-gradient(150deg,#2A1E5C 0%,#6D5BFF 60%,#B04DFF 100%)}
.bk[data-theme="clean"]{--b-bg:#FFFFFF;--b-ink:#0F0F10;--b-soft:#6A6A70;--b-acc:#FF3B2F;--b-acc2:#0F0F10;--b-card:#F2F2F2;--b-grad:linear-gradient(#0F0F10,#0F0F10)}
.bk[data-theme="pastel"]{--b-bg:#FFF8F1;--b-ink:#2B2234;--b-soft:#85798F;--b-acc:#D9468F;--b-acc2:#7B68FF;--b-card:#FFEBDD;--b-grad:linear-gradient(150deg,#FFB8D9 0%,#C9B8FF 55%,#FFD3B0 100%);--b-cover-ink:#2B2234}
.bp{position:relative;width:100%;aspect-ratio:210/297;container-type:inline-size;overflow:hidden;background:var(--b-bg);color:var(--b-ink);font-family:var(--body);text-align:left;line-height:1.35}
.bp-in{position:absolute;inset:0;padding:8cqw 8cqw 11cqw;display:flex;flex-direction:column;gap:3cqw}
.bp-foot{position:absolute;left:8cqw;right:8cqw;bottom:6.2cqw;display:flex;justify-content:space-between;font-size:1.4cqw;font-weight:600;letter-spacing:.02em;color:var(--b-soft)}
/* printed book: the wider margin is on the binding side, the page number on the outside */
.bp.recto .bp-in{padding-left:9.5cqw;padding-right:7.5cqw}
.bp.verso .bp-in{padding-left:7.5cqw;padding-right:9.5cqw}
.bp.recto .bp-foot{left:9.5cqw;right:7.5cqw}
.bp.verso .bp-foot{left:7.5cqw;right:9.5cqw;flex-direction:row-reverse}
.bp-free .bp-in{padding:0!important}
/* the inside of the cover in the flip-book */
.bk-page.blank{background:var(--b-bg,#fff);aspect-ratio:210/297;opacity:.55}
#bk-measure{position:absolute;left:-10000px;top:0;width:600px;visibility:hidden;pointer-events:none}
.bk-h{font-family:var(--disp);font-weight:800;font-size:8cqw;line-height:1;letter-spacing:-.045em;background:var(--b-grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.6cqw}
.bk[data-theme="night"] .bk-h,.bk[data-theme="night"] .be-thanks,.bk[data-theme="night"] .bcp-name{background:linear-gradient(135deg,#B9A8FF,#FF7AB8);-webkit-background-clip:text;background-clip:text}
.bk[data-theme="pastel"] .bk-h{background:linear-gradient(135deg,#D9468F,#7B68FF);-webkit-background-clip:text;background-clip:text}
.bk-free{flex:1;min-height:60cqw;color:var(--b-soft);font-size:2.4cqw;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-top:.3cqw solid currentColor;padding-top:2cqw;opacity:.6}
.bt-body .bk-free{min-height:16cqw}
.bk-missing{color:var(--b-soft);font-size:2.6cqw;font-weight:600;border:.35cqw dashed currentColor;border-radius:3cqw;padding:4cqw;text-align:center}
.bface{--c:#999;display:grid;place-items:center;background:var(--c);color:#fff;font-family:var(--disp);font-weight:800;overflow:hidden;flex:none}
.bface img{width:100%;height:100%;object-fit:cover;display:block}
.fit{flex:1;min-height:0;overflow:hidden;--fs:1}

/* cover */
.bp-cover .bp-in{padding:9cqw;justify-content:space-between;background:var(--b-grad);color:var(--b-cover-ink)}
.bp-cover.has-photo .bp-in{color:#fff}
.bc-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bc-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,.1) 55%,rgba(0,0,0,.72) 100%)}
.bc-top,.bc-main{position:relative}
.bc-top{font-weight:700;font-size:2.8cqw}
.bc-year{display:inline-block;font-weight:700;font-size:2.8cqw;background:rgba(255,255,255,.2);border:.25cqw solid rgba(255,255,255,.4);border-radius:99cqw;padding:.8cqw 2.4cqw}
.bk[data-theme="pastel"] .bp-cover:not(.has-photo) .bc-year{background:rgba(255,255,255,.5);border-color:rgba(43,34,52,.2)}
.bc-name{font-family:var(--disp);font-weight:800;line-height:.82;letter-spacing:-.06em;margin:2cqw 0 0 -1cqw;overflow-wrap:anywhere}
.bc-motto{font-family:var(--disp);font-weight:700;font-size:4.4cqw;line-height:1.15;letter-spacing:-.02em;max-width:84%;margin-top:3.5cqw}

/* this is us */
.bi-stats{font-weight:700;font-size:2.4cqw;color:var(--b-soft);margin-top:-1cqw}
.bi-grid{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:2.6cqw 2cqw;margin-top:2cqw}
.bi-f{display:flex;flex-direction:column;align-items:center;gap:1cqw;font-size:1.9cqw;font-weight:700;text-align:center;min-width:0}
.bi-f span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bi-face{width:100%;aspect-ratio:1;border-radius:24%;font-size:4.5cqw}

/* one page per person */
.bs-head{display:grid;grid-template-columns:34cqw 1fr;gap:5cqw;align-items:end}
.bs-photo{width:34cqw;height:34cqw;border-radius:4.5cqw;font-size:12cqw}
.bs-name{font-family:var(--disp);font-weight:800;font-size:7.4cqw;line-height:.92;letter-spacing:-.045em;overflow-wrap:anywhere}
.bs-nick{font-weight:700;font-size:3cqw;color:var(--b-acc);margin-top:1.4cqw}
.bs-emo{font-size:4.2cqw;margin-top:1cqw}
.bs-quote{margin:2.6cqw 0 0;font-family:var(--disp);font-weight:700;font-size:2.9cqw;line-height:1.22;letter-spacing:-.02em;position:relative;padding-left:4cqw}
.bs-quote::before{content:"“";position:absolute;left:0;top:-1.6cqw;font-size:8cqw;line-height:1;color:var(--b-acc)}
.bs-body{display:flex;flex-direction:column;gap:3cqw}
.bs-ans{display:grid;grid-template-columns:1fr 1fr;gap:1.8cqw}
.bs-ans div{background:var(--b-card);border-radius:2.4cqw;padding:2.2cqw 2.6cqw}
.bs-ans b{display:block;font-size:calc(1.22cqw * var(--fs));text-transform:uppercase;letter-spacing:.08em;color:var(--b-acc);margin-bottom:.7cqw}
.bs-ans p{font-size:calc(1.72cqw * var(--fs));font-weight:500;line-height:1.42}
.bs-texts{display:flex;flex-direction:column;gap:3cqw}
.bs-texts.cols{display:block;columns:2;column-gap:4.4cqw}
.bs-texts.cols figure{margin-bottom:3cqw}
.bs-texts figure{margin:0;border-left:.55cqw solid var(--b-acc);padding-left:2.4cqw}
.bs-texts figure:nth-child(3n+2){border-color:var(--b-acc2)}
.bs-texts figure:nth-child(3n+3){border-color:var(--b-soft)}
.bs-texts p{font-size:calc(1.8cqw * var(--fs));line-height:1.52;white-space:pre-wrap;hyphens:auto;-webkit-hyphens:auto;text-wrap:pretty}
.bs-texts figcaption{font-size:calc(1.4cqw * var(--fs));font-weight:700;letter-spacing:.02em;color:var(--b-soft);margin-top:1cqw;break-before:avoid}
.bs-more{margin-top:auto;text-align:right;font-size:1.4cqw;font-weight:700;letter-spacing:.04em;color:var(--b-soft)}
.bs-greet{flex:1 1 0;min-height:0;border-top:.25cqw solid var(--b-card);padding-top:1.8cqw;overflow:hidden}
.bs-greet span{font-size:1.3cqw;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--b-soft);opacity:.7}
.bs-greet.off{display:none}
.bs-cont{display:flex;align-items:center;gap:3.4cqw;padding-bottom:3cqw;border-bottom:.25cqw solid var(--b-card)}
.bs-mini{width:12cqw;height:12cqw;border-radius:3cqw;font-size:4.4cqw;flex:none}
.bs-kick{font-size:1.4cqw;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--b-acc);margin-bottom:.8cqw}
.bs-name.sm{font-size:5.2cqw}
.bs-secret{background:var(--b-card);border-radius:3cqw;padding:3cqw;font-weight:700;font-size:2.6cqw;text-align:center}

/* rankings */
.br-grid{flex:1;display:grid;grid-template-rows:repeat(4,1fr);gap:2.4cqw;min-height:0}
.br-grid.part{flex:0 0 auto;grid-template-rows:none}
.br-grid.part .br-q{min-height:22cqw}
.bp-rank .bs-greet.page{flex:1 1 0;border-top:0}
.br-q{background:var(--b-card);border-radius:4cqw;padding:3cqw 3.4cqw;display:flex;flex-direction:column;justify-content:space-between;gap:2cqw;min-height:0}
.br-q h3{font-family:var(--disp);font-weight:800;font-size:3.4cqw;line-height:1.1;letter-spacing:-.025em}
.br-pod{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:2cqw;align-items:center}
.br-pod li{display:flex;align-items:center;gap:1.6cqw;min-width:0}
.br-face{width:8cqw;height:8cqw;border-radius:50%;font-size:2.8cqw}
.br-pod li.r1 .br-face{width:11cqw;height:11cqw;font-size:3.6cqw;box-shadow:0 0 0 .7cqw var(--b-bg),0 0 0 1.3cqw var(--b-acc)}
.br-pod li>span:last-child{display:flex;flex-direction:column;min-width:0}
.br-pod b{font-size:2.2cqw;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.br-pod li.r1 b{font-size:2.6cqw}
.br-pod small{font-size:1.8cqw;color:var(--b-soft);font-weight:700}
.br-face.q{background:transparent;color:var(--b-soft);border:.35cqw dashed currentColor}
.br-note{font-size:2.2cqw;color:var(--b-soft);font-weight:700;text-align:center}

/* teachers: two per page */
.bp-teach .bp-in{gap:3.4cqw}
.bt{flex:0 1 auto;min-height:0;display:flex;flex-direction:column;gap:2.4cqw;border-radius:4cqw;background:var(--b-card);padding:4cqw}
.bp-teach .bs-greet.page{flex:1 1 0;border-top:0;padding-top:1cqw}
.bt-head{display:flex;align-items:center;gap:3cqw}
.bt-face{width:13cqw;height:13cqw;border-radius:4cqw;background:var(--b-grad);color:#fff;display:grid;place-items:center;font-family:var(--disp);font-weight:800;font-size:5cqw;flex:none}
.bk[data-theme="pastel"] .bt-face{color:#2B2234}
.bt-head h3{font-family:var(--disp);font-weight:800;font-size:5cqw;line-height:1;letter-spacing:-.035em}
.bt-head p{font-size:2.3cqw;color:var(--b-soft);font-weight:600;margin-top:.8cqw}
.bt-body{display:flex;flex-direction:column;gap:1.8cqw}
.bt-text{font-size:calc(1.8cqw * var(--fs));line-height:1.52;white-space:pre-wrap;hyphens:auto;-webkit-hyphens:auto;text-wrap:pretty}
.bt-text.cols{columns:2;column-gap:4.4cqw}
.bt-win{font-weight:800;font-size:calc(1.6cqw * var(--fs));color:var(--b-acc)}
.bt-q{margin:0;font-family:var(--disp);font-weight:700;font-size:calc(2.1cqw * var(--fs));line-height:1.25;padding-left:2.2cqw;border-left:.55cqw solid var(--b-acc2)}

/* quotes */
.bq-grid{columns:2;column-gap:3cqw}
.bq{break-inside:avoid;background:var(--b-card);border-radius:3.5cqw;padding:3cqw 3.2cqw;margin:0 0 3cqw}
.bq p{font-family:var(--disp);font-weight:700;font-size:calc(2.4cqw * var(--fs));line-height:1.22;letter-spacing:-.015em}
.bq p::before{content:"«";color:var(--b-acc)}
.bq p::after{content:"»";color:var(--b-acc)}
.bq small{display:block;margin-top:1.2cqw;font-size:calc(1.45cqw * var(--fs));font-weight:700;color:var(--b-soft)}

/* free pages keep their own background */
.bp-free .bp-in{padding:0}
.bf{position:absolute;inset:0}

/* ending */
.bp-end .bp-in{justify-content:center;align-items:center;text-align:center;gap:5cqw}
.be-thanks{font-family:var(--disp);font-weight:800;font-size:12cqw;line-height:.92;letter-spacing:-.055em;background:var(--b-grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:1cqw}
.bk[data-theme="pastel"] .be-thanks{background:linear-gradient(135deg,#D9468F,#7B68FF);-webkit-background-clip:text;background-clip:text}
.be-names{font-size:2.2cqw;line-height:1.75;color:var(--b-soft);font-weight:600;max-width:88%}
/* the class in numbers */
.bp-numbers .bp-in{gap:3.4cqw}
.bn-body{display:flex;flex-direction:column;gap:3.2cqw}
.bn-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(24cqw,1fr));gap:1.8cqw}
.bn-tile{background:var(--b-card);border-radius:2.6cqw;padding:2.2cqw 2.6cqw;display:flex;flex-direction:column;gap:.3cqw}
.bn-tile b{font-family:var(--disp);font-weight:800;font-size:calc(6.6cqw * var(--fs));line-height:.95;letter-spacing:-.05em;background:var(--b-grad);-webkit-background-clip:text;background-clip:text;color:transparent;width:fit-content}
.bk[data-theme="pastel"] .bn-tile b{background:linear-gradient(135deg,#D9468F,#7B68FF);-webkit-background-clip:text;background-clip:text}
.bk[data-theme="night"] .bn-tile b{background:linear-gradient(135deg,#C6F35E,#FF7AB8);-webkit-background-clip:text;background-clip:text}
.bn-tile span{font-size:calc(1.7cqw * var(--fs));font-weight:700;color:var(--b-soft)}
.bn-sec h3{font-family:var(--disp);font-weight:800;font-size:calc(2.8cqw * var(--fs));letter-spacing:-.03em;margin-bottom:1.3cqw}
.bn-emo{display:flex;flex-wrap:wrap;gap:2.6cqw;font-size:calc(5.2cqw * var(--fs));line-height:1}
.bn-emo span{display:flex;align-items:flex-end;gap:.6cqw}
.bn-emo small{font-size:calc(1.6cqw * var(--fs));font-weight:700;color:var(--b-soft)}
.bn-bar{display:grid;grid-template-columns:28cqw 1fr 8cqw;align-items:center;gap:2cqw;margin:1cqw 0;font-size:calc(1.8cqw * var(--fs));font-weight:700}
.bn-bar i{height:1.9cqw;border-radius:9cqw;background:var(--b-card);overflow:hidden}
.bn-bar em{display:block;height:100%;border-radius:inherit;background:var(--b-grad)}
.bn-bar b{text-align:right;font-variant-numeric:tabular-nums}
.bn-words{display:flex;flex-wrap:wrap;align-items:baseline;gap:1.2cqw 2.2cqw}
.bn-words span{font-family:var(--disp);font-weight:800;font-size:calc(2.6cqw * var(--s) * var(--fs));letter-spacing:-.03em;color:var(--b-soft)}
.bn-words span.hi{color:var(--b-ink,inherit)}
/* share the finished book */
.share-card .oc-ic.sh{background:var(--g-pink)}
.share-link{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 0 4px}
.share-link input{flex:1 1 220px;min-width:0;border:1px solid var(--line);border-radius:12px;padding:9px 12px;background:var(--surface-2);font-size:14px;color:var(--ink)}
.gate-in.sh{max-width:1080px}
.sh-head{text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;margin:24px auto 28px;max-width:640px}
.sh-head h1{font-family:var(--disp);font-weight:800;font-size:clamp(40px,9vw,72px);line-height:.95;letter-spacing:-.05em;background:var(--g-main);-webkit-background-clip:text;background-clip:text;color:transparent}
.sh-head p{color:var(--muted);font-size:17px}
.sh-cta{margin:36px auto 12px;max-width:560px;text-align:center;background:var(--surface);border-radius:var(--r);padding:26px 22px;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;gap:10px}
.sh-cta h2{font-family:var(--disp);font-size:24px}
.sh-cta p{color:var(--muted)}
.gate-in.sh .legal{text-align:center;margin:18px 0 30px}
.be-qr{display:flex;align-items:center;gap:3cqw;margin-top:4cqw;text-align:left}
.be-qr .qr{width:13cqw;height:13cqw;flex:none;border-radius:1.4cqw;box-shadow:0 0 0 .3cqw var(--b-line,rgba(0,0,0,.08))}
.be-made{font-size:2cqw;font-weight:700;color:var(--b-soft);display:flex;flex-direction:column;gap:.6cqw}
.be-made small{font-size:1.8cqw;font-weight:600}

/* book view: page previews */
.bk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:22px 16px}
.bk-thumb{border:0;background:none;padding:0;display:flex;flex-direction:column;gap:8px;text-align:center;cursor:pointer;min-width:0}
.bk-page{border-radius:6px;overflow:hidden;box-shadow:var(--shadow);transition:transform .2s;background:#fff}
.bk-thumb:hover .bk-page{transform:translateY(-3px)}
.bk-thumb > small{font-size:12.5px;font-weight:600;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-thumb.warn .bk-page{box-shadow:0 0 0 3px #FF8A3D,var(--shadow)}
.bk-thumb.warn small{color:#C2410C}
.bk-thumb.warn small::before{content:"⚠ "}
.bk-warn{background:#FFF1E4;color:#9A4308;border-radius:14px;padding:10px 14px;font-weight:600;font-size:14px;margin-bottom:16px}
@media (max-width:480px){.bk-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}}

/* flip-book */
.bk-reader{position:fixed;inset:0;z-index:75;background:#0E0C18;display:flex;flex-direction:column;animation:viewIn .25s ease both}
.rd-top{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;padding-top:calc(12px + env(safe-area-inset-top,0px));color:#fff}
.rd-top .iconbtn{background:rgba(255,255,255,.12);color:#fff}
.rd-n{font-weight:700;font-size:14px;opacity:.85}
.rd-stage{flex:1;display:flex;align-items:center;justify-content:center;padding:0 60px calc(24px + env(safe-area-inset-bottom,0px));touch-action:pan-y;user-select:none;-webkit-user-select:none}
.rd-stage .bk-page{width:min(90vw,calc((100dvh - 110px) / 1.414));border-radius:3px;box-shadow:0 30px 60px -20px rgba(0,0,0,.8)}
.rd-stage.spread .bk-page{width:min(43vw,calc((100dvh - 110px) / 1.414))}
.rd-stage.spread .bk-page:first-child:not(:only-child){border-radius:3px 0 0 3px;box-shadow:inset -18px 0 24px -20px rgba(0,0,0,.45),0 30px 60px -20px rgba(0,0,0,.8)}
.rd-stage.spread .bk-page:last-child:not(:only-child){border-radius:0 3px 3px 0;box-shadow:inset 18px 0 24px -20px rgba(0,0,0,.45),0 30px 60px -20px rgba(0,0,0,.8)}
.rd-nav{position:fixed;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:99px;border:0;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;z-index:2}
.rd-nav:disabled{opacity:.25}
.rd-prev{left:10px}.rd-next{right:10px}
@media (max-width:640px){.rd-stage{padding:0 10px calc(24px + env(safe-area-inset-bottom,0px))}.rd-nav{top:auto;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:none}}

/* design picker */
.th-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:560px){.th-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.th-card{border:0;background:none;padding:0;display:flex;flex-direction:column;gap:8px;font-weight:700;font-size:13.5px;text-align:center}
.th-card .bk-page{border-radius:8px}
.th-card.on .bk-page{outline:3px solid var(--violet);outline-offset:3px}

/* ---------- approval week ---------- */
.phase{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:18px;background:var(--g-main);color:#fff;border-radius:var(--r);padding:20px 22px;box-shadow:0 14px 34px -14px rgba(176,77,255,.7)}
.phase.done{background:var(--g-green);box-shadow:0 14px 34px -14px rgba(18,168,113,.6)}
.phase>div{flex:1;min-width:220px}
.phase-k{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:13px;background:rgba(255,255,255,.18);border-radius:99px;padding:4px 11px}
.phase-k svg{width:15px;height:15px}
.phase h2{font-family:var(--disp);font-weight:800;font-size:24px;letter-spacing:-.6px;margin:8px 0 4px}
.phase p{opacity:.9;font-size:14.5px}
.phase .btn{background:#fff;color:var(--ink)}
.modal.review{width:min(980px,100%)}
.rv-grid{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:22px;align-items:start}
@media (max-width:720px){.rv-grid{grid-template-columns:1fr}.rv-page{max-width:320px;margin:0 auto}}
.rv-page .bk-page{box-shadow:var(--shadow-lg)}
.rv-list .m-sub:first-child{margin-top:0}
.rv-item{border:1px solid var(--line);border-radius:16px;padding:12px 14px;margin-bottom:10px;display:flex;flex-direction:column;gap:8px}
.rv-item header{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rv-item p{white-space:pre-wrap;line-height:1.5}
.rv-item .row .sp{flex:1}
.rv-req{background:#ECEBFF;color:#3F31C9;border-radius:12px;padding:8px 11px;font-size:14px;font-weight:600;display:flex;gap:6px;align-items:flex-start}
.rv-req svg{width:15px;height:15px;margin-top:2px}
.rv-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding:10px 2px}
.rv-row span{min-width:0}
.rv-row small{color:var(--muted)}
.off>p:not(.rv-req),.off>span,.tv-text.off{opacity:.5;text-decoration:line-through;text-decoration-thickness:1.5px}
.btn.danger-b{color:#D92D4A;box-shadow:inset 0 0 0 1px #F3C3CC}
/* the teacher's page */
.tv{max-width:720px;margin:0 auto;padding:20px 0 40px;display:flex;flex-direction:column;gap:16px}
.tv h1{font-family:var(--disp);font-weight:800;font-size:clamp(38px,6vw,58px);line-height:.95;letter-spacing:-2px}
.tv .g-kicker{align-self:flex-start;margin-bottom:0}
.tv-lead{font-size:17px;color:var(--muted);max-width:60ch}
.tv-dl{display:flex;gap:8px;align-items:center;font-weight:700;color:var(--violet)}
.tv-sec h2{font-family:var(--disp);font-weight:800;font-size:21px;letter-spacing:-.5px}
.tv-text{font-size:16.5px;line-height:1.55;white-space:pre-wrap}
.tv-ok{align-items:flex-start}
.tv-ok .field{width:100%}

/* ---------- ordering ---------- */
.order-card{margin-bottom:20px}
.oc-h{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.oc-h h2{font-family:var(--disp);font-weight:800;font-size:22px;letter-spacing:-.5px}
.oc-h .sp{flex:1}
.oc-ic{width:44px;height:44px;border-radius:14px;background:var(--g-main);color:#fff;display:grid;place-items:center;flex:none}
.oc-sum{font-weight:600}
.oc-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (max-width:700px){.oc-cols{grid-template-columns:1fr}}
.oc-cols .m-sub{margin-top:4px}
.oc-row{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line);padding:8px 0}
.oc-row span{display:flex;flex-direction:column}
.oc-row small{color:var(--muted);font-size:13px}
.oc-addr{font-weight:600;margin-bottom:8px}
.oc-admin{border-top:1px dashed var(--line);padding-top:10px}
.run-st{background:var(--vt);color:var(--violet);border-radius:12px;padding:9px 12px;font-weight:700;font-size:14px}
.run-st.st-error{background:#FFEEF1;color:#C8203D}
.run-st.st-shipped{background:#E3FAF1;color:var(--ok)}
.run-st a{color:inherit}
.ord-item{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line);border-radius:16px;padding:12px 14px;margin-bottom:10px}
.ord-item>div:first-child{display:flex;flex-direction:column}
.ord-item small{color:var(--muted);font-size:13px}
.stepper{display:flex;align-items:center;gap:10px}
.stepper b{font-family:var(--disp);font-size:22px;min-width:24px;text-align:center}
.ord-del{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ord-opt{border:1.5px solid var(--line);background:var(--surface);border-radius:16px;padding:12px 14px;text-align:left;display:flex;flex-direction:column;gap:3px}
.ord-opt small{color:var(--muted);font-size:13px}
.ord-opt.on{border-color:var(--violet);background:var(--vt)}
.ord-addr{margin-top:14px}
.addr-row{display:grid;grid-template-columns:1fr 1.4fr;gap:10px}
@media (max-width:480px){.addr-row{grid-template-columns:1fr}}
.ord-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin-top:18px;background:var(--surface-2);border-radius:16px;padding:14px 16px}
.ord-price b{font-family:var(--disp);font-size:28px;letter-spacing:-1px}
.ord-price small{color:var(--muted);flex-basis:100%}
/* print mode (PDF renderer) */
body.print{background:#fff}
body.print::before{display:none}
.print-root .bk-page{width:210mm;height:297mm;border-radius:0;box-shadow:none;overflow:hidden;break-after:page}
.print-root .bp{height:100%}
.cv-spread{position:relative;overflow:hidden;background:var(--b-grad)}
.cv-spread>div{position:absolute}
.cvs-spine{top:0;bottom:0;display:grid;place-items:center;color:var(--b-cover-ink)}
.cvs-spine span{writing-mode:vertical-rl;font-family:var(--disp);font-weight:800;letter-spacing:.02em;white-space:nowrap}
.cvs-back{display:flex;flex-direction:column;justify-content:flex-end;gap:10pt;padding:60pt;color:var(--b-cover-ink)}
.cvs-name{font-family:var(--disp);font-weight:800;font-size:40pt;letter-spacing:-1.5pt;line-height:.9}
.cvs-motto{font-family:var(--disp);font-weight:700;font-size:15pt;max-width:80%}
.cvs-qr{display:flex;align-items:center;gap:12pt;margin-top:20pt}
.cvs-qr .qr{width:64pt;height:64pt;flex:none;border-radius:6pt}
.cvs-made{font-weight:700;font-size:10pt;opacity:.85;display:flex;flex-direction:column;gap:3pt}
.cvs-made small{font-weight:600;font-size:8.5pt}
.cvs-front .bk-page{width:100%;height:100%;border-radius:0;box-shadow:none}
.bp-sign .bp-in{gap:2cqw}

/* ---------- the guessing game: dark and big on the projector, four big buttons on the phone ---------- */
.game{position:fixed;inset:0;z-index:400;overflow:auto;color:#fff;font-family:var(--body);
  background:radial-gradient(70vmax 50vmax at 90% 0%,rgba(176,77,255,.5),transparent 60%),radial-gradient(60vmax 50vmax at 0% 100%,rgba(255,79,163,.4),transparent 60%),radial-gradient(50vmax 40vmax at 100% 100%,rgba(255,138,61,.3),transparent 60%),#14121C;
  padding:max(16px,env(safe-area-inset-top)) 16px max(20px,env(safe-area-inset-bottom));display:flex;flex-direction:column}
.game .iconbtn{background:rgba(255,255,255,.12);color:#fff}
.gm-top{display:flex;align-items:center;gap:12px;max-width:1400px;width:100%;margin:0 auto}
.gm-logo{display:flex;align-items:center;gap:8px;font-family:var(--disp);font-weight:800;font-size:18px}
.gm-logo svg{width:22px;height:22px}
.gm-n{margin-left:auto;font-weight:700;font-size:15px;opacity:.8;font-variant-numeric:tabular-nums}
.gm-top .iconbtn{margin-left:8px}
.gm-top .gm-n + .iconbtn{margin-left:12px}
.gm-top .gm-logo + .iconbtn{margin-left:auto}
.game h1{font-family:var(--disp);font-weight:800;letter-spacing:-.045em;line-height:.95}
.gm-lobby,.gm-final{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,2.4vw,28px);text-align:center;max-width:1100px;margin:0 auto;width:100%}
.gm-lobby h1,.gm-final h1{font-size:clamp(48px,9vw,120px);background:linear-gradient(90deg,#8F7BFF,#D07BFF 40%,#FF6FB5 70%,#FFA05C);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.08em}
.gm-lead{font-size:clamp(17px,2vw,26px);opacity:.8;font-weight:600}
.gm-join{display:flex;align-items:center;gap:clamp(16px,3vw,40px);background:rgba(255,255,255,.08);border-radius:24px;padding:clamp(14px,2vw,24px);text-align:left}
.gm-qr .qr{width:clamp(110px,13vw,170px);height:auto;display:block;border-radius:10px}
.gm-join ol{margin:0;padding-left:1.2em;font-size:clamp(15px,1.7vw,22px);font-weight:600;display:flex;flex-direction:column;gap:8px}
.gm-players{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:900px}
.gm-players span{background:rgba(255,255,255,.14);border-radius:99px;padding:6px 14px;font-weight:700;animation:viewIn .3s}
.gm-players em{opacity:.6}
.gm-q{flex:1;display:grid;grid-template-columns:1fr;align-content:center;gap:clamp(14px,2.2vw,26px);max-width:1400px;margin:0 auto;width:100%}
.gm-kind{font-weight:800;font-size:clamp(15px,1.8vw,24px);letter-spacing:.02em;color:#C9B8FF;text-align:center}
.gm-kind span{color:#fff;opacity:.75;font-weight:700}
.gm-prompt{margin:0 auto;max-width:1100px;font-family:var(--disp);font-weight:800;font-size:clamp(22px,3.6vw,52px);line-height:1.12;letter-spacing:-.025em;text-align:center;text-wrap:balance}
.gm-prompt.k-quote::before,.gm-prompt.k-text::before{content:"«"}.gm-prompt.k-quote::after,.gm-prompt.k-text::after{content:"»"}
.gm-prompt.small{font-size:clamp(18px,2.4vw,34px);opacity:.9}
.gm-tiles{display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,1.4vw,16px)}
.gm-tile{position:relative;display:flex;align-items:center;gap:14px;background:var(--c);border-radius:20px;padding:clamp(14px,2vw,26px);min-height:clamp(64px,9vh,110px);transition:opacity .3s,transform .3s}
.gm-tile b{font-family:var(--disp);font-weight:800;font-size:clamp(18px,2.6vw,38px);letter-spacing:-.02em;line-height:1.05}
.gm-l{flex:none;display:grid;place-items:center;width:clamp(30px,3.4vw,48px);height:clamp(30px,3.4vw,48px);border-radius:12px;background:rgba(255,255,255,.22);font-weight:800;font-size:clamp(15px,1.8vw,24px)}
.gm-tile em{margin-left:auto;font-style:normal;font-weight:800;font-size:clamp(18px,2.2vw,30px);background:rgba(0,0,0,.2);border-radius:12px;padding:2px 12px}
.gm-tile.wrong{opacity:.28}
.gm-tile.right{transform:scale(1.02);box-shadow:0 0 0 4px #fff,0 20px 50px -10px var(--c)}
.gm-foot{display:flex;align-items:center;gap:16px;font-weight:700;opacity:.9}
.gm-foot span{white-space:nowrap}
.gm-time{flex:1;height:10px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden}
.gm-time i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#FFC93C,#FF8A3D,#FF4FA3);border-radius:inherit;transition:width .2s linear}
.gm-side{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.gm-board{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;min-width:min(420px,100%)}
.gm-board li{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.1);border-radius:14px;padding:8px 14px;font-size:clamp(15px,1.6vw,21px)}
.gm-board li span{width:26px;font-weight:800;opacity:.7}
.gm-board li b{flex:1}
.gm-board li em{font-style:normal;font-weight:800;font-variant-numeric:tabular-nums}
.gm-board li.me{background:rgba(255,255,255,.28)}
.gm-podium{display:grid;grid-template-columns:repeat(3,minmax(0,220px));align-items:end;gap:14px}
.gm-podium>div{display:flex;flex-direction:column;align-items:center;gap:6px}
.gm-podium b{font-family:var(--disp);font-size:clamp(18px,2.4vw,32px);font-weight:800;text-align:center}
.gm-podium em{font-style:normal;font-weight:700;opacity:.8}
.gm-podium span{width:100%;display:grid;place-items:center;border-radius:18px 18px 6px 6px;font-family:var(--disp);font-weight:800;font-size:clamp(28px,4vw,56px);background:rgba(255,255,255,.14)}
.gm-podium .p1 span{height:clamp(120px,20vh,220px);background:linear-gradient(160deg,#FFC93C,#FF8A3D)}
.gm-podium .p2 span{height:clamp(90px,14vh,160px);background:linear-gradient(160deg,#C9B8FF,#6D5BFF)}
.gm-podium .p3 span{height:clamp(70px,10vh,120px);background:linear-gradient(160deg,#FF9BC8,#FF4FA3)}
/* the phone */
.game.player .gm-kind{margin:18px 0 10px}
.gp-btns{flex:1;display:grid;grid-template-rows:repeat(4,1fr);gap:10px;margin-top:14px;min-height:320px}
.gp-btns button{display:flex;align-items:center;gap:14px;border:0;border-radius:20px;background:var(--c);color:#fff;font-family:var(--disp);font-weight:800;font-size:22px;letter-spacing:-.01em;text-align:left;padding:14px 18px}
.gp-btns button:active{transform:scale(.98)}
.gp-wait{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center}
.gp-wait h2{font-family:var(--disp);font-size:34px;letter-spacing:-.03em}
.gp-wait p{opacity:.8;font-size:17px;font-weight:600}
.gp-wait.ok h2{color:#7CF2B8}.gp-wait.no h2{color:#FF9BB5}
.gp-score{font-family:var(--disp);font-weight:800;font-size:22px;opacity:1!important}
.gp-wait .gm-board{margin-top:12px}
/* the note that a game is running */
#gmnote{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom) + var(--navh,0px));transform:translateX(-50%);z-index:260;display:flex;align-items:center;gap:8px;border:0;border-radius:99px;padding:12px 18px;background:#14121C;color:#fff;font-size:15px;box-shadow:0 14px 34px -10px rgba(40,24,120,.6);animation:viewIn .3s;white-space:nowrap}
#gmnote span{background:var(--g-main);border-radius:99px;padding:5px 12px;font-weight:800}
.game-card .oc-ic.gm{background:#14121C;font-size:20px}
@media (max-width:700px){.gm-tiles{grid-template-columns:1fr}.gm-join{flex-direction:column;text-align:center}.gm-foot{flex-wrap:wrap}}
.game.player .gm-time{flex:none;height:10px;margin:0 4px}
.gp-wait .gm-board{width:100%;text-align:left}

/* ---------- the class photo (book page and the dialog to mark yourself) ---------- */
.bp-class .bp-in{padding:0!important;gap:0}
.bcp-photo{position:relative;width:100%;aspect-ratio:3/2;overflow:hidden;background:var(--b-card)}
.bcp-photo img{width:100%;height:100%;object-fit:cover;display:block}
.bcp-dot{position:absolute;transform:translate(-50%,-50%);width:3.2cqw;height:3.2cqw;border-radius:50%;background:#fff;color:#14121C;font-size:1.5cqw;font-weight:800;display:grid;place-items:center;box-shadow:0 .2cqw .8cqw rgba(0,0,0,.35)}
.bcp-text{flex:1;display:flex;flex-direction:column;gap:1.6cqw;padding:6cqw 8.5cqw 12.5cqw}
.bcp-kick{font-size:1.5cqw;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--b-acc)}
.bcp-name{font-family:var(--disp);font-weight:800;font-size:13cqw;line-height:.9;letter-spacing:-.055em;background:var(--b-grad);-webkit-background-clip:text;background-clip:text;color:transparent;width:fit-content;padding-bottom:.4cqw}
.bk[data-theme="pastel"] .bcp-name{background:linear-gradient(135deg,#D9468F,#7B68FF);-webkit-background-clip:text;background-clip:text}
.bcp-motto{font-family:var(--disp);font-weight:700;font-size:2.8cqw;color:var(--b-soft);letter-spacing:-.02em}
.bcp-legend{margin-top:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1cqw 3cqw;font-size:1.65cqw;line-height:1.35;color:var(--b-ink);border-top:.25cqw solid var(--b-card);padding-top:2.4cqw}
.bcp-legend span{display:flex;align-items:baseline;gap:1cqw;min-width:0}
.bcp-legend b{flex:none;display:inline-grid;place-items:center;width:2.6cqw;height:2.6cqw;border-radius:50%;background:var(--b-card);font-size:1.25cqw;transform:translateY(.3cqw)}
.cp-photo{position:relative;border-radius:16px;overflow:hidden;background:var(--surface-2);aspect-ratio:3/2}
.cp-photo img{width:100%;height:100%;object-fit:cover;display:block}
.cp-photo.marking{cursor:crosshair;box-shadow:0 0 0 3px var(--violet)}
.cp-dot{position:absolute;transform:translate(-50%,-50%);min-width:26px;height:26px;padding:0 5px;border-radius:99px;background:rgba(255,255,255,.92);color:#14121C;font-size:11px;font-weight:800;display:grid;place-items:center;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.cp-dot.me{background:var(--g-main);color:#fff;box-shadow:0 0 0 2px #fff,0 2px 8px rgba(0,0,0,.35)}
.cp-card .oc-ic.cp{background:var(--g-green)}
/* ---------- "Damals & heute" ---------- */
.tn-row{display:flex;gap:14px}
.tn-slot{display:flex;flex-direction:column;align-items:center;gap:6px;font-weight:700;color:var(--muted);font-size:13px}
.tn-slot .photo-slot{width:120px;height:120px}
.tn-grid{flex:1;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,auto);align-content:start;gap:4cqw 4cqw}
.tn{margin:0;display:flex;flex-direction:column;gap:1.4cqw}
.tn-pair{display:grid;grid-template-columns:1fr 1fr;gap:1cqw}
.tn-ph{position:relative;aspect-ratio:1;border-radius:2cqw;overflow:hidden;background:var(--b-card)}
.tn-ph img{width:100%;height:100%;object-fit:cover;display:block}
.tn-ph i{position:absolute;left:1cqw;bottom:1cqw;font-style:normal;font-size:1.2cqw;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:rgba(255,255,255,.9);color:#14121C;border-radius:99px;padding:.3cqw 1.1cqw}
.tn figcaption{font-family:var(--disp);font-weight:800;font-size:2.4cqw;letter-spacing:-.02em}
/* the game: the photo from back then on the big screen */
.gm-img{display:flex;justify-content:center;gap:16px}
.gm-img img{height:clamp(160px,34vh,380px);aspect-ratio:1;object-fit:cover;border-radius:24px;box-shadow:0 20px 60px -20px rgba(0,0,0,.8)}
.gm-img.pair img{height:clamp(130px,26vh,300px)}

/* ---------- photos from the class on a person's page ---------- */
.bs-photos{margin-top:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:2.4cqw;align-items:start}
.bs-photos.n1{grid-template-columns:1fr 1fr}
.bs-photos figure{margin:0;display:flex;flex-direction:column;gap:1cqw}
.bs-ph{display:block;aspect-ratio:4/3;border-radius:2cqw;overflow:hidden;background:var(--b-card)}
.bs-ph img{width:100%;height:100%;object-fit:cover;display:block}
.bs-photos figcaption{font-size:calc(1.5cqw * var(--fs));line-height:1.35;font-weight:600}
.bs-photos figcaption small{font-weight:700;color:var(--b-soft)}
.ph-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:6px 0 10px}
.ph-grid figure{margin:0;display:flex;flex-direction:column;gap:6px}
.ph-grid figure.off{opacity:.45}
.ph-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;background:var(--surface-2)}
.ph-grid figcaption{font-size:14px;font-weight:600;display:flex;flex-direction:column}
.ph-grid figcaption small{color:var(--muted);font-weight:600}
.ph-prev img{width:100%;max-height:300px;object-fit:contain;border-radius:14px;background:var(--surface-2)}
.rv-ph img{width:56px;height:42px;object-fit:cover;border-radius:8px;flex:none}
/* ---------- the cover: a collage of everyone's photo ---------- */
.bc-collage{position:absolute;inset:0;display:grid;grid-template-columns:repeat(var(--cols),1fr);grid-auto-rows:1fr;gap:.5cqw;background:#14121C}
.bc-collage img{width:100%;height:100%;object-fit:cover;display:block;min-height:0}
.cv-card .oc-ic.cv{background:var(--g-main)}
.cv-picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin-top:14px}
.cv-picks figure{margin:0;display:flex;flex-direction:column;gap:6px}
.cv-picks figure.mine img{box-shadow:0 0 0 3px var(--violet)}
.cv-picks figure.out{opacity:.4}
.cv-picks img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;background:var(--surface-2)}
.cv-picks figcaption{font-size:13.5px;font-weight:700;display:flex;flex-direction:column}
.cv-picks figcaption small{font-weight:600;color:var(--muted)}