.character-generator {
  --ink: #1c1a17;
  --paper: #f3eee2;
  --muted: #4b463f;
  --blue: #7192ad;
  --blue-soft: rgba(113, 146, 173, 0.13);
  --rust: #7a4743;
  --rust-soft: rgba(122, 71, 67, 0.10);
  --line: rgba(28, 26, 23, 0.18);
  --soft-line: rgba(28, 26, 23, 0.10);
  --panel: rgba(255, 255, 255, 0.46);
  --shadow: 0 18px 42px rgba(28, 26, 23, 0.08);
  --radius: 18px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.character-generator * { box-sizing: border-box; }
.character-generator { scroll-behavior: smooth; }
.character-generator {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 8%, rgba(113, 146, 173, 0.16), transparent 28rem),
    radial-gradient(circle at 92% 14%, rgba(122, 71, 67, 0.11), transparent 26rem),
    var(--paper);
  min-height: 100vh;
}
.character-generator button, .character-generator input { font: inherit; }
.character-generator button:disabled { opacity: 0.45; cursor: not-allowed; transform: none !important; }
.character-generator .shell {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 64px 0 48px;
}
.character-generator .generator-header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
.character-generator .eyebrow, .character-generator .section-kicker {
  margin: 0 0 10px;
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.17em;
  color: var(--rust);
}
.character-generator h1, .character-generator h2, .character-generator p { margin-top: 0; }
.character-generator h1 {
  max-width: 820px;
  margin-bottom: 14px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.6rem, 6vw, 5.3rem);
  line-height: 0.93;
  font-weight: 600;
  letter-spacing: -0.045em;
}
.character-generator .lede {
  max-width: 770px;
  margin-bottom: 0;
  color: var(--muted);
  font-size: 1.04rem;
  line-height: 1.65;
}
.character-generator .hero-mark {
  flex: 0 0 auto;
  color: var(--blue);
  font-family: Georgia, serif;
  font-size: clamp(2.2rem, 5vw, 4.7rem);
  letter-spacing: -0.18em;
  opacity: 0.88;
  transform: rotate(-7deg);
}
.character-generator .control-deck { padding-top: 24px; }
.character-generator .toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.character-generator .primary-toolbar { margin-bottom: 12px; }
.character-generator .button {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 11px 17px;
  color: var(--ink);
  background: rgba(255,255,255,0.38);
  cursor: pointer;
  transition: transform 140ms ease, background 140ms ease, border-color 140ms ease;
}
.character-generator .button:hover:not(:disabled), .character-generator .text-button:hover, .character-generator .icon-button:hover:not(:disabled), .character-generator .toggle-chip:hover { transform: translateY(-1px); }
.character-generator .button:active:not(:disabled), .character-generator .text-button:active, .character-generator .icon-button:active:not(:disabled), .character-generator .toggle-chip:active { transform: translateY(0); }
.character-generator .button-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.character-generator .button-primary:hover:not(:disabled) { background: #33302b; }
.character-generator .button-quiet { margin-left: auto; }
.character-generator .button.compact { padding: 9px 14px; }
.character-generator .control-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 12px;
}
.character-generator .mini-panel, .character-generator .category-panel, .character-generator .current-panel, .character-generator .study-section {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow);
}
.character-generator .mini-panel { padding: 18px; }
.character-generator .mini-panel-heading, .character-generator .category-heading-row {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 18px;
}
.character-generator .mini-panel h2, .character-generator .category-panel h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.25rem;
  font-weight: 600;
}
.character-generator .timer-display {
  min-width: 108px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2rem;
  line-height: 1;
}
.character-generator .timer-display.running { color: var(--rust); }
.character-generator .timer-display.paused { color: var(--blue); }
.character-generator .timer-controls, .character-generator .batch-controls {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.character-generator .number-field {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.character-generator .number-field input {
  width: 72px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  color: var(--ink);
  background: rgba(255,255,255,0.48);
  outline: none;
}
.character-generator .number-field input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(113,146,173,0.12); }
.character-generator .batch-number input { width: 88px; }
.character-generator .microcopy {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.79rem;
  line-height: 1.45;
}
.character-generator .category-panel { margin-top: 12px; padding: 18px; }
.character-generator .category-actions, .character-generator .study-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.character-generator .category-toggles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.character-generator .toggle-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 11px;
  color: var(--ink);
  background: rgba(255,255,255,0.32);
  cursor: pointer;
  transition: transform 120ms ease, background 120ms ease, opacity 120ms ease;
}
.character-generator .toggle-chip .toggle-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 3px rgba(113,146,173,0.12);
}
.character-generator .toggle-chip.off { opacity: 0.52; background: transparent; }
.character-generator .toggle-chip.off .toggle-dot { background: transparent; border: 1px solid var(--muted); box-shadow: none; }
.character-generator .current-panel, .character-generator .study-section {
  margin-top: 22px;
  padding: 26px;
}
.character-generator .section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 22px;
  margin-bottom: 18px;
}
.character-generator .section-heading h2 {
  margin-bottom: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  font-weight: 600;
}
.character-generator .hint {
  max-width: 390px;
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  text-align: right;
}
.character-generator .prompt-block {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,0.24);
}
.character-generator .prompt-block-empty {
  grid-column: 1 / -1;
  padding: 26px;
  color: var(--muted);
  text-align: center;
}
.character-generator .prompt-token {
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--soft-line);
  border-radius: 10px;
  background: rgba(255,255,255,0.42);
}
.character-generator .prompt-token.focus {
  grid-column: span 1;
  border-color: rgba(122,71,67,0.30);
  background: var(--rust-soft);
  box-shadow: inset 0 0 0 1px rgba(122,71,67,0.05);
}
.character-generator .prompt-token.focus .token-label::before { content: "★ "; color: var(--rust); }
.character-generator .token-label {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.character-generator .prompt-token.focus .token-label { color: var(--rust); }
.character-generator .token-value {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  line-height: 1.2;
}
.character-generator .editor { margin-top: 14px; }
.character-generator .editor summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 750;
  user-select: none;
}
.character-generator .prompt-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 12px;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.character-generator .prompt-row {
  position: relative;
  min-height: 116px;
  padding: 17px 86px 17px 17px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.14);
}
.character-generator .prompt-row.locked { background: var(--blue-soft); }
.character-generator .prompt-row.focus { box-shadow: inset 4px 0 0 var(--rust); }
.character-generator .prompt-row.disabled { opacity: 0.42; background: transparent; }
.character-generator .prompt-label {
  margin-bottom: 7px;
  color: var(--rust);
  font-size: 0.71rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.character-generator .prompt-value {
  margin-bottom: 5px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.26rem;
  line-height: 1.16;
}
.character-generator .prompt-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.4;
}
.character-generator .row-actions {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 6px;
}
.character-generator .icon-button {
  width: 31px;
  height: 31px;
  padding: 0;
  border: 1px solid var(--soft-line);
  border-radius: 50%;
  color: var(--muted);
  background: rgba(255,255,255,0.48);
  cursor: pointer;
  line-height: 1;
  transition: transform 120ms ease, background 120ms ease;
}
.character-generator .icon-button[aria-pressed="true"] {
  color: var(--paper);
  background: var(--blue);
  border-color: var(--blue);
}
.character-generator .study-section { margin-top: 24px; }
.character-generator .text-button {
  border: 0;
  padding: 0;
  color: var(--rust);
  background: transparent;
  cursor: pointer;
  font-weight: 750;
  transition: transform 120ms ease;
}
.character-generator .study-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.character-generator .study-card {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,0.28);
}
.character-generator .study-card-number {
  margin-bottom: 12px;
  color: var(--blue);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}
