:root{--ink:#171714;--paper:#f2efe7;--soft:#e6e2d8;--accent:#ff5c35;--acid:#c7f36b;--line:rgba(23,23,20,.25)}*{box-sizing:border-box}body{margin:0;background:var(--soft);color:var(--ink);font-family:Manrope,sans-serif;overflow:hidden}button,input,select{font:inherit;color:inherit}.quiz-header{position:fixed;z-index:30;left:0;right:0;top:0;height:72px;padding:0 28px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:rgba(242,239,231,.94);backdrop-filter:blur(14px)}.quiz-brand{display:flex;align-items:center;gap:11px;color:inherit;text-decoration:none;font-size:18px;font-weight:700;letter-spacing:-.04em}.quiz-brand>span{height:22px;display:flex;align-items:end;gap:2px}.quiz-brand i{display:block;width:6px;background:currentColor}.quiz-brand i:nth-child(1){height:12px}.quiz-brand i:nth-child(2){height:22px}.quiz-brand i:nth-child(3){height:17px}.quiz-progress{display:flex;align-items:baseline;gap:7px;font:500 11px "DM Mono",monospace;text-transform:uppercase;letter-spacing:.08em}.quiz-progress strong{font-size:18px}.quiz-progress span:last-child{color:#777}.quiz-header button,.start-button,.quiz-complete button{border:1px solid var(--ink);background:var(--ink);color:var(--paper);padding:11px 15px;font:500 10px "DM Mono",monospace;text-transform:uppercase;letter-spacing:.08em;cursor:pointer}.quiz-stage{height:100vh;padding-top:72px;position:relative;overflow:hidden;background-image:radial-gradient(rgba(23,23,20,.13) 1px,transparent 1px);background-size:24px 24px}.floating-board{position:absolute;inset:72px 0 128px;overflow:hidden}.puzzle-piece{--piece:150px;position:absolute;width:var(--piece);height:calc(var(--piece)*.76);border:2px solid var(--ink);background:var(--paper);color:var(--ink);display:grid;place-items:center;cursor:pointer;filter:drop-shadow(0 8px 0 rgba(23,23,20,.09));animation:float 5s ease-in-out infinite alternate;transition:transform .2s,background .2s,left .65s cubic-bezier(.2,.8,.2,1),top .65s cubic-bezier(.2,.8,.2,1)}.puzzle-piece::after{content:"";position:absolute;right:calc(var(--piece)*-.12);top:50%;width:calc(var(--piece)*.23);aspect-ratio:1;border:2px solid var(--ink);border-left:0;border-radius:0 50% 50% 0;background:inherit;transform:translateY(-50%)}.puzzle-piece.image-piece::before{content:"";position:absolute;left:calc(var(--piece)*-.01);top:50%;width:calc(var(--piece)*.22);aspect-ratio:1;border:2px solid var(--ink);border-left:0;border-radius:0 50% 50% 0;background:var(--soft);transform:translate(-50%,-50%)}.puzzle-piece.image-piece::after{display:none}.puzzle-piece:hover,.puzzle-piece.selected{background:var(--acid);transform:translateY(-5px) scale(1.025);animation-play-state:paused}.puzzle-piece.wrong{animation:shake .3s}.puzzle-piece .symbol-word{display:flex;justify-content:center;max-width:86%;gap:1px}.puzzle-piece .symbol-word svg{width:calc(var(--piece)*.13);height:calc(var(--piece)*.13)}.puzzle-piece img{width:100%;height:100%;object-fit:cover;pointer-events:none}.puzzle-piece .image-label{position:absolute;bottom:7px;right:9px;background:var(--paper);padding:3px 5px;font:500 8px "DM Mono",monospace;text-transform:uppercase}.outline,.split{fill:none;stroke:currentColor;stroke-width:2.25;vector-effect:non-scaling-stroke}.filled,.accent-fill{fill:currentColor}@keyframes float{from{translate:0 -7px}to{translate:0 8px}}@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}.matched-tray{position:absolute;z-index:10;left:0;right:0;bottom:0;min-height:128px;padding:12px 24px;display:flex;align-items:center;gap:4px;overflow-x:auto;border-top:1px solid var(--line);background:rgba(242,239,231,.96)}.match-pair{display:flex;align-items:center;flex:none}.match-pair .puzzle-piece{position:relative;inset:auto!important;animation:none;width:88px;height:66px;filter:none;cursor:default}.match-pair .puzzle-piece::after{right:-12px;width:22px}.match-pair .image-piece{margin-left:12px}.match-pair .symbol-word svg{width:15px;height:15px}.match-pair .image-label{display:none}.quiz-complete{position:absolute;z-index:20;inset:72px 0 0;background:var(--acid);display:grid;place-content:center;justify-items:center;text-align:center}.quiz-complete[hidden]{display:none}.quiz-complete p,.quiz-kicker{font:500 10px "DM Mono",monospace;text-transform:uppercase;letter-spacing:.12em;color:var(--accent)}.quiz-complete h1,#quiz-settings h1{font-size:clamp(62px,8vw,120px);line-height:.9;letter-spacing:-.07em;font-weight:500;margin:24px 0 38px}.quiz-complete h1 em,#quiz-settings h1 em{font-family:Georgia,serif;font-weight:400;color:var(--accent)}dialog{width:min(720px,calc(100% - 28px));max-height:calc(100vh - 28px);overflow:auto;border:0;padding:0;background:var(--paper);box-shadow:0 30px 100px rgba(0,0,0,.28)}dialog::backdrop{background:rgba(23,23,20,.55);backdrop-filter:blur(4px)}#quiz-form{padding:45px}.quiz-kicker{margin:0}.settings-copy{color:#6f6d65;line-height:1.6;margin:-12px 0 28px}fieldset{border:1px solid var(--line);padding:18px;margin:0 0 16px}legend{padding:0 8px;font:500 10px "DM Mono",monospace;text-transform:uppercase;letter-spacing:.08em}.category-options{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.category-option{display:flex;align-items:center;gap:8px;font-size:12px}.settings-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}label{display:grid;gap:7px;font:500 10px "DM Mono",monospace;text-transform:uppercase;letter-spacing:.07em}input,select{width:100%;padding:12px;border:1px solid var(--line);background:white}.start-button{width:100%}.quiz-warning{color:#a32818;font-size:12px}.piece-small{--piece:116px}.piece-medium{--piece:150px}.piece-large{--piece:190px}@media(max-width:700px){.quiz-header{padding:0 14px}.quiz-progress span:last-child{display:none}.floating-board{bottom:112px}.matched-tray{min-height:112px;padding-inline:12px}#quiz-form{padding:30px 22px}.category-options{grid-template-columns:repeat(2,1fr)}.settings-fields{grid-template-columns:1fr}.piece-medium{--piece:126px}.piece-large{--piece:150px}.quiz-header button{padding:9px 10px}}
