@font-face { font-family:'DM Sans'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/dm-sans-400.ttf') format('truetype'); }
@font-face { font-family:'DM Sans'; font-style:normal; font-weight:500 700; font-display:swap; src:url('fonts/dm-sans-600.ttf') format('truetype'); }
:root { color-scheme:dark; --bg:#0c0c0c; --text:#efeee8; --muted:#aaa99f; --line:#33332e; --accent:#ff7148; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:15px/1.6 'DM Sans',Arial,sans-serif; }
button,input,select { font:inherit; }
button,summary { cursor:pointer; }
button { touch-action:manipulation; }
button:disabled { opacity:.35; cursor:default; }
:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
[hidden] { display:none!important; }
h1,h2,h3,p { margin:0; }
h1 { font-size:clamp(28px,5vw,40px); letter-spacing:-.045em; line-height:1.2; margin-bottom:30px; }
h2 { font-size:22px; letter-spacing:-.025em; margin-bottom:20px; }
h3 { font-size:16px; line-height:1.4; margin-bottom:7px; }
p { color:var(--muted); }
.site-header { width:min(1440px,calc(100% - 96px)); height:80px; margin:auto; display:flex; align-items:center; border-bottom:1px solid var(--line); }
.site-logo { display:inline-flex; align-items:center; gap:10px; min-height:44px; color:var(--text); text-decoration:none; font-size:23px; font-weight:600; letter-spacing:-1px; }
.site-logo img { display:block; }
.logo-accent { color:var(--accent); }
@media(max-width:700px) { .site-header { width:calc(100% - 40px); height:70px; } }
.wrap { width:min(850px,calc(100% - 40px)); margin:64px auto; }
#guide { max-width:640px; margin:auto; }
.question-panel { padding:28px; border:1px solid var(--line); background:#121211; }
#question-count { font-size:12px; }
.progress { height:2px; background:var(--line); margin:12px 0 28px; }
.progress span { display:block; height:100%; background:var(--accent); }
fieldset { border:0; padding:0; margin:0; min-width:0; }
legend { font-size:23px; font-weight:600; letter-spacing:-.035em; line-height:1.3; margin-bottom:10px; }
.hint { font-size:13px; margin-bottom:22px; }
.options { display:grid; gap:10px; }
.option { position:relative; display:flex; align-items:center; gap:14px; padding:16px; border:1px solid var(--line); cursor:pointer; }
.option:hover { border-color:#77776c; }
.option:has(input:checked) { border-color:var(--accent); background:#211b16; }
.option:has(input:focus-visible) { outline:2px solid var(--accent); outline-offset:3px; }
.option input { position:absolute; opacity:0; width:1px; height:1px; }
.option-number { display:none; }
.option-copy { flex:1; min-width:0; }
.option-copy strong { display:block; font-size:14px; font-weight:500; }
.option-copy small { display:block; font-size:12px; color:var(--muted); margin-top:3px; }
.radio { height:16px; width:16px; border:1px solid #77776c; border-radius:50%; flex-shrink:0; }
.option:has(input:checked) .radio { border:5px solid var(--accent); }
.question-controls { display:flex; justify-content:space-between; align-items:center; margin-top:24px; }
.button { min-height:46px; border:1px solid var(--accent); padding:12px 20px; font-size:13px; font-weight:600; background:var(--accent); color:#17130f; }
.button:hover { background:#ff9779; }
.text-button { color:var(--text); border:0; background:none; padding:10px 0; font-size:13px; text-decoration:underline; text-underline-offset:4px; }
.error { color:#ffaf90; font-size:13px; margin-top:12px; }
.error:empty { display:none; }
.preferences { margin-top:25px; padding-top:20px; border-top:1px solid var(--line); font-size:12px; color:var(--muted); }
.preferences-grid { display:grid; gap:16px; margin-top:20px; }
.preferences label { display:grid; gap:7px; }
.preferences .checkbox-option { display:flex; align-items:flex-start; gap:10px; color:var(--text); cursor:pointer; }
.checkbox-option input { margin-top:4px; width:16px; height:16px; accent-color:var(--accent); flex-shrink:0; }
.checkbox-option small { display:block; font-size:11px; color:var(--muted); margin-top:4px; }
select { width:100%; padding:10px; background:#1c1c18; color:var(--text); border:1px solid #525249; font-size:13px; }
.result-controls { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:20px; }
#result-content>section { margin:36px 0; }
.dimension-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.dimension { border:1px solid var(--line); padding:20px; }
.dimension>span { display:block; font-size:11px; margin-bottom:10px; text-transform:capitalize; }
.dimension p,.stack-row p,.pitfall p,.alternative p { font-size:13px; }
.reason-list { margin-top:20px; }
.reason-list p { margin:12px 0; font-size:13px; }
.reason-list strong { color:var(--text); }
.stack-row { display:grid; grid-template-columns:100px minmax(0,1fr); gap:20px; padding:18px 0; border-bottom:1px solid var(--line); }
.stack-row>span { font-size:12px; }
.flow { display:flex; align-items:center; gap:10px; margin-bottom:24px; flex-wrap:wrap; }
.flow-node { border:1px solid var(--line); padding:12px; font-size:12px; flex:1; min-width:120px; }
ol { padding-left:22px; }
li { color:var(--muted); font-size:13px; margin:12px 0; padding-left:5px; }
.warning { border-left:2px solid var(--accent); padding:12px 16px; background:#211b16; margin:18px 0; font-size:13px; }
.pitfall,.alternative { border-bottom:1px solid var(--line); padding:16px 0; }
.toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:var(--text); color:#161612; padding:12px 20px; font-size:13px; max-width:90%; }
.agent-export { margin-top:36px; padding-top:20px; border-top:1px solid var(--line); }
.agent-export summary { font-size:14px; }
.agent-export label { display:block; margin:20px 0 8px; font-size:12px; }
.agent-export select { max-width:320px; }
.export-actions { display:flex; align-items:center; gap:24px; margin:18px 0; }
.export-hint { font-size:12px; }
.tool-options { margin-top:12px; font-size:12px; }
.tool-option { padding:16px 0; border-bottom:1px solid var(--line); }
.tool-option h3 { font-size:14px; }
.tool-option a { color:var(--text); text-underline-offset:3px; }
.tool-option p { margin:7px 0; }
.tool-option .tool-meta { font-size:11px; }
.agent-export textarea { width:100%; padding:14px; resize:vertical; background:#121211; border:1px solid var(--line); color:var(--text); font:12px/1.6 monospace; }
@media(max-width:600px) {
  .wrap { margin:30px auto; }
  .question-panel { padding:20px 16px; }
  h1 { margin-bottom:24px; }
  legend { font-size:21px; }
  .dimension-grid { grid-template-columns:1fr; }
  .stack-row { grid-template-columns:75px minmax(0,1fr); gap:12px; }
  .flow { flex-direction:column; align-items:stretch; }
  .flow>span { align-self:center; transform:rotate(90deg); }
}
@media print {
  body { background:white; color:black; }
  .site-header,#start,#guide,.result-controls,.agent-export,.toast { display:none!important; }
  .wrap { width:100%; margin:0; }
  .dimension,.stack-row,.pitfall { break-inside:avoid; }
}