:root { color-scheme:dark; --bg:#171513; --surface:#221f1c; --sidebar:#100f0d; --inset:#1b1916; --text:#eeece7; --muted:#aba49b; --border:#3d3832; --accent:#86cdbd; --accent-text:#183a30; --accent-hover:#65b7a4; --accent-ink:#9bd6c8; --accent-soft:#233b34; --row-hover:#26332d; --focus:#86cdbd; --button-bg:#2e2b26; --button-text:#eeece7; --button-hover:#285f54; --positive:#82c79a; --negative:#f07676; --pending:#d9b47c; --shadow:none; }
    :root[data-theme="light"] { color-scheme:light; --bg:#eae8e5; --surface:#f7f6f3; --sidebar:#e2dfda; --inset:#eeece8; --text:#302d28; --muted:#6d675e; --border:#d2cdc5; --accent:#65b8a7; --accent-text:#183a30; --accent-hover:#53a593; --accent-ink:#246d5e; --accent-soft:#e2eee9; --row-hover:#edf4f0; --focus:#398876; --button-bg:#e5e1da; --button-text:#302d28; --button-hover:#c5e3d8; --positive:#256c3a; --negative:#ae3636; --pending:#896325; --shadow:none; }
    * { box-sizing:border-box; }
    body { margin:0; font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif; background:var(--bg); color:var(--text); }
    button,input { font:inherit; }
    header { border-bottom:1px solid var(--border); }
    .topbar { max-width:1000px; margin:auto; padding:20px 28px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
    .brand { font-weight:650; letter-spacing:-.025em; }
    .badge { color:var(--muted); font-size:14px; }
    main { max-width:880px; margin:48px auto; padding:0 28px; }
    .eyebrow { font-size:13px; font-weight:600; color:var(--accent-ink); text-transform:uppercase; letter-spacing:.12em; }
    h1 { margin:8px 0; font-size:32px; letter-spacing:-.04em; }
    p { margin:0; }
    .subtitle { color:var(--muted); }
    .panel { margin-top:28px; padding:28px; border:1px solid var(--border); border-radius:18px; background:var(--surface); box-shadow:var(--shadow); }
    fieldset { border:0; margin:0; padding:0; min-width:0; }
    legend { font-size:19px; font-weight:600; padding:0; margin-bottom:6px; }
    .hint { color:var(--muted); font-size:14px; }
    .choices { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:24px; }
    .choice { position:relative; display:block; padding:14px; border:2px solid var(--border); border-radius:12px; }
    .choice:has(input:checked) { border-color:var(--accent-ink); background:var(--inset); }
    .choice { cursor:pointer; transition:background-color .15s ease,border-color .15s ease; }
    .choice:hover { border-color:var(--accent-ink); background:var(--accent-soft); }
    .choice:focus-within { outline:3px solid var(--focus); outline-offset:4px; }
    .choice-label { display:flex; gap:10px; align-items:center; margin-top:14px; font-weight:600; }
    input[type="radio"] { width:18px; height:18px; margin:0; accent-color:var(--accent); }
    .choice-caption { padding-left:28px; margin-top:4px; color:var(--muted); font-size:13px; }
    .mini { height:122px; display:grid; grid-template-columns:38px 1fr; border:1px solid #858580; border-radius:7px; overflow:hidden; }
    .mini-dark { --mini-bg:#171513; --mini-card:#221f1c; --mini-rail:#100f0d; --mini-line:#aba49b; }
    .mini-light { --mini-bg:#eae8e5; --mini-card:#f7f6f3; --mini-rail:#e2dfda; --mini-line:#7d756b; }
    .mini-side { padding:13px 9px; background:var(--mini-rail); }
    .mini-side span { display:block; height:4px; border-radius:2px; background:var(--mini-line); margin-bottom:12px; }
    .mini-content { padding:15px; background:var(--mini-bg); }
    .mini-title { width:45%; height:6px; background:var(--mini-line); border-radius:3px; }
    .mini-cards { display:flex; gap:7px; margin:13px 0; }
    .mini-cards span { height:32px; width:50%; background:var(--mini-card); border:1px solid var(--mini-line); border-radius:4px; }
    .mini-row { height:5px; margin-top:8px; width:80%; border-radius:3px; background:var(--mini-line); }
    .live-preview { margin-top:26px; padding-top:24px; border-top:1px solid var(--border); }
    .preview-label { font-size:13px; color:var(--muted); margin-bottom:12px; }
    .example { padding:18px; background:var(--inset); border:1px solid var(--border); border-radius:10px; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px; }
    .example small { display:block; color:var(--muted); font-size:13px; }
    .example strong { display:block; font-size:17px; font-weight:600; }
    .state { background:var(--surface); border:1px solid var(--border); padding:5px 10px; border-radius:6px; font-size:13px; }
    .actions { margin-top:24px; display:flex; flex-wrap:wrap; align-items:center; gap:16px; }
    button { border:1px solid transparent; border-radius:5px; padding:10px 16px; background:var(--button-bg); color:var(--button-text); font-weight:600; min-height:42px; }
    button:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
    button { cursor:pointer; transition:background-color .15s ease,border-color .15s ease,color .15s ease; }
    button:not(:disabled):hover { background:var(--button-hover); border-color:var(--accent-ink); }
    button:disabled { cursor:not-allowed; }
    a { color:var(--accent-ink); transition:color .15s ease; }
    a:hover { color:var(--focus); }
    @media(prefers-reduced-motion:reduce) { button,a,.choice { transition:none; } }
    button:disabled { opacity:.6; }
    #status { color:var(--muted); font-size:14px; flex:1; min-width:160px; }
    footer { margin-top:18px; font-size:13px; color:var(--muted); }
    @media(max-width:540px) { .topbar { padding:16px 20px; } main { margin:28px auto; padding:0 20px; } .panel { padding:20px; } .choices { grid-template-columns:1fr; } h1 { font-size:28px; } .mini { height:104px; } }