:root {
  color-scheme: dark;
  --bg: #111;
  --panel: #181818;
  --panel-2: #222;
  --line: #444;
  --text: #fff;
  --muted: #aaa;
  --accent: #5aa9ff;
  --accent-ink: #111;
  --creator-accent: #a8ff3e;
  --danger: #ff7676;
  font-family: "Yu Gothic UI", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
* { box-sizing: border-box; }
body { margin:0; min-width:320px; min-height:100vh; background:var(--bg); color:var(--text); }
button, input, select { font:inherit; }
.site-header, main, footer { width:min(1080px, calc(100% - 32px)); margin-inline:auto; }
.site-header { display:flex; justify-content:space-between; align-items:flex-end; gap:28px; padding:38px 0 24px; border-bottom:3px solid var(--accent); }
.eyebrow { margin:0 0 8px; color:var(--accent); font:700 11px/1.2 monospace; letter-spacing:.12em; }
h1 { margin:0; font-size:clamp(36px, 6vw, 68px); line-height:.9; letter-spacing:-.07em; }
h1 span { color:var(--accent); }
.lead { margin:15px 0 0; color:var(--muted); font-weight:700; }
.header-controls { display:grid; grid-template-columns:auto; align-items:end; justify-items:end; gap:14px; }
.social-links { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:14px; }
.site-share-button { display:flex; align-items:center; gap:7px; padding:8px 11px; border:1px solid var(--accent); background:transparent; color:var(--accent); cursor:pointer; font-size:11px; font-weight:800; }
.site-share-button img { width:13px; height:13px; }
.site-share-button:hover, .site-share-button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.language-switcher { grid-column:1 / -1; justify-self:end; display:flex; align-items:center; gap:7px; color:var(--muted); font:800 12px/1 monospace; }
.language-switcher button { padding:4px 2px; border:0; border-bottom:2px solid transparent; background:transparent; color:var(--muted); cursor:pointer; font:inherit; }
.language-switcher button[aria-pressed="true"] { border-color:var(--accent); color:var(--text); }
.language-switcher button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.output-style-control label, .notation-control label { display:grid; gap:5px; color:var(--muted); font-size:11px; font-weight:700; }
.output-style-control select, .notation-control select { min-width:140px; padding:9px 28px 9px 10px; border:1px solid var(--line); border-radius:0; background:var(--panel); color:var(--text); }
main { padding:12px 0 50px; }
.workspace, .palette-section { margin-bottom:20px; padding:clamp(16px, 3vw, 28px); border:2px solid var(--line); background:var(--panel); }
.workspace { border-top:6px solid var(--accent); }
.section-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.section-heading > div { display:flex; align-items:baseline; gap:10px; }
.section-heading > .preview-heading-controls { align-items:flex-end; gap:12px; }
.step { display:inline-grid; place-items:center; width:25px; height:25px; background:var(--accent); color:var(--accent-ink); font:800 11px monospace; }
h2 { margin:0; font-size:18px; }
#token-count, .hint { color:var(--muted); font:700 11px monospace; }
.color-controls { margin:8px 0 0; padding:10px 12px; border:1px solid var(--line); background:var(--bg); }
.color-controls-summary { display:flex; flex-wrap:wrap; align-items:center; gap:8px; cursor:pointer; list-style:none; color:var(--text); font-size:12px; font-weight:800; }
.color-controls-summary::-webkit-details-marker { display:none; }
.color-controls-summary::marker { content:""; }
.color-controls-summary::after { content:""; width:0; height:0; margin-left:auto; border-left:5px solid transparent; border-right:5px solid transparent; border-top:6px solid var(--muted); }
.color-controls[open] .color-controls-summary::after { transform:rotate(180deg); }
.color-controls-hint { color:var(--muted); font:700 10px/1 monospace; }
.color-controls-body { margin-top:10px; }
.color-controls-actions { display:flex; justify-content:flex-end; margin-bottom:8px; }
.customized-indicator { padding:3px 6px; border:1px solid var(--accent); color:var(--accent); font:800 10px/1 monospace; }
.reset-colors { padding:5px 8px; border:1px solid var(--line); background:var(--panel); color:var(--muted); cursor:pointer; font-size:10px; font-weight:800; }
.reset-colors:hover, .reset-colors:focus-visible { outline:2px solid var(--accent); outline-offset:2px; color:var(--text); }
.color-control-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; }
.color-control { display:grid; grid-template-columns:auto 34px 44px minmax(0,1fr); align-items:center; gap:7px; min-width:0; padding:8px; border:1px solid var(--line); background:var(--panel); }
.color-control > label:first-child { font-size:11px; font-weight:800; }
.color-swatch { position:relative; width:34px; height:28px; border:1px solid var(--muted); background:var(--swatch-color); overflow:hidden; }
.color-control.is-transparent .color-swatch::after { content:""; position:absolute; inset:-8px; background:linear-gradient(135deg, transparent 46%, var(--danger) 47% 53%, transparent 54%); }
.color-control input[type="color"] { width:44px; height:32px; padding:2px; border:1px solid var(--line); background:var(--bg); cursor:pointer; }
.transparent-toggle { display:flex; align-items:center; gap:5px; min-width:0; color:var(--muted); font-size:10px; font-weight:700; white-space:nowrap; }
.transparent-toggle input { margin:0; accent-color:var(--accent); }
.color-control input:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.preview-shell { position:relative; display:flex; align-items:center; overflow-x:auto; padding:16px; border:2px solid var(--line); background:var(--bg); }
.preview-shell[data-output-tone="dark"] { background:#111; }
.preview-shell[data-output-tone="light"] { background:#f5f5f0; }
.preview-shell[data-output-style="gold"] { background:#1a1408; }
.preview-shell[data-output-style="sakura"] { background:#fff0f3; }
.preview-shell[data-output-style="mono"] { background:#ececee; }
#preview { display:block; max-width:none; height:82px; }
#empty-message { position:absolute; inset:0; display:grid; place-items:center; margin:0; padding:12px; color:var(--muted); text-align:center; font-size:13px; pointer-events:none; }
#empty-message[hidden] { display:none; }
.render-status { margin:8px 0 0; color:var(--muted); font-size:12px; }
.render-status:empty { display:none; }
.render-status.is-error { color:var(--danger); }
.workspace-mode-actions { display:flex; justify-content:flex-end; margin-top:12px; }
.creator-mode-entry-button { display:inline-flex; align-items:center; gap:12px; min-height:43px; border-width:1px; border-color:rgba(168,255,62,.65); background:transparent; color:var(--text); font-size:12px; }
.creator-mode-entry-button > span:last-child { color:var(--creator-accent); font-size:16px; }
.creator-mode-entry-button:not(:disabled):hover { background:rgba(168,255,62,.08); }
.actions { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; margin-top:12px; }
.creator-toolbar { display:contents; }
.default-view-label-short { display:none; }
.history-actions, .export-actions { display:flex; flex-wrap:wrap; gap:8px; }
.export-actions { margin-left:auto; }
.button { min-height:43px; padding:0 16px; border:2px solid var(--line); border-radius:0; cursor:pointer; font-weight:800; }
.button:disabled { opacity:.35; cursor:not-allowed; }
.button:not(:disabled):hover, .button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.button.creator-mode-entry-button { border-color:rgba(168,255,62,.65); }
.button.creator-mode-entry-button:not(:disabled):hover, .button.creator-mode-entry-button:focus-visible { border-color:var(--creator-accent); outline-color:var(--creator-accent); background:rgba(168,255,62,.08); }
.button-secondary { background:var(--panel-2); color:var(--text); }
.button-copy { min-width:150px; background:var(--panel); color:var(--text); }
.button-share { min-width:150px; border-color:var(--accent); background:var(--panel); color:var(--accent); }
.button-primary { min-width:150px; border-color:var(--accent); background:var(--accent); color:var(--accent-ink); }
.button-svg { background:var(--panel); color:var(--accent); }
.button-primary > span:last-child { float:right; }
.palette-group + .palette-group { margin-top:24px; }
.palette-group h3 { display:flex; gap:8px; align-items:center; margin:0 0 9px; color:var(--text); font-size:12px; }
.palette-group h3::before { content:""; width:11px; height:11px; background:var(--accent); }
.palette-group-heading { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:0 0 9px; }
.palette-group-heading h3 { margin:0; }
.press-mode-toggle { display:inline-flex; gap:0; margin:0; border:1px solid var(--line); }
.press-mode-toggle button { padding:4px 10px; border:0; border-right:1px solid var(--line); background:var(--bg); color:var(--muted); cursor:pointer; font-size:11px; font-weight:800; }
.press-mode-toggle button:last-child { border-right:0; }
.press-mode-toggle button[aria-pressed="true"] { background:var(--accent); color:var(--accent-ink); }
.press-mode-toggle button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; z-index:1; }
.mode-palette-group[data-input-mode="normal"] [data-mode-group="hold"],
.mode-palette-group[data-input-mode="hold"] [data-mode-group="normal"] { display:none; }
.neutral-token-button { margin-left:6px; }
.character-palette-heading { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:8px 16px; margin-bottom:9px; }
.character-palette-heading h3 { margin:0; }
.character-palette-controls { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px; }
.custom-move-open-button, .custom-move-empty-button { padding:8px 10px; border:1px solid var(--accent); background:transparent; color:var(--accent); cursor:pointer; font-size:11px; font-weight:800; }
.custom-move-open-button:hover, .custom-move-open-button:focus-visible, .custom-move-empty-button:hover, .custom-move-empty-button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; background:rgba(90,169,255,.08); }
.character-filter-control { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:11px; font-weight:700; }
.character-filter-control select { min-width:180px; padding:8px 28px 8px 10px; border:1px solid var(--line); border-radius:0; background:var(--panel); color:var(--text); }
.character-groups { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:12px; }
.character-group { min-width:0; padding:12px; border:1px solid var(--line); background:var(--bg); }
.character-group h4 { margin:0 0 9px; color:var(--accent); font-size:12px; }
.original-character-group { border-color:var(--accent); }
.original-moves-empty { margin:0 0 10px; color:var(--muted); font-size:11px; }
.token-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(72px, 1fr)); gap:6px; }
.token-button { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:82px; gap:6px; padding:7px 3px; border:1px solid var(--line); border-radius:0; background:var(--bg); color:var(--text); cursor:pointer; }
#palette[data-output-tone="dark"] .token-button { background:#181818; }
#palette[data-output-tone="light"] .token-button { background:#f5f5f0; }
#palette[data-output-style="gold"] .token-button { background:#241c10; }
#palette[data-output-style="sakura"] .token-button { background:#fff0f3; }
#palette[data-output-style="mono"] .token-button { background:#ececee; }
.token-button:hover, .token-button:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; background:var(--panel-2); }
.token-button svg { width:46px; height:46px; }
.token-button:is([data-token-id="lp"], [data-token-id="rp"], [data-token-id="lk"], [data-token-id="rk"], [data-token-id="wp"], [data-token-id="wk"], [data-token-id="lp_hold"], [data-token-id="rp_hold"], [data-token-id="lk_hold"], [data-token-id="rk_hold"], [data-token-id="wp_hold"], [data-token-id="wk_hold"]) svg { width:42px; height:42px; }
.stance-token-button svg { width:auto; max-width:100%; height:46px; }
.token-button span { color:var(--muted); font-size:10px; white-space:nowrap; }
.custom-move-dialog { width:min(620px, calc(100% - 24px)); max-height:calc(100vh - 24px); padding:0; border:2px solid var(--accent); border-radius:0; background:var(--panel); color:var(--text); box-shadow:0 24px 80px rgba(0,0,0,.72); }
.custom-move-dialog::backdrop { background:rgba(0,0,0,.78); }
.custom-move-dialog-panel { padding:20px; }
.custom-move-dialog-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.custom-move-dialog-header .eyebrow { margin-bottom:6px; }
.custom-move-dialog-header h2 { font-size:20px; }
.custom-move-dialog-close { display:grid; place-items:center; width:36px; height:36px; flex:0 0 auto; padding:0; border:1px solid var(--line); background:var(--bg); color:var(--text); cursor:pointer; font-size:22px; line-height:1; }
.custom-move-dialog-close:hover, .custom-move-dialog-close:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.custom-move-dialog-help { margin:10px 0 16px; color:var(--muted); font-size:12px; line-height:1.65; }
.custom-move-form { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; padding:14px; border:1px solid var(--line); background:var(--bg); }
.custom-move-form h3 { grid-column:1 / -1; margin:0; color:var(--accent); font-size:12px; }
.custom-move-form label { display:grid; gap:6px; color:var(--muted); font-size:11px; font-weight:800; }
.custom-move-form input[type="text"] { width:100%; min-width:0; padding:10px; border:1px solid var(--line); border-radius:0; background:var(--panel); color:var(--text); }
.custom-move-form input[type="text"]:focus { outline:2px solid var(--accent); outline-offset:2px; }
.custom-move-form-error { grid-column:1 / -1; margin:0; color:var(--danger); font-size:11px; font-weight:700; }
.custom-move-form-actions { grid-column:1 / -1; display:flex; justify-content:flex-end; gap:8px; }
.custom-move-cancel-button, .custom-move-save-button { min-height:38px; padding:0 14px; border:1px solid var(--line); border-radius:0; cursor:pointer; font-weight:800; }
.custom-move-cancel-button { background:var(--panel); color:var(--text); }
.custom-move-save-button { border-color:var(--accent); background:var(--accent); color:var(--accent-ink); }
.custom-move-cancel-button:hover, .custom-move-cancel-button:focus-visible, .custom-move-save-button:hover, .custom-move-save-button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.custom-move-saved { margin-top:18px; }
.custom-move-saved h3 { margin:0 0 8px; font-size:12px; }
.custom-move-list { display:grid; gap:6px; }
.custom-move-list-empty { margin:0; padding:12px; border:1px dashed var(--line); color:var(--muted); font-size:11px; text-align:center; }
.custom-move-list-item { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px; padding:9px 10px; border:1px solid var(--line); background:var(--bg); }
.custom-move-list-label { min-width:0; }
.custom-move-list-label strong, .custom-move-list-label small { display:block; overflow-wrap:anywhere; }
.custom-move-list-label strong { font-size:12px; }
.custom-move-list-label small { margin-top:3px; color:var(--muted); font-size:10px; }
.custom-move-list-actions { display:flex; gap:6px; }
.custom-move-list-actions button { padding:6px 8px; border:1px solid var(--line); background:var(--panel); color:var(--text); cursor:pointer; font-size:10px; font-weight:800; }
.custom-move-list-actions .custom-move-delete-button { color:var(--danger); }
.custom-move-list-actions button:hover, .custom-move-list-actions button:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
footer { display:flex; justify-content:space-between; padding:22px 0 36px; border-top:2px solid var(--line); color:var(--muted); font:700 11px monospace; }

