:root{--ink:#1f2937;--muted:#6b7280;--line:#9ca3af;--bg:#f5f5f4;--card:#fff;--accent:#111827;--ok:#15803d;--bad:#b91c1c;--warn:#b45309;--soft:#e5e7eb}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--ink);margin:0;padding:0;font:16px/1.45 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}a{color:inherit}h1,h2,h3{margin:0 0 .5rem;line-height:1.2}h1{font-size:1.6rem}h2{font-size:1.25rem}h3{font-size:1.05rem}p{margin:0 0 .75rem}small,.muted{color:var(--muted)}code{background:var(--soft);border-radius:4px;padding:0 .3em;font-size:.9em}.wire{max-width:720px;margin:0 auto;padding:16px 16px 64px}.wire-top{border-bottom:2px dashed var(--line);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin-bottom:16px;padding:8px 0 16px;display:flex}.brand{letter-spacing:.02em;font-weight:800;text-decoration:none}.badge{letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:2px 8px;font-size:.7rem;font-weight:700;display:inline-block}.badge.ok{color:var(--ok);border-color:var(--ok)}.badge.bad{color:var(--bad);border-color:var(--bad)}.badge.warn{color:var(--warn);border-color:var(--warn)}.nav{flex-wrap:wrap;gap:12px;font-size:.9rem;display:flex}.nav a{color:var(--muted)}.box{background:var(--card);border:2px dashed var(--line);border-radius:12px;margin-bottom:12px;padding:16px}.box.solid{border-style:solid}.box.hint{color:var(--muted);background:repeating-linear-gradient(45deg,#fafafa,#fafafa 8px,#f0f0f0 8px 16px);font-size:.9rem}.row{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.row.between{justify-content:space-between}.grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;display:grid}.stack>*+*{margin-top:8px}.center{text-align:center}.placeholder{background:var(--soft);min-height:120px;color:var(--muted);border-radius:8px;place-items:center;font-size:.85rem;display:grid}.avatar{background:var(--soft);border:2px solid var(--line);border-radius:50%;place-items:center;width:56px;height:56px;font-size:1.6rem;display:grid}button,.btn{font:inherit;border:2px solid var(--accent);background:var(--accent);color:#fff;cursor:pointer;border-radius:10px;padding:10px 16px;font-weight:600;text-decoration:none;display:inline-block}button.ghost,.btn.ghost{color:var(--accent);background:0 0}button.big,.btn.big{width:100%;padding:16px;font-size:1.1rem}button:disabled{opacity:.45;cursor:not-allowed}button.opt{text-align:left;width:100%;color:var(--ink);border-color:var(--line);background:#fff;margin-bottom:8px}button.opt.correct{border-color:var(--ok);background:#ecfdf5}button.opt.wrong{border-color:var(--bad);background:#fef2f2}label{color:var(--muted);margin-bottom:4px;font-size:.85rem;display:block}input,select,textarea{width:100%;font:inherit;border:2px solid var(--line);background:#fff;border-radius:10px;margin-bottom:12px;padding:10px 12px}input.code{letter-spacing:.2em;text-align:center;text-transform:uppercase;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.6rem}.error{color:var(--bad);margin:-6px 0 10px;font-size:.9rem}.ok{color:var(--ok)}table{border-collapse:collapse;width:100%;font-size:.9rem}th,td{text-align:left;border-bottom:1px solid var(--soft);vertical-align:top;padding:8px 6px}th{color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-size:.8rem;font-weight:600}.meter{background:var(--soft);border-radius:999px;height:10px;overflow:hidden}.meter>span{background:var(--accent);height:100%;display:block}.phases{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.phase{border:2px dashed var(--line);text-align:center;border-radius:10px;padding:8px;font-size:.8rem}.phase.done{border-style:solid;border-color:var(--ok)}.phase.locked{opacity:.5}.note{color:var(--muted);border:1px dashed var(--line);background:#fff;border-radius:6px;padding:4px 8px;font-size:.7rem;position:fixed;bottom:12px;right:12px}@media (max-width:480px){.phases{grid-template-columns:repeat(2,1fr)}}.cq{--court:#edf6f1;--chalk:#fff;--ink:#14304a;--ink-soft:#4a6076;--track:#ff7a1a;--track-deep:#d95f00;--pool:#2a7de1;--pool-soft:#dcebfb;--grass:#2db36b;--grass-soft:#ddf5e7;--whistle:#ffd43b;--foul:#e5484d;--foul-soft:#fde3e4;--radius:18px;--shadow:4px 4px 0 var(--ink);--font-display:"Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;--font-body:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;background:var(--court);color:var(--ink);font-family:var(--font-body);background-image:radial-gradient(circle at 1px 1px,#14304a12 1px,#0000 0);background-size:22px 22px;border-radius:12px;font-size:17px;line-height:1.45}.cq *{box-sizing:border-box}.cq button,.cq .btn{font:inherit;color:var(--ink);cursor:pointer;background:var(--chalk)}.cq input{font:inherit;width:auto;margin-bottom:0}.cq [hidden]{display:none!important}.cq .note{background:0 0;border:0;border-radius:0;padding:0;position:static}.cq .meter{background:0 0;border-radius:0;height:auto;overflow:visible}.cq .meter>span{background:0 0;height:auto;display:inline-block}.cq .app{max-width:560px;margin:0 auto;padding:16px 16px 120px}.cq .topbar{align-items:center;gap:12px;margin-bottom:14px;display:flex}.cq .topbar .back{border:3px solid var(--ink);background:var(--chalk);width:48px;height:48px;box-shadow:var(--shadow);border-radius:14px;flex:none;font-size:22px}.cq .topbar h1{font-family:var(--font-display);margin:0;font-size:1.35rem;font-weight:600;line-height:1.15}.cq .topbar .sub{color:var(--ink-soft);font-size:.92rem}.cq .brand{text-align:center;margin:8px 0 22px}.cq .brand h1{font-family:var(--font-display);letter-spacing:.5px;margin:0;font-size:2.6rem;font-weight:700;line-height:1}.cq .brand h1 span{color:var(--track)}.cq .brand p{color:var(--ink-soft);margin:6px 0 0}.cq .brand .who{background:var(--whistle);border:3px solid var(--ink);font-family:var(--font-display);box-shadow:var(--shadow);border-radius:999px;margin-top:10px;padding:4px 14px;font-weight:600;display:inline-block}.cq .track{margin:0;padding:0 0 0 30px;list-style:none;position:relative}.cq .track:before{content:"";border-left:4px dashed var(--ink);opacity:.35;position:absolute;top:26px;bottom:26px;left:12px}.cq .lane{margin:0 0 12px;position:relative}.cq .lane button{text-align:left;background:var(--chalk);border:3px solid var(--ink);border-radius:var(--radius);width:100%;box-shadow:var(--shadow);grid-template-columns:56px 1fr auto;align-items:center;gap:12px;min-height:74px;padding:10px 14px 10px 10px;transition:transform 80ms;display:grid}.cq .lane button:active{box-shadow:2px 2px 0 var(--ink);transform:translate(2px,2px)}.cq .lane .num{background:var(--ink);width:26px;height:26px;color:var(--chalk);font-family:var(--font-display);border-radius:50%;place-items:center;font-size:.85rem;display:grid;position:absolute;top:50%;left:-30px;transform:translateY(-50%)}.cq .lane .medal{text-align:center;filter:grayscale();opacity:.35;font-size:2rem}.cq .lane.done .medal{filter:none;opacity:1}.cq .lane .name{font-family:var(--font-display);font-size:1.15rem;font-weight:600}.cq .lane .skill{color:var(--ink-soft);font-size:.9rem}.cq .lane .state{border:2px solid var(--ink);background:var(--pool-soft);white-space:nowrap;border-radius:999px;padding:4px 10px;font-size:.85rem;font-weight:700}.cq .lane.done .state{background:var(--grass-soft)}.cq .lane.locked button{opacity:.55}.cq .lane.locked .state{background:#eee}.cq .lane.next button{border-color:var(--track);box-shadow:4px 4px 0 var(--track)}.cq .lane.next .state{background:var(--whistle)}.cq .toolrow{flex-wrap:wrap;gap:10px;margin-top:20px;display:flex}.cq .toolrow button{flex:140px}.cq .btn{border:3px solid var(--ink);background:var(--chalk);box-shadow:var(--shadow);border-radius:14px;min-height:52px;padding:12px 16px;font-weight:700;transition:transform 80ms,box-shadow 80ms}.cq .btn:active{box-shadow:2px 2px 0 var(--ink);transform:translate(2px,2px)}.cq .btn:disabled{opacity:.45;cursor:default;transform:none}.cq .btn.primary{background:var(--track);color:#fff}.cq .btn.blue{background:var(--pool);color:#fff}.cq .btn.green{background:var(--grass);color:#fff}.cq .btn.yellow{background:var(--whistle)}.cq .btn.ghost{box-shadow:none;text-underline-offset:3px;background:0 0;border-color:#0000;text-decoration:underline}.cq .btn.small{min-height:40px;padding:6px 12px;font-size:.95rem}.cq .btn.wide{width:100%}.cq .btn:focus-visible,.cq .opt:focus-visible,.cq .chip:focus-visible{outline:4px solid var(--pool);outline-offset:2px}.cq .meter{align-items:center;gap:6px;margin:4px 0 16px;display:flex}.cq .meter .dot{border:2px solid var(--ink);background:var(--chalk);border-radius:6px;width:100%;height:12px}.cq .meter .dot.ok{background:var(--grass)}.cq .meter .dot.bad{background:var(--foul)}.cq .meter .goal{color:var(--ink-soft);white-space:nowrap;margin-left:6px;font-size:.85rem}.cq .meter.boss .dot{border-radius:3px}.cq .card{background:var(--chalk);border:3px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px 18px}.cq .card .instr{color:var(--ink-soft);margin:0 0 8px;font-size:.95rem}.cq .card .emoji{text-align:center;margin:4px 0 10px;font-size:3.2rem;line-height:1}.cq .card .prompt{font-family:var(--font-display);white-space:pre-line;margin:0;font-size:1.55rem;font-weight:600;line-height:1.25}.cq .card .context{color:var(--ink-soft);margin:6px 0 0;font-size:1.05rem}.cq .card .prompt.small{font-size:1.2rem}.cq .card .speak-btn{margin-top:10px}.cq .passage{background:var(--pool-soft);border:2px dashed var(--pool);white-space:pre-line;border-radius:12px;margin:10px 0 14px;padding:12px 14px;font-size:1.05rem}.cq .options{gap:10px;margin-top:16px;display:grid}.cq .opt{border:3px solid var(--ink);background:var(--chalk);text-align:left;box-shadow:var(--shadow);border-radius:14px;min-height:56px;padding:14px 16px;font-size:1.15rem;font-weight:700;transition:transform 80ms}.cq .opt:active{box-shadow:2px 2px 0 var(--ink);transform:translate(2px,2px)}.cq .opt.picked{background:var(--pool-soft)}.cq .opt.right{background:var(--grass-soft);border-color:var(--grass)}.cq .opt.wrong{background:var(--foul-soft);border-color:var(--foul)}.cq .opt:disabled{cursor:default}.cq .chips{border:2px dashed var(--ink-soft);border-radius:12px;flex-wrap:wrap;gap:8px;min-height:58px;margin-top:12px;padding:8px;display:flex}.cq .chips.answer{background:var(--pool-soft);border-style:solid;border-color:var(--pool)}.cq .chips.answer:empty:before{content:"toque nas palavras na ordem certa";color:var(--ink-soft);align-self:center;font-size:.9rem}.cq .chip{border:3px solid var(--ink);background:var(--chalk);font-family:var(--font-display);box-shadow:3px 3px 0 var(--ink);border-radius:12px;padding:8px 14px;font-size:1.15rem;font-weight:600}.cq .chip.helper{font-family:var(--font-body);box-shadow:none;border-width:2px;padding:4px 10px;font-size:.95rem}.cq .typing{gap:8px;margin-top:14px;display:flex}.cq .typing input{border:3px solid var(--ink);background:var(--chalk);border-radius:14px;flex:1;min-width:0;padding:12px 14px;font-size:1.15rem}.cq .helpers{flex-wrap:wrap;gap:6px;margin-top:8px;display:flex}.cq .actions{flex-wrap:wrap;gap:10px;margin-top:16px;display:flex}.cq .actions .btn{flex:auto}.cq .speak-box{gap:10px;margin-top:14px;display:grid}.cq .speak-box .rec{background:var(--foul);color:#fff}.cq .speak-box .rec.on{animation:1s infinite pulse}.cq .speak-box .heard{background:var(--pool-soft);border-radius:12px;padding:10px 12px;font-size:.95rem}@keyframes pulse{0%,to{box-shadow:var(--shadow)}50%{box-shadow:4px 4px 0 var(--ink), 0 0 0 8px #e5484d40}}.cq .sheet{z-index:20;pointer-events:none;justify-content:center;padding:0 12px 12px;display:flex;position:fixed;bottom:0;left:0;right:0}.cq .sheet .inner{pointer-events:auto;background:var(--chalk);border:3px solid var(--ink);width:100%;max-width:560px;box-shadow:var(--shadow);border-radius:20px;padding:16px 18px;transition:transform .22s cubic-bezier(.2,.9,.3,1.2);transform:translateY(120%)}.cq .sheet.show .inner{transform:none}.cq .sheet .verdict{font-family:var(--font-display);margin:0 0 6px;font-size:1.5rem;font-weight:700}.cq .sheet.ok .inner{border-color:var(--grass);box-shadow:4px 4px 0 var(--grass)}.cq .sheet.bad .inner{border-color:var(--foul);box-shadow:4px 4px 0 var(--foul)}.cq .sheet .explain{white-space:pre-line;margin:0 0 12px}.cq .sheet .expected{font-weight:800}.cq .sheet .ai{background:var(--pool-soft);white-space:pre-line;border-radius:12px;margin:0 0 12px;padding:10px 12px;font-size:.97rem}.cq .sheet .ai ul{margin:6px 0 0;padding-left:18px}.cq .celebrate{text-align:center}.cq .celebrate .big{font-size:5rem;line-height:1;animation:.5s cubic-bezier(.2,1.4,.4,1) pop}.cq .celebrate h2{font-family:var(--font-display);margin:6px 0;font-size:2rem}@keyframes pop{0%{transform:scale(.2)rotate(-20deg)}to{transform:none}}.confetti{pointer-events:none;z-index:30;position:fixed;inset:0;overflow:hidden}.confetti i{border-radius:2px;width:10px;height:16px;animation:2.2s linear forwards fall;position:absolute;top:-12px}@keyframes fall{to{opacity:.8;transform:translateY(110vh)rotate(720deg)}}.cq .stat{border-bottom:2px dashed #14304a33;grid-template-columns:1fr auto;gap:8px;padding:10px 0;display:grid}.cq .stat:last-child{border-bottom:0}.cq .stat b{font-family:var(--font-display);font-weight:600}.cq .bar{border:2px solid var(--ink);background:#e6eef0;border-radius:5px;height:10px;margin-top:4px;overflow:hidden}.cq .bar i{background:var(--foul);height:100%;display:block}.cq .field{gap:6px;margin:12px 0;display:grid}.cq .field label{font-weight:700}.cq .field input{border:3px solid var(--ink);background:var(--chalk);border-radius:12px;padding:10px 12px}.cq .note{color:var(--ink-soft);font-size:.92rem}.cq .ok-text{color:var(--grass);font-weight:800}.cq .bad-text{color:var(--foul);font-weight:800}.cq .wrong-item{border-bottom:2px dashed #14304a33;padding:8px 0;font-size:.95rem}.cq .wrong-item .g{color:var(--foul);text-decoration:line-through}.cq .wrong-item .e{color:var(--grass);font-weight:800}.cq .section-title{font-family:var(--font-display);margin:22px 0 8px;font-size:1.25rem;font-weight:600}.cq .trophies{gap:8px;display:grid}.cq .trophy{align-items:center;gap:10px;display:flex}.cq .trophy span{flex:1;font-size:.95rem}@media (prefers-reduced-motion:reduce){.cq *{transition:none!important;animation:none!important}}@media (max-width:400px){.cq .card .prompt{font-size:1.3rem}.cq .brand h1{font-size:2.1rem}}.cq .opt:disabled{opacity:1}.cq .feedback{border:3px solid var(--ink);background:var(--chalk);border-radius:14px;margin-top:16px;padding:12px 14px}.cq .feedback.ok{border-color:var(--grass);background:var(--grass-soft)}.cq .feedback.bad{border-color:var(--foul);background:var(--foul-soft)}.cq .feedback .verdict{font-family:var(--font-display);margin:0 0 6px;font-size:1.25rem;font-weight:700}.cq .feedback .explain{margin:0 0 8px}.cq .feedback .expected{font-weight:800}.cq .feedback .ai{background:var(--pool-soft);white-space:pre-line;border-radius:12px;margin:0 0 10px;padding:10px 12px;font-size:.97rem}.cq .feedback .ai ul{margin:6px 0 0;padding-left:18px}
