/* Graphite: a clean dark interface with restrained accents. No external fonts or assets. */
:root,[data-palette="moss"] {
 color-scheme:dark; --bg:#101116; --panel:#191b23; --panel-raised:#242732;
 --border:#353947; --muted:#b0b6c5; --text:#f0f2f7;
 --green:#cad3dd; --gold:#91b7c3; --accent:#cad3dd; --button-ink:#151529;
 --shadow:0 12px 30px #00000022; --sidebar:224px;
}
[data-palette="clay"] { --bg:#1c1516; --panel:#2a2020; --panel-raised:#392a28; --border:#58423a; --muted:#c6b3a7; --text:#f4e5d7; --green:#e7b58d; --gold:#d8b77b; --accent:#e7b58d; --button-ink:#281c15; }
[data-palette="slate"] { --bg:#111923; --panel:#1c2835; --panel-raised:#293849; --border:#3d5063; --muted:#b2c2d3; --text:#e5edf3; --green:#aacbe4; --gold:#d0b78c; --accent:#d0b78c; --button-ink:#152536; }
body { background:radial-gradient(ellipse at 85% 0,#365a5124,transparent 55%),var(--bg); }
::selection { background:var(--green); color:var(--button-ink); }
.sidebar { background:linear-gradient(160deg,var(--panel),var(--bg)); border-color:var(--border); padding-top:36px; }
.sidebar::before { height:3px; background:linear-gradient(90deg,var(--gold),var(--green)); }
.brand > span:last-child { color:var(--text); letter-spacing:-.5px; }
.brandmark { background:var(--bg); border-color:var(--gold); outline-color:var(--border); color:var(--gold); }
.brand-sub,.nav-label { color:var(--muted); }
.nav-label { letter-spacing:2px; }
.nav-link { color:var(--muted); border-radius:5px; }
.nav-link:hover,.nav-link.active { background:var(--panel-raised); color:var(--text); border-color:var(--border); }
.nav-link.active { box-shadow:inset 3px 0 var(--gold); }
.sidebar-footer,.sidebar-foot { border-color:var(--border); color:var(--muted); }
.topbar { background:var(--bg); border-color:var(--border); }
.topbar a,.topbar button,.breadcrumbs { color:var(--muted); }
h1,h2,h3,h4 { color:var(--text); }
h1 { letter-spacing:-1.4px; }
.page-heading { padding-bottom:24px; border-bottom:1px solid var(--border); margin-bottom:30px; }
.page-heading .eyebrow { color:var(--gold); letter-spacing:2.6px; }
.card { border-radius:8px; box-shadow:var(--shadow); }
.card-head { background:linear-gradient(110deg,var(--panel-raised),var(--panel)); border-color:var(--border); }
.card-head h2 { font-size:22px; }
.card-head svg { color:var(--gold); }
.button,.editor-preview-button { background:var(--green); color:var(--button-ink); border-color:var(--green); border-radius:5px; box-shadow:0 3px 0 #00000020; }
.button:hover { background:var(--green); filter:brightness(1.08); box-shadow:0 4px 14px #00000030; }
.button.secondary,.editor-preview-button.secondary { color:var(--text); background:var(--panel-raised); border-color:var(--border); box-shadow:none; }
.button.secondary:hover { background:var(--panel-raised); border-color:var(--green); }
label { color:var(--text); }
input,textarea,select,.editor-field > input,.editor-field > textarea,.editor-field > select { background:var(--bg); color:var(--text); border-color:var(--border); box-shadow:none; }
input::placeholder,textarea::placeholder { color:var(--muted); opacity:.8; }
input:hover,textarea:hover,select:hover { border-color:var(--green); }
input:focus,textarea:focus,select:focus { border-color:var(--green); }
.text-link,.back-link { color:var(--green); }
.danger,.form-error { color:#f4a796 !important; }
.banner { min-height:430px; border-color:#b69a6466; border-radius:8px; box-shadow:0 18px 50px #00000030; }
.banner::before { background:linear-gradient(90deg,#09171ff2 0%,#102b30c9 45%,#10272d20 100%),linear-gradient(0deg,#09171f9c,transparent 70%); }
.banner::after { inset:12px; border-color:#d7ac784a; border-radius:2px; }
.banner h2 { color:#f8ecd7; font-size:clamp(40px,4.8vw,68px); }
.banner .eyebrow { color:#e0bc8c; }
.banner .button { background:#d7ac78; border-color:#d7ac78; color:#211b15; }
.banner .button.secondary { color:#f8ecd7; background:#10232bb3; border-color:#c1b28c66; }
.hero-stamp,.status-label { background:#0c222be6; border-color:#b9a37866; }
.banner-hero-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 60%; }
.banner::before { z-index:1; pointer-events:none; }
.banner::after { z-index:2; }
.banner-content,.banner .status-label,.banner .hero-stamp { z-index:2; }
.stat { background:var(--panel); border-color:var(--border); border-top-color:var(--gold); border-radius:6px; }
.stat-value { color:var(--text); font-size:34px; }
.stat-label,.stat-note,.stat-value small,.fact-label { color:var(--muted); }
.stat-label svg { color:var(--gold); }
.quick-link { background:var(--panel); border-color:var(--border); border-radius:6px; }
.quick-link:hover { background:var(--panel-raised); border-color:var(--gold); }
.quick-link .link-arrow { color:var(--gold); }
.notice,.announcement,.maintenance-notice { background:var(--panel-raised); color:var(--text); border-color:var(--border); border-left:3px solid var(--gold); }
.notice.muted { background:var(--panel); color:var(--muted); }
.announcement p { color:var(--text); }
.tabs,.browse-toolbar,.results-summary,.moderation-actions,.past-events,.content-editor-row,.status-facts,.link-code,.editor-item { background:var(--panel-raised); border-color:var(--border); color:var(--text); }
.tab { color:var(--muted); }
.tab:hover,.tab.active { background:var(--panel); color:var(--green); border-color:var(--border); box-shadow:none; }
.badge,.badge.gold,.mod,.collection-badge,.step-num,.avatar,.thread-row > .avatar { background:var(--panel-raised); border-color:var(--border); color:var(--green); }
.badge.gold { color:var(--gold); }
.empty,.map-frame .empty { background:radial-gradient(ellipse at 50% 0,var(--panel-raised),transparent 80%); }
.empty > .empty-icon { background:var(--panel-raised); border-color:var(--border); color:var(--gold); }
th { background:var(--panel-raised); color:var(--muted); }
tbody tr:hover,.thread-row:hover { background:var(--panel-raised); }
.table-wrap { scrollbar-color:var(--border) var(--bg); }
.reply,.reply:nth-of-type(even),.review-card,.screenshot-card,.mod-list-entry { background:var(--panel); border-color:var(--border); }
.reply-form,.inbox-item.unread,.history-chart { background:var(--panel-raised); }
.post-body,.rules-content,.mod-description { color:var(--text); }
.mod-identifier,.mod-meta,.thread-meta,.info-note { color:var(--muted); }
.supporter { background:linear-gradient(135deg,var(--panel-raised),var(--panel)); border-color:var(--gold); }
.supporter::before { background:var(--border); }
.supporter .avatar { background:var(--panel); color:var(--gold); border-color:var(--gold); }
.faq-item[open],details.help-card[open] > summary { background:var(--panel-raised); }
dialog { color:var(--text); background:var(--panel); border-color:var(--border); }
dialog::backdrop { background:#03090dcc; }
.map-frame,.map-frame:fullscreen { background:var(--bg); border-color:var(--border); }
.map-controls button,.map-controls select,.map-toggle,.map-zoom button,.map-search > input,.map-search-results { background:var(--panel); color:var(--text); border-color:var(--border); }
.account-role-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; min-width:160px; }
.account-role-actions label { margin:0; }
.account-role-actions select { max-width:160px; padding:9px; font-size:14px; }
.admin-editor-link { display:inline-flex; margin:0 0 20px; }
/* The editor is a workbench, with a quiet preview and explicit publication controls. */
.editor-toolbar { border-top:2px solid var(--gold); }
.editor-shortcut { width:100%; text-align:right; font-size:11px; color:var(--muted); }
.editor-field-count { display:block; margin-top:6px; text-align:right; font:11px ui-monospace,monospace; color:var(--muted); font-weight:400; }
.editor-section-tabs { background:var(--bg); }
.editor-section-tabs .tab.active { background:var(--panel-raised); border-color:var(--border); }
.editor-form .editor-field { margin:22px 0; }
.editor-item legend { color:var(--gold); padding:0 7px; }
.editor-palette-option { background:var(--panel); color:var(--text); border-radius:6px; padding:18px; }
.editor-palette-sample { display:flex; flex-shrink:0; gap:3px; }
.editor-palette-sample i { width:17px; height:36px; border:1px solid var(--border); background:var(--bg); border-radius:3px; }
.editor-palette-sample i:nth-child(2) { background:var(--green); }
.editor-palette-sample i:nth-child(3) { background:var(--gold); }
.editor-preview-content,.editor-preview-paper { background:var(--bg); color:var(--text); }
.editor-preview-paper { border-color:var(--border); }
.editor-preview-stories article,.editor-preview-callout,.editor-preview-join { background:var(--panel); border-color:var(--border); }
.editor-preview-hero { background:#112932 url('/landscape.jpg') center 60% / cover; }
.editor-preview-hero::after { background:linear-gradient(90deg,#09171ff2,#102b3090); }
.editor-preview-hero h3 { color:#f8ecd7; }
.editor-preview-hero p { color:#ede9d8; }
#website-editor .editor-error { background:#382923; color:#f4b7a5; border-color:#8f6250; }
#website-editor .editor-stale { background:#342c22; color:#e8c490; border-color:#846b42; }
.editor-review { margin-top:24px; }
.editor-review summary { cursor:pointer; padding:20px 23px; display:flex; flex-wrap:wrap; gap:12px; align-items:center; color:var(--gold); font-size:14px; font-weight:650; }
.editor-review[open] summary { border-bottom:1px solid var(--border); }
.editor-difference { padding:20px 0; border-bottom:1px solid var(--border); }
.editor-difference:last-child { border:0; }
.editor-difference h3 { font-size:20px; margin-bottom:14px; }
.editor-difference-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; }
.editor-difference-grid > div { padding:16px; background:var(--bg); border:1px solid var(--border); border-radius:5px; min-width:0; }
.editor-difference-grid > div:last-child { border-left:2px solid var(--green); }
.editor-difference pre { font:13px/1.7 ui-sans-serif,system-ui,sans-serif; white-space:pre-wrap; overflow-wrap:anywhere; margin:0; max-height:260px; overflow:auto; color:var(--text); }
.editor-preview-device [aria-pressed="true"] { color:var(--green); }
@media(min-width:1100px) { .editor-section-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; } .editor-section-tabs .tab { text-align:left; min-height:44px; } }
@media(max-width:700px) { .editor-difference-grid { grid-template-columns:minmax(0,1fr); } .editor-shortcut { text-align:left; } .banner { min-height:360px; } .page-heading { padding-bottom:18px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; } }
/* Shared reading surfaces and subtle transitions. */
body { background-image:radial-gradient(ellipse at 85% 0,#365a5124,transparent 55%),linear-gradient(#839e9703 1px,transparent 1px),linear-gradient(90deg,#839e9703 1px,transparent 1px); background-size:auto,64px 64px,64px 64px; }
.join-ribbon,.guide-summary,.rules-summary,.help-card { background:linear-gradient(115deg,var(--panel-raised),var(--panel)); border-color:var(--border); }
.join-ribbon { border-left:3px solid var(--gold); }
.empty h3,.footer > span,.footer-links a,.footer-credit,.guide-checklist,details.help-card > summary { color:var(--muted); }
.footer { color:var(--muted); }
.rule-number { background:var(--panel-raised); border-color:var(--border); }
.icon-button:hover { background:var(--panel-raised); }
@media(prefers-reduced-motion:no-preference) {
 .nav-link { transition:background .2s,color .2s,border-color .2s; }
 .quick-link,.screenshot-card,.story-card { transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease; }
 .quick-link:hover,.story-card:hover { transform:translateY(-3px); box-shadow:0 12px 28px #00000030; }
 .screenshot-card img { transition:transform .45s ease; }
 .screenshot-card:hover img { transform:scale(1.025); }
 #content.page-enter .stat { animation:surface-arrive .32s ease-out both; }
 #content.page-enter .stat:nth-child(2) { animation-delay:35ms; }
 #content.page-enter .stat:nth-child(3) { animation-delay:70ms; }
 #content.page-enter .stat:nth-child(4) { animation-delay:105ms; }
 #content.page-enter .banner-content { animation:surface-arrive .32s ease-out both; }
 .editor-state-dot.changed { animation:draft-beacon .5s ease-out; }
 @keyframes surface-arrive { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
 @keyframes draft-beacon { 50% { box-shadow:0 0 0 5px #d7ac7820; } }
}
/* A redesigned shell: compact navigation, a clear masthead and generous reading space. */
:root { --serif:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
body { background:radial-gradient(ellipse at 90% 0,#94a2b110,transparent 45%),var(--bg); }
.sidebar { padding:28px 14px 20px; background:var(--bg); }
.sidebar::before { display:none; }
.brand { gap:12px; }
.brand > span:last-child { font-size:20px; letter-spacing:-.6px; }
.brandmark { border:0; outline:0; border-radius:12px; background:var(--panel-raised); color:var(--green); width:40px; height:40px; }
.brandmark svg { width:27px; height:27px; }
.brand-sub { letter-spacing:1px; font-size:9px; }
.nav-link { border-radius:8px; font-size:12px; padding:10px 12px; }
.nav-link.active { box-shadow:none; background:var(--panel-raised); color:var(--green); }
.nav-label { margin-top:25px; font-size:9px; letter-spacing:1.2px; }
.sidebar-bottom { border-color:var(--border); }
.mini-icon { background:var(--panel-raised); color:var(--green); border-color:var(--border); }
.breadcrumb strong,.crumb-separator { color:var(--muted); }
.topbar { min-height:72px; }
.account { border-color:var(--border); border-radius:8px; }
.workspace main { padding-top:32px; }
h1 { font-size:clamp(28px,3vw,40px); font-weight:700; letter-spacing:-1.4px; }
h2 { font-weight:650; letter-spacing:-.7px; }
h3 { font-weight:650; letter-spacing:-.3px; }
.page-heading { border:0; padding:0; margin-bottom:28px; }
.page-heading p { font-size:14px; line-height:1.75; }
.card,.stat,.quick-link,.story-card,.join-ribbon,.help-card,.mod-list-entry,.rules-summary { border-radius:12px; }
.card { box-shadow:none; }
.card-head { background:var(--panel); padding:20px 24px; }
.card-head h2 { font-size:18px; }
.card-head svg { color:var(--green); }
.banner { min-height:420px; border-radius:18px; border-color:var(--border); box-shadow:none; padding:44px; }
.banner::before { background:linear-gradient(90deg,#101116 0%,#101116eb 35%,#10111675 65%,#10111610 100%); }
.banner::after { display:none; }
.banner h2 { color:#f5f6fa; font-weight:750; font-size:clamp(38px,4.4vw,62px); letter-spacing:-2px; }
.banner .eyebrow { color:#d2dbe5; letter-spacing:1.4px; }
.banner p { color:#d0d4df; max-width:430px; }
.banner .button { background:var(--green); color:var(--button-ink); border-color:var(--green); border-radius:9px; }
.banner .button.secondary { background:#191b23c9; border-color:#626574; color:#f0f2f7; }
.hero-stamp { display:none; }
.status-label { background:#191b23e8; border-color:#626574; border-radius:8px; }
.stat { border-top:1px solid var(--border); padding:20px 22px; }
.stat-value { font-size:30px; font-weight:650; letter-spacing:-1px; }
.button { border-radius:8px; }
.section-heading::after { display:none; }
.section-heading h2 { font-size:24px; }
.eyebrow { letter-spacing:1.5px; }
.story-copy h2 { font-size:clamp(26px,2.6vw,34px); }
.story-card h3 { font-size:19px; }
.page-intro,.content-intro { background:var(--panel); border-color:var(--border); border-left-color:var(--green); }
.rule-copy h2,.rule-copy h3 { color:var(--text); }
.editor-preview-hero::after { background:linear-gradient(90deg,#101116f2,#10111680); }
.editor-preview-hero .editor-preview-button { background:var(--green); color:var(--button-ink); border-color:var(--green); }
.editor-preview-hero .editor-preview-button.secondary { background:var(--panel-raised); border-color:var(--border); color:var(--text); }
@media(min-width:1100px) { .editor-layout { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
@media(max-width:760px) {
 :root,[data-palette="moss"] { --sidebar:0px; }
 .workspace { margin-left:0; }
 .sidebar { padding:28px 18px; }
 .banner { padding:30px 24px; min-height:380px; }
 .banner::before { background:linear-gradient(90deg,#101116ee,#10111699),linear-gradient(0deg,#101116,transparent); }
 .banner h2 { letter-spacing:-1.2px; }
 .editor-shortcut { display:none; }
}
@media(max-width:420px) { .banner { padding:26px 20px; } .stat { padding:17px; } }
.discord-callout { display:flex; align-items:center; gap:18px; padding:20px 24px; margin:0 0 22px; background:var(--panel); border:1px solid var(--border); border-radius:12px; }
.discord-callout > svg { width:30px; height:30px; color:var(--green); flex-shrink:0; }
.discord-callout > div { flex:1; min-width:0; }
.discord-callout h2 { font-size:19px; margin:0; }
.discord-callout p { margin:5px 0 0; font-size:13px; }
.connection-results { display:grid; gap:12px; margin-top:20px; }
.connection-result { padding:16px 18px; background:var(--bg); border:1px solid var(--border); border-radius:8px; }
.connection-result strong { color:var(--text); }
.connection-result p { margin:6px 0 0; font-size:13px; }
@media(max-width:700px) { .discord-callout { flex-wrap:wrap; gap:12px; padding:18px; } .discord-callout > div { flex-basis:calc(100% - 48px); } .discord-callout > a { width:100%; } }