:root{color-scheme:light;--bg: #0b1021;--panel: #0f162f;--accent: #2bd1d1;--accent-strong: #0fbfbf;--text: #e8f1ff;--muted: #9fb1d0;--border: #1e2744;--danger: #ff6b6b;--success: #6be3a1;--focus: #ffd166;--radius: 14px;--shadow: 0 20px 60px rgba(0, 0, 0, .35);font-family:Inter var,Noto Sans JP,system-ui,-apple-system,sans-serif}*,*:before,*:after{box-sizing:border-box}body.page{margin:0;min-height:100vh;background:radial-gradient(circle at 20% 20%,rgba(43,209,209,.08),transparent 35%),radial-gradient(circle at 80% 0%,rgba(255,209,102,.08),transparent 28%),var(--bg);color:var(--text);line-height:1.6}.monaco-editor,.monaco-editor *{font-family:Droid Sans Mono,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace!important;line-height:1.5!important}main{max-width:1080px;margin:0 auto;padding:32px 20px 48px}.hero h1{font-size:clamp(28px,4vw,36px);margin:0 0 10px;letter-spacing:.01em}.hero .lead{margin:0 0 24px;color:var(--muted)}.tab-shell{background:#ffffff03;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}.tab-list{display:grid;grid-template-columns:repeat(2,1fr);border-bottom:1px solid var(--border)}.tab{background:transparent;color:var(--text);padding:14px;border:0;border-bottom:2px solid transparent;font-weight:700;letter-spacing:.02em;cursor:pointer}.tab[aria-selected=true]{border-color:var(--accent);background:#2bd1d10f}.tab:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}.tab-panels{padding:0}.tab-panel{padding:20px}.panel{background:linear-gradient(145deg,#0f162fe6,#0e1426e0);border:1px solid var(--border);border-radius:calc(var(--radius) - 4px);padding:24px;display:grid;gap:18px}.field label{display:block;font-weight:700;margin-bottom:6px}input[type=text]{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:#ffffff0a;color:var(--text)}input[type=text]:focus-visible,textarea:focus-visible,select:focus-visible,button:focus-visible{outline:3px solid var(--focus);outline-offset:1px}.note{color:var(--muted);margin:4px 0 8px}snippet-editor,.editor-shell{display:block}.editor-shell{position:relative;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#0c142d}.editor-fallback{width:100%;min-height:220px;background:transparent;border:0;color:var(--text);padding:12px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,Liberation Mono,Courier New,monospace}.editor-toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:12px;background:#ffffff05;border:1px solid var(--border);border-radius:12px}.option-row{display:flex;flex-wrap:wrap;gap:10px}.toolbar-actions{display:flex;gap:8px}.monaco-host{width:100%;min-height:240px}.options{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.option{display:inline-flex;gap:8px;align-items:center;color:var(--muted);background:#ffffff08;border:1px solid var(--border);border-radius:10px;padding:8px 10px}.option.select select{background:#0f162f;color:var(--text);border:1px solid var(--border);border-radius:8px;padding:6px 8px}.option.check input{accent-color:var(--accent)}.actions{display:flex;gap:12px;flex-wrap:wrap}button.primary,button.secondary{padding:12px 16px;border-radius:999px;border:1px solid transparent;cursor:pointer;font-weight:700;letter-spacing:.02em;transition:transform .12s ease,box-shadow .12s ease,background .12s ease}button.primary{background:linear-gradient(135deg,var(--accent),var(--accent-strong));color:#002020}button.secondary{background:#ffffff0f;color:var(--text);border-color:var(--border)}.ghost{background:#ffffff08;border-color:var(--border)}button.primary:hover,button.secondary:hover{transform:translateY(-1px)}.output-shell{display:grid;gap:8px}.output{min-height:96px;background:#ffffff0a;border:1px solid var(--border);border-radius:12px;color:var(--text);padding:12px}.bookmark-link{display:inline-block;width:fit-content;padding:10px 14px;border-radius:10px;text-decoration:none;background:#2bd1d126;color:var(--text);border:1px dashed var(--accent)}.message{min-height:20px;color:var(--muted)}.message[data-state=success]{color:var(--success)}.message[data-state=error]{color:var(--danger)}.pill-list{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:8px}.pill-list li{padding:10px 12px;border-radius:10px;background:#ffffff0a;border:1px solid var(--border)}.guide h2{margin:6px 0}@media(max-width:720px){.actions{flex-direction:column}.tab-panel{padding:16px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}body.no-js .monaco-host,html.no-js .monaco-host{display:none!important}