:root { color-scheme: dark; --bg: #0d1014; --panel: #181c21; --panel-2: #20252b; --line: #3b4148; --gold: #c39d5c; --text: #e6e0d4; --muted: #8d9295; --red: #a44e4e; --green: #51785e; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 320px; min-height: 100vh; color: var(--text); background: radial-gradient(circle at 75% 0, #25231e, var(--bg) 38%); }
button, input, select { font: inherit; }
button, a { color: inherit; }
.topbar { position: sticky; top: 0; z-index: 5; height: 64px; display: grid; grid-template-columns: 280px 1fr auto; align-items: center; padding: 0 24px; border-bottom: 1px solid #4c4438; background: #111419f2; backdrop-filter: blur(15px); }
.brand { display: flex; align-items: center; gap: 10px; }
.brand > span { display: grid; place-items: center; width: 34px; aspect-ratio: 1; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold); font: .7rem Georgia, serif; }
.brand small { color: var(--muted); }
.topbar nav a { color: #cbb98e; text-decoration: none; }
.top-links { display: flex; align-items: center; gap: 14px; }
.account-label { display: inline-flex; align-items: center; gap: 8px; color: #d6c49a; font-size: .8rem; }
.token { --token-hue: 38; display: inline-grid; place-items: center; width: 1.7rem; aspect-ratio: 1; border-radius: 50%; border: 2px solid #e3c37a; background:
  radial-gradient(circle at 30% 24%, #fff6d8 0 14%, transparent 28%),
  radial-gradient(circle at 32% 28%, #f3e6c8, hsl(var(--token-hue) 38% 24%) 62%, #120e0a);
  box-shadow: inset 0 0 0 3px #2a2218, inset 0 -4px 8px #0006, 0 4px 10px #0008; color: #f3e6c8; font: 700 .58rem/1 Georgia, serif; overflow: hidden; }
.token span { grid-area: 1 / 1; }
.token img { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: cover; }
.token.has-image span { display: none; }
.library-list { display: grid; gap: 4px; margin-bottom: 10px; }
.library-item { width: 100%; padding: 8px 10px; border: 1px solid transparent; background: transparent; cursor: pointer; text-align: left; font-size: .8rem; }
.library-item.selected, .library-item:hover { border-color: #4a4438; background: #202026; }
.share-people { display: grid; gap: 6px; color: var(--muted); font-size: .78rem; }
.owner-tag { color: #9a8b6d; font-size: .68rem; }
.history-controls { display: flex; gap: 8px; }
.history-controls button, .inline-form button, dialog button { padding: 8px 12px; border: 1px solid var(--line); background: #20242a; cursor: pointer; }
button:disabled { opacity: .35; cursor: not-allowed; }
.workspace { display: grid; grid-template-columns: 280px minmax(0, 1fr); min-height: calc(100vh - 64px); }
.sidebar { position: sticky; top: 64px; height: calc(100vh - 64px); padding: 26px 20px; overflow: auto; border-right: 1px solid #34383e; background: #12151a; }
.eyebrow { margin: 0 0 8px; color: var(--gold); font-size: .66rem; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
.sidebar h1 { margin: 0; font: 400 1.65rem Georgia, serif; }
.project-meta { margin: 6px 0 18px; color: var(--muted); font-size: .76rem; }
.storefront-form { display: grid; gap: 8px; margin-bottom: 28px; }
.storefront-form label { display: grid; gap: 4px; color: var(--muted); font-size: .74rem; }
.storefront-form input, .storefront-form textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--line); color: var(--text); background: #101318; }
.storefront-form a { color: #cbb98e; }
.terms-note { margin: 0; color: #8d9295; font-size: .72rem; }
.danger { padding: 10px 14px; border: 1px solid #8a4540; background: #3d1f1e; color: #efc5c1; cursor: pointer; }
.sidebar .danger { width: 100%; }
.paragraph-list { display: grid; gap: 5px; margin-bottom: 14px; }
.paragraph-list-item { display: grid; gap: 3px; width: 100%; padding: 10px 12px; border: 1px solid transparent; background: transparent; cursor: pointer; text-align: left; }
.paragraph-list-item:hover, .paragraph-list-item.selected { border-color: #4a4438; background: #202026; }
.paragraph-list-item.selected { border-left-color: var(--gold); }
.paragraph-list-item small { color: #777c81; }
.primary { padding: 10px 14px; border: 1px solid #a98a51; background: #725a31; cursor: pointer; }
.sidebar .primary { width: 100%; }
main { min-width: 0; padding: 26px clamp(18px, 3vw, 44px) 60px; }
.status-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.status-row article { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border: 1px solid #353a40; background: #15191e; }
.status-row span { color: var(--muted); font-size: .75rem; }
.status-row strong { color: #e5c887; }
.panel { border: 1px solid #363b41; background: linear-gradient(145deg, #1b1f24, #14171b); box-shadow: 0 14px 35px #0005; }
.graph-panel { padding: 22px; }
.content-panel { margin-top: 16px; padding: 22px 22px 28px; }
.section-heading { display: flex; justify-content: space-between; gap: 20px; }
.panel h2 { margin: 0 0 18px; font: 400 1.45rem Georgia, serif; }
.legend { color: var(--muted); font-size: .7rem; }
.legend i { display: inline-block; width: 8px; height: 8px; margin-left: 10px; border-radius: 50%; background: var(--gold); }
.legend i:nth-of-type(2) { background: var(--green); }
.legend i:nth-of-type(3) { background: var(--red); }
.story-graph { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; min-height: 180px; padding: 22px; border: 1px dashed #383d43; background-image: linear-gradient(#22262b55 1px, transparent 1px), linear-gradient(90deg, #22262b55 1px, transparent 1px); background-size: 24px 24px; }
.node-card { min-height: 135px; padding: 14px; border: 1px solid #454b51; border-top: 3px solid #666b70; background: #191d22; cursor: pointer; text-align: left; }
.node-card.start { border-top-color: var(--gold); }
.node-card.ending { border-top-color: var(--green); }
.node-card.warning { box-shadow: inset 0 0 0 1px var(--red); }
.node-card.selected { background: #292722; outline: 1px solid #9d804d; }
.node-card > small { display: block; color: #757b80; }
.node-card > strong { display: block; margin: 7px 0 13px; font: 400 1.05rem Georgia, serif; }
.node-card div { display: grid; gap: 4px; color: #aeb1b1; font-size: .68rem; }
.node-card b { color: #8d8067; font-weight: 500; }
.no-links { color: #706d68; font-style: italic; }
.content-toolbar { display: flex; flex-wrap: wrap; gap: 7px; }
.content-toolbar button, .block-actions button, .text-toolbar button { padding: 8px 10px; border: 1px solid #4a5056; background: #20252b; cursor: pointer; font-size: .72rem; }
.content-toolbar button:hover, .block-actions button:hover, .text-toolbar button:hover { border-color: var(--gold); }
.content-blocks { display: grid; gap: 18px; }
.content-empty { padding: 28px; border: 1px dashed #444950; color: var(--muted); text-align: center; }
.content-block { padding: 15px; border: 1px solid #383e44; background: #111419; }
.content-block.text-sheet { padding: 12px 12px 16px; border-color: #4a4032; background: #16130f; }
.block-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.block-header > span { color: #a99c84; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.text-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.text-toolbar .primary { padding: 8px 12px; font-size: .72rem; }
.text-status, .text-count { color: #8d8680; font: .68rem/1 system-ui, sans-serif; }
.text-status.dirty { color: #e3cb8f; }
.text-editor-shell { border: 6px solid #4a4032; background: radial-gradient(circle at 55% 30%, #f1e7d1, #e8ddc5 65%, #c9ba98 120%); box-shadow: inset 16px 0 24px #574b3640, 0 10px 28px #0006; }
.text-editor { min-height: 240px; padding: clamp(22px, 4vw, 42px); outline: 0; color: #24201c; font: 1.12rem/1.8 Georgia, "Times New Roman", serif; white-space: pre-wrap; word-break: break-word; }
.text-editor:focus { box-shadow: inset 0 0 0 2px #a7834580; }
.text-editor.is-empty::before { content: attr(data-placeholder); color: #8a7d64; pointer-events: none; }
.content-chip { display: inline-block; margin: 0 2px; padding: 1px 7px; border: 1px solid #7e6540; border-radius: 3px; color: #6a2e2d; background: #e7d3a8; font: 700 .75rem/1.6 system-ui, sans-serif; vertical-align: baseline; cursor: default; }
.content-chip.reference { border-color: #66527c; color: #574272; background: #d9cce6; }
.image-editor { position: relative; max-width: 720px; margin: auto; border: 5px solid #40382e; background: #090b0e; cursor: crosshair; }
.image-editor img { display: block; width: 100%; height: auto; }
.hotspot-preview { position: absolute; border: 2px solid #d5b96d; border-radius: 4px; background: #d5b96d22; pointer-events: none; }
.hotspot-preview.ellipse { border-radius: 50%; }
.hotspot-controls { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr) auto; gap: 8px; margin-top: 10px; align-items: end; }
.hotspot-controls button { padding: 10px; border: 1px solid #a98a51; background: #725a31; cursor: pointer; }
textarea { width: 100%; resize: vertical; padding: 10px 11px; border: 1px solid #444a50; outline: 0; color: #eee; background: #0e1115; font: inherit; }
textarea:focus { border-color: var(--gold); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.check-label { grid-template-columns: auto 1fr; align-items: center; justify-content: start; }
.check-label input { width: auto; }
.lower-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.lower-grid .panel { padding: 22px; }
.issues-panel { grid-column: 1 / -1; }
.entities-panel { margin-top: 16px; padding: 22px; }
.entity-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sheet-form { display: grid; gap: 12px; margin-top: 18px; padding-top: 18px; border-top: 1px solid #343940; }
.sheet-form h3 { margin: 0; color: #d5bf8f; font: 400 1.05rem Georgia, serif; }
.sheet-sections, .sheet-stats { display: grid; gap: 8px; }
.sheet-section-row { display: grid; grid-template-columns: auto 90px 1fr auto auto; gap: 8px; align-items: center; }
.sheet-section-row span { color: var(--muted); font-size: .68rem; text-transform: uppercase; }
.sheet-section-row button { padding: 8px 10px; border: 1px solid #4a5056; background: #20252b; cursor: pointer; }
.sheet-form > .primary { justify-self: start; }
.entity-grid > article { padding: 16px; border: 1px solid #383e44; background: #111419; }
.entity-grid h3 { margin: 0 0 12px; color: #d5bf8f; font: 400 1.05rem Georgia, serif; }
.entity-list { display: grid; gap: 6px; min-height: 42px; margin-bottom: 14px; }
.entity-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 9px; border-left: 2px solid #79633e; background: #1b1f24; font-size: .72rem; }
.entity-row small { color: var(--muted); }
.compact-form { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid #343940; }
.compact-form .primary { width: 100%; }
.number-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
#paper-form .number-grid { grid-template-columns: repeat(4, 1fr); }
label { display: grid; gap: 6px; color: #aaa397; font-size: .72rem; }
input, select { width: 100%; padding: 10px 11px; border: 1px solid #444a50; outline: 0; color: #eee; background: #0e1115; }
input:focus, select:focus { border-color: var(--gold); }
.inline-form { display: grid; grid-template-columns: 1fr auto; gap: 7px; }
.stack-form { display: grid; gap: 12px; }
.selected-details dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; font-size: .78rem; }
.selected-details dt { color: var(--muted); }
.selected-details dd { margin: 0; text-align: right; }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.tag-row span { padding: 5px 8px; border: 1px solid #655943; color: #d9c79f; font-size: .68rem; }
.tag-row em { color: var(--muted); font-size: .75rem; }
.issues { display: grid; gap: 8px; }
.issue { display: grid; grid-template-columns: 70px 1fr; gap: 12px; padding: 11px; border-left: 3px solid #9a7b43; background: #111419; }
.issue.error { border-color: var(--red); }
.issue > span { color: #bf9d62; font-size: .68rem; text-transform: uppercase; }
.issue strong { display: block; font-size: .78rem; }
.issue small { color: var(--muted); }
.all-good { display: grid; gap: 4px; padding: 14px; border-left: 3px solid var(--green); background: #111713; }
.all-good span { color: var(--muted); font-size: .75rem; }
dialog { width: min(430px, calc(100% - 30px)); padding: 26px; border: 1px solid #665c4c; color: var(--text); background: #191c21; }
dialog.wide-dialog { width: min(760px, calc(100% - 24px)); max-height: calc(100vh - 32px); overflow: auto; }
dialog::backdrop { background: #050608c9; backdrop-filter: blur(3px); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.rule-heading { margin: 4px 0 8px; color: #cbb98e; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.rule-host, .rule-details { padding: 10px; border: 1px solid #3a4046; background: #12161b; }
.rule-details { display: grid; gap: 12px; }
.rule-details summary { cursor: pointer; color: #d5bf8f; font-size: .78rem; }
.rule-condition, .rule-effects { display: grid; gap: 8px; }
.rule-row { display: grid; grid-template-columns: minmax(140px, 180px) minmax(0, 1fr) auto; gap: 8px; align-items: start; }
.rule-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.rule-children { display: grid; gap: 8px; margin: 0 0 0 16px; padding-left: 10px; border-left: 2px solid #5a5040; }
.rule-add, .rule-remove { padding: 8px 10px; border: 1px solid #4a5056; background: #20252b; cursor: pointer; font-size: .72rem; white-space: nowrap; }
.rule-add { justify-self: start; }
.rule-remove:hover { border-color: var(--red); }
.flag-input { display: block; }
.minigame-summary { display: grid; gap: 6px; color: #ddd6c9; font-size: .82rem; }
.rule-line { margin: 0; color: #c8c2b6; font-size: .74rem; }
.rule-line.muted, .inspector-rule-row small { color: var(--muted); }
.inspector-rules { margin-top: 18px; padding-top: 14px; border-top: 1px solid #343940; }
.inspector-rules h3 { margin: 0 0 8px; color: #d5bf8f; font: 400 .95rem Georgia, serif; }
.inspector-rules-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.inspector-rules-heading button, .inspector-rule-row button, .block-header button { padding: 6px 9px; border: 1px solid #4a5056; background: #20252b; cursor: pointer; font-size: .7rem; }
.inspector-rule-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; margin-top: 8px; padding: 8px; border-left: 2px solid #79633e; background: #1b1f24; }
.inspector-rule-row strong { font-size: .78rem; }
.inspector-rule-row small { grid-column: 1; }
.toast { position: fixed; right: 22px; bottom: 22px; z-index: 9; max-width: 390px; padding: 13px 17px; border-left: 4px solid var(--green); background: #18231b; box-shadow: 0 12px 30px #000a; font-size: .78rem; }
.toast.error { border-color: var(--red); background: #281819; }

@media (max-width: 900px) {
  .workspace { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; border-right: 0; border-bottom: 1px solid #34383e; }
  .paragraph-list { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .topbar { grid-template-columns: 1fr auto; }
  .topbar nav { display: none; }
}
@media (max-width: 600px) {
  .topbar { height: auto; padding: 12px; }
  .brand small { display: none; }
  .workspace { min-height: auto; }
  .status-row { grid-template-columns: repeat(2, 1fr); }
  .lower-grid { grid-template-columns: 1fr; }
  .issues-panel { grid-column: auto; }
  .legend { display: none; }
  .section-heading { display: block; }
  .content-toolbar { margin-bottom: 14px; }
  .form-grid, .hotspot-controls, .rule-row, .sheet-section-row { grid-template-columns: 1fr; }
  .entity-grid { grid-template-columns: 1fr; }
  .rule-children { margin-left: 8px; }
}

@media (max-width: 1050px) and (min-width: 601px) {
  .entity-grid { grid-template-columns: 1fr 1fr; }
  .entity-grid > article:last-child { grid-column: 1 / -1; }
}