.character-generator .study-card dl {
  display: grid;
  grid-template-columns: 124px 1fr;
  gap: 6px 10px;
  margin: 0;
}
.character-generator .study-card dt {
  color: var(--muted);
  font-size: 0.77rem;
  font-weight: 750;
}
.character-generator .study-card dd {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.95rem;
  line-height: 1.24;
}
.character-generator .study-card dd.focus-value { color: var(--rust); font-weight: 700; }
.character-generator footer {
  padding: 24px 4px 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.55;
}
.character-generator .toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 30;
  padding: 10px 14px;
  border-radius: 999px;
  color: var(--paper);
  background: var(--ink);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}
.character-generator .toast.visible { opacity: 1; transform: translateY(0); }

@media (max-width: 900px) {
.character-generator .control-grid { grid-template-columns: 1fr; }
.character-generator .prompt-block { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 780px) {
.character-generator .shell { width: min(100% - 20px, 1180px); padding-top: 34px; }
.character-generator .generator-header { align-items: start; }
.character-generator .hero-mark { display: none; }
.character-generator .button-quiet { margin-left: 0; }
.character-generator .current-panel, .character-generator .study-section { padding: 17px; }
.character-generator .prompt-grid, .character-generator .study-grid, .character-generator .prompt-block { grid-template-columns: 1fr; }
.character-generator .section-heading, .character-generator .mini-panel-heading, .character-generator .category-heading-row { align-items: start; flex-direction: column; }
.character-generator .hint { text-align: left; }
.character-generator .timer-display { text-align: left; }
.character-generator .study-card dl { grid-template-columns: 108px 1fr; }
}

/* Local adaptation of the original v2 visual system; application code unchanged. */
.character-generator { background: none; min-height: 0; font-size: 1rem; line-height: 1.5; --radius: 4px; --panel: #fffaf04f; --shadow: 0 2px 6px #1c1a1710; }
.character-generator .generator-header { display: block; position: relative; padding-right: 244px; padding-bottom: 16px; }
.character-generator .generator-header > div { flex: 1; min-width: 0; }
.character-generator .take-further-note { display: flex; flex-direction: column; gap: 8px; position: absolute; right: 4px; bottom: -32px; z-index: 3; isolation: isolate; width: 220px; max-width: 100%; padding: 20px 16px 16px; margin: 0; color: var(--ink); background: linear-gradient(#ffffff15 0 16px, transparent 16px), var(--blue); box-shadow: 2px 5px 8px #1c1a1730, 0 1px 2px #1c1a1726; transform: rotate(3deg); text-decoration: none; }
.character-generator .take-further-note::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url('/assets/paper-186.jpg') center / cover; mix-blend-mode: multiply; opacity: .18; }
.character-generator .take-further-note > span { font: 1.3rem/1.3 'Permanent Marker', cursive; }
.character-generator .take-further-note > small { font: 1rem/1.4 Georgia, serif; }
.character-generator .take-further-note:hover > span { text-decoration: underline; text-underline-offset: 5px; }
.character-generator .take-further-note:focus-visible { outline: 3px solid var(--rust); outline-offset: 6px; }
.character-generator .generator-header h1 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.12; margin-bottom: 0; letter-spacing: -.035em; }
.character-generator h2 { letter-spacing: -.025em; line-height: 1.25; }
.character-generator .eyebrow, .character-generator .section-kicker { font: 1rem/1.5 'Permanent Marker', cursive; letter-spacing: .025em; }
.character-generator .hero-mark { font-size: 3rem; }
.character-generator .tool-help { margin: 16px 0 0; color: var(--muted); }
.character-generator .tool-help summary { max-width: calc(100% - 244px); }
.character-generator .tool-help summary { cursor: pointer; font-size: .9rem; text-decoration: underline; text-underline-offset: 4px; }
.character-generator .tool-help p { max-width: 75ch; font-size: 1rem; margin: 14px 0; }
.character-generator .control-deck { padding-top: 20px; }
.character-generator .study-controls { margin-top: 22px; }
.character-generator .current-panel .primary-toolbar { margin-bottom: 18px; }
.character-generator .button { font-size: .95rem; line-height: 1.5; min-height: 44px; letter-spacing: normal; }
.character-generator .button:not(.button-primary) { color: var(--ink); }
.character-generator .button-primary { color: var(--paper); }
.character-generator .button:hover:not(:disabled) { color: var(--paper); background: var(--rust); }
.character-generator .text-button { font-size: .9rem; min-height: 44px; }
.character-generator .toggle-chip { min-height: 44px; font-size: .9rem; }
.character-generator .number-field { font-size: .875rem; }
.character-generator .number-field input { min-height: 44px; font-size: 1rem; }
.character-generator .microcopy, .character-generator .prompt-note, .character-generator .study-card dt { font-size: .875rem; }
.character-generator .prompt-label, .character-generator .token-label, .character-generator .study-card-number { font-size: .8rem; white-space: normal; letter-spacing: .04em; }
.character-generator .editor summary { font-size: .9rem; padding: 10px 0; }
.character-generator .prompt-row { padding-right: 116px; }
.character-generator .icon-button { width: 44px; height: 44px; font-size: 1.2rem; }
.character-generator .hint { font-size: .9rem; }
.character-generator .section-heading h2 { font-size: clamp(1.4rem, 2.5vw, 1.9rem); }
.character-generator .study-card dl { grid-template-columns: minmax(0, 124px) minmax(0, 1fr); }
.character-generator .study-card dd { overflow-wrap: anywhere; }
.character-generator [hidden] { display: none !important; }
.character-generator button:focus-visible, .character-generator summary:focus-visible { outline: 3px solid var(--rust); outline-offset: 3px; }
.character-generator .toggle-chip.off { opacity: 1; color: var(--muted); background: #1c1a1708; border-style: dashed; }
@media (max-width: 780px) {
 .character-generator .generator-header { padding-right: 0; }
 .character-generator .take-further-note { position: relative; right: auto; bottom: auto; width: 220px; margin: 18px 4px -36px auto; transform: translateY(20px) rotate(3deg); }
 .character-generator .tool-help { margin-top: 48px; }
 .character-generator .tool-help summary { max-width: 100%; }
 .character-generator .primary-toolbar .button-quiet { margin-left: 0; }
 .character-generator .section-heading, .character-generator .category-heading-row { gap: 8px; }
 .character-generator .prompt-row { padding: 16px 16px 68px; }
 .character-generator .row-actions { top: auto; bottom: 12px; }
 .character-generator .mini-panel { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
 .character-generator * { scroll-behavior: auto !important; transition: none !important; }
}