/* Cutline shared parts (plan step 5). Every part selector once, in c2-app source order, tokens renamed to --cl-*.
   Loaded by the document (design pages, the hub) and adopted by every frame's shadow root. Inside a frame the root element carries
   .root, .th-light or .th-dark, .dev on a phone frame and .motion-on when motion is playing; the legacy body.motion-on rules read .motion-on.
   Additive-only after step 12. Legacy-only MMI values live in legacy/mmi.css until step 12 removes them. */
/* ---------- base ---------- */
.th-dark [data-sub=hubs192]{--cl-sub:#F87171;--cl-tint:rgba(220,38,38,.2)}
.th-dark [data-sub=poph192]{--cl-sub:#A78BFA;--cl-tint:rgba(124,58,237,.22)}
.th-dark [data-sub=bioc192]{--cl-sub:#4ADE80;--cl-tint:rgba(22,163,74,.2)}
.th-dark [data-sub=math130]{--cl-sub:#60A5FA;--cl-tint:rgba(37,99,235,.2)}
.th-dark [data-sub=stat115]{--cl-sub:#FBBF24;--cl-tint:rgba(217,119,6,.2)}
.th-dark [data-sub=maor102]{--cl-sub:#FB923C;--cl-tint:rgba(234,88,12,.2)}
.th-dark [data-sub=mmi]{--cl-sub:#5EEAD4;--cl-tint:rgba(15,118,110,.22)}
.th-dark [data-sub=med2]{--cl-sub:#93C5FD;--cl-tint:rgba(37,99,235,.2)}
.th-dark [data-sub=anki]{--cl-sub:#93C5FD;--cl-tint:rgba(37,99,235,.2)}
*{box-sizing:border-box}
[hidden]{display:none!important}
body,.root{margin:0;background:var(--cl-paper);color:var(--cl-ink);font-family:var(--cl-font-text);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img{display:block}
a{color:var(--cl-link);text-decoration:none}
button{font-family:var(--cl-font-text);color:inherit;-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--cl-blue);outline-offset:2px}
h1,h2,h3,.d{font-family:var(--cl-font-display);font-weight:600;line-height:1.12;margin:0;text-wrap:balance;letter-spacing:-0.02em;color:var(--cl-ink)}
p{margin:0;text-wrap:pretty}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--cl-muted)}
.body{color:var(--cl-body)}
.row{display:flex;align-items:center}
.col{display:flex;flex-direction:column}
/* ---------- buttons ---------- */
.wrap{width:100%;max-width:1520px;margin:0 auto;padding-left:var(--cl-gut);padding-right:var(--cl-gut)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;border-radius:12px;font-family:var(--cl-font-text);font-size:14px;font-weight:600;line-height:1;border:0;cursor:pointer;text-decoration:none;white-space:nowrap;transition:transform 200ms var(--cl-ease),background-color 160ms var(--cl-ease),box-shadow 200ms var(--cl-ease),color 160ms var(--cl-ease);-webkit-tap-highlight-color:transparent}
.btn-p{background:var(--cl-blue);color:#fff;box-shadow:0 1px 2px rgba(23,26,33,.2),0 6px 16px rgba(37,99,235,.28)}
.btn-p:hover{background:var(--cl-blue-2);color:#fff}
.btn-s{background:var(--cl-card);color:var(--cl-ink);box-shadow:inset 0 0 0 1px var(--cl-line-2)}
.btn-s:hover{background:var(--cl-paper-2);color:var(--cl-ink)}
.btn-lg{height:52px;padding:0 28px;font-size:16px;border-radius:14px}
.btn[aria-disabled=true]{opacity:.5;cursor:default;box-shadow:inset 0 0 0 1px var(--cl-line-2);background:var(--cl-paper-2);color:var(--cl-muted)}
.btn:active{transform:scale(.96)!important;transition-duration:70ms!important}
@media (hover:hover){
  .btn:hover{transform:translateY(-1px)}
  .btn[aria-disabled=true]:hover{transform:none}
}
.quiet{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;min-width:44px;padding:0 8px;background:none;border:0;font-size:14px;font-weight:500;color:var(--cl-link);cursor:pointer;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:text-decoration-color 160ms var(--cl-ease)}
.quiet:hover{text-decoration-color:currentColor}
/* ---------- parts, in c2-app order ---------- */
.sys .row3{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.ch{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;border-bottom:1px solid var(--cl-line);background:var(--cl-paper);flex:none;gap:12px}
.dev .ch{height:56px;padding:0 10px 0 12px}
.brand{display:inline-flex;align-items:center;gap:8px;height:44px;background:none;border:0;padding:0 8px 0 0;cursor:pointer;color:var(--cl-ink);border-radius:12px;flex:none}
.brand:hover{background:var(--cl-paper-2)}
.brand .mk{width:26px;height:26px;object-fit:contain}
.brand .wm{font-size:19px}
.brand .pn{font-size:12px;font-weight:600;color:var(--cl-body);padding:3px 8px;border-radius:999px;background:var(--cl-paper-2);line-height:1.3}
.brand:hover .pn{background:var(--cl-card);box-shadow:inset 0 0 0 1px var(--cl-line)}
.brand .cv{width:14px;height:14px;color:var(--cl-muted);margin-left:-4px}
.dev .brand .wm{font-size:17px}
.dev .brand{gap:6px}
.ch .left{display:flex;align-items:center;gap:18px;min-width:0}
.tabs{display:flex;gap:2px}
.tab{height:44px;padding:0 14px;border-radius:10px;display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--cl-body);background:none;border:0;cursor:pointer}
.tab svg{width:19px;height:19px;flex:none}
.tab:hover{color:var(--cl-ink)}
.tab.on{background:var(--cl-paper-2);color:var(--cl-ink);font-weight:600}
.ch .right{display:flex;align-items:center;gap:4px;flex:none}
.ibtn{position:relative;width:44px;height:44px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:none;border:0;color:var(--cl-body);cursor:pointer}
.ibtn:hover{background:var(--cl-paper-2);color:var(--cl-ink)}
.ibtn.on{background:var(--cl-paper-2);color:var(--cl-ink)}
.ibtn svg{width:21px;height:21px}
.ibtn[data-tip]::after{content:attr(data-tip);position:absolute;top:calc(100% + 2px);left:50%;transform:translateX(-50%);background:var(--cl-ink);color:var(--cl-paper);font-size:12px;font-weight:500;padding:5px 9px;border-radius:8px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity 120ms var(--cl-ease);z-index:30}
.ibtn:hover::after,.ibtn:focus-visible::after{opacity:1}
.dev .ibtn[data-tip]::after{display:none}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--cl-accent);color:var(--cl-accent-ink);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex:none}
.ch .right .avatar{margin-left:6px}
.mtabs{height:76px;border-top:1px solid var(--cl-line);background:var(--cl-paper);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));flex:none;padding:6px 6px 0}
.mtab{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;font-size:12px;font-weight:500;color:var(--cl-body);background:none;border:0;padding:6px 0 0;cursor:pointer;min-height:44px;font-family:var(--cl-font-text)}
.mtab.on{color:var(--cl-link);font-weight:600}
.mtab svg{width:22px;height:22px}
.ap-body{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;-webkit-overflow-scrolling:touch}
.page{width:100%;max-width:760px;margin:0 auto;padding:28px 24px 56px;display:flex;flex-direction:column;gap:22px}
.dev .page{padding:16px 16px 32px;gap:18px}
.page h1{font-size:30px}
.dev .page h1{font-size:26px}
.page>.body{margin-top:-10px;font-size:15px;line-height:1.55}
.dev .page>.body{margin-top:-8px}
.crumb{display:flex;align-items:center;height:48px;padding:0 20px;gap:10px;border-bottom:1px solid var(--cl-line);font-size:14px;flex:none;color:var(--cl-body)}
.dev .crumb{padding:0 8px 0 12px}
.crumb .bk{display:inline-flex;align-items:center;gap:6px;height:44px;min-width:44px;padding:0 6px;margin-left:-6px;background:none;border:0;color:var(--cl-body);cursor:pointer;font-size:14px;font-family:var(--cl-font-text);border-radius:10px;flex:none}
.crumb .bk:hover{background:var(--cl-paper-2);color:var(--cl-ink)}
.crumb img{width:22px;height:22px;object-fit:contain;flex:none}
.crumb b{color:var(--cl-ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.crumb .rt{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:10px;font-variant-numeric:tabular-nums}
.card{background:var(--cl-card);border:1px solid var(--cl-line);border-radius:20px;box-shadow:var(--cl-shadow-1);padding:24px;min-width:0}
.dev .card{padding:18px;border-radius:18px}
.card h2{font-size:20px}
.card .h3{font-size:14px;font-weight:600;color:var(--cl-body);margin-top:6px}
.card .h3.sp{margin-top:18px}
.card>.body{font-size:15px;line-height:1.55;margin-top:6px}
.card .big{font-family:var(--cl-font-display);font-size:34px;font-weight:600;letter-spacing:-0.02em;line-height:1.1;margin-top:10px;font-variant-numeric:tabular-nums;color:var(--cl-sub)}
.card .when{font-size:15px;color:var(--cl-body);margin-top:6px;line-height:1.5}
.acts{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.card .acts{margin-top:18px}
.dev .acts{flex-direction:column;align-items:stretch;gap:8px}
.dev .acts .btn{width:100%}
.dev .acts .quiet{align-self:flex-start;padding:0 2px}
.bar{display:block;height:8px;border-radius:999px;background:var(--cl-paper-2);overflow:hidden;flex:1;min-width:60px}
.bar i{display:block;height:100%;border-radius:999px;background:var(--cl-sub);width:0}
.motion-on .bar i{transition:width 700ms var(--cl-ease)}
.pct{font-size:13px;font-weight:600;color:var(--cl-sub);width:40px;text-align:right;flex:none}
.nm{font-size:13px;color:var(--cl-muted);flex:none}
.tick{width:22px;height:22px;border-radius:50%;background:var(--cl-success);display:inline-flex;align-items:center;justify-content:center;flex:none}
.lock{width:22px;height:22px;border-radius:50%;background:var(--cl-paper-2);display:inline-flex;align-items:center;justify-content:center;flex:none;color:var(--cl-body)}
.lrows{display:flex;flex-direction:column;gap:8px}
.lrow{display:flex;align-items:center;gap:12px;min-height:60px;padding:10px 14px;border-radius:12px;background:var(--cl-card);box-shadow:inset 0 0 0 1px var(--cl-line);width:100%;border:0;text-align:left;font-family:var(--cl-font-text);color:var(--cl-ink);cursor:pointer;transition:background-color 140ms var(--cl-ease);min-width:0}
button.lrow:hover{background:var(--cl-paper-2)}
div.lrow{cursor:default}
.lrow .ld{width:38px;height:38px;flex:none;display:inline-flex;align-items:center;justify-content:center}
.lrow .ld.no{font-family:var(--cl-font-display);font-weight:600;font-size:22px;line-height:1;letter-spacing:-0.02em;color:var(--cl-sub)}
.lrow .ld.no.t{font-size:14px;font-family:var(--cl-font-text);font-weight:600}
.lrow .ld.ic{border-radius:11px;background:var(--cl-tint);color:var(--cl-sub)}
.lrow .ld.ic img{width:24px;height:24px;object-fit:contain}
.lrow .ld.ic svg{width:19px;height:19px}
.lrow .ld.ic.plain{background:var(--cl-paper-2);color:var(--cl-body)}
.lrow .st{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.lrow .lb{font-size:15px;font-weight:500;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lrow .lb b{font-weight:600}
.lrow .lb.multi{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.lrow .sub{font-size:13px;color:var(--cl-muted);line-height:1.4;margin-top:-2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lrow .sub b{color:var(--cl-warning);font-weight:600}
.lrow .pr{display:flex;align-items:center;gap:10px}
.lrow .ct{font-size:13px;color:var(--cl-body);flex:none;font-variant-numeric:tabular-nums;min-width:40px;text-align:right}
.lrow .go{flex:none;font-size:14px;font-weight:600;color:var(--cl-link)}
.lrow .sc{font-family:var(--cl-font-display);font-size:18px;font-weight:600;flex:none;font-variant-numeric:tabular-nums;color:var(--cl-sub)}
.lrow .sc.nm{font-family:var(--cl-font-text);font-size:13px;font-weight:500;color:var(--cl-muted)}
.lrow .chev{flex:none}
.lrow .btn{flex:none}
.lrow.locked{cursor:default}
.lrow.locked:hover{background:var(--cl-card)}
.lrow.locked .lb,.lrow.locked .ld.no{color:var(--cl-muted)}
button.lrow:hover .lb{color:var(--cl-ink)}
.dev .lrow .lb{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.dev .lrow .sub{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lgrp{display:flex;flex-direction:column;border-radius:12px;box-shadow:inset 0 0 0 1px var(--cl-line);background:var(--cl-card);overflow:hidden}
.lgrp .lrow{box-shadow:none;border-radius:0}
.lgrp .lrow.nest{min-height:52px;padding:8px 14px 10px 14px;border-top:1px solid var(--cl-line);background:var(--cl-card)}
.lgrp .lrow.nest .ld{width:38px;height:28px}
.lgrp .lrow.nest .ld svg{width:17px;height:17px;color:var(--cl-sub)}
.lgrp .lrow.nest .lb{font-size:14px}
.lgrp .lrow.nest .lb i{font-style:normal;color:var(--cl-muted);font-weight:500}
button.lrow.nest:hover{background:var(--cl-paper-2)}
.ap-mod{display:flex;align-items:baseline;gap:10px;padding:16px 0 6px}
.ap-mod h2{font-size:18px}
.ap-mod span{font-size:13px;color:var(--cl-muted)}
.ap-mod .rt{margin-left:auto;font-variant-numeric:tabular-nums}
.seg{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--cl-paper-2);border-radius:12px;padding:4px;gap:2px;width:100%}
.seg button{height:44px;border:0;border-radius:9px;background:transparent;font:500 14px var(--cl-font-text);color:var(--cl-body);cursor:pointer;padding:0 14px;white-space:nowrap}
.seg button.on{background:var(--cl-card);color:var(--cl-ink);font-weight:600;box-shadow:var(--cl-shadow-1)}
.seg.sm{width:auto;align-self:flex-start}
.dev .seg.sm{width:100%}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{height:44px;padding:0 14px;border-radius:999px;border:0;background:var(--cl-paper-2);color:var(--cl-body);font:500 14px var(--cl-font-text);cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.chip.on{background:var(--cl-ink);color:var(--cl-paper)}
.chip.sub.on{background:var(--cl-tint);color:var(--cl-sub);box-shadow:inset 0 0 0 1.5px var(--cl-sub)}
.chip img{width:18px;height:18px;object-fit:contain}
.chip svg{width:16px;height:16px}
.sel{height:44px;border-radius:12px;border:1px solid var(--cl-line-2);background:var(--cl-card);color:var(--cl-ink);padding:0 12px;font:14px var(--cl-font-text);max-width:100%}
.pick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.dev .pick{grid-template-columns:repeat(2,minmax(0,1fr))}
.pick button{display:flex;align-items:center;gap:8px;min-height:48px;padding:0 12px;border-radius:12px;border:0;background:var(--cl-paper-2);color:var(--cl-body);font:600 14px var(--cl-font-text);cursor:pointer;transition:background-color 160ms var(--cl-ease),box-shadow 160ms var(--cl-ease),color 160ms var(--cl-ease),transform 200ms var(--cl-ease)}
.pick button img{width:26px;height:26px;object-fit:contain;flex:none}
.pick button.on{background:var(--cl-tint);color:var(--cl-ink);box-shadow:inset 0 0 0 2px var(--cl-sub)}
.pick button.locked{opacity:.55}
.pick button .lock{margin-left:auto;width:18px;height:18px}
.pick button:active{transform:scale(.96)}
.pill{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:999px;background:var(--cl-card);box-shadow:inset 0 0 0 1px var(--cl-line);font-size:13px;font-weight:600}
.pill i{width:8px;height:8px;border-radius:50%;background:var(--cl-success);display:inline-block}
.cc{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--cl-paper-2);font-size:14px;color:var(--cl-body);line-height:1.45}
.cc svg{flex:none}
.cc span{flex:1;min-width:0}
.cc .quiet{flex:none;padding:0 4px}
.dev .cc{flex-wrap:wrap}
.dev .cc span{flex:1 1 calc(100% - 30px)}
.dev .cc .quiet{margin-left:30px}
.cline{font-size:14px;color:var(--cl-body);line-height:1.5;padding:12px 14px;border-radius:12px;background:var(--cl-paper-2)}
.cline .quiet{font-weight:600;padding:0 4px;min-height:44px;margin:-12px 0;display:inline-flex;vertical-align:middle}
.ov{position:absolute;inset:0;background:var(--cl-scrim);display:flex;align-items:center;justify-content:center;padding:24px;z-index:5}
.dev .ov{align-items:flex-end;padding:0}
.ov.menu{align-items:flex-start;justify-content:flex-start;padding:70px 0 0 20px}
.dev .ov.menu{align-items:flex-end;padding:0}
.sheet{width:100%;max-width:440px;background:var(--cl-card);border-radius:24px;box-shadow:var(--cl-shadow-sheet);padding:24px;display:flex;flex-direction:column;gap:10px}
.dev .sheet{max-width:none;border-radius:26px 26px 0 0;padding:20px 16px 36px}
.motion-on .sheet{animation:up 360ms var(--cl-spring) both}
@keyframes up{from{transform:translateY(28px);opacity:0}to{transform:none;opacity:1}}
.sheet h2{font-size:20px;padding:0 8px}
.sheet .sum{font-size:14px;color:var(--cl-body);line-height:1.5;padding:0 8px 4px}
.sheet .fld{display:flex;flex-direction:column;gap:6px;padding:4px 8px}
.sheet .fld h3{font-size:14px;font-weight:600;color:var(--cl-body)}
.sheet .fld .muted{font-size:13px}
.sheet .btn-lg{margin-top:6px}
.sheet .mrow{display:flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:0 12px;border-radius:12px;border:0;background:none;text-align:center;font:500 15px var(--cl-font-text);color:var(--cl-body);cursor:pointer;width:100%}
.sheet .mrow:hover{background:var(--cl-paper-2);color:var(--cl-ink)}
.sheet .srow{display:flex;align-items:center;gap:14px;min-height:64px;padding:8px 12px;border-radius:14px;border:0;background:none;text-align:left;font-family:var(--cl-font-text);color:var(--cl-ink);cursor:pointer;width:100%}
.sheet .srow:hover{background:var(--cl-paper-2)}
.sheet .srow.cur{background:var(--cl-tint)}
.sheet .srow .ic{width:42px;height:42px;border-radius:12px;background:var(--cl-tint);color:var(--cl-sub);display:inline-flex;align-items:center;justify-content:center;flex:none}
.sheet .srow .ic img{width:28px;height:28px;object-fit:contain}
.sheet .srow .ic svg{width:22px;height:22px}
.sheet .srow .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sheet .srow .lb{font-size:16px;font-weight:600}
.sheet .srow .mt{font-size:13px;color:var(--cl-muted);line-height:1.4}
.home{width:100%;max-width:1080px;margin:0 auto;padding:36px 28px 56px;display:flex;flex-direction:column;gap:28px}
.dev .home{padding:14px 16px 32px;gap:16px}
.greet{display:flex;align-items:center;gap:14px}
.greet .avatar{width:44px;height:44px;font-size:16px}
.dev .greet .avatar{width:38px;height:38px;font-size:14px}
.greet h1{font-size:30px}
.dev .greet h1{font-size:24px}
.greet p{font-size:14px;color:var(--cl-muted)}
.home-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:24px;align-items:start}
.home-grid>*{min-width:0}
.dev .home-grid{grid-template-columns:1fr;gap:16px}
.side{display:flex;flex-direction:column;gap:24px}
.dev .side{gap:16px}
.card .lrows{margin-top:12px}
.mind p.q{font-size:15px;color:var(--cl-body);margin-top:6px}
.mood{width:100%;margin:16px 0 4px;height:44px;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer}
.mood::-webkit-slider-runnable-track{height:8px;border-radius:999px;background:linear-gradient(to right,var(--cl-blue) 0,var(--cl-blue) var(--fill,50%),var(--cl-paper-2) var(--fill,50%),var(--cl-paper-2) 100%)}
.mood::-moz-range-track{height:8px;border-radius:999px;background:var(--cl-paper-2)}
.mood::-moz-range-progress{height:8px;border-radius:999px;background:var(--cl-blue)}
.mood::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:var(--cl-card);box-shadow:0 0 0 2px var(--cl-blue),0 2px 6px rgba(0,0,0,.2);margin-top:-9px}
.mood::-moz-range-thumb{width:24px;height:24px;border:0;border-radius:50%;background:var(--cl-card);box-shadow:0 0 0 2px var(--cl-blue),0 2px 6px rgba(0,0,0,.2)}
.moods{display:flex;justify-content:space-between;font-size:20px;padding:0 2px}
.moods span{opacity:.4;transition:opacity 160ms var(--cl-ease)}
.moods span.on{opacity:1}
.mind .after{margin-top:16px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.mind .after p{font-size:14px;color:var(--cl-body)}
.breathe{position:absolute;inset:0;z-index:8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:24px;text-align:center}
.th-light .breathe,.breathe{background:linear-gradient(160deg,#E0E7FF 0%,#F3E8FF 55%,#FCE7F3 100%);color:#2E1065}
.th-dark .breathe{background:linear-gradient(160deg,#1B1F3A 0%,#2A1F45 55%,#3A1F3A 100%);color:#EDE9FE}
.breathe .exit{position:absolute;top:20px;right:20px}
.dev .breathe .exit{top:56px;right:16px}
.breathe .circle{width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(139,92,246,.45),rgba(99,102,241,.15));box-shadow:0 0 0 18px rgba(139,92,246,.12),0 0 0 36px rgba(139,92,246,.06);opacity:.55;transform:scale(.72)}
.motion-on .breathe .circle{transition:transform 3.8s linear,opacity 3.8s linear}
.root:not(.motion-on) .breathe .circle{transition:opacity 600ms var(--cl-ease);transform:none}
.breathe .circle[data-big="1"]{opacity:1}
.motion-on .breathe .circle[data-big="1"]{transform:scale(1.15)}
.breathe h2{font-size:44px;font-weight:500;letter-spacing:-0.01em;color:inherit}
.dev .breathe h2{font-size:36px}
.breathe .cyc{font-size:15px;opacity:.75}
.breathe .pbar{width:240px;height:4px;border-radius:2px;background:rgba(255,255,255,.35);overflow:hidden}
.th-dark .breathe .pbar{background:rgba(255,255,255,.14)}
.breathe .pbar i{display:block;height:100%;background:#7C3AED;width:25%}
.motion-on .breathe .pbar i{transition:width 3.8s linear}
.bcard{background:var(--cl-card);border:1px solid var(--cl-line);border-radius:24px;box-shadow:var(--cl-shadow-2);padding:32px;display:flex;flex-direction:column;gap:26px;position:relative;min-width:0}
.dev .bcard{padding:22px 18px;border-radius:20px;gap:22px}
.fldset{display:flex;flex-direction:column;gap:10px;min-width:0}
.fldset .fh{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.fldset h2{font-size:16px}
.fldset .fh span{font-size:13px;color:var(--cl-muted);font-variant-numeric:tabular-nums}
.mods{display:flex;flex-direction:column;gap:8px}
.mod{border-radius:14px;box-shadow:inset 0 0 0 1px var(--cl-line);background:var(--cl-card);overflow:hidden}
.mod.on{box-shadow:inset 0 0 0 1.5px var(--cl-sub)}
.modhd{display:flex;align-items:stretch;min-height:60px}
.mod.on .modhd,.mod.part .modhd{background:var(--cl-tint)}
.modpie{width:56px;flex:none;border:0;background:none;color:var(--cl-sub);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0 0 0 4px;font-family:var(--cl-font-text)}
.modpie:hover{color:var(--cl-ink)}
.mod.on .modpie:hover,.mod.part .modpie:hover{color:var(--cl-sub);filter:brightness(.85)}
.pie{width:24px;height:24px;display:block}
.modh{flex:1;min-width:0;display:flex;align-items:center;gap:12px;min-height:60px;padding:8px 14px 8px 2px;border:0;background:none;text-align:left;font-family:var(--cl-font-text);color:var(--cl-ink);cursor:pointer}
.modh:hover{background:rgba(23,26,33,.04)}
.th-dark .modh:hover{background:rgba(255,255,255,.05)}
.modh .lb{flex:1;min-width:0;font-size:15px;font-weight:600;line-height:1.3}
.modh .ct{font-size:13px;color:var(--cl-muted);font-variant-numeric:tabular-nums;flex:none}
.mod.on .modh .ct,.mod.part .modh .ct{color:var(--cl-sub)}
.modh .mcv{width:18px;height:18px;flex:none;color:var(--cl-muted);transition:transform 200ms var(--cl-ease)}
.modh[aria-expanded=true] .mcv{transform:rotate(180deg)}
.mod .lrows{gap:0;border-top:1px solid var(--cl-line)}
.mod .lrow{box-shadow:none;border-radius:0;min-height:56px;padding:8px 14px 8px 12px;border-bottom:1px solid var(--cl-line)}
.mod .lrow:last-child{border-bottom:0}
.mod .lrow.on{background:var(--cl-tint)}
.mod .lrow.nest{padding-left:26px;min-height:50px}
.mod .lrow.nest .ld{width:32px}
.ck{width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--cl-line-2);background:var(--cl-card);flex:none;display:inline-flex;align-items:center;justify-content:center;color:#fff}
.ck svg{width:12px;height:12px;opacity:0}
.on>.ck,.ck.on{background:var(--cl-sub);box-shadow:none}
.on>.ck svg,.ck.on svg{opacity:1}
.ck.part{box-shadow:inset 0 0 0 1.5px var(--cl-sub)}
.ck.part::after{content:'';width:8px;height:2px;border-radius:1px;background:var(--cl-sub)}
.bsum{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:15px;color:var(--cl-body);line-height:1.4}
.bsum b.n{font-family:var(--cl-font-display);font-weight:600;font-size:44px;letter-spacing:-0.03em;line-height:1;color:var(--cl-sub);font-variant-numeric:tabular-nums}
.dev .bsum b.n{font-size:38px}
.bcard>.btn{width:100%}
.breason{font-size:14px;color:var(--cl-body);text-align:center;margin-top:-14px}
.ap-hd{display:flex;align-items:center;gap:18px;padding:22px 24px;border-radius:20px;background:var(--cl-tint)}
.dev .ap-hd{padding:18px;gap:14px;flex-wrap:wrap}
.ap-hd img{width:56px;height:56px;object-fit:contain;flex:none}
.dev .ap-hd img{width:44px;height:44px}
.ap-hd h1{font-size:28px}
.dev .ap-hd h1{font-size:24px}
.ap-hd .sn{font-size:14px;color:var(--cl-body);margin-top:-2px}
.ap-hd .all{display:flex;align-items:center;gap:10px;margin-top:10px;max-width:360px}
.ap-hd .all .bar{background:rgba(255,255,255,.7)}
.th-dark .ap-hd .all .bar{background:rgba(0,0,0,.25)}
.ap-hd .quiet{flex:none;margin-left:auto;font-weight:600}
.dev .ap-hd .quiet{flex-basis:100%;margin-left:58px;justify-content:flex-start;padding:0;min-height:44px;margin-top:-12px;margin-bottom:-10px}
.wtop{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border-radius:14px;background:var(--cl-paper-2);font-size:14px;color:var(--cl-body);line-height:1.45}
.dev .wtop{flex-direction:column;align-items:stretch;gap:10px}
.wtop span{flex:1;min-width:0}
.wtop .btn{flex:none}
.wpr{display:flex;flex-direction:column;gap:12px;font-size:17px;line-height:1.5;color:var(--cl-ink)}
.wpr p{font-family:var(--cl-font-display);font-weight:600;font-size:19px;line-height:1.4}
.dev .wpr p{font-size:18px}
.wpr p.stim{font-family:var(--cl-font-text);font-weight:400;font-size:16px;color:var(--cl-body)}
.wpr .m{color:var(--cl-sub);font-weight:600;white-space:nowrap}
.tg{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--cl-muted)}
.tg .pill{height:30px;font-size:12px}
.ans{width:100%;min-height:240px;resize:vertical;border-radius:14px;border:1px solid var(--cl-line-2);background:var(--cl-card);color:var(--cl-ink);padding:14px 16px;font:16px/1.55 var(--cl-font-text)}
.dev .ans{min-height:200px}
.inkbox{width:100%;min-height:240px;border-radius:14px;border:1px dashed var(--cl-line-2);background:var(--cl-card);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--cl-muted);font-size:14px;padding:16px;text-align:center}
.inkbox svg{width:220px;max-width:100%;height:auto}
.wtools{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.wtools .seg{width:auto}
.wtools .wc{font-size:13px;color:var(--cl-muted);font-variant-numeric:tabular-nums}
.wtimer{font-variant-numeric:tabular-nums;font-weight:600;color:var(--cl-ink)}
.mdl{display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:16px;background:var(--cl-card);box-shadow:inset 0 0 0 1px var(--cl-line)}
.dev .mdl{padding:16px}
.mdl h2{font-size:17px}
.mdl p{font-size:15px;line-height:1.6;color:var(--cl-ink)}
.mine{padding:14px 16px;border-radius:14px;background:var(--cl-paper-2);font-size:15px;line-height:1.55;color:var(--cl-body);white-space:pre-wrap}
.mine.empty{color:var(--cl-muted)}
.selfmark{display:flex;flex-direction:column;gap:8px}
.selfmark h2{font-size:17px}
.selfmark label{display:flex;align-items:flex-start;gap:12px;min-height:52px;padding:12px 14px;border-radius:12px;background:var(--cl-card);box-shadow:inset 0 0 0 1px var(--cl-line);font-size:15px;line-height:1.45;cursor:pointer}
.selfmark label.on{background:var(--cl-success-bg);box-shadow:inset 0 0 0 1.5px var(--cl-success)}
.selfmark input{width:22px;height:22px;accent-color:var(--cl-success);margin:2px 0 0;flex:none}
.selfmark .marks{flex:none;font-size:13px;font-weight:600;color:var(--cl-sub);font-variant-numeric:tabular-nums;padding-top:2px}
.selfmark label span.txt{flex:1;min-width:0}
.score{display:flex;align-items:baseline;gap:8px;font-family:var(--cl-font-display);font-size:22px;font-weight:600;letter-spacing:-0.02em}
.score small{font-family:var(--cl-font-text);font-size:14px;font-weight:500;color:var(--cl-muted);letter-spacing:0}
.qr{flex:1;display:flex;flex-direction:column;min-height:0}
.qr-b{padding:28px 24px 40px;display:flex;flex-direction:column;gap:18px;width:100%;max-width:680px;margin:0 auto}
.dev .qr-b{padding:20px 16px 32px;gap:16px}
.qr-b .stem{font-family:var(--cl-font-display);font-size:22px;font-weight:600;line-height:1.35}
.dev .qr-b .stem{font-size:20px}
.opts{display:flex;flex-direction:column;gap:8px}
.opt{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:var(--cl-card);box-shadow:inset 0 0 0 1px var(--cl-line);font-size:16px;line-height:1.4;text-align:left;color:var(--cl-ink);border:0;width:100%;min-height:52px;font-family:var(--cl-font-text);cursor:pointer;transition:background-color 140ms var(--cl-ease)}
.opt:hover{background:var(--cl-paper-2)}
.opt .k{flex:none;width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;box-shadow:inset 0 0 0 1px var(--cl-line);color:var(--cl-body)}
.opt.right{box-shadow:inset 0 0 0 1.5px var(--cl-success);background:var(--cl-success-bg)}
.opt.right .k{background:var(--cl-success);color:#fff;box-shadow:none}
.opt.wrong{box-shadow:inset 0 0 0 1.5px var(--cl-danger);background:var(--cl-danger-bg)}
.opt.wrong .k{background:var(--cl-danger);color:#fff;box-shadow:none}
.opt.dim{color:var(--cl-body);cursor:default}
.opt.dim:hover{background:var(--cl-card)}
.qfoot{display:flex;flex-direction:column;gap:8px;padding-top:14px;border-top:1px solid var(--cl-line)}
.qfoot .lead{font-size:15px;font-weight:600}
.qfoot .lead.ok{color:var(--cl-success-text)}
.qfoot .lead.no{color:var(--cl-danger)}
.qfoot .qwhy{font-size:15px;color:var(--cl-body);line-height:1.55}
.qacts{display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:center;gap:12px;padding-top:4px}
.qacts .r{display:flex;gap:8px;align-items:center;flex:none}
.qacts .ql{display:flex;gap:4px;align-items:center;min-width:0;flex-wrap:wrap}
.dev .qacts{flex-direction:column;align-items:stretch}
.dev .qacts .r{flex-direction:column;align-items:stretch}
.dev .qacts .btn{width:100%}
.dev .qacts .ql{justify-content:center}
.roro{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:16px;background:var(--cl-blue-bg);border:1px solid var(--cl-blue-bd)}
.roro img{width:40px;height:40px;object-fit:contain;flex:none}
.roro .b{font-size:15px;line-height:1.5;color:var(--cl-ink);flex:1;min-width:0}
.roro .b small{display:block;font-size:12px;color:var(--cl-muted);margin-top:8px}
.roro .ask{margin-top:10px;display:flex;gap:8px}
.roro .ask input{flex:1;height:44px;border-radius:10px;border:1px solid var(--cl-line-2);background:var(--cl-card);color:var(--cl-ink);padding:0 12px;font:14px var(--cl-font-text);min-width:0}
.cch{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:32px;align-items:center;padding:4px 0}
.dev .cch{grid-template-columns:1fr;gap:20px;padding:0}
.cch .txt{display:flex;flex-direction:column;gap:10px;min-width:0}
.cch h1{font-size:30px}
.dev .cch h1{font-size:26px}
.cch .txt p{font-size:15px;line-height:1.55;color:var(--cl-body)}
.cch .vis{min-width:0}
.dev .cch .vis{order:-1}
.ccv{display:flex;flex-direction:column;align-items:center;gap:14px}
.fan{position:relative;width:100%;max-width:300px;height:172px}
.fc{position:absolute;left:0;right:0;top:14px;min-height:134px;border-radius:16px;background:var(--cl-card);border:1px solid var(--cl-line);box-shadow:var(--cl-shadow-2);padding:14px 16px;display:flex;flex-direction:column;gap:8px;transform-origin:50% 100%;overflow:hidden}
.fc::before{content:'';position:absolute;left:0;right:0;top:0;height:4px;background:var(--cl-sub)}
.fc .fh{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--cl-muted);min-width:0}
.fc .fh img{width:18px;height:18px;object-fit:contain;flex:none}
.fc .fh span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fc .fh i{font-style:normal;font-size:11px;font-weight:600;color:var(--cl-sub);background:var(--cl-tint);padding:2px 8px;border-radius:999px;flex:none}
.fc .ft{font-family:var(--cl-font-display);font-size:16px;font-weight:600;line-height:1.35;color:var(--cl-ink);letter-spacing:-0.01em}
.fc .ft .cz{display:inline-block;min-width:44px;padding:0 8px;border-radius:6px;background:var(--cl-paper-2);color:var(--cl-muted);text-align:center;box-shadow:inset 0 -2px 0 var(--cl-line-2);letter-spacing:.1em}
.fc.f3{transform:rotate(-7deg) translate(-16px,-4px);opacity:.85}
.fc.f2{transform:rotate(6deg) translate(18px,0);opacity:.92}
@keyframes deal{from{opacity:0;translate:0 28px}to{translate:0 0}}
.cclink{display:flex;align-items:center;gap:10px;width:100%;max-width:300px}
.cclink .lm{width:38px;height:38px;border-radius:12px;background:var(--cl-card);box-shadow:inset 0 0 0 1px var(--cl-line);display:inline-flex;align-items:center;justify-content:center;flex:none}
.cclink .lm img{width:26px;height:26px;object-fit:contain}
.cclink .lm.anki{background:var(--cl-tint);color:var(--cl-sub);box-shadow:none}
.cclink .lm.anki svg{width:20px;height:20px}
.cclink .ll{flex:1;height:2px;position:relative;background-image:linear-gradient(90deg,var(--cl-line-2) 0 6px,transparent 6px 12px);background-size:12px 2px;background-repeat:repeat-x}
.cclink .ll::after{content:'';position:absolute;top:-4px;left:calc(100% - 10px);width:10px;height:10px;border-radius:50%;background:var(--cl-sub);opacity:0}
.cclink.on .ll{background-image:linear-gradient(90deg,var(--cl-sub) 0 6px,transparent 6px 12px)}
.cclink.on .ll::after{opacity:1}
@keyframes travel{0%{left:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:calc(100% - 10px);opacity:1}}
.pill.off i{background:var(--cl-line-2)}
.stk{position:relative;display:inline-block;width:64px;height:62px;flex:none}
.stk i{position:absolute;left:5px;right:5px;top:0;bottom:10px;border-radius:10px;background:var(--cl-card);box-shadow:inset 0 0 0 1px var(--cl-line-2)}
.stk i:nth-child(2){top:5px;bottom:5px;left:2.5px;right:2.5px}
.stk b{position:absolute;left:0;right:0;top:10px;bottom:0;border-radius:10px;background:var(--cl-tint);color:var(--cl-sub);box-shadow:inset 0 0 0 1.5px var(--cl-sub);display:flex;align-items:center;justify-content:center;font-family:var(--cl-font-display);font-size:24px;font-weight:600;letter-spacing:-0.02em;font-variant-numeric:tabular-nums}
.stk.sm{width:38px;height:36px}
.stk.sm i{left:3px;right:3px;bottom:6px;border-radius:7px}
.stk.sm i:nth-child(2){top:3px;bottom:3px;left:1.5px;right:1.5px}
.stk.sm b{top:6px;border-radius:7px;font-size:14px}
.stk.empty b{background:var(--cl-paper-2);color:var(--cl-muted);box-shadow:inset 0 0 0 1.5px var(--cl-line-2)}
.due{display:flex;align-items:center;gap:16px;margin-top:12px}
.due .dt{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.due .dt b{font-family:var(--cl-font-display);font-size:22px;font-weight:600;letter-spacing:-0.02em;line-height:1.15;color:var(--cl-ink)}
.due .dt b em{font-style:normal;color:var(--cl-sub)}
.due .dt span{font-size:14px;color:var(--cl-body);line-height:1.5}
.pick.cc{margin-top:10px}
.pick.cc button{min-height:56px}
.pick.cc button .t{display:flex;flex-direction:column;gap:1px;min-width:0;text-align:left;line-height:1.25}
.pick.cc button .t small{font-size:12px;font-weight:500;color:var(--cl-muted)}
.steps3{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.dev .steps3{grid-template-columns:1fr;gap:6px}
.steps3 li{display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:14px;background:var(--cl-paper-2);min-width:0}
.dev .steps3 li{flex-direction:row;align-items:center;gap:12px;padding:10px 12px}
.steps3 .top{display:flex;align-items:center;gap:10px;flex:none}
.steps3 .sn{width:26px;height:26px;border-radius:50%;background:var(--cl-card);box-shadow:inset 0 0 0 1px var(--cl-line-2);display:inline-flex;align-items:center;justify-content:center;font-family:var(--cl-font-display);font-weight:600;font-size:13px;color:var(--cl-ink);flex:none;font-variant-numeric:tabular-nums}
.steps3 .si{width:40px;height:40px;border-radius:12px;background:var(--cl-tint);color:var(--cl-sub);display:inline-flex;align-items:center;justify-content:center;flex:none}
.steps3 .si svg{width:20px;height:20px}
.steps3 .st{display:flex;flex-direction:column;gap:2px;min-width:0}
.steps3 .st b{font-size:14px;font-weight:600;color:var(--cl-ink);line-height:1.3}
.steps3 .st span{font-size:13px;color:var(--cl-muted);line-height:1.4}
.rv{gap:16px}
.rstack{position:relative;padding-bottom:12px}
.rstack::before,.rstack::after{content:'';position:absolute;left:12px;right:12px;bottom:6px;height:40px;border-radius:0 0 18px 18px;background:var(--cl-card);border:1px solid var(--cl-line);box-shadow:var(--cl-shadow-1)}
.rstack::after{left:24px;right:24px;bottom:0;opacity:.75}
.rstack.two::after{display:none}
.rstack.one::before,.rstack.one::after{display:none}
.rcard{position:relative;z-index:1;background:var(--cl-card);border:1px solid var(--cl-line);border-radius:20px;box-shadow:var(--cl-shadow-2);display:flex;flex-direction:column;min-height:240px;overflow:hidden}
.rcard::before{content:'';height:5px;background:var(--cl-sub);flex:none}
.dev .rcard{border-radius:18px}
.rcard .src{display:flex;align-items:center;gap:8px;padding:14px 20px 0;font-size:13px;color:var(--cl-muted);min-width:0}
.dev .rcard .src{padding:12px 18px 0}
.rcard .src img{width:20px;height:20px;object-fit:contain;flex:none}
.rcard .src span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rcard .src i{font-style:normal;font-size:11.5px;font-weight:600;color:var(--cl-sub);background:var(--cl-tint);padding:3px 9px;border-radius:999px;flex:none}
.rcard .front{padding:18px 20px 24px;font-family:var(--cl-font-display);font-size:23px;font-weight:600;line-height:1.4;flex:1;letter-spacing:-0.01em}
.dev .rcard .front{font-size:21px;padding:16px 18px 20px}
.rcard .cz{display:inline-block;min-width:64px;padding:0 10px;border-radius:8px;background:var(--cl-paper-2);color:var(--cl-muted);text-align:center;box-shadow:inset 0 -2px 0 var(--cl-line-2);letter-spacing:.12em}
.rcard .cz.open{display:inline;padding:1px 8px;border-radius:6px;background:var(--cl-tint);color:var(--cl-sub);box-shadow:inset 0 -2px 0 var(--cl-sub);letter-spacing:0;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.motion-on .rcard .cz.open{animation:fillin 560ms var(--cl-ease) both}
@keyframes fillin{from{background:var(--cl-paper-2);color:var(--cl-muted);box-shadow:inset 0 -2px 0 var(--cl-line-2)}}
.rcard .back{margin:0 20px 20px;padding:14px 16px;border-radius:12px;background:var(--cl-tint);font-size:17px;line-height:1.55;color:var(--cl-ink)}
.dev .rcard .back{margin:0 18px 18px;font-size:16px}
.motion-on .rcard .back{animation:rise 360ms var(--cl-ease) both}
@keyframes rise{from{opacity:0;translate:0 6px}to{translate:0 0}}
.grades{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-radius:14px;background:var(--cl-card);box-shadow:inset 0 0 0 1px var(--cl-line-2);overflow:hidden}
.gr{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:64px;padding:8px 4px;border:0;border-left:1px solid var(--cl-line);background:transparent;font-family:var(--cl-font-text);color:var(--cl-ink);cursor:pointer;transition:background-color 140ms var(--cl-ease)}
.gr:first-child{border-left:0}
.gr:hover,.gr:active{background:var(--cl-paper-2)}
.gr.good{background:var(--cl-success-bg)}
.gr.good:hover{background:var(--cl-success-bg);filter:brightness(.97)}
.gr b{font-size:15px;font-weight:600}
.gr span{font-size:12px;color:var(--cl-muted);font-variant-numeric:tabular-nums}
.gr.again b{color:var(--cl-danger)}
.gr.hard b{color:var(--cl-warning)}
.gr.good b{color:var(--cl-success-text)}
.gr.easy b{color:var(--cl-link)}
.rvnote{font-size:13px;color:var(--cl-muted);text-align:center;line-height:1.5}
.shead{display:flex;align-items:center;gap:10px;margin:0 0 8px}
.shead h2{font-size:18px;flex:1;min-width:0}
.shead .quiet{padding:0 4px;margin:-8px 0}
.spill{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:999px;background:var(--cl-accent);color:var(--cl-accent-ink);font-size:11.5px;font-weight:600;white-space:nowrap;flex:none}
.spill.tut{background:var(--cl-tint);color:var(--cl-sub)}
.spill.live{background:var(--cl-success-bg);color:var(--cl-success-text)}
.bust{display:block;image-rendering:pixelated}
.pav2{position:relative;width:56px;height:56px;border-radius:50%;background:var(--cl-tint);box-shadow:inset 0 0 0 2px var(--cl-sub);display:inline-flex;align-items:flex-end;justify-content:center;overflow:visible;flex:none}
.pav2 .bust{margin-bottom:0;border-radius:0 0 28px 28px}
.pav2 .pet{position:absolute;right:-8px;bottom:-4px;width:26px;height:26px;border-radius:50%;background:var(--cl-card);box-shadow:0 1px 3px rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center}
.pav2 .pet img{width:20px;height:20px;object-fit:contain}
.pav2.lg{width:88px;height:88px}
.pav2.lg .pet{width:36px;height:36px;right:-6px;bottom:-2px}
.pav2.lg .pet img{width:28px;height:28px}
.pav2.sm{width:34px;height:34px;box-shadow:inset 0 0 0 1.5px var(--cl-sub)}
.pav2.sm .pet{width:18px;height:18px;right:-6px;bottom:-3px}
.pav2.sm .pet img{width:14px;height:14px}
.pgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.dev .pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
.ptile{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px 10px;border-radius:16px;background:var(--cl-card);box-shadow:inset 0 0 0 1px var(--cl-line);border:0;font-family:var(--cl-font-text);color:var(--cl-ink);cursor:pointer;min-width:0;transition:background-color 140ms var(--cl-ease)}
.ptile:hover{background:var(--cl-paper-2)}
.ptile:active{transform:scale(.97)}
.ptile b{font-size:12.5px;font-weight:600;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ptile .on{font-size:11.5px;color:var(--cl-muted);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ptile .tk{font-size:12.5px;font-weight:600;color:var(--cl-sub);font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;gap:4px}
.ptile .tk svg{width:12px;height:12px}
.lib-hero{position:relative;border-radius:20px;overflow:hidden;background:#2A2117;min-height:190px;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:var(--cl-shadow-2)}
.dev .lib-hero{min-height:176px;border-radius:18px}
.lib-hero .room{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;image-rendering:pixelated}
.lib-hero .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,14,8,0) 30%,rgba(20,14,8,.8) 100%)}
.lib-hero .lt{position:relative;padding:16px;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;color:#fff}
.lib-hero .lt div{display:flex;flex-direction:column;gap:2px;min-width:0}
.lib-hero h2{color:#fff;font-size:22px}
.lib-hero p{font-size:13.5px;color:rgba(255,255,255,.85);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lib-hero .btn{flex:none}
.lib-hero .pets{position:absolute;left:12px;top:12px;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px 0 6px;border-radius:999px;background:rgba(20,14,8,.55);color:#fff;font-size:12.5px;font-weight:500}
.lib-hero .pets img{width:20px;height:20px;image-rendering:pixelated}
.room{position:relative;border-radius:18px;overflow:hidden;background:#2A2117;aspect-ratio:4/3;box-shadow:var(--cl-shadow-2)}
.room>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.room .stand{position:absolute;display:flex;flex-direction:column;align-items:center;gap:2px;border:0;background:none;padding:0;cursor:pointer;color:#fff;font-family:var(--cl-font-text)}
.room .stand .pav2{width:44px;height:44px;box-shadow:inset 0 0 0 2px var(--cl-sub),0 2px 6px rgba(0,0,0,.4)}
.room .stand .pav2 .pet{width:20px;height:20px;right:-6px;bottom:-3px}
.room .stand .pav2 .pet img{width:15px;height:15px}
.room .stand span{font-size:11px;font-weight:600;padding:2px 7px;border-radius:999px;background:rgba(20,14,8,.7);white-space:nowrap}
.room .hint{position:absolute;left:12px;right:12px;bottom:10px;text-align:center;font-size:12.5px;color:rgba(255,255,255,.9);text-shadow:0 1px 2px rgba(0,0,0,.7)}
.room .hpill{position:absolute;left:12px;top:12px;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px 0 6px;border-radius:999px;background:rgba(20,14,8,.6);color:#fff;font-size:12.5px;font-weight:500}
.room .hpill img{width:20px;height:20px;image-rendering:pixelated}
.msgs{display:flex;flex-direction:column;gap:12px}
.msg{display:flex;gap:10px;align-items:flex-start}
.msg .mb{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.msg .mh{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--cl-muted)}
.msg .mh b{font-size:13.5px;color:var(--cl-ink);font-weight:600}
.msg .mt{font-size:15px;line-height:1.5;color:var(--cl-ink);padding:9px 12px;border-radius:4px 14px 14px 14px;background:var(--cl-paper-2);align-self:flex-start;max-width:100%}
.msg.ask .mt{background:var(--cl-tint);box-shadow:inset 0 0 0 1.5px var(--cl-sub)}
.msg .mt small{display:block;font-size:12px;color:var(--cl-muted);margin-top:4px}
.compose{display:flex;align-items:center;gap:8px;position:sticky;bottom:0;padding:10px 0 0;background:var(--cl-paper)}
.compose .chatbox{flex:1}
.chatbox{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 14px;border-radius:14px;background:var(--cl-card);box-shadow:inset 0 0 0 1px var(--cl-line-2);color:var(--cl-muted);font-size:14px}
.chatbox span{flex:1;min-width:0}
.inroom{display:flex;align-items:center;gap:0;padding:2px 0}
.inroom .pav2{margin-left:-8px;box-shadow:inset 0 0 0 1.5px var(--cl-sub),0 0 0 2px var(--cl-paper)}
.inroom .pav2:first-child{margin-left:0}
.inroom span{font-size:13px;color:var(--cl-muted);margin-left:10px}
.tcard{border-radius:22px;background:var(--cl-card);box-shadow:var(--cl-shadow-2),inset 0 0 0 1px var(--cl-line);padding:22px 20px 20px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.dev .tcard{padding:18px 16px 16px}
.tcard .seg{max-width:320px}
.gtime{font-family:var(--cl-font-display);font-size:60px;font-weight:600;letter-spacing:-0.03em;line-height:1;font-variant-numeric:tabular-nums;color:var(--cl-ink)}
.dev .gtime{font-size:54px}
.gphase{font-size:14px;color:var(--cl-body);min-height:21px}
.gphase b{color:var(--cl-sub);font-weight:600}
.tcard .acts{width:100%;justify-content:center;margin:0}
.tcard .btn-lg{min-width:200px}
.dev .tcard .btn-lg{width:100%}
.mem{display:flex;align-items:center;gap:12px;min-height:60px;padding:8px 14px;border-radius:12px;background:var(--cl-card);box-shadow:inset 0 0 0 1px var(--cl-line);border:0;width:100%;text-align:left;font-family:var(--cl-font-text);color:var(--cl-ink);cursor:pointer}
.mem:hover{background:var(--cl-paper-2)}
.mem .mt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.mem .mt b{font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mem .mt span{font-size:12.5px;color:var(--cl-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mem .tk{font-family:var(--cl-font-display);font-size:18px;font-weight:600;color:var(--cl-sub);font-variant-numeric:tabular-nums;flex:none}
.mem .tk.off{color:var(--cl-muted);font-family:var(--cl-font-text);font-size:13px;font-weight:500}
.mem.me{box-shadow:inset 0 0 0 1.5px var(--cl-sub)}
.gtot{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.gtot b{font-family:var(--cl-font-display);font-size:34px;font-weight:600;letter-spacing:-0.02em;line-height:1;color:var(--cl-sub);font-variant-numeric:tabular-nums}
.gtot span{font-size:14px;color:var(--cl-body)}
.lb{display:flex;flex-direction:column;gap:6px}
.lb div{display:flex;align-items:center;gap:10px;font-size:14px;min-height:36px}
.lb div i{width:24px;height:24px;border-radius:50%;background:var(--cl-paper-2);display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:12px;font-weight:600;color:var(--cl-body);flex:none}
.lb div:first-child i{background:var(--cl-accent);color:var(--cl-accent-ink)}
.lb div b{flex:1;min-width:0;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb div span{font-variant-numeric:tabular-nums;color:var(--cl-body)}
.grow .pr{display:flex;align-items:center;gap:0}
.grow .pav2{margin-left:-8px;box-shadow:inset 0 0 0 1.5px var(--cl-sub),0 0 0 2px var(--cl-card)}
.grow .pav2:first-child{margin-left:0}
.peek{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:6px 8px 0}
.peek h2{padding:0;font-size:20px}
.peek .pmeta{font-size:14px;color:var(--cl-body);line-height:1.5}
.peek .pmeta b{color:var(--cl-sub)}
.peek .row2{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.peek .row2 span{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;background:var(--cl-paper-2);font-size:13px;color:var(--cl-body)}
.peek .row2 span img{width:20px;height:20px;object-fit:contain}
.pf{display:flex;flex-direction:column;gap:14px}
.pf .pban{height:140px;border-radius:20px;overflow:hidden;background:linear-gradient(115deg,#1E3A8A,#7C3AED 55%,#F59E0B)}
.dev .pf .pban{height:116px;border-radius:18px}
.pf .pban img{width:100%;height:100%;object-fit:cover;display:block}
.pf .pid{display:flex;align-items:flex-end;gap:14px;margin-top:-48px;padding:0 14px}
.pf .pid .pav2{box-shadow:inset 0 0 0 2px var(--cl-sub),0 0 0 4px var(--cl-paper)}
.pf .pid .t{display:flex;flex-direction:column;gap:2px;padding-bottom:6px;min-width:0}
.pf .pid .t b{font-size:20px;font-family:var(--cl-font-display);letter-spacing:-0.01em}
.pf .pid .t span{font-size:13px;color:var(--cl-muted);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pf .vibe{font-size:15px;line-height:1.55;color:var(--cl-body);padding:0 2px}
.qmini{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border-radius:14px;background:var(--cl-paper-2)}
.qmini .k{font-size:13px;color:var(--cl-muted);display:flex;align-items:center;gap:8px}
.qmini .k img{width:18px;height:18px;object-fit:contain}
.qmini .s{font-family:var(--cl-font-display);font-size:17px;font-weight:600;line-height:1.4}
.qmini .opts{gap:6px;margin-top:4px}
.qmini .opt{min-height:40px;padding:8px 12px;font-size:14px;cursor:default}
.qmini .opt .k{width:22px;height:22px;font-size:11px}
.cmts{display:flex;flex-direction:column;gap:14px}
.cmt{display:flex;gap:12px;align-items:flex-start}
.cmt.reply{margin-left:44px}
.cmt .cb{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.cmt .ch{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--cl-muted)}
.cmt .ch b{font-size:14px;color:var(--cl-ink);font-weight:600}
.cmt .ct{font-size:15px;line-height:1.55;color:var(--cl-ink)}
.cmt .ca{display:flex;gap:2px;margin:-6px 0 0 -8px}
.cmt .ca .quiet{font-size:13px;min-height:44px}
.dline{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--cl-body)}
.dline b{font-weight:600;color:var(--cl-ink)}
.page>section>.shead h2{font-size:18px}
.fin{width:100%;max-width:640px;margin:0 auto;padding:36px 24px 56px;display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}
.dev .fin{padding:24px 16px 40px;gap:18px}
.fin h1{font-size:28px}
.dev .fin h1{font-size:24px}
.ring{position:relative;width:150px;height:150px}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring .rin{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring .rin b{font-family:var(--cl-font-display);font-size:36px;font-weight:600;letter-spacing:-0.02em;line-height:1;font-variant-numeric:tabular-nums}
.ring .rin span{font-size:13px;color:var(--cl-muted);margin-top:4px}
.motion-on .ring circle.v{transition:stroke-dashoffset 900ms var(--cl-ease)}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%}
.tile{background:var(--cl-card);border:1px solid var(--cl-line);border-radius:16px;padding:16px 12px}
.tile span{display:block;font-size:13px;color:var(--cl-muted)}
.tile b{display:block;font-family:var(--cl-font-display);font-size:22px;font-weight:600;margin-top:4px;font-variant-numeric:tabular-nums;letter-spacing:-0.01em}
.tile b.txt{font-family:var(--cl-font-text);font-size:14px;font-weight:500;color:var(--cl-body);margin-top:6px}
.fin .acts{justify-content:center;margin-top:6px}
.dev .fin .acts{width:100%}
.dev .fin .acts .quiet{align-self:center;padding:0 8px}
.fin .cc{width:100%;text-align:left}
.dgrp{display:flex;flex-direction:column;gap:8px}
.dgrp h2{font-size:14px;font-weight:600;color:var(--cl-muted);padding:12px 0 2px}
.arow{display:flex;gap:14px;padding:14px;border-radius:16px;background:var(--cl-card);box-shadow:inset 0 0 0 1px var(--cl-line)}
.arow .kind{width:38px;height:38px;border-radius:11px;background:var(--cl-tint);color:var(--cl-sub);display:inline-flex;align-items:center;justify-content:center;flex:none}
.arow .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.arow .q{font-size:15px;line-height:1.5}
.arow .q mark{background:var(--cl-accent);color:var(--cl-ink);padding:1px 3px;border-radius:3px}
.arow .q.note{color:var(--cl-body);padding:10px 12px;border-radius:10px;background:var(--cl-paper-2)}
.arow .src{font-size:13px;color:var(--cl-muted);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.arow .src .quiet{min-height:44px;padding:0 4px;margin:-8px 0}
.ink{width:150px;height:56px;border-radius:10px;background:var(--cl-paper-2)}
.cp{display:flex;flex-direction:column;gap:14px}
.cp .kick{font-size:14px;color:var(--cl-muted)}
.cp .hlp{font-size:16px;line-height:1.6;color:var(--cl-ink);padding:6px 8px;margin:0 -8px;border-radius:8px;cursor:pointer;border:0;background:none;text-align:left;font-family:var(--cl-font-text);width:calc(100% + 16px)}
.cp .hlp:hover{background:var(--cl-paper-2)}
.cp .hlp.on{background:var(--cl-accent);color:#171A21}
.th-dark .cp .hlp.on{color:var(--cl-accent-ink)}
.cp .hint{font-size:13px;color:var(--cl-muted)}
.savedbar{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;background:var(--cl-success-bg);color:var(--cl-ink);font-size:14px}
.savedbar .quiet{min-height:44px;padding:0 6px;margin:-8px 0;font-weight:600}
.gbar{height:6px;background:var(--cl-paper-2);overflow:hidden;flex:none}
.gbar i{display:block;height:100%;background:var(--cl-sub)}
.motion-on .gbar i{transition:width 400ms var(--cl-ease)}
.gpage{width:100%;max-width:960px;margin:0 auto;padding:28px 24px 48px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:32px;align-items:start}
.dev .gpage{grid-template-columns:1fr;padding:18px 16px 32px;gap:20px}
.gpage h1{font-size:26px;grid-column:1 / -1}
.dev .gpage h1{font-size:22px}
.gt{width:100%;border-collapse:collapse;font-size:14px}
.gt th,.gt td{padding:9px 10px;border-bottom:1px solid var(--cl-line);text-align:left;vertical-align:top;line-height:1.4}
.gt th{font-weight:600;color:var(--cl-ink);background:var(--cl-paper-2)}
.gt td{color:var(--cl-body)}
.gt td:first-child{color:var(--cl-ink);font-weight:500}
.gobj{display:flex;flex-direction:column;gap:12px}
.gobj .gcap{font-size:14px;color:var(--cl-body);line-height:1.5;margin:0}
.gobj .gcap b{color:var(--cl-ink)}
.fig{border-top:1px solid var(--cl-line-2);border-bottom:1px solid var(--cl-line-2);padding:10px 0}
.fig svg{width:100%;height:auto;display:block}
.gq{display:flex;flex-direction:column;gap:12px;padding:18px;border-radius:16px;background:var(--cl-card);box-shadow:inset 0 0 0 1px var(--cl-line)}
.gq .qs{font-size:16px;font-weight:600;line-height:1.4}
.gq .opt{min-height:44px;font-size:15px;padding:9px 12px}
.gq .gqa{font-size:14px;color:var(--cl-body);line-height:1.5;padding-top:10px;border-top:1px solid var(--cl-line)}
.gq .gqa b{color:var(--cl-ink)}
.gq .skip{align-self:flex-start;min-height:44px;padding:0 4px;margin:-6px 0}
.gnav{grid-column:1 / -1;display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:center;gap:12px;padding-top:8px;border-top:1px solid var(--cl-line)}
.gnav .ql{display:flex;gap:4px;align-items:center;flex-wrap:wrap;min-width:0}
.dev .gnav{flex-direction:column;align-items:stretch}
.dev .gnav .btn{width:100%}
.dev .gnav .ql{justify-content:center}
.gate{width:100%;max-width:520px;margin:0 auto;padding:48px 24px 56px;display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.dev .gate{padding:28px 16px 40px}
.gate .lk{width:56px;height:56px;border-radius:16px;background:var(--cl-tint);color:var(--cl-sub);display:inline-flex;align-items:center;justify-content:center}
.gate h1{font-size:30px}
.dev .gate h1{font-size:26px}
.gate p{font-size:15px;color:var(--cl-body);line-height:1.55}
.doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
.dev .doors{grid-template-columns:1fr}
.door{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:14px;border-radius:14px;background:var(--cl-paper-2);border:0;text-align:left;font-family:var(--cl-font-text);color:var(--cl-ink);cursor:pointer;min-height:76px}
.door:hover{background:var(--cl-tint)}
.door b{font-size:15px;font-weight:600}
.door span{font-size:13px;color:var(--cl-muted);line-height:1.4}
@keyframes fadein{from{opacity:0}to{opacity:1}}
/* ---------- parts first drawn in c2-mmi (selectors c2-app does not have) ---------- */
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--cl-blue);outline-offset:2px}
.ch .right .ibtn.av{margin-left:2px}
.ibtn.av:hover .avatar{box-shadow:0 0 0 2px var(--cl-line-2)}
.acts .quiet{padding:0 8px}
.acts .ms{flex-basis:100%;font-size:13px;color:var(--cl-muted);line-height:1.45;order:9}
.mtr{display:flex;flex-direction:column;gap:7px;min-width:0}
.mtr+.mtr{margin-top:14px}
.mtr .mh{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:14px;line-height:1.4}
.mtr .mh b{font-weight:600;color:var(--cl-ink)}
.mtr .mh span{color:var(--cl-body);text-align:right;font-variant-numeric:tabular-nums}
.mtr .mh span.out{color:var(--cl-warning);font-weight:600}
.mtr .bar{flex:none;width:100%;height:8px}
.mtr .ms{font-size:13px;color:var(--cl-muted);line-height:1.45}
.dot{width:12px;height:12px;border-radius:50%;background:var(--cl-sub);display:inline-block;flex:none}
.lrow .sc small{font-family:var(--cl-font-text);font-size:12px;font-weight:500;color:var(--cl-muted);margin-left:3px}
.lrow .spark{width:96px;height:32px;flex:none}
.lrow.on{background:var(--cl-tint);box-shadow:inset 0 0 0 1.5px var(--cl-sub)}
.chip .dot{width:10px;height:10px}
.pill.warn i{background:var(--cl-warning)}
.tgl{display:flex;align-items:center;gap:12px;min-height:44px;font-size:14px;color:var(--cl-body);cursor:pointer}
.tgl input{width:20px;height:20px;accent-color:var(--cl-blue);margin:0;flex:none}
.sheet .fld ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;font-size:15px;line-height:1.5;color:var(--cl-body)}
.sheet .fld ol b{color:var(--cl-ink);font-weight:600}
.sheet .fld input[type=date]{width:100%;height:48px;border-radius:12px;border:1px solid var(--cl-line-2);background:var(--cl-card);color:var(--cl-ink);padding:0 14px;font:16px var(--cl-font-text)}
.stcard{display:flex;align-items:center;gap:18px;margin-top:14px}
.stcard .face{width:92px;height:122px;border-radius:14px;background:var(--cl-sub);flex:none;position:relative;box-shadow:0 8px 20px rgba(23,26,33,.16),0 1px 2px rgba(23,26,33,.2);display:flex;align-items:center;justify-content:center}
.stcard .face::before{content:'';position:absolute;inset:7px;border-radius:9px;border:1.5px solid rgba(255,255,255,.45)}
.stcard .face img{width:52px;height:52px;object-fit:contain;position:relative}
.stcard .face i{position:absolute;left:12px;top:12px;width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.85)}
.stcard .face i.b{left:auto;top:auto;right:12px;bottom:12px}
.stcard .txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.stcard .dm2{font-family:var(--cl-font-display);font-size:22px;font-weight:600;letter-spacing:-0.02em;color:var(--cl-sub);line-height:1.15}
.stcard .mt{font-size:14px;color:var(--cl-body);line-height:1.45}
.doms{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.doms span{width:30px;height:30px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 2px var(--cl-sub);background:transparent;display:inline-flex;align-items:center;justify-content:center;color:#fff}
.doms span.on{background:var(--cl-sub);box-shadow:none}
.doms span svg{width:14px;height:14px;opacity:0}
.doms span.on svg{opacity:1}
.doms+.when{margin-top:10px}
.mtr.slim .mh{font-size:14px}
.mtr.slim{gap:6px}
.mtr.slim+.mtr.slim{margin-top:12px}
.card.small h2{font-size:16px;color:var(--cl-body)}
.card.small .big{font-size:30px;margin-top:6px}
.card.small .when{font-size:14px;margin-top:2px}
.card.small .lrows{margin-top:10px}
.card.small .lrow{min-height:52px;padding:8px 12px}
.fin .card{width:100%;text-align:left}
.fin .hint{max-width:460px}
.fin>.body{font-size:16px;line-height:1.55;max-width:460px}
.fin .acts .btn{width:100%;max-width:360px}
.fin .acts .ms{text-align:center;order:0;flex-basis:auto;max-width:360px}
.card .mtr:first-of-type{margin-top:14px}
.page>.card>.mtr:first-of-type{margin-top:0}
.fin .tx2{text-align:left;width:100%}
.ring .in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring .in b{font-family:var(--cl-font-display);font-size:36px;font-weight:600;letter-spacing:-0.02em;line-height:1;font-variant-numeric:tabular-nums}
.ring .in span{font-size:13px;color:var(--cl-muted);margin-top:4px}
.tile b small{font-family:var(--cl-font-text);font-size:13px;font-weight:500;color:var(--cl-muted);letter-spacing:0;margin-left:4px}
.tile b .none{font-family:var(--cl-font-text);font-size:14px;font-weight:500;color:var(--cl-muted);letter-spacing:0}
.tile em{display:block;font-style:normal;font-size:12px;color:var(--cl-muted);margin-top:4px;line-height:1.35}
.gate .lk svg{width:26px;height:26px}
.gate .acts{width:100%}
.gate .mtr{width:100%;padding:16px 18px;border-radius:16px;background:var(--cl-card);box-shadow:inset 0 0 0 1px var(--cl-line)}
.modeline{font-size:15px;color:var(--cl-body);line-height:1.55;margin-top:14px}
.startrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:16px;margin-top:16px;border-top:1px solid var(--cl-line);flex-wrap:wrap}
.startrow .sel{font-size:14px;color:var(--cl-body);flex:1;min-width:0}
.startrow .sel b{color:var(--cl-ink);font-weight:600}
.facts2{display:flex;flex-direction:column;margin-top:14px}
.facts2 div{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--cl-line);font-size:14px;color:var(--cl-body)}
.facts2 div:last-child{border-bottom:0}
.facts2 b{color:var(--cl-ink);font-weight:600;text-align:right}
.hint{font-size:14px;color:var(--cl-muted);line-height:1.5}
.rn{flex:1;display:flex;flex-direction:column;min-height:0}
.rn-b{padding:28px 24px 40px;display:grid;grid-template-columns:minmax(0,1.3fr) 340px;gap:36px;width:100%;max-width:1080px;margin:0 auto;align-items:start}
.rn-main{display:flex;flex-direction:column;gap:22px;min-width:0}
.rn-side{display:flex;flex-direction:column;gap:14px;position:sticky;top:0}
.clock{display:flex;align-items:baseline;gap:12px}
.clock b{font-family:var(--cl-font-display);font-size:60px;font-weight:600;letter-spacing:-0.03em;line-height:1;font-variant-numeric:tabular-nums;color:var(--cl-ink)}
.clock span{font-size:14px;color:var(--cl-muted)}
.clock.answer b{color:var(--cl-sub)}
.clock.low b{color:var(--cl-danger)}
.rbar{height:6px;border-radius:3px;background:var(--cl-paper-2);overflow:hidden}
.rbar i{display:block;height:100%;background:var(--cl-sub);border-radius:3px}
.clock.low+.rbar i{background:var(--cl-danger)}
.motion-on .rbar i{transition:width 900ms linear}
.blk{display:flex;flex-direction:column;gap:8px}
.blk .k{font-size:13px;font-weight:600;color:var(--cl-muted);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.blk .k .dm{display:inline-flex;align-items:center;gap:6px;color:var(--cl-sub)}
.blk p.tx{font-size:17px;line-height:1.6;color:var(--cl-ink)}
.blk.prompt{padding:18px 20px;border-radius:16px;background:var(--cl-tint)}
.blk.prompt .k{color:var(--cl-sub)}
.blk.prompt p.tx{font-family:var(--cl-font-display);font-size:23px;font-weight:600;line-height:1.35}
.cam{aspect-ratio:4/3;border-radius:16px;background:#1B1E26;color:#B4B9C4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:13px;text-align:center;padding:16px;position:relative;overflow:hidden}
.cam svg{width:36px;height:36px;color:#6B7280}
.cam.off{background:var(--cl-paper-2);color:var(--cl-muted);border:1px dashed var(--cl-line-2)}
.cam.off svg{color:var(--cl-muted)}
.rec{position:absolute;top:12px;left:12px;display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;font-size:12px;font-weight:600}
.cam.off .rec{background:var(--cl-card);color:var(--cl-body);box-shadow:inset 0 0 0 1px var(--cl-line)}
.rec i{width:8px;height:8px;border-radius:50%;background:#9AA3B2}
.rec.on i{background:#F07070}
.motion-on .rec.on i{animation:blink 1.2s ease-in-out infinite}
@keyframes blink{50%{opacity:.35}}
.rn-acts{display:flex;flex-direction:column;gap:4px;align-items:stretch}
.rn-acts .btn{width:100%}
.rn-acts .quiet{align-self:center}
.rn-side .camline{font-size:13px;color:var(--cl-muted);line-height:1.45;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.rn-side .camline .quiet{font-size:14px;padding:0 4px;margin:-8px 0}
.timeup{position:absolute;inset:0;z-index:9;background:var(--cl-paper);display:flex;align-items:center;justify-content:center;font-family:var(--cl-font-display);font-size:72px;font-weight:600;letter-spacing:-0.03em;color:var(--cl-ink)}
.notesbox{display:flex;flex-direction:column;gap:12px;padding:18px 20px;border-radius:16px;background:var(--cl-card);box-shadow:inset 0 0 0 1px var(--cl-line)}
.notesbox h3{font-size:15px}
.notesbox ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:15px;line-height:1.5;color:var(--cl-body)}
.rpt{width:100%;max-width:760px;margin:0 auto;padding:28px 24px 56px;display:flex;flex-direction:column;gap:22px}
.rhead{display:flex;align-items:center;gap:22px}
.rhead h1{font-size:26px}
.rhead .mt{font-size:14px;color:var(--cl-muted);margin-top:4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rhead .mt .dm{display:inline-flex;align-items:center;gap:6px;color:var(--cl-sub);font-weight:600}
.rhead .note{font-size:14px;color:var(--cl-body);line-height:1.5;margin-top:10px}
.qrow{display:flex;flex-direction:column;gap:8px;padding:16px 0;border-top:1px solid var(--cl-line)}
.qrow:last-child{padding-bottom:4px}
.qrow .hd{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.qrow .nm2{font-size:16px;font-weight:600;color:var(--cl-ink);flex:1;min-width:0}
.qrow .sc{font-family:var(--cl-font-display);font-size:22px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--cl-ink)}
.qrow .sc small{font-family:var(--cl-font-text);font-size:13px;font-weight:500;color:var(--cl-muted);margin-left:2px}
.band{font-size:12.5px;font-weight:600;padding:3px 9px;border-radius:999px;white-space:nowrap}
.band.strong{background:var(--cl-success-bg);color:var(--cl-success-text)}
.band.developing{background:var(--cl-accent);color:var(--cl-accent-ink)}
.band.needs{background:var(--cl-danger-bg);color:var(--cl-danger)}
.qrow .anc{font-size:14px;color:var(--cl-muted);line-height:1.5}
.qrow .ev{padding:10px 14px;border-left:3px solid var(--cl-sub);background:var(--cl-paper-2);border-radius:0 10px 10px 0;font-size:14px;color:var(--cl-body);line-height:1.5}
.qrow .note{font-size:15px;line-height:1.55;color:var(--cl-ink)}
.fb{display:flex;flex-direction:column;gap:6px}
.fb h2{font-size:18px}
.fb p{font-size:15px;line-height:1.6;color:var(--cl-ink)}
.fb .sm{font-size:13px;color:var(--cl-muted)}
.tx2{font-size:15px;line-height:1.75;color:var(--cl-body);padding:16px 18px;border-radius:14px;background:var(--cl-paper-2)}
.gd{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
.gd div{padding:14px 16px;border-radius:14px;background:var(--cl-paper-2);font-size:14px;line-height:1.55;color:var(--cl-body)}
.gd b{display:block;margin-bottom:6px;color:var(--cl-ink)}
.mdl h3{font-size:16px}
.racts{padding-top:16px;border-top:1px solid var(--cl-line)}
.rest{position:absolute;inset:0;z-index:8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px;text-align:center;background:var(--cl-paper)}
.rest img{width:88px;height:88px;object-fit:contain}
.rest h1{font-size:40px;font-weight:500}
.rest .cd{font-family:var(--cl-font-display);font-size:64px;font-weight:600;letter-spacing:-0.03em;line-height:1;font-variant-numeric:tabular-nums;color:var(--cl-sub)}
.rest p{font-size:15px;color:var(--cl-body)}
.rest .chip{cursor:default}
.rest .acts{flex-direction:column;align-items:center;width:100%;gap:4px}
.rest .acts .btn{width:100%;max-width:320px}
.pay{width:100%;max-width:640px;margin:0 auto;padding:36px 24px 72px;display:flex;flex-direction:column;gap:44px}
.pr-hero{display:flex;flex-direction:column;gap:12px;text-align:center;align-items:center}
.pr-hero h1{font-size:40px}
.pr-hero p{font-size:16px;color:var(--cl-body);max-width:460px;line-height:1.5}
.pr-card{background:var(--cl-card);border:1px solid var(--cl-line);border-radius:24px;box-shadow:var(--cl-shadow-2);padding:36px;display:flex;flex-direction:column;gap:24px;position:relative}
.pr-price{display:flex;align-items:baseline;gap:10px;font-family:var(--cl-font-display);font-weight:600;font-size:64px;letter-spacing:-0.035em;line-height:1;color:var(--cl-sub);font-variant-numeric:tabular-nums;flex-wrap:wrap}
.pr-price small{font-family:var(--cl-font-text);font-size:16px;font-weight:500;color:var(--cl-body);letter-spacing:0}
.pr-cover{font-size:16px;color:var(--cl-ink);line-height:1.5}
.pr-ticks{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px}
.pr-ticks li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.5;color:var(--cl-body)}
.pr-ticks li .tick{width:20px;height:20px;margin-top:2px}
.pr-tag{position:absolute;top:-13px;right:24px;height:26px;padding:0 12px;border-radius:999px;background:var(--cl-ink);color:var(--cl-paper);font-size:12.5px;font-weight:600;display:inline-flex;align-items:center}
.pr-card .btn{width:100%}
.pr-sec{display:flex;flex-direction:column;gap:20px}
.pr-sec h2{font-size:26px}
.pr-sec>p{font-size:15px;color:var(--cl-body);line-height:1.55}
.fvp{width:100%;border-collapse:collapse;font-size:14.5px}
.fvp th,.fvp td{padding:14px 10px;border-bottom:1px solid var(--cl-line);text-align:left;vertical-align:top;line-height:1.45}
.fvp th{font-weight:600;color:var(--cl-ink);font-size:14px}
.fvp td:first-child{color:var(--cl-body)}
.fvp td{color:var(--cl-ink)}
.fvp .ph{font-size:12px}
.prop{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-radius:14px;background:var(--cl-paper-2);font-size:14px;color:var(--cl-body);line-height:1.5}
.prop .ph{align-self:flex-start}
.faq{display:flex;flex-direction:column;border-top:1px solid var(--cl-line)}
.faq .q{display:flex;justify-content:space-between;gap:16px;min-height:60px;padding:16px 0;border-bottom:1px solid var(--cl-line);align-items:center;cursor:pointer;background:none;border-left:0;border-right:0;border-top:0;width:100%;text-align:left;color:var(--cl-ink);font-family:var(--cl-font-text)}
.faq .q .qt{font-family:var(--cl-font-display);font-size:17px;font-weight:600;line-height:1.3;letter-spacing:-0.01em}
.faq .q .pm{flex:none;width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px var(--cl-line-2);color:var(--cl-muted)}
.motion-on .faq .q .pm{transition:transform 320ms var(--cl-spring),background-color 200ms var(--cl-ease),color 200ms var(--cl-ease)}
.faq .q[aria-expanded=true] .pm{transform:rotate(45deg);background:var(--cl-ink);color:var(--cl-paper);box-shadow:none}
.faq .a{display:grid;grid-template-rows:0fr}
.motion-on .faq .a{transition:grid-template-rows 300ms var(--cl-ease)}
.faq .a>div{overflow:hidden;min-height:0}
.faq .a p{padding:0 0 20px;font-size:15px;line-height:1.6;color:var(--cl-body);max-width:560px}
.faq .q[aria-expanded=true]+.a{grid-template-rows:1fr}
.co{width:100%;max-width:560px;margin:0 auto;padding:28px 24px 56px;display:flex;flex-direction:column;gap:22px}
.coline{display:flex;justify-content:space-between;gap:12px;font-size:15px;padding:12px 0;border-bottom:1px solid var(--cl-line);color:var(--cl-body)}
.coline b{color:var(--cl-ink);font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.cofld{display:flex;flex-direction:column;gap:6px}
.cofld span{font-size:13px;font-weight:600;color:var(--cl-body)}
.cofld div{height:48px;border-radius:12px;border:1px solid var(--cl-line-2);background:var(--cl-card);color:var(--cl-muted);padding:0 14px;display:flex;align-items:center;font-size:15px}
.cogrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* ---------- shell additions (step 5): the frame root, the status bar, states, markers ---------- */
.root{display:flex;flex-direction:column;height:100%;min-height:0;position:relative;background:var(--cl-paper);color:var(--cl-ink)}
.root.dev>.sb{height:44px;flex:none}
.motion-on .in{animation:fadein 360ms var(--cl-ease) both}
.fade{opacity:0}
/* toast inside a frame: feedback after an action, never a destination */
.root .toast{position:absolute;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;z-index:60;background:var(--cl-ink);color:var(--cl-paper);font-size:14px;padding:10px 16px;border-radius:12px;pointer-events:none;transition:opacity 200ms var(--cl-ease),transform 200ms var(--cl-ease);max-width:calc(100% - 32px);text-align:center}
.root.dev .toast{bottom:96px}
.root .toast.show{opacity:1;transform:translate(-50%,0)}
/* states: one part, one shape per kind. Drawn fully in step 17 */
.states{display:flex;flex-direction:column;gap:12px}
.state{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:24px;border-radius:20px;background:var(--cl-card);border:1px solid var(--cl-line);box-shadow:var(--cl-shadow-1);min-width:0}
.dev .state{padding:18px;border-radius:18px}
.state img.roro{width:48px;height:48px;object-fit:contain}
.state h2{font-size:20px}
.state p{font-size:15px;line-height:1.55;color:var(--cl-body);max-width:52ch}
.state .acts{margin-top:4px}
.state.inline{flex-direction:row;align-items:center;padding:12px 14px;border-radius:12px;background:var(--cl-paper-2);border:0;box-shadow:none;font-size:14px;color:var(--cl-body)}
.state.inline p{font-size:14px}
.state.offline{border-radius:0;border:0;border-bottom:1px solid var(--cl-line);background:var(--cl-paper-2);padding:10px 20px;box-shadow:none}
.dev .state.offline{padding:10px 16px}
.skel{display:block;border-radius:8px;background:var(--cl-paper-2);position:relative;overflow:hidden;min-height:12px}
.skel.row{height:60px;border-radius:12px}
.skel.line{height:14px}
.skel.line.short{width:55%}
.skel.circle{border-radius:50%}
.motion-on .skel::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:shimmer 1.4s var(--cl-ease) infinite}
.th-dark .motion-on .skel::after,.motion-on.th-dark .skel::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent)}
@keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.notmeasured{display:inline-flex;align-items:center;gap:6px;color:var(--cl-muted);font-size:13px}
/* scope legend chips: what a student can see of an explanation */
.scope{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:999px;background:var(--cl-paper-2);color:var(--cl-body);font-size:12.5px;font-weight:600;white-space:nowrap}
.scope i{width:8px;height:8px;border-radius:50%;background:var(--cl-sub);display:inline-block}
.scope.sealed i{background:var(--cl-muted)}
/* markers: Proposal, Sample and Prototype */
.proposal,.protomark,.samplemark{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.proposal{background:var(--cl-accent);color:var(--cl-accent-ink)}
.samplemark{background:var(--cl-paper-2);color:var(--cl-body)}
.protomark{background:var(--cl-ink);color:var(--cl-paper)}
/* a route that is not drawn yet: a visible later state, never a toast */
.later{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:32px 24px;text-align:center;color:var(--cl-body)}
.later h2{font-size:20px}
.later p{font-size:14px;max-width:40ch;line-height:1.5}
.later .quiet{margin-top:6px}
/* the avatar as a button (step 17 hooks it to the account menu) */
button.avatar{border:0;cursor:pointer;font-family:var(--cl-font-text)}
button.avatar:hover{box-shadow:0 0 0 2px var(--cl-line-2)}
@media (prefers-reduced-motion:reduce){.root:not(.motion-on) *{animation-duration:1ms!important;transition-duration:1ms!important}}