:root {
    --bg: #0e1116; --panel: #171b23; --panel2: #1e2430; --line: #2a3140;
    --text: #e8ecf3; --muted: #8b95a7; --accent: #ffc247; --accent-ink: #1a1405;
    --ok: #4ade80; --err: #ff6b6b; --radius: 16px;
  }
  @media (prefers-color-scheme: light) {
    :root { --bg:#f4f1ea; --panel:#fff; --panel2:#f0ece2; --line:#ddd6c6; --text:#1b1d22; --muted:#6a6f7a; --accent:#c77d00; --accent-ink:#fff; }
  }
  * { box-sizing: border-box; }
  body { margin:0; background:var(--bg); color:var(--text); font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif; }
  .wrap { max-width: 920px; margin: 0 auto; padding: 24px 16px 64px; }
  header { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:20px; }
  h1 { margin:0; font-size:1.5rem; letter-spacing:-.01em; display:flex; align-items:center; gap:10px; }
  h1 .logo { font-size:1.9rem; color:var(--accent); letter-spacing:2px; }
  .sub { color:var(--muted); font-size:.9rem; margin:2px 0 0; }
  .grid { display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
  @media (max-width: 760px) { .grid { grid-template-columns: 1fr; } }
  .card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px; }
  .card h2 { margin:0 0 12px; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:600; }
  .full { grid-column: 1 / -1; }

  .drop { border:2px dashed var(--line); border-radius:12px; min-height:170px; display:grid; place-items:center; text-align:center;
          color:var(--muted); cursor:pointer; transition:.15s; position:relative; overflow:hidden; padding:12px; }
  .drop:hover, .drop.over, .drop:focus-visible { border-color:var(--accent); color:var(--text); outline:none; }
  .drop img { max-width:100%; max-height:240px; border-radius:8px; display:block; }
  .drop .big { font-size:2rem; display:block; margin-bottom:4px; }
  .row { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }

  textarea { width:100%; min-height:128px; resize:vertical; background:var(--panel2); color:var(--text); border:1px solid var(--line);
             border-radius:12px; padding:12px; font:inherit; }
  textarea:focus { outline:2px solid var(--accent); border-color:transparent; }

  button { font:inherit; font-weight:600; border:1px solid var(--line); background:var(--panel2); color:var(--text);
           padding:9px 14px; border-radius:10px; cursor:pointer; transition:.12s; }
  button:hover { border-color:var(--accent); }
  button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
  button:disabled { opacity:.45; cursor:not-allowed; }
  button.primary { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
  button.rec { background:var(--err); border-color:var(--err); color:#fff; animation:pulse 1.2s infinite; }
  @keyframes pulse { 50% { box-shadow:0 0 0 6px rgba(255,107,107,.25); } }

  .toggle { display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none; font-weight:600; }
  .toggle input { position:absolute; opacity:0; }
  .sw { width:46px; height:26px; border-radius:99px; background:var(--panel2); border:1px solid var(--line); position:relative; transition:.15s; flex:none; }
  .sw::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:var(--muted); transition:.15s; }
  .toggle input:checked + .sw { background:var(--accent); border-color:var(--accent); }
  .toggle input:checked + .sw::after { left:23px; background:var(--accent-ink); }
  .toggle input:focus-visible + .sw { outline:2px solid var(--accent); outline-offset:2px; }

  .status { min-height:1.4em; font-size:.9rem; color:var(--muted); margin-top:8px; }
  .status.err { color:var(--err); } .status.ok { color:var(--ok); }
  .go { width:100%; padding:14px; font-size:1.05rem; margin-top:16px; }

  .out { white-space:pre-wrap; background:var(--panel2); border-radius:12px; padding:14px; min-height:60px; }
  .braille { font-size:2rem; line-height:1.5; letter-spacing:.08em; word-break:break-word; color:var(--accent); font-family:"Segoe UI Symbol","Apple Braille","DejaVu Sans",sans-serif; }

  .pins { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
  .cell { display:grid; grid-template-columns:repeat(2,28px); grid-template-rows:repeat(3,28px); gap:10px; padding:14px 16px; background:#07090d; border-radius:14px; border:1px solid var(--line); }
  .pin { border-radius:50%; background:#1b2130; box-shadow:inset 0 2px 4px rgba(0,0,0,.6); transition:.12s; }
  .pin.on { background:radial-gradient(circle at 35% 30%, #ffe08f, var(--accent) 60%, #a86a00); box-shadow:0 0 12px rgba(255,194,71,.55); }
  .pin-info { flex:1; min-width:180px; }
  .pin-info .ch { font-size:2.2rem; font-weight:700; line-height:1; }
  .pin-info .dots { color:var(--muted); margin:4px 0 10px; font-size:.9rem; }
  .slider { width:100%; accent-color:var(--accent); }
  .hint { color:var(--muted); font-size:.82rem; }

/* nav + extra pages */
nav { display:flex; gap:6px; flex-wrap:wrap; margin:0 0 20px; padding:5px; background:var(--panel); border:1px solid var(--line); border-radius:12px; width:fit-content; }
nav a { color:var(--muted); text-decoration:none; font-weight:600; padding:8px 16px; border-radius:8px; }
nav a:hover { color:var(--text); }
nav a[aria-current="page"] { background:var(--accent); color:var(--accent-ink); }
a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

.tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.tabs button[aria-pressed="true"] { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:12px; }
.tile { display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 8px; background:var(--panel2); border:1px solid var(--line); border-radius:14px; cursor:pointer; }
.tile:hover, .tile:focus-visible { border-color:var(--accent); }
.tile .lbl { font-size:1.4rem; font-weight:700; }
.tile .dn { font-size:.75rem; color:var(--muted); font-weight:500; }
.cell.sm { grid-template-columns:repeat(2,14px); grid-template-rows:repeat(3,14px); gap:6px; padding:8px 10px; border-radius:10px; }
.cell.lg { grid-template-columns:repeat(2,44px); grid-template-rows:repeat(3,44px); gap:16px; padding:20px 24px; }
.cell.lg .pin { cursor:pointer; }
.cell.lg .pin.on { box-shadow:0 0 16px rgba(255,194,71,.6); }
.detail { display:flex; gap:24px; align-items:center; flex-wrap:wrap; }
.detail .ch { font-size:3rem; font-weight:700; line-height:1; }
.detail .bch { font-size:3.2rem; color:var(--accent); }

.choices { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:14px; max-width:420px; }
.choices button { font-size:1.4rem; padding:14px; }
.choices button.right { background:var(--ok); color:#06210f; border-color:var(--ok); }
.choices button.wrong { background:var(--err); color:#fff; border-color:var(--err); }
.score { display:flex; gap:20px; flex-wrap:wrap; color:var(--muted); font-size:.9rem; margin-bottom:14px; }
.score b { color:var(--text); font-size:1.2rem; }
.quiz { display:flex; gap:28px; align-items:center; flex-wrap:wrap; }
.prompt-big { font-size:3.4rem; font-weight:700; }

label.f { display:block; font-weight:600; margin:14px 0 6px; font-size:.9rem; }
input[type=text], input[type=email], select { width:100%; background:var(--panel2); color:var(--text); border:1px solid var(--line); border-radius:10px; padding:11px 12px; font:inherit; }
input:focus-visible, select:focus-visible { outline:2px solid var(--accent); }