[data-workspace-mode="creator"] [data-creator-visibility="hide"] { display:none; }
[data-workspace-mode="default"] :is([data-creator-region="mode-exit"], [data-creator-region="mode-label"]) { display:none; }

/* クリエイターモードは同じDOMを再配置する。画像生成やトークン状態にはモードを持ち込まない。 */
body[data-workspace-mode="creator"] {
  --creator-toolbar-height:64px;
  --creator-export-width:88px;
  --creator-desk-gap:12px;
  --creator-desk-width:min(1180px, calc(100% - 32px));
  --creator-workspace-width:calc(var(--creator-desk-width) - var(--creator-export-width) - var(--creator-desk-gap));
  --creator-desk-left:calc((100% - var(--creator-desk-width)) / 2);
}
[data-workspace-mode="creator"] main {
  width:var(--creator-workspace-width);
  margin-right:0;
  margin-left:var(--creator-desk-left);
  padding:var(--creator-toolbar-height) 0 48px;
}
[data-workspace-mode="creator"] .workspace { display:contents; }
[data-workspace-mode="creator"] [data-creator-region="preview"] {
  position:sticky;
  top:var(--creator-toolbar-height);
  z-index:20;
  max-width:100%;
  margin:0 0 8px;
  border-color:var(--accent);
  box-shadow:0 10px 24px rgba(0,0,0,.45);
}
[data-workspace-mode="creator"] #preview { max-width:100%; height:auto!important; }
[data-workspace-mode="creator"] .render-status { min-height:16px; margin:0 0 6px; }
[data-workspace-mode="creator"] .workspace-mode-actions { display:none; }
[data-workspace-mode="creator"] .actions { display:block; margin:0 0 12px; }
[data-workspace-mode="creator"] [data-creator-region="creator-toolbar"] {
  position:fixed;
  top:0;
  right:auto;
  left:var(--creator-desk-left);
  z-index:40;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:12px;
  width:var(--creator-workspace-width);
  min-height:var(--creator-toolbar-height);
  margin:0;
  padding:8px 16px;
  border-bottom:1px solid var(--line);
  background:var(--panel);
  box-shadow:0 6px 18px rgba(0,0,0,.45);
}
[data-workspace-mode="creator"] .creator-mode-exit-button { justify-self:start; min-height:40px; padding:0 12px; border-color:var(--line); background:var(--panel-2); color:var(--text); font-size:11px; }
[data-workspace-mode="creator"] .creator-toolbar-label { display:inline-flex; align-items:center; gap:7px; justify-self:center; padding:5px 8px; color:var(--creator-accent); font-size:12px; font-weight:800; letter-spacing:.08em; white-space:nowrap; }
[data-workspace-mode="creator"] .creator-toolbar-label::before { content:""; width:7px; height:7px; flex:0 0 auto; border-radius:50%; background:var(--creator-accent); }
[data-workspace-mode="creator"] [data-creator-region="history-actions"] { justify-self:end; flex-wrap:nowrap; }
[data-workspace-mode="creator"] [data-creator-region="history-actions"] .button { min-height:40px; }
[data-workspace-mode="creator"] [data-creator-region="export-actions"] {
  position:fixed;
  right:auto;
  left:calc(var(--creator-desk-left) + var(--creator-workspace-width) + var(--creator-desk-gap));
  top:50%;
  z-index:30;
  display:flex;
  flex-direction:column;
  width:var(--creator-export-width);
  margin:0;
  padding:8px;
  border:1px solid var(--line);
  background:var(--panel);
  box-shadow:0 8px 24px rgba(0,0,0,.5);
  transform:translateY(-50%);
}
[data-workspace-mode="creator"] [data-creator-region="export-actions"] .button {
  width:100%;
  min-width:0;
  min-height:48px;
  padding:6px;
  font-size:11px;
  line-height:1.25;
}
[data-workspace-mode="creator"] [data-creator-region="token-palette"] { margin-bottom:0; }

