:root {
      --charcoal: #303030;
      --panel: #262626;
      --field: #1a1a1a;
      --ink: #ececec;
      --sumi: #9a9a9a;
      --mist: #6e6e6e;
      --line: #4a4a4a;
      --black: #111111;
    }
    * { box-sizing: border-box; }
    html, body { min-height: 100%; }
    body {
      margin: 0;
      background: var(--charcoal);
      color: var(--ink);
      font: 16px/1.6 "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
      color-scheme: dark;
    }

    /* gate */
    .gate {
      min-height: 100vh;
      display: grid;
      grid-template-columns: minmax(260px, 34%) minmax(0, 1fr);
      gap: 24px;
      align-items: stretch;
      padding: 0 0 0 7vw;
    }
    .gate-copy {
      max-width: 28rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 48px 24px 48px 0;
    }
    .seal {
      font-family: "Shippori Mincho", "Times New Roman", serif;
      letter-spacing: 0.42em;
      font-size: 11px;
      text-transform: uppercase;
      color: var(--sumi);
      margin: 0 0 18px;
    }
    .gate h1 {
      font-family: "Shippori Mincho", serif;
      font-weight: 600;
      font-size: clamp(42px, 6vw, 68px);
      letter-spacing: 0.18em;
      margin: 0 0 16px;
    }
    .gate p {
      margin: 0 0 28px;
      color: var(--sumi);
      max-width: 34ch;
    }
    .scroll {
      margin: 0;
      height: 100vh;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      padding: 0;
    }
    .scroll img {
      display: block;
      height: 100%;
      width: auto;
      max-width: 100%;
      object-fit: contain;
      object-position: top center;
    }

    /* bench */
    .bench {
      display: none;
      grid-template-columns: 220px minmax(0, 820px) minmax(280px, 1fr);
      min-height: 100vh;
    }
    body.is-bench .gate { display: none; }
    body.is-bench .bench { display: grid; }

    aside {
      background: var(--panel);
      border-right: 1px solid var(--line);
      padding: 28px 18px 24px;
      display: flex;
      flex-direction: column;
      gap: 28px;
    }
    .brand {
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      color: inherit;
      padding: 0 8px;
    }
    .brand img {
      width: 36px;
      height: 36px;
      object-fit: cover;
      background: #111;
    }
    .brand strong {
      font-family: "Shippori Mincho", serif;
      font-weight: 600;
      letter-spacing: 0.2em;
      font-size: 13px;
    }
    nav { display: flex; flex-direction: column; gap: 2px; }
    nav button {
      appearance: none;
      background: none;
      border: 0;
      text-align: left;
      color: var(--sumi);
      padding: 9px 10px;
      cursor: pointer;
      font: 500 14px/1.2 "Zen Kaku Gothic New", sans-serif;
      display: flex;
      gap: 10px;
      align-items: baseline;
    }
    nav button .n {
      font-family: "Shippori Mincho", serif;
      font-size: 12px;
      color: var(--mist);
      width: 1.4em;
    }
    nav button:hover { color: var(--ink); }
    nav button.active {
      color: var(--ink);
      box-shadow: inset 2px 0 0 #d0d0d0;
    }
    .aside-foot {
      margin-top: auto;
      padding: 0 10px;
      color: var(--mist);
      font-size: 12px;
    }

    main {
      padding: 48px 40px 72px;
      max-width: 820px;
      position: relative;
      z-index: 1;
    }
    .stage {
      position: sticky;
      top: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      background: transparent;
      border: 0;
    }
    .stage img {
      display: block;
      height: 100%;
      width: auto;
      max-width: 100%;
      opacity: 0.42;
    }
    .kicker {
      font-family: "Shippori Mincho", serif;
      letter-spacing: 0.28em;
      font-size: 11px;
      text-transform: uppercase;
      color: var(--sumi);
      margin: 0 0 8px;
    }
    h1.tool {
      font-family: "Shippori Mincho", serif;
      font-weight: 600;
      font-size: 32px;
      margin: 0 0 8px;
    }
    .lede { color: var(--sumi); margin: 0 0 24px; max-width: 52ch; }
    .panel {
      background: var(--panel);
      border: 1px solid var(--line);
      padding: 22px;
    }
    .panel + .panel { margin-top: 14px; }
    label {
      display: block;
      font-size: 11px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--sumi);
      margin: 0 0 8px;
    }
    textarea, input[type="text"], select {
      width: 100%;
      background: var(--field);
      color: var(--ink);
      border: 1px solid var(--line);
      padding: 12px 14px;
      font: 15px/1.5 "Zen Kaku Gothic New", sans-serif;
      outline: none;
    }
    textarea { min-height: 180px; resize: vertical; }
    textarea.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }
    textarea:focus, input:focus { border-color: var(--ink); }
    .file-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.file-btn {
  display: inline-block;
  margin: 0;
  letter-spacing: 0;
  text-transform: none;
  font: 500 13px/1 "Zen Kaku Gothic New", sans-serif;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 9px 14px;
  cursor: pointer;
}
.file-btn:hover { background: #3a3a3a; }
input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
#sh-file-name { color: var(--sumi); font-size: 13px; }
    .row { display: grid; gap: 14px; margin-bottom: 14px; }
    .row.two { grid-template-columns: 1fr 1fr; }
    .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
    button.btn {
      appearance: none;
      border: 1px solid var(--ink);
      background: transparent;
      color: var(--ink);
      padding: 9px 14px;
      cursor: pointer;
      font: 500 13px/1 "Zen Kaku Gothic New", sans-serif;
    }
    button.btn:hover { background: #3a3a3a; }
    button.btn.primary { background: var(--black); color: var(--ink); border-color: var(--black); }
    button.btn.primary:hover { background: #000; }
    button.btn.ghost { border-color: var(--line); color: var(--sumi); }
    button.btn.danger { border-color: #8a5a5a; color: #d8b4b4; }
    button.btn.danger:hover { background: #3a2222; }
    button.btn:disabled { opacity: 0.45; cursor: default; }
    .out {
      margin-top: 16px;
      white-space: pre-wrap;
      word-break: break-word;
      background: var(--field);
      border: 1px dashed var(--line);
      padding: 14px;
      min-height: 72px;
      font-family: ui-monospace, Menlo, Consolas, monospace;
      font-size: 13px;
    }
    .hint { color: var(--mist); font-size: 13px; margin: 0 0 12px; }
    .lib-meta { color: var(--mist); font-size: 12px; margin: 0 0 10px; }
    .lib-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
    }
    .lib-table th {
      text-align: left;
      font-size: 11px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--sumi);
      font-weight: 500;
      padding: 0 8px 8px 0;
      border-bottom: 1px solid var(--line);
    }
    .lib-table td {
      padding: 10px 8px 10px 0;
      border-bottom: 1px solid #333;
      vertical-align: middle;
    }
    .lib-table tr:last-child td { border-bottom: 0; }
    .pill {
      display: inline-block;
      border: 1px solid var(--line);
      padding: 2px 8px;
      color: var(--sumi);
      font-size: 12px;
    }
    .lib-name { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }
    .lib-empty { color: var(--mist); padding: 12px 0; }
    .stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-top: 16px; }
    .stat { background: var(--field); border: 1px solid var(--line); padding: 12px 14px; }
    .stat b { display: block; font-family: "Shippori Mincho", serif; font-size: 22px; }
    .stat span { color: var(--sumi); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
    .toast {
      position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
      background: var(--black); color: var(--ink);
      padding: 10px 16px; font-size: 13px; opacity: 0;
      pointer-events: none; transition: opacity .2s; z-index: 9;
    }
    .toast.show { opacity: 1; }
    .hidden { display: none; }
    .scope-gap { margin-top: 14px; }
    select { margin-top: 0; }

    @media (max-width: 1100px) {
      .bench { grid-template-columns: 220px 1fr; }
      .stage { display: none; }
    }
    @media (max-width: 860px) {
      .gate { grid-template-columns: 1fr; padding: 36px 22px 48px; }
      .gate-copy { padding: 0; }
      .scroll { vertical-align: top; height: 100%; padding: 0; }
      .scroll img { vertical-align: top; height: 100%; }
      .bench { grid-template-columns: 1fr; }
      aside { border-right: 0; border-bottom: 1px solid var(--line); }
      nav { flex-direction: row; flex-wrap: wrap; }
      main { padding: 28px 20px 56px; }
      .row.two, .stats { grid-template-columns: 1fr 1fr; }
      .stage { display: none; }
    }