:root{--orange: #d49154;--orange-dark: #b8763d;--orange-soft: rgba(212, 145, 84, .16);--ink: #322e2e;--ink-soft: #5a524c;--ink-deep: #1a120c;--paper: #ede9dd;--paper-2: #f7f3ee;--paper-3: #fffdf9;--placeholder: #e8d5b8;--line: rgba(50, 46, 46, .1);--line-strong: rgba(50, 46, 46, .18);--danger: #9c3b2e;--ok: #2f6b4f;--signal-red: #e2001a;--signal-green: #00a651;--radius: 14px;--radius-sm: 10px;--shadow-sm: 0 1px 2px rgba(26, 18, 12, .05);--shadow-md: 0 8px 28px rgba(26, 18, 12, .08);--shadow-lg: 0 18px 48px rgba(26, 18, 12, .12);--media-max-w: 280px;--media-max-h: 280px;--font-title: "Space Grotesk", "Segoe UI", sans-serif;--font-body: "Lato", "Segoe UI", sans-serif;--ease: cubic-bezier(.22, 1, .36, 1)}*{box-sizing:border-box}body{margin:0;min-height:100vh;color:var(--ink);font-family:var(--font-body);line-height:1.5;background:radial-gradient(1100px 520px at 8% -8%,rgba(212,145,84,.22),transparent 55%),radial-gradient(900px 480px at 96% 4%,rgba(47,107,79,.1),transparent 52%),radial-gradient(700px 400px at 50% 100%,rgba(26,18,12,.05),transparent 60%),var(--paper);background-attachment:fixed}button,input,select{font:inherit}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--orange);outline-offset:2px}.app{min-height:100vh;display:flex;flex-direction:column}.topbar{position:sticky;top:0;z-index:40;color:var(--paper-2);padding:.9rem 1.15rem 1rem;background:linear-gradient(180deg,#1a120cf5,#1a120ce6);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid rgba(245,241,236,.08);box-shadow:0 10px 30px #1a120c2e}.topbar-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.85rem;flex-wrap:wrap}.brand{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;font-family:var(--font-title);font-weight:600;letter-spacing:.04em;font-size:1.05rem}.brand>span:not(.mode-badge){color:inherit}.brand .brand-name span,.brand>span:not(.brand-name):not(.mode-badge){color:var(--orange)}.mode-badge{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-body);font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.32rem .55rem .18rem;border-radius:999px;line-height:1}.mode-badge.training{color:var(--ink-deep);background:var(--orange);box-shadow:0 0 0 1px #d4915459}.mode-badge.quiz{color:var(--paper-2);background:var(--ok);box-shadow:0 0 0 1px #2f6b4f59}.rows{display:grid;gap:.4rem}.row-cell{position:relative;height:.62rem;border:0;padding:0;border-radius:99px;background:#ffffff1f;cursor:pointer;overflow:hidden;transition:transform .15s var(--ease),background .15s ease}.row-cell:hover:not(:disabled):not(.current):not(.done){transform:translateY(-1px);background:#ffffff2e}.row-cell:disabled{cursor:default;opacity:.55}.row-cell.current{background:transparent;overflow:visible;cursor:default}.row-cell.current:hover{background:transparent;transform:none}.row-cell.done:hover:not(:disabled){transform:translateY(-1px);background:var(--ok);filter:brightness(1.08)}.row-cell-steps{display:grid;gap:3px;position:absolute;top:0;right:0;bottom:0;left:0}.row-cell-tick{display:block;width:100%;height:100%;min-width:0;padding:0;border:0;border-radius:99px;background:#ffffff24;transition:background .2s var(--ease),transform .15s var(--ease),box-shadow .15s ease;pointer-events:none;cursor:default}.row-cell-tick.ok{background:var(--ok)}.row-cell-tick.now{background:var(--orange);box-shadow:0 0 0 1px #d4915459}.row-cell-tick.nav{pointer-events:auto;cursor:pointer}.row-cell-tick.ok.nav:hover{transform:scaleY(1.35);box-shadow:0 0 0 1px #2f6b4f73}.row-cell-tick.now.nav:hover{transform:scaleY(1.35);box-shadow:0 0 0 1px #d491548c}.row-cell.done{background:var(--ok)}.topbar-actions{display:flex;align-items:center;gap:.45rem;margin-left:auto;flex-wrap:wrap}.topbar-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.34rem .72rem .3rem;border:1px solid rgba(245,241,236,.22);border-radius:999px;background:#ffffff14;color:var(--paper-2);cursor:pointer;font-family:var(--font-title);font-size:.78rem;font-weight:600;letter-spacing:.03em;line-height:1;transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s var(--ease)}.topbar-btn:hover{background:#ffffff24;border-color:var(--orange);transform:translateY(-1px)}.topbar-btn-icon{width:.95rem;height:.95rem;flex:0 0 auto}.topbar-btn-tag{font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.18rem .35rem .12rem;border-radius:999px;background:var(--orange);color:var(--ink-deep);line-height:1}.topbar-btn-quiz:hover{border-color:var(--ok);color:#d7efe3}.topbar-btn-logout:hover{border-color:#e0a090;color:#f3d4ce;background:#9c3b2e40}.lang-switch{position:relative}.lang-trigger{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .55rem .3rem .45rem;border:1px solid rgba(245,241,236,.22);border-radius:999px;background:#ffffff14;color:var(--paper-2);cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .15s var(--ease)}.lang-trigger:hover,.lang-trigger.open{background:#ffffff24;border-color:var(--orange);transform:translateY(-1px)}.lang-flag{display:inline-flex;align-items:center;justify-content:center;font-size:1.15rem;line-height:1;height:1.15rem}.lang-code{display:inline-flex;align-items:center;font-family:var(--font-title);font-size:.75rem;font-weight:600;letter-spacing:.06em;line-height:1;transform:translateY(1px)}.lang-caret{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.7;margin-left:.1rem;transform:translateY(1px)}.lang-menu{position:absolute;top:calc(100% + .45rem);right:0;z-index:20;min-width:10.5rem;margin:0;padding:.4rem;list-style:none;background:var(--paper-3);color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);animation:pop-in .18s var(--ease)}.lang-menu li{margin:0}.lang-option{display:flex;align-items:center;gap:.55rem;width:100%;padding:.5rem .65rem;border:0;border-radius:8px;background:transparent;color:inherit;cursor:pointer;text-align:left;transition:background .12s ease}.lang-option:hover{background:#efe6d8}.lang-option.selected{background:var(--orange-soft);box-shadow:inset 0 0 0 1px var(--orange)}.lang-label{font-size:.9rem;font-weight:500}.main{padding:1.6rem 1.25rem 2.5rem;max-width:960px;margin:0 auto;width:100%;flex:1}.card{background:color-mix(in srgb,var(--paper-3) 92%,white);border:1px solid var(--line);border-radius:calc(var(--radius) + 2px);padding:1.45rem 1.5rem;margin-bottom:1rem;box-shadow:var(--shadow-sm),var(--shadow-md);animation:card-in .35s var(--ease)}.element-layout{display:flex;flex-direction:column;gap:.85rem}.element-layout.has-media{flex-direction:row;align-items:flex-start;gap:1.35rem}.element-main{flex:1;min-width:0}.element-main>p{margin:0 0 .85rem;color:var(--ink-soft);font-size:1.02rem}.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;margin-bottom:.35rem}.card-head h2{margin:0;flex:1;font-size:1.35rem;letter-spacing:-.01em}.help-btn{flex:0 0 auto;width:1.85rem;height:1.85rem;padding:0;border-radius:99px;border:1px solid var(--line-strong);background:var(--paper-3);color:var(--ink-soft);font-size:.85rem;line-height:1;cursor:pointer;transition:border-color .15s ease,color .15s ease,background .15s ease,transform .15s var(--ease)}.help-btn:hover,.help-btn[aria-expanded=true]{border-color:var(--orange);color:var(--orange-dark);background:var(--orange-soft);transform:scale(1.05)}h1,h2{font-family:var(--font-title);font-weight:600;margin:0 0 .7rem;letter-spacing:-.015em;color:var(--ink-deep)}h1{font-size:1.55rem}.btn{background:linear-gradient(180deg,#dfa06a,var(--orange));color:#fff;border:0;border-radius:999px;padding:.72rem 1.25rem;cursor:pointer;font-family:var(--font-title);font-weight:600;letter-spacing:.02em;box-shadow:0 6px 16px #b8763d47;transition:transform .15s var(--ease),box-shadow .15s ease,filter .15s ease}.btn:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.03);box-shadow:0 10px 22px #b8763d57}.btn:disabled{opacity:.42;cursor:default;box-shadow:none}.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line-strong);box-shadow:none}.btn.ghost:hover:not(:disabled){background:#ffffff8c;border-color:var(--orange);filter:none;box-shadow:none}.nav{display:flex;justify-content:space-between;gap:.75rem;margin-top:.25rem}.media{flex:0 0 auto;width:var(--media-max-w);max-width:var(--media-max-w);margin:0;padding:.65rem;background:linear-gradient(160deg,rgba(255,255,255,.55),transparent 55%),var(--placeholder);border:1px solid var(--line);border-radius:var(--radius);display:flex;flex-direction:column;align-items:center;gap:.45rem;box-shadow:var(--shadow-sm)}.media img{display:block;width:auto;height:auto;max-width:100%;max-height:var(--media-max-h);object-fit:contain;border-radius:8px}.media figcaption{margin:0;font-size:.85rem;text-align:center;width:100%}@media(max-width:640px){.element-layout.has-media{flex-direction:column}.element-layout.has-media .media{order:-1;width:100%;max-width:min(100%,var(--media-max-w));align-self:center}.element-layout.has-media .element-main{order:1}.main{padding:1.15rem .9rem 2rem}.card{padding:1.15rem 1.1rem}}.intro-list{margin:.75rem 0 0;padding-left:1.2rem}.intro-list li{margin:.35rem 0}.takeaway{font-size:.95rem;border-left:3px solid var(--orange);padding:.55rem 0 .55rem .85rem;margin-top:1rem;background:var(--orange-soft);border-radius:0 var(--radius-sm) var(--radius-sm) 0}.tip{background:linear-gradient(90deg,#f6e6c8,#f3e3c6);border-left:4px solid var(--orange);border-radius:0 10px 10px 0;padding:.65rem .9rem;margin:0 0 1rem;font-size:.95rem;animation:tip-in .22s var(--ease)}.callout{padding:.9rem 1.05rem;border-radius:var(--radius-sm);border:1px solid transparent}.callout.warning{background:#f6e8cf;border-color:#d4915459}.callout.danger{background:#f6ddd8;border-color:#9c3b2e40}.callout.info{background:#e7efe8;border-color:#2f6b4f40}.choice,.chip,.hot{display:block;width:100%;text-align:left;margin:.4rem 0;padding:.8rem .95rem;border-radius:var(--radius-sm);border:1px solid var(--line-strong);background:var(--paper-3);cursor:pointer;box-shadow:var(--shadow-sm);transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s var(--ease),box-shadow .15s ease}.choice:hover,.chip:hover,.hot:hover{border-color:var(--orange);transform:translateY(-1px);box-shadow:0 6px 16px #1a120c14}.hot.todo,.chip.todo{background:var(--paper-3);border-color:var(--ink);color:var(--ink)}.hot.done,.chip.done{background:var(--ok);border-color:var(--ok);color:#fff;box-shadow:0 6px 16px #2f6b4f38}.chip.current{outline-offset:2px}.item-detail{margin-top:.35rem;opacity:.92;font-weight:400}.choice.picked{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-soft),var(--shadow-sm);background:#fffaf3}.choice.wrong,.btn.wrong,select.wrong{background:var(--signal-red);border-color:var(--signal-red);color:#fff;outline:none}.choice.right,.btn.right,select.right{background:var(--signal-green);border-color:var(--signal-green);color:#fff;outline:none}.feedback{margin:.85rem 0 0;padding:.75rem .9rem;border-radius:var(--radius-sm);background:var(--paper-3);border:1px solid var(--line);animation:tip-in .22s var(--ease)}.feedback.good{box-shadow:inset 0 0 0 2px var(--signal-green)}.feedback.bad{box-shadow:inset 0 0 0 2px var(--signal-red)}.stack{display:flex;flex-direction:column;gap:.45rem}.col-board{display:flex;flex-direction:column;gap:1rem}.col-progress{display:flex;align-items:center;gap:.65rem}.col-progress-track{flex:1;height:.35rem;border-radius:99px;background:#322e2e1a;overflow:hidden}.col-progress-fill{height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--orange-dark),var(--orange));transition:width .25s var(--ease)}.col-progress-label{font-family:var(--font-title);font-size:.75rem;font-weight:600;color:var(--ink-soft);min-width:2.4rem;text-align:right}.col-bank{border-radius:calc(var(--radius) + 2px);border:1px solid rgba(50,46,46,.1);background:#dcd9d4;box-shadow:inset 0 1px 2px #1a120c0d;overflow:hidden;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}.col-bank.drop-target{border-color:var(--orange);background:#d5d2cd;box-shadow:0 0 0 3px var(--orange-soft),inset 0 1px 2px #1a120c0d}.col-bank.is-empty{opacity:.9}.col-bank-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.55rem .85rem;border-bottom:1px solid rgba(50,46,46,.08);background:#fffdf959}.col-bank-label{font-family:var(--font-title);font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}.col-bank-action{font-size:.8rem;color:var(--orange-dark);font-weight:600;animation:tip-in .2s var(--ease)}.col-bank-tray{display:flex;flex-wrap:wrap;gap:.55rem;min-height:3.6rem;padding:.8rem}.col-bank-empty{margin:0;width:100%;text-align:center;font-size:.9rem;color:var(--ok);font-weight:600;padding:.45rem 0}.col-grid{display:grid;gap:.75rem;align-items:stretch}.col-drop{--col-accent: var(--orange);display:flex;flex-direction:column;min-height:10.5rem;border-radius:calc(var(--radius) + 2px);border:1px solid var(--line);background:var(--paper-3);box-shadow:var(--shadow-sm);overflow:hidden;transition:border-color .18s ease,box-shadow .18s ease,transform .18s var(--ease)}.col-drop.tone-0{--col-accent: #d49154}.col-drop.tone-1{--col-accent: #2f6b4f}.col-drop.tone-2{--col-accent: #6b5b8c}.col-drop.tone-3{--col-accent: #8a5a44}.col-drop.receptive{border-color:color-mix(in srgb,var(--col-accent) 55%,transparent);transform:translateY(-1px)}.col-drop.drop-target{border-color:var(--col-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--col-accent) 22%,transparent);background:#fffaf3}.col-board.has-selection .col-drop.receptive .col-drop-placeholder{color:var(--col-accent);border-color:color-mix(in srgb,var(--col-accent) 45%,transparent)}.col-drop-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.55rem;padding:.75rem .8rem .7rem;border-bottom:1px solid var(--line);background:linear-gradient(180deg,color-mix(in srgb,var(--col-accent) 16%,transparent),transparent 85%);border-top:3px solid var(--col-accent)}.col-drop-head h3{margin:0;font-family:var(--font-title);font-size:.92rem;font-weight:600;line-height:1.25;letter-spacing:-.01em;color:var(--ink-deep)}.col-drop-count{flex:0 0 auto;min-width:1.45rem;height:1.45rem;padding:0 .35rem;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;background:var(--col-accent);color:#fff;margin-top:.05rem}.col-drop-body{display:flex;flex-direction:column;gap:.5rem;padding:.7rem;flex:1}.col-drop-placeholder{margin-top:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;min-height:4.5rem;padding:.75rem;border-radius:var(--radius-sm);border:1.5px dashed var(--line-strong);color:var(--ink-soft);font-size:.82rem;text-align:center;transition:border-color .15s ease,color .15s ease,background .15s ease,min-height .15s ease}.col-drop-placeholder.compact{flex-direction:row;gap:.45rem;min-height:2.6rem;padding:.45rem .65rem;margin-top:.15rem}.col-drop-placeholder.compact .col-drop-plus{width:1.25rem;height:1.25rem;font-size:.95rem}.col-drop-plus{width:1.6rem;height:1.6rem;border-radius:99px;display:inline-flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:500;line-height:1;background:#322e2e0f;color:inherit}.col-card{display:flex;align-items:flex-start;gap:.55rem;width:100%;text-align:left;margin:0;padding:.7rem .75rem;border-radius:12px;border:1px solid rgba(50,46,46,.1);background:#f3f2f0;color:var(--ink);cursor:grab;box-shadow:0 1px 2px #1a120c0a,0 4px 12px #1a120c0d;font-size:.9rem;line-height:1.35;transition:transform .15s var(--ease),border-color .15s ease,box-shadow .15s ease,background .15s ease}.col-bank-tray .col-card{width:auto;max-width:min(100%,16rem);flex:0 1 auto;background:#ecebe8;border-color:#322e2e1f;box-shadow:0 1px 1px #1a120c08,0 3px 10px #1a120c12}.col-bank-tray .col-card:hover{background:#f5f4f2}.col-card-grip{display:flex;flex-direction:column;gap:3px;padding-top:.3rem;opacity:.35;flex:0 0 auto}.col-card-grip i{display:block;width:.85rem;height:2px;border-radius:99px;background:currentColor}.col-card-text{flex:1;min-width:0}.col-card:hover{border-color:var(--orange);transform:translateY(-2px);box-shadow:0 8px 20px #1a120c1a}.col-card:hover .col-card-grip{opacity:.55}.col-card:active{cursor:grabbing}.col-card.selected{border-color:var(--orange);background:#ebe6df;box-shadow:0 0 0 3px var(--orange-soft),0 8px 18px #b8763d24;transform:translateY(-1px)}.col-bank-tray .col-card.selected{background:#e4e0d9}.col-card.right{background:#00a6511f;border-color:var(--signal-green);color:#145c36;box-shadow:inset 3px 0 0 var(--signal-green)}.col-card.wrong{background:#e2001a1a;border-color:var(--signal-red);color:#8a1520;box-shadow:inset 3px 0 0 var(--signal-red)}@media(max-width:640px){.col-grid{grid-template-columns:1fr!important}.col-bank-action{display:none}}.banner{background:linear-gradient(135deg,#34835f,var(--ok));color:#fff;border-radius:var(--radius-sm);padding:.75rem 1rem;margin-bottom:1rem;box-shadow:0 8px 20px #2f6b4f38;font-weight:600}.bad{color:var(--danger);font-weight:600}.muted{opacity:.72;color:var(--ink-soft)}.btn.full{width:100%;margin-top:.85rem}.field{display:block;margin:.85rem 0;font-size:.92rem;color:var(--ink-soft);font-weight:600}.field input{width:100%;margin-top:.4rem;padding:.7rem .85rem;border-radius:var(--radius-sm);border:1px solid var(--line-strong);background:var(--paper-3);color:var(--ink);transition:border-color .15s ease,box-shadow .15s ease}.field input:hover{border-color:#d491548c}.field input:focus{border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-soft);outline:none}.auth-links{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.1rem}.auth-links .btn.ghost{padding:.55rem .9rem;font-size:.88rem}.ok-msg{color:var(--ok);font-weight:600}.error-page h1{color:var(--danger)}select.blank,select{border-radius:8px;border:1px solid var(--line-strong);padding:.35rem .5rem;background:var(--paper-3)}@keyframes card-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes tip-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@keyframes pop-in{0%{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}