@media (max-width:680px) { .site-header { align-items:flex-start; flex-direction:column; padding-top:26px; } .header-controls { width:100%; grid-template-columns:repeat(2, minmax(0,1fr)); align-items:end; justify-items:start; } .language-switcher { grid-column:1 / -1; grid-row:1; justify-self:end; } .output-style-control { grid-column:1; grid-row:2; } .notation-control { grid-column:2; grid-row:2; } .output-style-control select, .notation-control select { width:100%; min-width:0; } .workspace,.palette-section { padding:14px; } .color-control-grid { grid-template-columns:1fr; } .color-control { grid-template-columns:minmax(70px,1fr) 34px 44px; } .transparent-toggle { grid-column:1 / -1; justify-self:end; } .button { flex:1 1 auto; } .button-copy { margin-left:0; } .button-primary,.button-copy,.button-share { flex-basis:100%; } .token-grid { grid-template-columns:repeat(4,1fr); } .character-groups { grid-template-columns:1fr; } .stance-grid { grid-template-columns:repeat(2, minmax(0,1fr)); } .stance-token-button span { overflow-wrap:anywhere; white-space:normal; } footer { flex-direction:column; gap:8px; } }
@media (max-width:680px) { .header-controls { grid-template-columns:1fr; } .output-style-control { width:100%; } }
@media (max-width:520px) { .section-heading { flex-wrap:wrap; gap:10px; } .section-heading > .preview-heading-controls { width:100%; justify-content:flex-end; } }
@media (max-width:520px) { .character-palette-controls, .character-filter-control { width:100%; } .character-palette-controls { justify-content:stretch; } .custom-move-open-button { width:100%; } .character-filter-control select { flex:1; min-width:0; } .custom-move-dialog-panel { padding:14px; } .custom-move-form { grid-template-columns:1fr; } .custom-move-form label, .custom-move-form h3, .custom-move-form-error, .custom-move-form-actions { grid-column:1; } .custom-move-list-item { grid-template-columns:1fr; } .custom-move-list-actions { justify-content:flex-end; } }
@media (max-width:390px) { .color-control { grid-template-columns:minmax(64px,1fr) 30px 40px; gap:5px; padding:7px 5px; } .color-swatch { width:30px; } .color-control input[type="color"] { width:40px; } }
@media (max-width:768px) {
  body[data-workspace-mode="creator"] { --creator-toolbar-height:58px; }
  [data-workspace-mode="creator"] main {
    width:calc(100% - 16px);
    margin-inline:auto;
    padding:var(--creator-toolbar-height) 0 calc(88px + env(safe-area-inset-bottom));
  }
  [data-workspace-mode="creator"] [data-creator-region="preview"] {
    top:var(--creator-toolbar-height);
    padding:8px;
  }
  [data-workspace-mode="creator"] [data-creator-region="creator-toolbar"] {
    top:0;
    right:0;
    left:0;
    width:auto;
    grid-template-columns:auto 1fr auto;
    gap:6px;
    padding:6px 8px;
  }
  [data-workspace-mode="creator"] .creator-mode-exit-button { min-height:42px; padding:0 8px; font-size:10px; }
  [data-workspace-mode="creator"] .creator-toolbar-label { font-size:11px; letter-spacing:0; }
  [data-workspace-mode="creator"] [data-creator-region="history-actions"] { gap:4px; }
  [data-workspace-mode="creator"] [data-creator-region="history-actions"] .button { width:42px; min-height:42px; padding:0; }
  [data-workspace-mode="creator"] [data-creator-region="history-actions"] .button span { display:none; }
  [data-workspace-mode="creator"] .default-view-label-long { display:none; }
  [data-workspace-mode="creator"] .default-view-label-short { display:inline; }
  [data-workspace-mode="creator"] [data-creator-region="token-palette"] { padding:12px; }
  [data-workspace-mode="creator"] [data-creator-region="export-actions"] {
    top:auto;
    right:0;
    bottom:0;
    left:0;
    flex-direction:row;
    width:auto;
    padding:8px 8px calc(8px + env(safe-area-inset-bottom));
    border-width:1px 0 0;
    transform:none;
  }
  [data-workspace-mode="creator"] [data-creator-region="export-actions"] .button {
    flex:1 1 0;
    width:auto;
    min-width:0;
    min-height:50px;
    padding:5px 3px;
    font-size:10px;
  }
}
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; } }
    width:auto;