:root,[data-theme=dark]{color-scheme:dark;--bg:#0c0d0f;--side:#141518;--side-border:#25272c;--surface:#16171a;--surface2:#1d1f23;--border:#2a2d32;--text:#ecedef;--muted:#a6aab1;--faint:#8c9098;--hover:rgba(255,255,255,.04);--input:#101114;--active-border:#3a3d44;--accent:#a78bff;--accent-strong:#7b4ff0;--accent-soft:rgba(139,92,246,.18);--accent-line:rgba(155,123,255,.5);--nav-active:linear-gradient(90deg,rgba(139,92,246,.40) 0%,rgba(139,92,246,.14) 55%,rgba(139,92,246,0) 100%);--nav-active-text:#fff;--bar:linear-gradient(180deg,#d3c6ff,#8b5cf6);--bar-glow:0 0 16px 2px rgba(139,92,246,.85);--fill:linear-gradient(90deg,#6d4ae6,#b8a4ff);--fill-muted:#26282d;--badge:#7b4ff0;--badge-text:#fff;--chip:#202226;--seg-on:rgba(139,92,246,.24);--seg-on-text:#eee9ff;--mark:linear-gradient(135deg,#fafafb 0%,#c5c9cf 45%,#8e939b 72%,#e7e9ec 100%);--mark-ink:#141518;--btn:linear-gradient(135deg,#7b4ff0,#9b7bff);--btn-text:#fff;--bubble-ai:#1d1f23;--bubble-me:linear-gradient(135deg,#7b4ff0,#9b7bff);--bubble-me-text:#fff;--opt-border:#2e3136;--opt-sel:rgba(139,92,246,.16);--opt-sel-border:#9b7bff;--amber:#e6be6e;--amber-soft:rgba(230,190,110,.13);--teal:#5fd4c0;--teal-soft:rgba(95,212,192,.13);--red:#ff8a80;--red-soft:rgba(255,138,128,.12);--c1:#9b7bff;--c2:#4fc3d9;--c3:#e6be6e;--c4:#5fd4a8;--scrim:rgba(0,0,0,.55);--sb:rgba(200,204,212,.22);--sb-hover:rgba(155,123,255,.75);--shadow:0 20px 60px rgba(0,0,0,.5)}
[data-theme=light]{color-scheme:light;--bg:#eceef1;--side:#fff;--side-border:#e0e3e7;--surface:#fff;--surface2:#f4f5f7;--border:#e0e3e7;--text:#15171a;--muted:#4f545c;--faint:#646973;--hover:rgba(21,23,26,.04);--input:#f4f5f7;--active-border:#cdd1d7;--accent:#5b36d6;--accent-strong:#5b36d6;--accent-soft:#eee9fd;--accent-line:rgba(106,69,224,.45);--nav-active:linear-gradient(90deg,rgba(106,69,224,.17) 0%,rgba(106,69,224,.06) 60%,rgba(106,69,224,0) 100%);--nav-active-text:#2e1a86;--bar:linear-gradient(180deg,#9c80f5,#5b36d6);--bar-glow:0 0 12px 1px rgba(106,69,224,.55);--fill:linear-gradient(90deg,#5b36d6,#a893f5);--fill-muted:#e6e8eb;--badge:#5b36d6;--badge-text:#fff;--chip:#f0f1f3;--seg-on:#eee9fd;--seg-on-text:#3f25a8;--mark:linear-gradient(135deg,#3a3d43 0%,#15171a 60%,#4a4e55 100%);--mark-ink:#f1f2f4;--btn:linear-gradient(135deg,#5b36d6,#7b5bea);--btn-text:#fff;--bubble-ai:#f3f4f6;--bubble-me:linear-gradient(135deg,#5b36d6,#7b5bea);--bubble-me-text:#fff;--opt-border:#e0e3e7;--opt-sel:#f3effe;--opt-sel-border:#6a45e0;--amber:#8a5a00;--amber-soft:#fbf0d9;--teal:#11705f;--teal-soft:#dff3ef;--red:#b3261e;--red-soft:#fde8e6;--c1:#6a45e0;--c2:#0e8ba6;--c3:#b07a12;--c4:#1f8a5e;--scrim:rgba(21,23,26,.35);--sb:rgba(21,23,26,.18);--sb-hover:rgba(106,69,224,.6);--shadow:0 20px 60px rgba(21,23,26,.18)}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font-family:'IBM Plex Sans','IBM Plex Sans JP',system-ui,sans-serif;font-size:14px;line-height:1.5;background:var(--bg);color:var(--text);display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;-webkit-font-smoothing:antialiased}
a{color:inherit}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace}
[data-theme=dark] .if-light,[data-theme=light] .if-dark{display:none}
.pub-top{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:20px 24px}
.seg{display:inline-flex;padding:3px;gap:2px;border-radius:12px;background:var(--surface);border:1px solid var(--border)}
.seg-b{height:30px;min-width:44px;padding:0 12px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:500;text-decoration:none;color:var(--muted)}
.seg-b.on{background:var(--seg-on);color:var(--seg-on-text);box-shadow:0 0 0 1px var(--accent-line)}
.ib{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;border:1px solid var(--border);background:var(--surface);color:var(--text);text-decoration:none}
.pub-main{flex:1;display:flex;align-items:center;justify-content:center;padding:16px 16px 64px}
.card{width:100%;max-width:420px;display:flex;flex-direction:column;gap:22px;padding:36px;border-radius:24px;background:var(--side);border:1px solid var(--border)}
.brand{display:flex;align-items:center;gap:12px}
.mark{width:44px;height:44px;flex:0 0 44px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:var(--mark);color:var(--mark-ink)}
.brand-text{display:flex;flex-direction:column}
.brand-text b{font-size:18px;font-weight:600}
.brand-text small{font-size:12px;color:var(--faint)}
.step{display:flex;flex-direction:column;gap:16px}
.step[hidden]{display:none}
.step-head{display:flex;flex-direction:column;gap:4px}
h1{margin:0;font-size:22px;font-weight:600;line-height:1.3}
.lead{margin:0;color:var(--muted)}
.lead b{color:var(--text);font-weight:500}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13px;color:var(--muted)}
.field input{height:46px;padding:0 14px;border-radius:12px;background:var(--input);border:1px solid var(--active-border);outline:none}
.field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.cells{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.cell{height:54px;min-width:0;border-radius:12px;text-align:center;font-family:'IBM Plex Mono',monospace;font-size:22px;outline:none;background:var(--input);border:1px solid var(--active-border);caret-color:var(--accent)}
.cell:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.cells.bad .cell{border-color:var(--red)}
.btn{display:flex;align-items:center;justify-content:center;height:46px;border-radius:12px;border:0;background:var(--btn);color:var(--btn-text);font-size:15px;font-weight:500;cursor:pointer;text-decoration:none}
.btn:disabled{opacity:.6;cursor:default}
.note{margin:0;font-size:12px;color:var(--faint)}
.err{margin:0;font-size:13px;color:var(--red)}
.row{display:flex;justify-content:space-between;gap:12px;font-size:13px}
.link{background:none;border:0;padding:0;cursor:pointer;color:var(--muted);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--accent-line)}
.link:disabled{text-decoration:none;cursor:default;color:var(--faint)}
.code-row{display:flex;align-items:baseline;gap:14px}
.code{font-family:'IBM Plex Mono',monospace;font-size:64px;font-weight:500;line-height:1;letter-spacing:-.03em;color:var(--accent)}
.code-line{flex:1;height:3px;border-radius:2px;background:var(--bar);box-shadow:var(--bar-glow)}
@media (max-width:480px){.card{padding:26px 22px}.pub-top{padding:14px 16px}.cell{height:48px;font-size:20px}}