:root{--bg: #ecf6ff;--card: #ffffff;--chip: #fff6c9;--chip-border: #ffe28a;--accent: #bfe0ff;--accent-2: #ffdce0;--text: #24415e;--muted: #6b86a0;--success: #e6f4ea;--subject-bg: #e1efff;--subject-border: #6fb1ff;--predicate-bg: #ffe6ec;--predicate-border: #ffadbb}*{box-sizing:border-box}body{margin:0;font-family:Nunito,ui-rounded,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,"Apple Color Emoji","Segoe UI Emoji";background:linear-gradient(180deg,var(--bg),#e3f1ff);color:var(--text)}.logo-title{display:flex;align-items:center;gap:12px;margin-bottom:6px}.logo-title img{width:46px;height:46px}.brand{font-family:Pacifico,cursive;font-size:clamp(22px,4vw,36px);color:#5aa7ff}.container{max-width:860px;margin:32px auto;padding:0 16px}.card{background:var(--card);border:1px solid #e6ecff;border-radius:16px;padding:20px;box-shadow:0 6px 30px #4f72cd14}h1{font-size:clamp(18px,3.3vw,24px);margin:0 0 6px;letter-spacing:.2px}.sub{color:var(--muted);margin-bottom:16px}.row{display:flex;gap:10px;flex-wrap:wrap}.stepper{display:flex;align-items:center;gap:10px;margin:8px 0 6px}.stepper .bar{flex:1;height:2px;background:#dbe7ff;border-radius:2px}.stepper .step{display:flex;align-items:center;gap:8px;font-weight:700;color:#7a93ad}.stepper .step:before{content:attr(data-step)}.stepper .step>span{font-weight:700;font-size:13px}.stepper .step::marker{content:""}.stepper .step{position:relative}.stepper .step:after{content:"";display:inline-block;width:24px;height:24px;border-radius:50%;border:2px solid #c7d7ff;background:#f3f7ff;margin-right:6px}.stepper .step span{margin-left:-4px}.stepper .step.active,.stepper .step.done{color:#2b4760}.stepper .step.active:after{border-color:#5aa7ff;background:#e1efff}.stepper .step.done:after{border-color:#93d0ff;background:#def1ff}.button{padding:10px 14px;border-radius:12px;border:2px solid #c7d7ff;background:#f3f7ff;cursor:pointer;font-weight:700}.button[aria-pressed=true]{background:#e9f1ff;border-color:var(--accent)}.primary{background:var(--accent);border-color:var(--accent);color:#15324b}.ghost{background:#f6fbff}.tokens{display:flex;flex-wrap:wrap;gap:10px;line-height:2}.token{padding:6px 12px;border-radius:999px;border:2px solid var(--chip-border);background:var(--chip);box-shadow:0 3px #f6d063;font-weight:700;transition:transform .06s ease,box-shadow .06s ease,background .06s ease;position:relative}.token[disabled]{cursor:default;opacity:1}.token.token--punct{background:transparent;border-color:transparent;box-shadow:none;padding:0 2px;font-weight:800;margin-left:-6px}.token.token--punct:hover{box-shadow:none!important}.token.selected{transform:translateY(1px)}.token.selected--complete_subject{background:var(--subject-bg);border-color:var(--subject-border);box-shadow:0 1px #b8d7ff;color:#0f2f54}.token.selected--complete_predicate{background:var(--predicate-bg);border-color:var(--predicate-border);box-shadow:0 1px #ffc2cd;color:#3c2230}.token.selected--both{background:repeating-linear-gradient(135deg,#fefefe 0,#fefefe 8px,#f6f6f6 8px,#f6f6f6 16px),linear-gradient(0deg,#fff,#fff);border-color:#b18cff;box-shadow:0 1px #d9c8ff}.token.verb-hint{outline:3px dashed #9aa7ff;outline-offset:2px}.tokens.mode--complete_subject .token:hover{box-shadow:0 3px #b8d7ff}.tokens.mode--complete_predicate .token:hover{box-shadow:0 3px #ffc2cd}.sel-badge{position:absolute;top:-6px;right:-6px;font-size:10px;line-height:1;padding:3px 5px;border-radius:999px;border:1px solid rgba(0,0,0,.08);background:#fff;color:#1b2b3a;box-shadow:0 1px 2px #00000014}.sel-badge.subject{background:var(--subject-bg);border-color:var(--subject-border)}.sel-badge.predicate{background:var(--predicate-bg);border-color:var(--predicate-border)}.sel-badge.both{background:#efe9ff;border-color:#b18cff}.diff-badge{position:absolute;bottom:-7px;right:-7px;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;line-height:1;border:1px solid rgba(0,0,0,.08);background:#fff}.diff-badge.extra{color:#9c1c1c;background:#ffe9e9;border-color:#f0b3b3}.diff-badge.missing{color:#1c4a1c;background:#e9ffe9;border-color:#b3f0b3}.legend{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;margin:6px 0 8px}.legend .gap{width:14px}.legend .swatch{display:inline-block;width:14px;height:14px;border-radius:50%;border:2px solid transparent}.legend .swatch.subject{background:var(--subject-bg);border-color:var(--subject-border)}.legend .swatch.predicate{background:var(--predicate-bg);border-color:var(--predicate-border)}.feedback{border-top:1px dashed #d9e3ff;margin-top:14px;padding-top:14px}.answers{display:flex;flex-direction:column;gap:10px;margin-top:10px}.answers-row{display:flex;align-items:flex-start;gap:10px}.answers-label{flex:0 0 120px;font-weight:700;color:#375673}.answers-row .tokens{flex:1}.badge{display:inline-block;padding:4px 10px;border-radius:999px;background:#e9f1ff;border:1px solid #c7d7ff;font-size:13px}.split{margin-top:8px}.split .lhs{background:#fff7cc;padding:2px 6px;border-radius:6px}.split .rhs{background:#e8f0fe;padding:2px 6px;border-radius:6px}.footer{text-align:center;color:#6b7aa6;font-size:12px;margin-top:16px}.tagline{color:#3b6ea5;font-weight:700;margin-top:4px}.celebration-overlay{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:50}.celebration-sky{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(40% 40% at 50% 30%,#c9e5ffcc,#c9e5ff00 70%),radial-gradient(30% 30% at 20% 10%,#fff0f8b3,#fff0f800 60%);opacity:0;animation:skyfade .6s ease forwards}@keyframes skyfade{to{opacity:1}}.celebration-emoji{position:absolute;top:-10vh;transform:translateY(0);animation-name:confetti-fall;animation-timing-function:linear;animation-fill-mode:forwards;filter:drop-shadow(0 3px 2px rgba(0,0,0,.06))}@keyframes confetti-fall{0%{transform:translateY(-10vh) rotate(0);opacity:0}8%{opacity:1}to{transform:translateY(110vh) rotate(360deg);opacity:.95}}.celebration-message{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;text-align:center;animation:popin .4s cubic-bezier(.2,1.2,.2,1) .2s both}.celebration-gif{width:clamp(160px,35vw,320px);height:auto;border-radius:12px;box-shadow:0 10px 30px #00000014}.celebration-message .pop{font-family:Pacifico,cursive;font-size:clamp(22px,5vw,40px);color:#3c6db1;text-shadow:0 2px 0 #fff,0 10px 30px rgba(90,167,255,.35)}.celebration-message .sub{color:#3b6ea5;font-weight:800;margin-top:6px;background:#e9f4ff;border:1px solid #c7d7ff;padding:4px 10px;border-radius:999px;display:inline-block}@keyframes popin{0%{transform:translateY(10px) scale(.96);opacity:0}to{transform:none;opacity:1}}