:root{--background:#f3f8f8;--surface:#fff;--surface-container:#f6fbfb;--primary:#0f766e;--on-primary:#fff;--on-surface:#122025;--on-surface-variant:#5f7280;--on-secondary-container:#114156;--outline:#d4e4e8;--error:#be185d;--success:#166534;--elevation-1:0 1px 2px #0f172a0a, 0 12px 28px #0f172a0f;--elevation-2:0 10px 24px #0284c72e;color:var(--on-surface-variant);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:radial-gradient(circle at 0 0,#22d3ee2e,#0000 28%),linear-gradient(#f9fcfc,#eef6f7);font:16px/1.6 Noto Sans JP,Hiragino Sans,sans-serif}*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0}#root{width:min(960px,100% - 24px);margin:0 auto}button,input,select,textarea{font:inherit}h1,h2{color:var(--on-surface);margin:0}h1{font-size:clamp(1.8rem,5vw,3rem);line-height:1.1}h2{font-size:clamp(1.2rem,2vw,1.55rem);font-weight:600;line-height:1.45}p{margin:0}code{color:var(--on-surface);background:#e6f8fb;border-radius:4px;padding:2px 6px;font-family:Roboto Mono,SFMono-Regular,monospace}.app-shell{flex-direction:column;gap:16px;min-width:0;min-height:100svh;padding:24px 16px 40px;display:flex}.toolbar,.question-card,.empty-card{border:1px solid var(--outline);background:var(--surface);min-width:0;box-shadow:var(--elevation-1);border-radius:16px}.toolbar{gap:20px;padding:20px;display:grid}.setup-toolbar{width:100%;max-width:720px;margin:auto}.heading-block{gap:8px;min-width:0;display:grid}.heading-block h1,.heading-block p,h2{overflow-wrap:anywhere}.eyebrow{letter-spacing:.08em;text-transform:uppercase;color:var(--primary);font-size:.85rem}.select-wrap{gap:6px;min-width:0;display:grid}.select-wrap select{appearance:none;border:1px solid var(--outline);width:100%;min-width:0;max-width:100%;color:var(--on-surface);text-overflow:ellipsis;background:#fff;border-radius:10px;padding:12px 14px;overflow:hidden}.select-wrap select:focus{border-color:var(--primary);outline:2px solid #0e749029}.start-button{justify-self:start;min-height:48px}.question-card,.empty-card{padding:20px}.status-panel{border:1px solid var(--outline);background:var(--surface-container);border-radius:12px;padding:16px}.status-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;display:grid}.status-item{border:1px solid var(--outline);background:var(--surface);border-radius:10px;min-width:0;padding:12px 14px}.status-item strong{overflow-wrap:anywhere}.stat-label,.panel-label{color:var(--on-surface-variant);margin-bottom:6px;font-size:12px;display:block}.progress-track{background:#d8e6ee;border-radius:999px;height:8px;margin-top:16px;overflow:hidden}.progress-bar{background:linear-gradient(90deg,#0f766e,#0284c7);border-radius:999px;height:100%}.question-meta{flex-wrap:wrap;gap:8px;margin:20px 0 16px;display:flex}.number-chip,.rule-chip{color:var(--on-secondary-container);background:#f5fbfd;border:1px solid #cfe3ea;border-radius:999px;padding:6px 10px;font-size:13px;line-height:1;display:inline-flex}.options{gap:12px;margin-top:20px;display:grid}.option-card{border:1px solid var(--outline);background:var(--surface);width:100%;min-width:0;color:var(--on-surface);text-align:left;cursor:pointer;border-radius:12px;justify-content:space-between;align-items:center;gap:14px;padding:14px 16px;transition:background .16s,box-shadow .16s,border-color .16s,transform .16s;display:flex}.option-card:hover{background:#f0fbff;border-color:#7dd3fc;transform:translateY(-1px)}.option-card.selected{border-color:var(--primary);background:#e6f8fb}.option-card.correct{border-color:var(--success);background:#16653414}.option-card.incorrect{border-color:var(--error);background:#be185d14}.option-card.ordering{align-items:flex-start}.option-main{flex:1;align-items:flex-start;gap:14px;min-width:0;display:flex}.option-id,.order-badge,.control-badge{min-width:36px;min-height:36px;color:var(--on-surface);background:#f5fbfd;border:1px solid #cfe3ea;border-radius:10px;flex:none;justify-content:center;align-items:center;font-weight:700;display:inline-flex}.option-text{overflow-wrap:anywhere;min-width:0;line-height:1.6}.ordering-panel{border:1px solid var(--outline);background:var(--surface-container);border-radius:12px;justify-content:space-between;align-items:center;gap:16px;margin-top:18px;padding:14px;display:flex}.ordering-panel>div{min-width:0}.sequence-list{flex-wrap:wrap;gap:8px;display:flex}.sequence-list span,.sequence-placeholder{border:1px solid var(--outline);background:var(--surface);border-radius:999px;padding:8px 12px;display:inline-flex}.sequence-placeholder{color:var(--on-surface-variant)}.actions{flex-wrap:wrap;gap:12px;margin-top:24px;display:flex}.primary-button,.ghost-button,.nav-button,.subtle-button{max-width:100%;font:inherit;overflow-wrap:anywhere;cursor:pointer;border:1px solid #0000;border-radius:10px;padding:10px 16px;transition:background .16s,box-shadow .16s,opacity .16s}.primary-button:disabled,.ghost-button:disabled,.nav-button:disabled,.subtle-button:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}.primary-button{color:var(--on-primary);box-shadow:var(--elevation-2);background:linear-gradient(135deg,#0f766e,#0284c7)}.ghost-button,.nav-button,.subtle-button{border-color:var(--outline);color:var(--on-secondary-container);background:#fff}.ghost-button:hover:not(:disabled),.nav-button:hover:not(:disabled),.subtle-button:hover:not(:disabled){background:#f0fbff;border-color:#7dd3fc}.result-card{border:1px solid var(--outline);background:#fff;border-radius:12px;margin-top:22px;padding:18px}.result-card.correct{background:#1665340d;border-color:#1665343d}.result-card.incorrect{background:#be185d12;border-color:#be185d3d}.result-label{color:var(--on-surface);font-weight:700}.result-answer,.result-explanation{margin-top:10px}.markdown-content{min-width:0;color:var(--on-surface);overflow-wrap:anywhere;line-height:1.7}.markdown-content>:first-child{margin-top:0}.markdown-content>:last-child{margin-bottom:0}.markdown-content p,.markdown-content ul,.markdown-content ol,.markdown-content h3,.markdown-content h4,.markdown-content h5{margin:.5em 0}.markdown-content ul,.markdown-content ol{padding-left:1.3em}.markdown-content li+li{margin-top:.25em}.markdown-content code{color:var(--on-surface);background:#e6f8fb;border-radius:4px;padding:.1em .35em}.markdown-content a{color:var(--primary);text-decoration:underline}.summary-header{gap:16px;display:grid}.summary-score strong{color:var(--on-surface);font-size:clamp(2rem,5vw,3.25rem)}.summary-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;display:grid}.summary-list{gap:12px;margin-top:20px;display:grid}.summary-item{border:1px solid var(--outline);background:var(--surface-container);border-radius:12px;min-width:0;padding:16px}.summary-question,.summary-answer{margin-bottom:8px}@media (width<=720px){.app-shell{padding:16px 12px 32px}.question-card,.empty-card,.toolbar{padding:16px}.status-row,.summary-grid{grid-template-columns:1fr}.ordering-panel{flex-direction:column;align-items:stretch}}@media (width<=420px){.app-shell{padding:12px 8px 28px}.question-card,.empty-card,.toolbar,.result-card,.summary-item{padding:12px}.option-card,.option-main{gap:10px}.option-card{padding:12px}.option-id,.order-badge,.control-badge{min-width:32px;min-height:32px}}
