/* Qoloa Modern - shared tokens and components for every artboard */
:root{
--rice:#FAF7F2; --surface:#FFFFFF; --surface2:#F3EDE3; --border:#EAE3D7;
--ink:#141311; --muted:#6B655D; --faint:#B6AEA1;
--verb:#E80030; --verbdeep:#C00028;
--leaf:#3F7D1E; --leafsoft:#E6F2CF; --leaftext:#2F6314;
--sun:#FCBB2D; --sunsoft:#FDEFC8; --sky:#2160BA;
--lime:#B1D243; --peach:#FDB5A4; --paper:#F3EBD8; --paper2:#E4D5B5;
--disp:'Bricolage Grotesque','Avenir Next',system-ui,sans-serif;
--ui:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',system-ui,sans-serif;
--jp:'Noto Sans JP','Hiragino Sans','Yu Gothic',sans-serif;
--mono:ui-monospace,'SF Mono',Menlo,monospace;
--e1:0 1px 2px rgba(22,19,15,.06),0 4px 12px rgba(22,19,15,.06);
--e2:0 2px 4px rgba(22,19,15,.06),0 12px 32px rgba(22,19,15,.12);
--e3:0 -8px 40px rgba(22,19,15,.18);
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--ui);color:var(--ink);-webkit-font-smoothing:antialiased}
.scr{position:relative;width:390px;height:844px;overflow:hidden;background:var(--rice);font-family:var(--ui);color:var(--ink);display:flex;flex-direction:column}
.disp{font-family:var(--disp);font-weight:800;letter-spacing:-.01em;line-height:1.08;margin:0}
.jp{font-family:var(--jp)}
.muted{color:var(--muted)}
.row{display:flex;align-items:center}
.col{display:flex;flex-direction:column}
.grow{flex:1 1 auto;min-width:0;min-height:0}
.ico{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ico-fill{fill:currentColor;stroke:none}
/* buttons */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;height:56px;padding:0 24px;border-radius:999px;border:1px solid transparent;font:600 17px/1 var(--ui);white-space:nowrap}
.btn-verb{background:var(--verb);color:#fff}
.btn-leaf{background:var(--leaf);color:#fff}
.btn-ink{background:var(--ink);color:#fff}
.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--border)}
.btn-quiet{background:transparent;color:var(--muted);height:48px;font-weight:600;font-size:15px}
.btn-off{background:var(--surface2);color:var(--faint)}
.btn-glass{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.2)}
.circle{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none}
.circle-ghost{background:var(--surface);border:1px solid var(--border);box-shadow:var(--e1);color:var(--ink)}
.circle-glass{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);color:#fff}
/* chips, segmented */
.chip{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:999px;background:var(--surface2);color:var(--ink);font:600 14px/1 var(--ui);white-space:nowrap}
.chip-ink{background:var(--ink);color:#fff}
.chip-leaf{background:var(--leafsoft);color:var(--leaftext)}
.chip-sun{background:var(--sunsoft);color:#6B4A00}
.chip-white{background:var(--surface);border:1px solid var(--border)}
.chip-glass{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.2)}
.seg{display:inline-flex;padding:3px;border-radius:999px;background:var(--surface2)}
.seg span{height:38px;padding:0 18px;display:flex;align-items:center;border-radius:999px;font:600 14px/1 var(--ui);color:var(--muted)}
.seg span.on{background:var(--ink);color:#fff}
.seg-glass{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2)}
.seg-glass span{color:rgba(255,255,255,.72)}
.seg-glass span.on{background:#fff;color:var(--ink)}
/* bars */
.bar{height:8px;border-radius:99px;background:var(--surface2);overflow:hidden;display:flex}
.bar i{display:block;height:100%;background:var(--leaf);border-radius:99px}
.steps{display:flex;gap:6px}
.steps i{flex:1;height:6px;border-radius:99px;background:var(--surface2)}
.steps i.done{background:var(--leaf)}
.steps i.now{background:var(--ink)}
.mastery{display:flex;height:12px;border-radius:99px;overflow:hidden;gap:3px}
.mastery i{display:block;height:100%}
.m-new{background:var(--faint)}
.m-grow{background:var(--sun)}
.m-fam{background:var(--leaf)}
/* streak + week */
.streak{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px 0 12px;border-radius:999px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--e1);font:800 18px/1 var(--disp);font-variant-numeric:tabular-nums}
.streak .flame{width:24px;height:24px;color:var(--sun)}
.streak-glass{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.2);color:#fff;box-shadow:none}
.week{display:flex;gap:8px;justify-content:space-between}
.week div{width:40px;display:flex;flex-direction:column;align-items:center;gap:6px;font:600 12px/1 var(--ui);color:var(--muted)}
.week b{width:34px;height:34px;border-radius:50%;background:var(--surface2);display:flex;align-items:center;justify-content:center}
.week b.kept{background:var(--leaf);color:#fff}
.week b.today{box-shadow:0 0 0 2px var(--rice),0 0 0 4px var(--ink)}
/* surfaces */
.card{background:var(--surface);border-radius:24px;box-shadow:var(--e1);border:1px solid var(--border)}
.card2{background:var(--surface);border-radius:24px;box-shadow:var(--e2)}
.sheet{position:absolute;left:0;right:0;bottom:0;background:var(--surface);border-radius:24px 24px 0 0;box-shadow:var(--e3);padding:12px 20px 34px}
.handle{width:40px;height:5px;border-radius:99px;background:var(--border);margin:0 auto 14px}
.snack{display:flex;align-items:center;gap:12px;height:52px;padding:0 8px 0 18px;border-radius:999px;background:var(--ink);color:#fff;font:600 15px/1 var(--ui);box-shadow:var(--e2)}
.snack u{text-decoration:none;color:var(--sun);padding:0 12px;height:36px;display:flex;align-items:center}
.tag{font:700 12.5px/1.2 var(--ui);letter-spacing:0;color:var(--muted)}
.home{position:absolute;left:50%;bottom:8px;margin-left:-67px;width:134px;height:5px;border-radius:99px;background:var(--ink);opacity:.9}
.home-w{background:#fff}
.bubble{padding:12px 16px;border-radius:20px;font:400 16px/1.35 var(--ui);max-width:280px}
.b-q{background:var(--surface);border:1px solid var(--border);border-bottom-left-radius:6px}
.b-a{background:var(--ink);color:#fff;border-bottom-right-radius:6px;font-weight:600}
.composer{display:flex;align-items:center;gap:10px;height:52px;padding:0 6px 0 18px;border-radius:999px;background:var(--surface);border:1px solid var(--border);font:400 16px/1 var(--ui);color:var(--faint)}
.dots{display:flex;gap:4px}
.dots i{width:6px;height:6px;border-radius:50%;background:var(--faint)}
/* faces */
.stub{position:relative;display:flex;border-radius:14px;background:var(--paper);box-shadow:0 18px 40px rgba(0,0,0,.35),0 2px 0 rgba(255,255,255,.4) inset;overflow:hidden}
.stub .l{width:84px;background:var(--peach);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;position:relative}
.stub .l:after{content:'';position:absolute;right:-7px;top:0;bottom:0;width:14px;background:radial-gradient(circle at 7px 7px,var(--paper) 5px,transparent 5.5px) 0 0/14px 14px repeat-y}
.stub .r{flex:1;padding:18px 18px 18px 26px;display:flex;flex-direction:column;gap:10px}
.mono{font-family:var(--mono)}
.und{text-decoration:underline;text-decoration-color:var(--sun);text-decoration-thickness:3px;text-underline-offset:6px}
.und-saved{text-decoration:underline;text-decoration-color:var(--leaf);text-decoration-thickness:3px;text-underline-offset:6px}
.board{border-radius:16px;background:#000;border:6px solid #1c1c1c;box-shadow:0 18px 40px rgba(0,0,0,.5);color:#FFA51F;font-family:var(--jp)}
.led{display:flex;gap:4px}
.led i{width:6px;height:6px;border-radius:50%;background:#1F5A2E}
.receipt-wrap{filter:drop-shadow(0 18px 22px rgba(60,30,0,.32))}
.receipt{--s:10px;background:#FAF6DE;color:var(--ink);padding:30px 24px;
-webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/calc(2*var(--s)) var(--s) repeat-x,conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/calc(2*var(--s)) var(--s) repeat-x,linear-gradient(#000 0 0) center/100% calc(100% - 2*var(--s)) no-repeat;
mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/calc(2*var(--s)) var(--s) repeat-x,conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/calc(2*var(--s)) var(--s) repeat-x,linear-gradient(#000 0 0) center/100% calc(100% - 2*var(--s)) no-repeat}
.dash{border:0;border-top:2px dashed rgba(22,19,15,.25);margin:0}
/* canvas helper boards */
.pad{padding:56px}
.h1{font:800 64px/1 var(--disp);letter-spacing:-.02em;margin:0}
.h2{font:800 32px/1.1 var(--disp);margin:0}
.h3{font:700 20px/1.2 var(--disp);margin:0}
.lead{font:400 18px/1.5 var(--ui);color:var(--muted);margin:0}
.sm{font:400 14px/1.5 var(--ui);color:var(--muted);margin:0}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.sw{height:96px;border-radius:16px;padding:12px;display:flex;flex-direction:column;justify-content:flex-end;font:600 12px/1.3 var(--ui)}
.sw small{font-weight:500;opacity:.8}
.pill-id{display:inline-flex;height:22px;padding:0 8px;align-items:center;border-radius:6px;background:var(--ink);color:#fff;font:700 11px/1 var(--ui);letter-spacing:.04em}
.shot{display:flex;flex-direction:column;gap:10px;width:250px;flex:none}
.shot img{width:250px;height:auto;border-radius:22px;border:1px solid var(--border);display:block;box-shadow:var(--e1)}
.shot p{margin:0;font:400 13px/1.4 var(--ui);color:var(--ink)}
.shot b{font-weight:700}
/* Round 2 additions: linked segments, unlit streak, word states, spec-board type */
.seg a{height:38px;padding:0 18px;display:flex;align-items:center;border-radius:999px;font:600 14px/1 var(--ui);color:var(--muted);text-decoration:none}
.seg-glass a{color:rgba(255,255,255,.72)}
.seg span.dot,.seg a.dot{position:relative}
.seg .dot:after{content:'';position:absolute;top:8px;right:9px;width:8px;height:8px;border-radius:50%;background:var(--sun);box-shadow:0 0 0 2px var(--rice)}
.seg-glass .dot:after{box-shadow:none}
.streak-off .flame{color:var(--faint)}
.streak-glass.streak-off .flame{color:rgba(255,255,255,.5)}
.streak .pip{width:8px;height:8px;border-radius:50%;background:var(--sun);margin-left:-2px}
.week b.rest{background:var(--surface);border:2px solid var(--leaf);color:var(--leaf)}
.week b.miss{background:var(--surface2)}
.pill{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;font:700 12px/1 var(--ui);letter-spacing:.01em}
.pill-new{background:var(--surface2);color:var(--muted)}
.pill-grow{background:var(--sunsoft);color:#6B4A00}
.pill-fam{background:var(--leafsoft);color:var(--leaftext)}
.hl-new{background:rgba(252,187,45,.34);border-radius:8px;padding:0 6px;text-decoration:underline;text-decoration-color:var(--leaf);text-decoration-thickness:3px;text-underline-offset:6px}
.hl-grow{background:rgba(252,187,45,.16);border-radius:8px;padding:0 6px;text-decoration:underline;text-decoration-color:var(--leaf);text-decoration-thickness:2px;text-underline-offset:6px}
.row-link{display:flex;align-items:center;gap:14px;min-height:64px;padding:0 16px;text-decoration:none;color:var(--ink)}
.spec{font:400 14px/1.45 var(--ui);color:var(--ink)}
.spec b{font-weight:700}
.spec code,.code{font:500 12.5px/1.4 var(--mono);background:var(--surface2);padding:2px 6px;border-radius:6px;color:var(--ink)}
.tbl{width:100%;border-collapse:collapse;font:400 13.5px/1.4 var(--ui)}
.tbl th{font:700 12px/1.2 var(--ui);letter-spacing:0;color:var(--muted);text-align:left;padding:0 10px 10px 0;border-bottom:1px solid var(--border)}
.tbl td{padding:var(--pad,10px) 10px var(--pad,10px) 0;border-bottom:1px solid var(--border);vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.dark{background:linear-gradient(180deg,#2A1E3A 0%,#43304A 52%,#5B3A5F 100%);color:#fff}
@keyframes r2-breath{0%,100%{transform:scale(1)}50%{transform:scale(1.015)}}
@keyframes r2-hop{0%,100%{transform:translateY(0) scale(1)}12%{transform:translateY(2px) scale(1.03,.96)}40%{transform:translateY(-14px) scale(.98,1.03)}62%{transform:translateY(0) scale(1.02,.98)}76%{transform:translateY(-3px)}}
@keyframes r2-sink{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@keyframes r2-fade-hl{0%,18%{background:rgba(252,187,45,.34);text-decoration-color:var(--leaf)}55%,100%{background:rgba(252,187,45,.16)}}
@keyframes r2-pill{0%,25%{background:#F4EFE7;color:#6B645A;transform:scale(1)}40%{transform:scale(1.08)}55%,100%{background:#FDEFC8;color:#6B4A00;transform:scale(1)}}
@keyframes r2-flyin{0%,8%{opacity:0;transform:translateY(14px)}30%,100%{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.r2-anim,.r2-anim *{animation:none!important}}
.lbl{font:700 12px/1.4 var(--ui);letter-spacing:0;color:var(--muted);display:block;margin-top:9px}
.gantt{display:grid;grid-template-columns:150px 1fr 120px;align-items:center;column-gap:12px;row-gap:5px;font:500 12.5px/1.2 var(--ui)}
.gantt .trk{position:relative;height:16px;border-radius:99px;background:var(--surface2)}
.gantt .trk i{position:absolute;top:0;height:16px;border-radius:99px;background:var(--ink);display:block}
.gantt .trk i.sun{background:var(--sun)}
.gantt .trk i.leaf{background:var(--leaf)}
.gantt .trk i.mk{width:3px;border-radius:0;background:var(--verb);top:-3px;height:22px}
.gantt .t{color:var(--muted);font-variant-numeric:tabular-nums}
@keyframes r2-a{0%,25%{opacity:1;transform:scale(1)}40%,100%{opacity:0;transform:scale(.9)}}
@keyframes r2-b{0%,25%{opacity:0;transform:scale(.9)}45%{opacity:1;transform:scale(1.08)}60%,100%{opacity:1;transform:scale(1)}}
/* Round 2b: flashcards */
.fc-scene{perspective:1400px}
.fc{position:relative;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transition:transform .48s cubic-bezier(.2,.8,.2,1);cursor:pointer;font-family:inherit;color:inherit;text-align:left}
.fc-face{position:absolute;left:0;top:0;right:0;bottom:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.fc-back{transform:rotateY(180deg)}
.fc-backx{transform:rotateX(180deg)}
.fc-top{position:absolute;left:0;right:0;top:0;height:10px}
.hl-ring{background:rgba(252,187,45,.34);border-radius:8px;padding:0 6px;box-shadow:inset 0 0 0 2px rgba(252,187,45,.95);text-decoration:underline;text-decoration-color:var(--leaf);text-decoration-thickness:2px;text-underline-offset:6px}
.hl-fam{text-decoration:underline;text-decoration-color:rgba(63,125,30,.45);text-decoration-thickness:1px;text-underline-offset:6px}
.stack{position:relative}
.stack i{position:absolute;left:0;right:0;bottom:0;top:0;border-radius:20px;background:#fff;border:1px solid var(--border);display:block}
@media (prefers-reduced-motion:reduce){.fc{transition:none!important}}
.hl-out{border-radius:8px;padding:0 6px;box-shadow:inset 0 0 0 2px rgba(252,187,45,.95);text-decoration:underline;text-decoration-color:var(--leaf);text-decoration-thickness:2px;text-underline-offset:6px}
/* ------------------------------------------------------------------
Round 3: the readable world. Stages, the living card, reading moments.
Everything above stays. Round 3 adds tokens and parts, it does not restyle R2.
------------------------------------------------------------------ */
:root{
/* Four stages ripen: sun, lime, leaf, ink. Shape carries the stage too (pips, marks). */
--st-new:#FCBB2D; --st-new-soft:#FDEFC8; --st-new-ink:#6B4A00;
--st-learn:#8DB52B; --st-learn-soft:#EDF4D2; --st-learn-ink:#46600E;
--st-strong:#3F7D1E; --st-strong-soft:#E6F2CF; --st-strong-ink:#2F6314;
--st-known:#16130F; --st-known-soft:#ECE6DA;
/* Reading moments wear passport ink: the only blue that means something. */
--stamp:#2C3DAF; --stamp-soft:#E7EAF8; --stamp-deep:#1E2A8A; --stamp-lit:#4B5FD6;
/* Grades */
--again:#C77A00; --again-soft:#FDF0D5; --got:#3F7D1E;
/* Paper */
--paper-front:#FFFDF8; --paper-back:#F7F1E5;
/* Activity calendar */
--hm0:#ECE5D8; --hm1:#D8EAB6; --hm2:#AFD271; --hm3:#76AA3E; --hm4:#3F7D1E;
--grain:url("data:image/svg+xml;utf8,");
--ink-mask:url("data:image/svg+xml;utf8,");
--ink-mask-soft:url("data:image/svg+xml;utf8,");
--e-card:0 1px 0 rgba(255,255,255,.75) inset,0 2px 3px rgba(20,10,30,.16),0 22px 44px rgba(10,4,20,.40);
--e-card-lift:0 1px 0 rgba(255,255,255,.75) inset,0 4px 6px rgba(20,10,30,.18),0 40px 70px rgba(10,4,20,.50);
}
.r3-dusk{background:radial-gradient(ellipse 85% 42% at 50% 42%,rgba(255,196,160,.30),transparent 70%),linear-gradient(180deg,#2A1E3A 0%,#43304A 52%,#5B3A5F 100%);color:#fff}
.r3-morning{background:radial-gradient(ellipse 120% 46% at 50% 0%,#FFF1CF 0%,rgba(255,241,207,0) 70%),var(--rice)}
.grain{background-image:var(--grain)}
.tnum{font-variant-numeric:tabular-nums}
/* stage pips: four dots, filled to the stage. Readable without colour. */
.pips{display:inline-flex;gap:3px;align-items:center}
.pips i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.22;display:block}
.pips i.on{opacity:1}
.pips-lg i{width:8px;height:8px}
/* stage pill */
.sp{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px 0 10px;border-radius:999px;font:800 13px/1 var(--round);white-space:nowrap}
.sp-new{background:var(--st-new-soft);color:var(--st-new-ink)}
.sp-learn{background:var(--st-learn-soft);color:var(--st-learn-ink)}
.sp-strong{background:var(--st-strong-soft);color:var(--st-strong-ink)}
.sp-known{background:var(--st-known);color:#fff}
.sp-skip{background:transparent;color:var(--muted);box-shadow:inset 0 0 0 1.5px var(--faint);border-radius:999px}
.sp-glass{background:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
/* marks on Read: support recedes as the word ripens. Known words are plain text. */
.mk-new{background:rgba(252,187,45,.30);border-radius:7px;padding:0 4px;margin:0 -1px;text-decoration:underline;text-decoration-color:var(--st-new);text-decoration-thickness:3px;text-underline-offset:7px}
.mk-learn{text-decoration:underline;text-decoration-color:var(--st-learn);text-decoration-thickness:2.5px;text-underline-offset:7px}
.mk-strong{text-decoration:underline;text-decoration-color:rgba(63,125,30,.55);text-decoration-thickness:1.5px;text-underline-offset:7px}
.mk-dark.mk-strong{text-decoration-color:rgba(158,214,110,.7)}
/* untapped-in-the-wild shimmer: a light runs along the underline once as the card leaves */
.shim{position:relative;display:inline-block}
.shim:after{content:'';position:absolute;left:-2px;right:-2px;bottom:-9px;height:4px;border-radius:4px;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0) 30%,rgba(255,255,255,.95) 50%,rgba(255,255,255,0) 70%,transparent 100%) -120% 0/60% 100% no-repeat;opacity:0}
@keyframes r3-shimmer{0%{background-position:-120% 0;opacity:0}12%{opacity:1}88%{opacity:1}100%{background-position:220% 0;opacity:0}}
/* the living review card */
.lc{position:absolute;inset:0;border-radius:26px;overflow:hidden;background-color:var(--paper-front);background-image:var(--grain);box-shadow:var(--e-card);color:var(--ink)}
.lc-back{background-color:var(--paper-back);background-image:var(--grain),linear-gradient(180deg,transparent 0 78px,rgba(232,0,48,.16) 78px 79.5px,transparent 79.5px),repeating-linear-gradient(180deg,transparent 0 33px,rgba(33,96,186,.055) 33px 34px)}
.lc-edge{position:absolute;inset:0;border-radius:26px;box-shadow:inset 0 0 0 1px rgba(60,40,10,.06);pointer-events:none}
/* topic strips on review cards and shelf mini-cards */
.str{position:absolute;left:0;right:0;top:0;height:16px}
.str-ent{background:var(--t-ent)}.str-news{background:var(--t-news)}.str-travel{background:var(--t-travel)}
.str-food{background:var(--t-food)}.str-home{background:var(--t-home)}.str-work{background:var(--t-work)}
.str-active{background:var(--t-active)}.str-pets{background:var(--t-pets)}.str-net{background:var(--t-net)}
/* the clean flippable flashcard on Read (QoloaFlashcard / QoloaCardBack) */
.qcard-scene{perspective:1400px}
.qcard-flip{position:relative;width:100%;height:100%;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transition:transform .42s cubic-bezier(.22,1,.36,1)}
.qcard-flip.flipped{transform:rotateY(180deg)}
@media (prefers-reduced-motion:reduce){.qcard-flip{transition:none!important}}
.qcard,.qcard-face{border-radius:28px;background:#FFFFFF;box-shadow:inset 0 0 0 2px var(--line),0 5px 0 var(--lineledge),0 18px 36px -10px rgba(20,19,17,.10),0 4px 10px rgba(20,19,17,.04);color:var(--ink);display:flex;flex-direction:column;justify-content:space-between;padding:22px 24px 20px;box-sizing:border-box}
.qcard{position:relative}
.qcard-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.qcard-back{transform:rotateY(180deg);justify-content:flex-start;gap:13px}
.qdiff{display:inline-flex;align-items:flex-end;gap:2.5px;height:14px;flex:none}
.qdiff i{width:3px;border-radius:99px;background:rgba(20,19,17,.16);display:block}
.qdiff i:nth-child(1){height:7px}.qdiff i:nth-child(2){height:10px}.qdiff i:nth-child(3){height:13px}
.qdiff i.on{background:rgba(20,19,17,.52)}
.qsrc{font:700 13px/1.25 var(--round);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.qsrc-link{font:800 13.5px/1.25 var(--round);color:var(--sky);display:inline-flex;align-items:center;gap:4px;text-decoration:none}
.qturn{width:28px;height:28px;border-radius:50%;background:rgba(20,19,17,.05);color:rgba(107,100,90,.85);display:inline-flex;align-items:center;justify-content:center;flex:none}
.qdiv{height:2px;border-radius:2px;background:var(--line);width:100%;flex:none}
.qruby{position:relative;display:inline-block;vertical-align:baseline;line-height:1.2;margin:0 1px}
.qruby .rt{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);font:700 10.5px/1 var(--round);color:var(--muted);margin-bottom:3px;white-space:nowrap;pointer-events:none}
.qruby .rn{position:absolute;top:100%;left:50%;transform:translateX(-50%);font:700 10.5px/1 var(--round);color:var(--sky);margin-top:4px;white-space:nowrap;pointer-events:none}
.qmini{position:relative;flex:none;border-radius:8px;overflow:hidden;background:#fff;box-shadow:inset 0 0 0 1px rgba(20,19,17,.09),0 4px 10px rgba(20,19,17,.08);display:flex;flex-direction:column}
.qmini-top{height:7px;width:100%;flex:none}
.qmini-body{flex:1;padding:6px 6px 5px;display:flex;flex-direction:column;gap:4px;position:relative}
.qmini-ln{height:3px;border-radius:99px;background:rgba(20,19,17,.16);display:block}
/* the grade stamps on a dragged card */
.gstamp{position:absolute;top:252px;padding:9px 16px 8px;border:4px solid currentColor;border-radius:14px;font:900 26px/1 var(--round);letter-spacing:.04em;background:rgba(255,253,248,.92);pointer-events:none;text-transform:uppercase}
/* rubber stamp: Read without help */
.rstamp{display:inline-flex;flex-direction:column;align-items:center;overflow:hidden;border:.12em solid var(--stamp);border-radius:.42em;color:var(--stamp);padding:.3em .8em 0;
font:800 22px/1 var(--disp);letter-spacing:.06em;text-transform:uppercase;
/* two masks: soft speckled ink, and uneven pressure (one side heavy, the other lighter) */
-webkit-mask-image:var(--ink-mask-soft),linear-gradient(118deg,#000 0 55%,rgba(0,0,0,.74));mask-image:var(--ink-mask-soft),linear-gradient(118deg,#000 0 55%,rgba(0,0,0,.74));
-webkit-mask-size:240px,100% 100%;mask-size:240px,100% 100%;-webkit-mask-composite:source-in;mask-composite:intersect}
/* the words are knocked out of a solid band: it carries weight at 12px as well as at 40px */
.rstamp small{align-self:stretch;margin:.3em -.8em 0;padding:.5em .9em .5em;background:var(--stamp);color:var(--paper-front);font:800 .38em/1 var(--ui);letter-spacing:.22em;text-align:center}
/* the full stop of the wordmark: a pressed drop of the stamp ink */
.wmdot{display:inline-block;width:.26em;height:.26em;border-radius:50%;margin-left:.03em;background:radial-gradient(circle at 50% 50%,var(--stamp-lit) 0 38%,var(--stamp) 62%,var(--stamp-deep) 100%);box-shadow:0 0 0 .025em var(--stamp-deep) inset}
@keyframes r3-stamp-in{0%{opacity:0;transform:scale(1.9) rotate(-16deg)}52%{opacity:1;transform:scale(.93) rotate(-9deg)}70%{transform:scale(1.04) rotate(-8deg)}100%{opacity:1;transform:scale(1) rotate(-8deg)}}
@keyframes r3-thump{0%,100%{transform:translateY(0) scale(1)}45%{transform:translateY(3px) scale(.985)}}
/* activity calendar */
.hm{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,var(--c,11px));grid-auto-columns:var(--c,11px);gap:var(--g,3px)}
.hm i{display:block;border-radius:3px;background:var(--hm0)}
.hm i.h1{background:var(--hm1)}.hm i.h2{background:var(--hm2)}.hm i.h3{background:var(--hm3)}.hm i.h4{background:var(--hm4)}
.hm i.rest{background:transparent;box-shadow:inset 0 0 0 1.5px var(--hm3)}
.hm i.fut{background:transparent}
.hm i.today{box-shadow:0 0 0 1.5px var(--rice),0 0 0 3px var(--ink)}
@keyframes r3-fill{0%{transform:scale(.2);background:var(--hm0)}55%{transform:scale(1.35)}100%{transform:scale(1)}}
/* readable shelf */
.shelf{position:relative;display:flex;align-items:flex-end;gap:10px;padding:0 6px 8px}
.shelf:after{content:'';position:absolute;left:0;right:0;bottom:0;height:8px;border-radius:4px;background:linear-gradient(180deg,#E6D8BE,#D3C09C);box-shadow:0 6px 10px rgba(80,50,10,.16)}
.mini{position:relative;flex:none;border-radius:7px;overflow:hidden;box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 6px 12px rgba(40,20,0,.18);z-index:1}
/* small helpers */
.glass-pill{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);color:#fff;font:600 14px/1 var(--ui);white-space:nowrap}
.btn-again{background:var(--surface);color:var(--again);border-color:#EED7A6}
.btn-got{background:var(--got);color:#fff}
.kbd{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;border-radius:5px;background:var(--surface2);font:700 11px/1 var(--mono);color:var(--muted)}
.callout{position:relative;padding:12px 14px;border-radius:14px;background:var(--surface);border:1px solid var(--border);font:400 13px/1.45 var(--ui)}
.num-xl{font:800 64px/.9 var(--disp);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
@keyframes r3-rise{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:translateY(0)}}
@keyframes r3-pop{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes r3-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.r3-anim,.r3-anim *{animation:none!important;transition:none!important}}
/* ------------------------------------------------------------------
Round 3 polish: borrowed from Duolingo and Brilliant on purpose.
Controls you can press (a ledge under every button), a rounded heavy face for
numbers and controls, stat tiles, a thick progress bar, colour you can feel.
On iOS --round is SF Pro Rounded (.fontDesign(.rounded)); Nunito stands in here.
------------------------------------------------------------------ */
:root{
--round:'Nunito','SF Pro Rounded',ui-rounded,system-ui,sans-serif;
--leafbright:#5DB12F; --leafledge:#3F7D1E;
--verbledge:#A50023; --sunledge:#D89A0C; --inkledge:#0A0806;
--line:#E9E2D6; --lineledge:#D9CFBF;
}
.rnd{font-family:var(--round)}
/* 3D buttons: a solid ledge, pressed sinks into it */
.b3{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;height:56px;padding:0 24px;border-radius:18px;border:0;font:800 18px/1 var(--round);letter-spacing:.005em;white-space:nowrap;text-decoration:none;cursor:pointer;transform:translateY(0);transition:transform .08s ease,box-shadow .08s ease;user-select:none}
.b3:active,.b3.pressed{transform:translateY(4px)}
.b3-verb{background:var(--verb);color:#fff;box-shadow:0 4px 0 var(--verbledge)}
.b3-verb:active,.b3-verb.pressed{box-shadow:0 0 0 var(--verbledge)}
.b3-go{background:var(--leafbright);color:#fff;box-shadow:0 4px 0 var(--leafledge)}
.b3-go:active{box-shadow:0 0 0 var(--leafledge)}
.b3-ink{background:var(--ink);color:#FFFBF3;box-shadow:0 4px 0 var(--inkledge),inset 0 1px 0 rgba(255,246,230,.10)}
.b3-ink:active{box-shadow:0 0 0 var(--inkledge),inset 0 1px 0 rgba(255,246,230,.10)}
.b3-white{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 2px var(--line),0 4px 0 var(--lineledge)}
.b3-white:active{box-shadow:inset 0 0 0 2px var(--line),0 0 0 var(--lineledge)}
.b3-again{background:#fff;color:var(--again);box-shadow:inset 0 0 0 2px #F0D9A8,0 4px 0 #E2C07A}
.b3-again:active{box-shadow:inset 0 0 0 2px #F0D9A8,0 0 0 #E2C07A}
.b3-glass{background:rgba(255,255,255,.16);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22),0 4px 0 rgba(0,0,0,.22)}
.b3-sm{height:44px;border-radius:14px;font-size:15px;padding:0 16px}
/* passive surface card: crisp 1px warm border, zero button ledge */
.chunk{background:#fff;border-radius:20px;box-shadow:inset 0 0 0 1px var(--line)}
/* stat tile: a coloured frame, a label band, a big number */
.tile{flex:1 1 0;min-width:0;border-radius:16px;padding:2px;background:var(--c,var(--sun));box-shadow:0 3px 0 var(--cl,var(--sunledge))}
.tile>b{display:block;padding:7px 0 6px;text-align:center;font:900 11.5px/1 var(--round);letter-spacing:.08em;text-transform:uppercase;color:var(--ct,#fff)}
.tile>div{background:#fff;border-radius:14px;height:58px;display:flex;align-items:center;justify-content:center;gap:7px;font:900 25px/1 var(--round);color:var(--cn,var(--ink));font-variant-numeric:tabular-nums}
/* thick progress bar with a highlight */
.pbar{position:relative;height:16px;border-radius:99px;background:var(--surface2);overflow:hidden}
.pbar>i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:var(--pc,var(--leafbright));display:block}
.pbar>i:after{content:'';position:absolute;left:8px;right:8px;top:4px;height:4px;border-radius:4px;background:rgba(255,255,255,.35)}
.pbar-dusk{background:rgba(255,255,255,.16)}
/* filled flame, drawn once and reused */
.flame-f{width:26px;height:26px;flex:none}
/* pill in the rounded face */
.rpill{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 13px 0 10px;border-radius:999px;font:800 15px/1 var(--round)}
/* confetti */
.conf{position:absolute;display:block;border-radius:3px;opacity:0}
@keyframes r3-conf{0%{opacity:0;transform:translate(0,0) rotate(0) scale(.4)}10%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(1)}}
@keyframes r3-conf-stay{0%{opacity:0;transform:translate(0,0) rotate(0) scale(.4)}10%{opacity:1}100%{opacity:1;transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(1)}}
@keyframes r3-bob{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-10px) rotate(-3deg)}60%{transform:translateY(0) rotate(2deg)}}
@keyframes r3-tile-in{0%{opacity:0;transform:translateY(16px) scale(.9)}70%{opacity:1;transform:translateY(-2px) scale(1.02)}100%{opacity:1;transform:none}}
/* Round 3 ground: warm light, not a void. Read and review sit on rice, and the card's topic
tints the light behind it, the way a room takes the colour of a lamp. --amb is set per topic. */
.r3-amb{--amb:#FBDCCD;background:radial-gradient(ellipse 95% 52% at 50% 44%,var(--amb) 0%,rgba(251,248,243,0) 74%),radial-gradient(ellipse 140% 40% at 50% 0%,#FFF6E6 0%,rgba(255,246,230,0) 70%),var(--rice);color:var(--ink);transition:background .5s ease}
.amb-today{--amb:#FFE0B0}
:root{--e-card-l:0 1px 0 rgba(255,255,255,.9) inset,0 0 0 1px rgba(120,90,50,.06),0 3px 0 rgba(150,115,70,.12),0 22px 40px rgba(120,80,40,.20)}
.r3-amb .lc{box-shadow:var(--e-card-l)}
/* light chrome */
.lchip{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 14px 0 10px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--line),0 1px 2px rgba(20,19,17,.05);font:900 18px/1 var(--round);color:var(--ink);text-decoration:none}
.lcirc{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;background:#fff;box-shadow:inset 0 0 0 1px var(--line),0 1px 2px rgba(20,19,17,.05);color:var(--ink);text-decoration:none}
.lseg{display:inline-flex;padding:3px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--line),0 1px 2px rgba(20,19,17,.05)}
.lseg span,.lseg a{height:38px;padding:0 18px;display:flex;align-items:center;border-radius:999px;font:800 14px/1 var(--round);color:var(--muted);text-decoration:none}
.lseg .on{background:var(--ink);color:#fff}
.ltool{display:flex;flex-direction:column;align-items:center;gap:7px;width:60px;font:800 12.5px/1 var(--round);color:var(--muted)}
.ltool .b3{width:58px;height:58px;padding:0;border-radius:20px}
/* ------------------------------------------------------------------
Round 3 identity: Qoloa is the colour of what you're into.
Nine topics, nine hues; structure stays rice and ink. Actions are ink, never red
(red means "wrong" in a learning app). The cat's lime is the brand anchor.
------------------------------------------------------------------ */
:root{
--lime-anchor:#B1D243; --lime-deep:#7EA51F;
--t-ent:#F2508A; --t-ent-s:#FFE2EC; /* entertainment */
--t-news:#3D84F5; --t-news-s:#E2EDFF; /* culture and news */
--t-travel:#10B5A3;--t-travel-s:#D6F4EF;/* travel */
--t-food:#F5A300; --t-food-s:#FFF0C7; /* food and drink */
--t-home:#B45AA6; --t-home-s:#F6E3F2; /* home and city */
--t-work:#2F9E6E; --t-work-s:#DBF2E7; /* money and work */
--t-active:#7CC23A;--t-active-s:#EAF6D8;/* active life */
--t-pets:#FF8A3D; --t-pets-s:#FFE8D6; /* pets and family */
--t-net:#8A55F0; --t-net-s:#EEE6FF; /* gaming and net */
}
/* the light behind a card takes its topic */
.tp-ent{--amb:#FFD9E6}.tp-news{--amb:#D8E7FF}.tp-travel{--amb:#CCF0EA}.tp-food{--amb:#FFEAB5}
.tp-home{--amb:#F3D9EE}.tp-work{--amb:#D1EEDF}.tp-active{--amb:#E3F3CB}.tp-pets{--amb:#FFDFC7}.tp-net{--amb:#E7DCFF}
.r3-amb.tp-mix{background:radial-gradient(ellipse 60% 40% at 22% 52%,#FFD9E6 0%,rgba(255,217,230,0) 70%),radial-gradient(ellipse 60% 40% at 80% 46%,#CCF0EA 0%,rgba(204,240,234,0) 70%),radial-gradient(ellipse 70% 34% at 50% 78%,#FFEAB5 0%,rgba(255,234,181,0) 70%),var(--rice)}
/* topic dot and chip */
.tdot{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none;background:var(--tc)}
.tchip{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px 0 9px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line);font:800 13px/1 var(--round);white-space:nowrap;flex:none;border:0;color:var(--ink)}
.tchip.on{background:var(--ts);box-shadow:inset 0 0 0 2px var(--tc)}
/* ------------------------------------------------------------------
Round 4: Specific conversation with Qoloa -> live sample reads.
------------------------------------------------------------------ */
:root{
--vn:'Be Vietnam Pro','Noto Sans',-apple-system,BlinkMacSystemFont,sans-serif;
--ko:'Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
}
.vn{font-family:var(--vn)}
.ko{font-family:var(--ko)}
.q-chat-q{background:#fff;border-radius:20px 20px 20px 6px;padding:13px 16px;font:700 15.5px/1.42 var(--round);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);max-width:292px}
.q-chat-a{background:var(--ink);color:#FFFBF3;border-radius:20px 20px 6px 20px;padding:11px 16px;font:800 15px/1.38 var(--round);max-width:282px}
.tip-l{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--line),0 2px 6px rgba(20,19,17,.06);font:800 13.5px/1 var(--round);color:var(--ink);cursor:pointer}
.q-spark{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:8px 14px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 2px var(--line),0 3px 0 var(--lineledge);font:800 14px/1.25 var(--round);color:var(--ink);cursor:pointer;border:0;text-align:left;transition:transform .08s ease,background .12s ease;user-select:none}
.q-spark:active{transform:translateY(2px);box-shadow:inset 0 0 0 2px var(--line),0 1px 0 var(--lineledge)}
.q-spark.on{background:var(--ink);color:#FFFBF3;box-shadow:0 3px 0 var(--inkledge)}
.q-tap{cursor:pointer;border-radius:8px;padding:1px 5px;margin:0 1px;background:rgba(252,187,45,.22);box-shadow:inset 0 -2.5px 0 var(--st-new);transition:background .15s ease;display:inline-block}
.q-tap:hover{background:rgba(252,187,45,.38)}
.q-tap.on{background:rgba(252,187,45,.52);box-shadow:0 0 0 2.5px var(--st-new)}
.q-tap.saved{background:rgba(252,187,45,.32);box-shadow:none;text-decoration:underline;text-decoration-color:var(--st-new);text-decoration-thickness:3px;text-underline-offset:6px}
.r4-pill-btn{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 2px var(--line),0 2px 0 var(--lineledge);font:800 13.5px/1 var(--round);color:var(--ink);cursor:pointer;border:0;user-select:none;white-space:nowrap;transition:transform .08s ease}
.r4-pill-btn:active{transform:translateY(2px)}
.r4-pill-btn.on{background:var(--ink);color:#FFFBF3;box-shadow:0 2px 0 var(--inkledge)}
.kicker-pill{white-space:nowrap;flex-shrink:0}