:root{
    --bg:#0d1117; --panel:#161b22; --panel2:#1c232c; --line:#2d333b;
    --ink:#e6edf3; --muted:#8b949e;
    --signal:#22d3ee;      /* 処理中・進行のシアン */
    --answer:#fbbf24;      /* 正解表示のアンバー */
    --ok:#4ade80;
    --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
    --sans:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{
    background:var(--bg); color:var(--ink); font-family:var(--sans);
    display:flex; flex-direction:column; min-height:100vh; overflow-x:hidden;
  }
  /* ── ヘッダー ── */
  header{
    display:flex; align-items:center; gap:14px;
    padding:14px 22px; border-bottom:1px solid var(--line); background:var(--panel);
  }
  .logo{
    width:34px; height:34px; border:2px solid var(--signal); border-radius:7px;
    display:grid; place-items:center; position:relative; flex:none;
  }
  .logo::before{content:""; width:14px; height:14px; border:2px solid var(--answer); border-radius:50%}
  h1{font-size:19px; font-weight:700; letter-spacing:.02em}
  h1 small{display:block; font-size:11px; color:var(--muted); font-weight:400; font-family:var(--mono); letter-spacing:.06em}
  .modes{margin-left:auto; display:flex; gap:8px}
  .mode-btn{
    font-family:var(--mono); font-size:13px; padding:8px 15px; border-radius:8px;
    border:1px solid var(--line); background:transparent; color:var(--muted); cursor:pointer; transition:.15s;
  }
  .mode-btn:hover{border-color:var(--signal); color:var(--ink)}
  .mode-btn.active{background:var(--signal); color:#052027; border-color:var(--signal); font-weight:700}

  /* ── メイン ── */
  main{flex:1; display:flex; flex-direction:column; align-items:center; padding:22px; gap:18px}
  .stage{
    width:min(760px,92vw); background:#000; border:1px solid var(--line); border-radius:14px;
    overflow:hidden; position:relative; box-shadow:0 12px 40px rgba(0,0,0,.5);
  }
  canvas{display:block; width:100%; height:auto; background:#000}

  /* 処理リードアウト（この作品の“署名”要素） */
  .readout{
    position:absolute; left:0; right:0; bottom:0; display:flex; gap:20px; flex-wrap:wrap;
    padding:9px 16px; font-family:var(--mono); font-size:12.5px;
    background:linear-gradient(0deg,rgba(0,0,0,.88),rgba(0,0,0,0));
    color:var(--signal); letter-spacing:.03em;
  }
  .readout b{color:var(--ink); font-weight:600}
  .readout .k{color:var(--muted)}

  /* 正解バナー */
  .answer-banner{
    position:absolute; inset:0; display:none; place-items:center;
    background:rgba(5,10,15,.72); backdrop-filter:blur(2px);
  }
  .answer-banner.show{display:grid; animation:pop .3s ease}
  @keyframes pop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
  .answer-card{
    text-align:center; padding:26px 40px; border:1px solid var(--answer); border-radius:14px;
    background:var(--panel); max-width:min(660px,86vw);
  }
  .answer-card .lab{font-family:var(--mono); font-size:12px; color:var(--answer); letter-spacing:.15em}
  .answer-card .val{font-size:34px; font-weight:800; margin-top:6px}
  .answer-card .sub{font-size:13px; color:var(--muted); margin-top:8px; font-family:var(--mono)}
  .answer-card .exp{
    display:none; margin-top:14px; padding-top:13px; border-top:1px solid var(--line);
    font-size:13.5px; line-height:1.75; color:var(--ink); text-align:left; font-family:var(--sans);
  }
  .answer-card .exp.show{display:block}
  .answer-card .exp .tag{
    display:inline-block; font-family:var(--mono); font-size:11px; color:var(--signal);
    border:1px solid var(--line); border-radius:5px; padding:1px 7px; margin-bottom:8px; letter-spacing:.04em;
  }

  /* ── 操作パネル ── */
  .controls{
    width:min(760px,92vw); display:flex; align-items:center; gap:12px; flex-wrap:wrap;
    padding:16px; background:var(--panel); border:1px solid var(--line); border-radius:14px;
  }
  .btn{
    font-family:var(--sans); font-size:15px; font-weight:700; padding:13px 22px; border-radius:10px;
    border:1px solid var(--line); background:var(--panel2); color:var(--ink); cursor:pointer; transition:.15s;
  }
  .btn:hover{border-color:var(--signal)}
  .btn:disabled{opacity:.35; cursor:not-allowed}
  .btn.primary{background:var(--signal); color:#052027; border-color:var(--signal)}
  .btn.primary:hover{filter:brightness(1.08)}
  .btn.amber{background:var(--answer); color:#3a2600; border-color:var(--answer)}
  .btn.ghost{background:transparent}
  .btn.active-toggle{background:var(--signal); color:#052027; border-color:var(--signal)}
  .spacer{flex:1}
  .hint{font-family:var(--mono); font-size:12px; color:var(--muted)}
  kbd{
    font-family:var(--mono); font-size:11px; background:var(--panel2); border:1px solid var(--line);
    border-bottom-width:2px; border-radius:5px; padding:2px 7px; color:var(--ink);
  }

  /* ── 画像トレイ ── */
  .tray{width:min(760px,92vw)}
  .tray-head{display:flex; align-items:center; gap:12px; margin-bottom:10px}
  .tray-head h2{font-size:14px; font-family:var(--mono); color:var(--muted); font-weight:600; letter-spacing:.05em}
  .thumbs{display:flex; gap:10px; flex-wrap:wrap}
  .thumb{
    width:104px; border:2px solid var(--line); border-radius:10px; overflow:hidden; cursor:pointer;
    background:var(--panel); transition:.15s; position:relative;
  }
  .thumb:hover{border-color:var(--signal)}
  .thumb.sel{border-color:var(--answer)}
  .thumb canvas,.thumb img{display:block; width:100%; height:70px; object-fit:cover}
  .thumb .cap{font-size:11px; padding:5px 7px; color:var(--muted); font-family:var(--mono); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .thumb.sel .cap{color:var(--answer)}
  .add-thumb{
    width:104px; height:calc(70px + 27px); border:2px dashed var(--line); border-radius:10px;
    display:grid; place-items:center; cursor:pointer; color:var(--muted); font-size:13px; text-align:center; line-height:1.4;
    font-family:var(--mono); transition:.15s;
  }
  .add-thumb:hover{border-color:var(--signal); color:var(--signal)}

  /* フィルタ選択（フィルタ当てモード用） */
  .filter-picker{display:none; gap:8px; flex-wrap:wrap; align-items:center}
  .filter-picker.show{display:flex}
  .fchip{
    font-family:var(--mono); font-size:13px; padding:9px 14px; border-radius:8px;
    border:1px solid var(--line); background:var(--panel2); color:var(--muted); cursor:pointer; transition:.15s;
  }
  .fchip:hover{border-color:var(--signal); color:var(--ink)}
  .fchip.active{background:var(--signal); color:#052027; border-color:var(--signal); font-weight:700}

  footer{padding:14px 22px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; font-family:var(--mono); text-align:center}
  .name-input{
    font-family:var(--sans); font-size:14px; padding:10px 12px; border-radius:8px;
    border:1px solid var(--line); background:var(--panel2); color:var(--ink); width:180px;
  }
  .name-input::placeholder{color:var(--muted)}