:root{--bg:#f6f7f9;--card:#fff;--ink:#17191c;--muted:#5c6670;--line:#dfe3e8;--accent:#204f8a;--soft:#eef4fb;--ok:#eaf7ee;--warn:#fff7e6}
*{box-sizing:border-box} body{margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--ink);line-height:1.5}
#app{max-width:920px;margin:0 auto;padding:28px 18px 72px}.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:28px;box-shadow:0 2px 12px rgba(0,0,0,.04)}
h1{font-size:1.9rem;margin:0 0 12px}h2{font-size:1.35rem;margin:0 0 12px}h3{font-size:1.05rem;margin:20px 0 8px}.muted{color:var(--muted)}.small{font-size:.9rem}.progress{height:8px;background:#e8ebef;border-radius:99px;overflow:hidden;margin:0 0 18px}.progress>div{height:100%;background:var(--accent);transition:width .2s}.pill{display:inline-block;padding:4px 9px;border-radius:999px;background:#edf1f5;color:#44505c;font-size:.8rem;font-weight:600;text-transform:capitalize}.context{font-size:1.05rem;background:#fafbfc;border-left:4px solid #c8d0d9;padding:16px 18px;margin:18px 0;border-radius:6px}.question{font-weight:700;font-size:1.08rem;margin:20px 0 10px}
.option{display:block;border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:9px 0;cursor:pointer;background:#fff}.option:hover{border-color:#9fb1c4;background:#fbfdff}.option input{margin-right:10px}.option.selected{border-color:var(--accent);background:var(--soft)}
.ai{border:1px solid #b8cbe0;border-radius:12px;background:#f5f9fe;padding:16px 18px;margin:18px 0}.ai h3{margin:0 0 7px;color:#173f6c}.ai.outsource{background:#f2f7fc}.ai.scaffold{background:#f7f4ff;border-color:#c8bce4}.hint{border-top:1px solid rgba(0,0,0,.08);padding-top:10px;margin-top:10px}.scratch{width:100%;min-height:70px;border:1px solid var(--line);border-radius:8px;padding:10px;font:inherit;resize:vertical}.feedback{padding:14px 16px;border-radius:10px;background:var(--ok);margin-top:16px}.notice{padding:14px 16px;border-radius:10px;background:var(--warn);margin:16px 0}.row{display:flex;gap:14px;align-items:center;flex-wrap:wrap}.spacer{height:10px}.btn{appearance:none;border:0;border-radius:9px;padding:11px 17px;font:inherit;font-weight:650;background:var(--accent);color:#fff;cursor:pointer}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.secondary{background:#e8edf3;color:#1d2a36}.btn.link{background:transparent;color:var(--accent);padding:8px 0}.field{margin:14px 0}.field label{display:block;font-weight:650;margin-bottom:6px}.field select,.field input[type=text],.field textarea{width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;font:inherit}.range-wrap{display:grid;grid-template-columns:1fr 70px;gap:12px;align-items:center}.range-wrap input{width:100%}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}.tutorial li{margin:7px 0}.footer-note{margin-top:22px;border-top:1px solid var(--line);padding-top:14px;color:var(--muted);font-size:.85rem}.error{background:#feecec;color:#7b2020;border:1px solid #f2bcbc;padding:12px;border-radius:8px}.hidden{display:none}
@media(max-width:680px){#app{padding:14px 10px 50px}.card{padding:19px}.grid2{grid-template-columns:1fr}h1{font-size:1.55rem}}
.choice-box{margin:1rem 0;padding:1rem;border:1px solid #d1d5db;border-radius:10px;background:#fafafa}.mode-option{display:flex;gap:.65rem;align-items:flex-start;padding:.65rem .8rem;margin:.45rem 0;border:1px solid #d1d5db;border-radius:8px;background:#fff;cursor:pointer}.mode-option:has(input:checked){border-width:2px}.binary{display:flex;gap:1rem;margin:.5rem 0}.binary label{padding:.65rem 1rem;border:1px solid #d1d5db;border-radius:8px;background:#fff}.open-response{width:100%;min-height:180px;box-sizing:border-box}.ai.oversight{border-left:5px solid #555}.ai.neutral{border-left:5px solid #999}.scratch{width:100%;min-height:70px;box-sizing:border-box}.field select{min-width:180px;padding:.55rem}.field textarea{font:inherit}