:root{color-scheme:dark;font-family:system-ui,-apple-system,sans-serif;color:#eeeae3;background:#11161e;--accent:#c7b28b;--glow:#8aa8bc;--zone-bg:#151b24}
*{box-sizing:border-box}body{margin:0;line-height:1.55}a{color:var(--accent);text-underline-offset:.25em}button,input,select{font:inherit}button,a,input,select,summary{outline-offset:4px}button{cursor:pointer}code,pre{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}code{font-size:.86em}[hidden]{display:none!important}
.app-shell{max-width:1280px;margin:auto;padding:0 32px 180px}.app-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:23px 0;border-bottom:1px solid #ffffff17}.brand{font-family:Georgia,serif;letter-spacing:.04em;font-size:24px;color:#eeeae3;text-decoration:none}.brand span{color:var(--accent);margin-right:12px}.app-caption{color:#a9b4bf;font-size:12px;text-transform:uppercase;letter-spacing:.16em}.session-controls{display:flex;align-items:center;gap:15px}.small-button{border:1px solid #ffffff25;background:transparent;color:#d5dce2;border-radius:6px;padding:7px 12px;font-size:12px}.display-choices{display:flex;margin:24px 0 16px;border:1px solid #ffffff25;border-radius:8px;width:max-content;overflow:hidden}.display-choices label{padding:8px 18px;cursor:pointer;font-size:13px;font-weight:600}.mode-control{position:absolute;opacity:0;width:1px;height:1px}.mode-control:focus-visible~.display-choices{outline:2px solid var(--accent)}#rendered-mode:checked~.display-choices label[for=rendered-mode],#source-mode:checked~.display-choices label[for=source-mode]{background:var(--accent);color:#171717}#source-mode:checked~#rendered-document{display:none}#rendered-mode:checked~#source-document{display:none}#document-source{white-space:pre-wrap;overflow-wrap:anywhere;background:#121922;padding:24px;border:1px solid #ffffff20;border-radius:12px;font-size:12px;max-height:75vh;overflow:auto}.source-explanation,.refresh-note{color:#a9b4bf;font-size:12px}
#observation{background:radial-gradient(ellipse at 85% 0%,color-mix(in srgb,var(--glow) 15%,transparent),transparent 48%),var(--zone-bg);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);border-top:4px solid var(--accent);border-radius:14px;padding:30px;box-shadow:0 22px 65px #0003}.room-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}.eyebrow{color:var(--accent);font-size:11px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;margin:0 0 8px}h1{font-family:Georgia,serif;font-size:clamp(28px,4vw,44px);font-weight:400;line-height:1.1;margin:0 0 10px;letter-spacing:-.025em}.locus{font-family:ui-monospace,monospace;color:#b9c3ca;font-size:11px;margin:0}.zone-mark{font-size:74px;line-height:1;color:var(--accent);text-shadow:0 0 40px color-mix(in srgb,var(--glow) 40%,transparent)}.room-prose{font-family:Georgia,serif;font-size:18px;line-height:1.7;white-space:pre-wrap;max-width:820px;margin:25px 0;color:#eee7dc}.section-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin-top:24px}.world-section{min-width:0;background:#070c112b;border:1px solid #ffffff12;border-radius:10px;padding:18px;margin-bottom:15px}.section-grid>.world-section{margin:0}.world-section h2{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);margin:0 0 15px}.world-section h3{font-size:14px;margin:0 0 6px}.section-you_can,.section-blocked,.section-actions,.section-facts{grid-column:1/-1}.section-you_can{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.section-you_can h2{grid-column:1/-1}.facts-list{list-style:none;padding:0;margin:0;font-size:13px;overflow-wrap:anywhere}.facts-list li{padding:6px 0;border-bottom:1px solid #ffffff0b}.facts-list li:last-child{border:0}.empty{color:#8f9ca6;font-size:12px;margin:0}dl{display:grid;grid-template-columns:minmax(80px,1fr) 3fr;font-size:12px;gap:8px;margin:0}dt{color:#aab9c2}dd{margin:0;overflow-wrap:anywhere}
.action{margin:0 0 7px}.action button{display:grid;grid-template-columns:1fr auto;gap:3px 10px;align-items:center;text-align:left;width:100%;border:1px solid color-mix(in srgb,var(--accent) 33%,transparent);background:color-mix(in srgb,var(--accent) 8%,#121820);border-radius:7px;padding:11px 13px;color:#f0ece5}.action button:hover{background:color-mix(in srgb,var(--accent) 20%,#121820);border-color:var(--accent)}.action button code{grid-row:2;color:var(--accent);font-size:11px;overflow-wrap:anywhere}.action button>span[aria-hidden]{grid-column:2;grid-row:1/3;color:var(--accent)}.action-label{font-size:13px;font-weight:600}.action-marks{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0 10px}.tag{font-size:10px;letter-spacing:.025em;padding:2px 7px;border-radius:4px;background:#ffffff10}.real,.cost{color:#f1be70}.blocked{color:#f2a29b}.action-fix{font-size:11px;color:#aebdcc}.typed-action{border-top:1px solid #ffffff15;padding-top:15px}.typed-action label{display:block;font-size:12px;color:#cad1d7;margin:9px 0}.typed-action input,.typed-action select{display:block;margin-top:4px;width:100%;padding:9px;color:#eee;background:#0e141b;border:1px solid #ffffff25;border-radius:5px}.typed-action button{display:block;width:auto}.feedback{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;padding:10px 14px;border:1px solid #ffffff19;border-radius:8px;font-size:12px;background:#ffffff06;color:#b9c7d2}.feedback strong{font-size:10px;letter-spacing:.1em;text-transform:uppercase}.feedback.success strong{color:#91d5a5}.feedback.blocked strong,.feedback.broken strong,.feedback.conflict strong{color:#f2a29b}.feedback.partial strong,.feedback.fumble strong{color:#f1be70}.feedback .action{width:100%;max-width:360px}.last-action{margin:14px 0;font-size:12px;color:#aebdcc}.last-action code{color:var(--accent)}
.messages{list-style:none;padding:0;margin:0}.message{border-left:3px solid var(--channel-color);padding:10px 14px;margin:9px 0;border-radius:0 7px 7px 0;background:color-mix(in srgb,var(--channel-color) 7%,#101720)}.message-heading{display:flex;gap:12px;align-items:center;color:var(--channel-color);font-size:11px}.message-heading span{text-transform:uppercase;letter-spacing:.09em;font-size:9px}.message p{margin:5px 0 0;font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere}.legend{font-size:11px;color:#aebdcc;border-top:1px solid #ffffff18;margin-top:24px;padding-top:16px}.legend summary{cursor:pointer;color:var(--accent)}.legend ul{display:flex;flex-wrap:wrap;gap:10px 20px;list-style:none;padding:0}.swatch{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px}.world-note{font-size:12px;color:#aebdcc}.quoted pre{font-size:12px;white-space:pre-wrap;overflow-wrap:anywhere}.table-scroll{overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:12px}th{text-align:left;font-weight:500;color:#acbdc9;border-bottom:1px solid #ffffff30;padding:7px 12px 7px 0}td{padding:8px 12px 8px 0;border-bottom:1px solid #ffffff0e;vertical-align:top;overflow-wrap:anywhere}.pie-figure{display:flex;align-items:center;gap:35px;margin:25px 0}.pie-figure svg{width:220px;max-width:45%;filter:drop-shadow(0 10px 20px #0004)}.pie-figure figcaption{font-size:13px}.pie-figure ul{list-style:none;padding:0}
.command-dock{position:fixed;bottom:0;left:0;right:0;padding:18px 32px 20px;background:#10161ff5;border-top:1px solid #ffffff22;box-shadow:0 -10px 35px #0003}.command-dock>div{max-width:1216px;margin:auto}.command-dock label{font-size:10px;text-transform:uppercase;letter-spacing:.13em;color:#aabac7}.command-line{display:flex;gap:10px;margin:7px 0}.command-line input{width:100%;min-width:0;color:#e8edf1;background:#080e15;border:1px solid #43505c;border-radius:7px;padding:12px 15px;font-family:ui-monospace,monospace;font-size:13px}.command-line button,.login-card button{color:#14191d;background:var(--accent);border:0;border-radius:7px;padding:11px 23px;font-weight:700;font-size:13px}.command-hint{margin:0;color:#8999a7;font-size:11px}.login-layout{display:grid;grid-template-columns:1fr 400px;gap:80px;align-items:center;min-height:65vh}.login-story h1{font-size:64px}.login-story p{max-width:440px;color:#b8c4cf}.login-card{border:1px solid #ffffff22;border-top:3px solid var(--accent);border-radius:12px;padding:30px;background:#18212c}.login-card h2{font-family:Georgia,serif;font-size:26px;font-weight:400;margin-top:0}.login-card label{display:block;font-size:12px;color:#b8c4cf;margin-bottom:17px}.login-card input{display:block;width:100%;margin-top:7px;background:#10161e;border:1px solid #41505f;color:#f1ece4;border-radius:6px;padding:11px}.login-card button{width:100%}.login-error{color:#f2a29b;font-size:12px}
@media(max-width:720px){.app-shell{padding:0 15px 170px}.app-caption{display:none}.app-heading{padding:16px 0}.session-controls{gap:7px}.section-grid,.section-you_can{grid-template-columns:1fr}#observation{padding:20px}.zone-mark{font-size:50px}.command-dock{padding:13px 15px}.command-line button{padding:10px 15px}.login-layout{grid-template-columns:1fr;gap:25px;padding-top:40px}.login-story h1{font-size:44px}.pie-figure{gap:20px}.login-card{padding:24px}.room-prose{font-size:17px}}

/* Native micro feedback stays available without page scripts. */
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--accent)}button:active{transform:translateY(1px);filter:brightness(.9)}.small-button:hover{border-color:var(--accent);color:var(--accent)}.command-line input:focus,.typed-action input:focus,.typed-action select:focus,.login-card input:focus{border-color:var(--accent)}input:focus:user-invalid{border-color:#f2a29b}.command-line:has(input:invalid) button{opacity:.65}.section-blocked{border-left:3px solid #f2a29b}.display-choices label:hover{box-shadow:inset 0 0 0 1px var(--accent)}.feedback{scroll-margin-top:20px}@media(prefers-reduced-motion:reduce){button:active{transform:none}}

/* The operator workspace fits the viewport. Only individual panes scroll. */
body:has(.player-shell),body:has(>.workspace){height:100dvh;overflow:hidden}
.app-shell:has(.player-shell){height:100dvh;max-width:none;padding:0 20px;display:grid;grid-template-rows:auto minmax(0,1fr)}
.app-shell:has(.player-shell) .app-heading{padding:12px 0}
.player-shell{min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto;position:relative}
.workspace-view,#rendered-document{height:100%;min-height:0;overflow:hidden}
.workspace,.workspace-view{--communications-height:clamp(120px,25dvh,230px);display:grid;grid-template-columns:minmax(0,1fr) 300px;grid-template-rows:minmax(0,1fr) var(--communications-height);gap:14px;height:100%;min-height:0;padding:14px 0}
/* The mode panes occupy only the browsing cell. Context and communications stay put. */
.workspace-view #rendered-document,.workspace-view .workspace{display:contents}
.output-panel{grid-column:1;grid-row:1;min-width:0;min-height:0;display:flex;flex-direction:column;border:1px solid #ffffff20;border-radius:10px;overflow:hidden;background:var(--zone-bg)}
.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 16px;border-bottom:1px solid #ffffff18;flex:none}
.panel-heading h2,.context-panel>h2{margin:0;color:var(--accent);font-size:11px;text-transform:uppercase;letter-spacing:.11em}
.panel-heading>span{font-size:10px;color:#9cadb8}
.output-scroll{min-height:0;overflow:auto;overscroll-behavior:contain;display:flex;flex-direction:column-reverse;flex:1;scrollbar-gutter:stable}
.output-log{flex:none;padding:16px}
.output-log #observation{padding:20px;border-radius:9px;box-shadow:none}
.output-log .room-heading{margin-bottom:12px}
.output-log h1{font-size:30px}
.output-log .room-prose{font-size:17px;margin:16px 0}
.output-log .section-grid{gap:10px;margin-top:16px}
.output-log .world-section{padding:13px}
.latest-feedback{border-top:1px solid #ffffff20;padding:12px 0 0;margin:14px 0 0;font-size:12px;color:var(--accent)}
.transcript-entry{border-bottom:1px solid #ffffff20;padding:12px 0;margin-bottom:16px;font-size:12px;overflow-wrap:anywhere;color:#aebdcc}
.transcript-entry h3{font-size:15px;color:#dce3e8;margin:6px 0}
.transcript-entry p{margin:6px 0;white-space:pre-wrap}
.context-panels{grid-column:2;grid-row:1;display:flex;flex-direction:column;gap:12px;min-height:0;min-width:0}
.context-panels:empty{display:none}
.workspace:has(.context-panels:empty),.workspace-view:has(.context-panels:empty){grid-template-columns:minmax(0,1fr)}
.communications-panel{grid-column:1/-1;grid-row:2;min-width:0;min-height:0;display:flex;flex-direction:column;border:1px solid #ffffff20;border-radius:9px;background:#101923;overflow:hidden}
.communications-scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;display:flex;flex-direction:column-reverse}
.communications-log{flex:none;padding:8px 13px;font-size:12px}
.communications-log .messages{margin:0}
.communications-log .message{display:grid;grid-template-columns:minmax(105px,150px) minmax(0,1fr);gap:10px;padding:4px 8px;margin:3px 0}
.communications-log .message-heading{margin:0;justify-content:flex-start;gap:8px;flex-wrap:wrap}
.communications-log .message p{margin:0;overflow-wrap:anywhere}
.communications-log .latest-feedback{margin:6px 0 0;padding:5px 0 0;font-size:11px}
.context-panel{display:flex;flex-direction:column;min-height:0;flex:1;border:1px solid #ffffff20;border-top:2px solid var(--accent);border-radius:9px;background:#141d27;overflow:hidden}
.context-panel[data-panel=navigation]{flex:1.4}
.context-panel>h2{padding:10px 13px;border-bottom:1px solid #ffffff10;flex:none}
.panel-scroll{overflow:auto;overscroll-behavior:contain;padding:10px 13px;font-size:12px;scrollbar-gutter:stable}
.panel-scroll>p{margin:0 0 10px}
.panel-place{font-family:Georgia,serif;font-size:20px;color:#ece6da}
.panel-description{color:#aebdcc;font-size:11px}
.panel-scroll .action button{padding:7px 9px}
.panel-scroll .action-label{font-size:12px}
.panel-scroll .action code{font-size:10px}
.online-roster{list-style:none;margin:0 0 12px;padding:0}
.online-roster li{padding:5px 0;border-bottom:1px solid #ffffff10}
.online-roster li>span:not(.presence-dot),.online-roster small{display:block;font-size:10px;color:#aebdcc;padding-left:15px;overflow-wrap:anywhere}
.presence-dot{color:#91d5a5;font-size:9px}
.panel-layout-left{grid-template-columns:300px minmax(0,1fr)}
.panel-layout-left .context-panels{grid-column:1}
.panel-layout-left .output-panel{grid-column:2}
.workspace.panel-layout-left:has(.context-panels:empty) .output-panel,.workspace-view:has(.context-panels:empty) .output-panel{grid-column:1}
.density-compact .output-log{padding:10px}
.density-compact .output-log #observation{padding:13px}
.density-compact .world-section{padding:9px}
.density-compact .action button{padding:6px 9px}
.density-compact .room-prose{font-size:14px;line-height:1.5}
.density-compact .panel-scroll{padding:7px 10px;font-size:11px}
.player-shell .command-dock{position:relative;padding:10px 0 12px;box-shadow:none}
.player-shell .command-dock>div{max-width:none}
.player-shell .command-line input{flex:1;width:auto}
.player-shell .command-line button{flex:none;white-space:nowrap}
.room-details{margin:14px 0;color:#aebdcc;font-size:12px}
.room-details>summary{cursor:pointer;color:var(--accent);padding:8px 0}
.dock-tools{display:flex;align-items:center;gap:20px;margin-bottom:6px}
.dock-tools .display-choices{margin:0;flex:none}
.dock-tools .display-choices label{padding:5px 12px;font-size:11px;letter-spacing:0;text-transform:none}
.dock-tools>.refresh-note{margin:0;flex:1}
#rendered-mode:checked~.command-dock label[for=rendered-mode],#source-mode:checked~.command-dock label[for=source-mode]{background:var(--accent);color:#171717}
#rendered-mode:focus-visible~.command-dock label[for=rendered-mode],#source-mode:focus-visible~.command-dock label[for=source-mode]{outline:2px solid var(--accent)}
#source-mode:checked~.workspace-view .output-panel,#compact-mode:checked~.workspace-view .output-panel{visibility:hidden}
#rendered-mode:checked~.workspace-view #source-document,#compact-mode:checked~.workspace-view #source-document,#source-mode:checked~.workspace-view #compact-document,#rendered-mode:checked~.workspace-view #compact-document{display:none}
#compact-mode:checked~.command-dock label[for=compact-mode]{background:var(--accent);color:#171717}
#compact-mode:focus-visible~.command-dock label[for=compact-mode]{outline:2px solid var(--accent)}
#source-document,#compact-document{grid-column:1;grid-row:1;min-height:0;min-width:0;display:flex;flex-direction:column;border:1px solid #ffffff20;border-radius:10px;overflow:hidden;background:#121922}
.panel-layout-left #source-document,.panel-layout-left #compact-document{grid-column:2}
.workspace-view:has(.context-panels:empty) #source-document,.workspace-view:has(.context-panels:empty) #compact-document{grid-column:1}
#source-document>.source-explanation,#compact-document>.source-explanation{padding:10px 16px;margin:0;border-bottom:1px solid #ffffff18}
.source-scroll #compact-text{flex:none;white-space:pre-wrap;overflow-wrap:anywhere;margin:0;padding:16px;font-size:13px;color:#dce3e8}
.source-explanation{margin:0 0 8px;flex:none}
.source-scroll{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column-reverse;background:#121922}
.source-scroll #document-source{flex:none;max-height:none;overflow:visible;margin:0;border:0;border-radius:0;padding:16px}
.panel-preferences{font-size:11px;margin-left:auto}
.panel-preferences>summary{cursor:pointer;color:var(--accent);padding:4px 8px}
.panel-preferences form{position:absolute;bottom:100%;right:0;width:290px;max-height:65dvh;overflow:auto;z-index:10;background:#18212c;border:1px solid var(--accent);border-radius:9px;padding:18px;box-shadow:0 15px 50px #0008}
.panel-preferences h3{margin:0;font-size:15px}
.panel-preferences form>p{color:#aebdcc;font-size:12px}
.panel-preferences form>label{display:block;margin:10px 0;letter-spacing:0;text-transform:none;font-size:12px}
.panel-preferences select{display:block;width:100%;padding:6px;margin-top:4px;background:#10161e;color:#eee;border:1px solid #41505f;border-radius:4px}
.panel-preferences button{background:var(--accent);color:#14191d;border:0;border-radius:5px;padding:8px 12px;font-size:12px}
@media(max-width:800px){
 .app-shell:has(.player-shell){padding:0 10px}
 .workspace,.workspace-view,.panel-layout-left{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) min(120px,14dvh) var(--communications-height);gap:9px;padding:9px 0}
 .output-panel,.panel-layout-left .output-panel{grid-column:1;grid-row:1}
 .context-panels,.panel-layout-left .context-panels{grid-column:1;grid-row:2;flex-direction:row;gap:8px}
 .context-panel,.context-panel[data-panel=navigation]{flex:1;min-width:0}
 .workspace:has(.context-panels:empty),.workspace-view:has(.context-panels:empty){grid-template-rows:minmax(0,1fr) var(--communications-height)}
 .communications-panel{grid-row:3}
 .workspace:has(.context-panels:empty) .communications-panel,.workspace-view:has(.context-panels:empty) .communications-panel{grid-row:2}
 #source-document,#compact-document,.panel-layout-left #source-document,.panel-layout-left #compact-document{grid-column:1}
 .communications-log .message{grid-template-columns:95px minmax(0,1fr);gap:5px}
 .context-panel>h2{font-size:9px;padding:7px}
 .panel-scroll{padding:7px;font-size:11px}
 .panel-description{display:none}
 .panel-heading>span,.dock-tools>.refresh-note{display:none}
 .dock-tools{gap:8px}
 .output-log .section-grid,.output-log .section-you_can{grid-template-columns:1fr}
 .player-shell .command-dock{padding:7px 0}
 .command-hint{display:none}
}
@media(max-height:560px){
 .workspace,.workspace-view{--communications-height:min(85px,23dvh);gap:6px;padding:6px 0}
 .workspace .panel-heading{padding:4px 10px}
 .command-hint{display:none}
 .app-shell:has(.player-shell) .app-heading{padding:5px 0}
 .player-shell .command-dock{padding:4px 0}
 .player-shell .command-line{margin:4px 0}
 .player-shell .command-line input{padding:7px 10px}
 .player-shell .command-line button{padding:7px 15px}
 .player-shell .command-dock label[for=command-line]{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
}
@media(max-width:800px) and (max-height:560px){
 .workspace,.workspace-view{grid-template-columns:minmax(0,1fr) 200px;grid-template-rows:minmax(0,1fr) var(--communications-height)}
 .workspace.panel-layout-left,.workspace-view.panel-layout-left{grid-template-columns:200px minmax(0,1fr)}
 .workspace:has(.context-panels:empty),.workspace-view:has(.context-panels:empty){grid-template-columns:minmax(0,1fr)}
 .context-panels{grid-column:2;grid-row:1;flex-direction:column;gap:5px}
 .panel-layout-left .context-panels{grid-column:1;grid-row:1}
 .output-panel,#source-document,#compact-document{grid-column:1;grid-row:1}
 .panel-layout-left .output-panel,.panel-layout-left #source-document,.panel-layout-left #compact-document{grid-column:2}
 .communications-panel{grid-row:2}
 .context-panel>h2{padding:4px 7px}
}

/* ── MUD client theme ─────────────────────────────────────────────────────
   Terminal type, flat bordered panes, Diku colours: yellow for who is here,
   cyan for what lies here, green for the ways out. Zone palettes still set
   --accent/--glow/--zone-bg; every colour still travels with words. */
:root{--mono:ui-monospace,"JetBrains Mono","DejaVu Sans Mono","Cascadia Mono",Menlo,Consolas,monospace;--ink:#c9d1d9;--dim:#7f8a96;--line:#1d2733;--term:#06080b;--pane:#0a0e13;--who:#e8c46a;--thing:#8fd3e6;--way:#79d79b;--doc:#d9cfae}
body{background:radial-gradient(ellipse at 50% -20%,#121a24 0,transparent 60%),var(--term);color:var(--ink);font-family:var(--mono)}
.app-shell,.app-shell button,.app-shell input,.app-shell select{font-family:var(--mono)}
.brand{font-family:var(--mono);font-size:19px;letter-spacing:.06em;text-shadow:0 0 12px color-mix(in srgb,var(--accent) 45%,transparent)}
.app-caption{letter-spacing:.08em;text-transform:none;font-size:11px;color:var(--dim)}
.app-heading{border-bottom:1px solid var(--line)}
.output-panel,.context-panel,.communications-panel,#source-document,#compact-document{border-radius:3px;border:1px solid var(--line);background:var(--pane)}
.context-panel{border-top:1px solid color-mix(in srgb,var(--accent) 55%,var(--line))}
.panel-heading h2::before,.context-panel>h2::before{content:"┤ ";color:var(--dim)}
.panel-heading h2::after,.context-panel>h2::after{content:" ├";color:var(--dim)}
.panel-heading h2,.context-panel>h2{letter-spacing:.14em}
.output-panel{position:relative;background:linear-gradient(180deg,color-mix(in srgb,var(--zone-bg) 70%,var(--term)),var(--term))}
.output-panel::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 2px,#0000001f 2px 3px);border-radius:3px}
.output-log #observation,#observation{background:transparent;border:0;border-left:2px solid var(--accent);border-radius:0;box-shadow:none;padding:6px 0 6px 16px}
.room-heading{margin-bottom:6px}
.output-log h1,#observation h1{font-family:var(--mono);font-size:20px;font-weight:700;letter-spacing:.01em;color:var(--accent);text-shadow:0 0 14px color-mix(in srgb,var(--accent) 35%,transparent);margin:0 0 2px}
.eyebrow{font-size:10px;letter-spacing:.2em}
.zone-mark{font-size:34px;opacity:.75}
.output-log .room-prose,.room-prose{font-family:var(--mono);font-size:14px;line-height:1.65;color:#d8d2c6;text-indent:3ch;margin:10px 0 12px;max-width:88ch}
.feedback{font-size:11px;padding:6px 10px;border-radius:2px;margin:6px 0}
.feedback.success{background:transparent;border-color:transparent;padding:0;color:var(--dim)}
.feedback.success strong{color:#5f9d72}
.room-block{margin:4px 0 14px;font-size:13px;line-height:1.55}
.exits-line{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;color:var(--way);margin:0 0 10px}
.exits-line form{display:inline}
.exits-line .exit button{background:none;border:0;color:var(--way);padding:1px 2px;cursor:pointer;font-size:13px}
.exits-line .exit button:hover{color:#b8f5cb;text-decoration:underline}
.exits-line kbd{font-family:var(--mono);font-size:10px;border:1px solid color-mix(in srgb,var(--way) 45%,transparent);border-radius:2px;padding:0 3px;margin-right:4px;color:#b8f5cb}
.exit.closed{color:var(--dim);text-decoration:line-through}
.company,.things,.shelf ul{list-style:none;margin:0 0 6px;padding:0}
.company li,.things li{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;padding:1px 0}
.company li{color:var(--who)}
.being-name{color:#ffe59a}
.kin{color:#f0a9cb;font-size:11px}
.things li{color:var(--thing)}
.dim{color:var(--dim);font-size:11px}
.chips{display:inline-flex;flex-wrap:wrap;gap:2px 8px}
.chip{display:inline}
.chip button,.shelf .chip button{background:none;border:0;padding:0;color:var(--dim);font-size:11px;cursor:pointer}
.chip button::before{content:"["}
.chip button::after{content:"]"}
.chip button:hover{color:var(--accent)}
.chip.wide{display:block;margin:3px 0}
.chip.wide button{font-size:11px;color:var(--accent)}
.chip.wide button span{color:var(--dim)}
.shelf{margin:10px 0 6px;border-top:1px dashed var(--line);padding-top:8px}
.shelf h2{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--doc);margin:0 0 6px}
.shelf li.doc{display:grid;grid-template-columns:2ch minmax(0,1fr) 9ch auto;gap:8px;align-items:baseline;color:var(--doc);padding:1px 0}
.shelf li.doc[data-kind=dir]{color:#a9c7e8}
.shelf .doc-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shelf .glyph{color:var(--dim)}
.room-details>summary{font-size:11px;color:var(--dim)}
.room-details[open]>summary{color:var(--accent)}
.world-section{border-radius:2px;background:#ffffff05;border:1px solid var(--line)}
.action button{border-radius:2px}
.transcript-entry{font-size:11px;color:var(--dim);border-bottom:1px dashed var(--line)}
.transcript-entry h3{font-size:13px;color:#b9c2cb}
.quoted pre{background:#0d1117;border:1px solid var(--line);padding:12px;border-radius:2px;color:#e6e1d3;font-size:12.5px;line-height:1.5}
/* communications: one line per message, the way a client scrolls */
.communications-panel{background:#080b0f}
.communications-log .message{background:none;border-left:2px solid var(--channel-color);border-radius:0;padding:1px 8px;margin:1px 0;grid-template-columns:minmax(90px,120px) minmax(0,1fr)}
.communications-log .message-heading strong{display:none}
.communications-log .message-heading span{font-size:9px;letter-spacing:.1em;opacity:.8}
.communications-log .message p{color:var(--channel-color);font-size:12.5px}
.communications-log .message[data-channel=presence] p,.communications-log .message[data-channel=act] p{font-style:italic}
.communications-log .empty code{color:var(--accent)}
/* map & compass */
.automap{font-family:var(--mono);font-size:12px;line-height:1.2;color:color-mix(in srgb,var(--accent) 70%,var(--ink));margin:6px 0 2px;white-space:pre;overflow-x:auto}
.automap .me{color:#ffe59a;text-shadow:0 0 8px #ffe59a88}
.automap .them{color:var(--who)}
.map-legend{font-size:9.5px;color:var(--dim);margin:0 0 8px}
.rose{display:grid;grid-template-columns:repeat(3,2.6em);grid-auto-rows:1.9em;gap:3px;margin:6px 0}
.rose form{display:contents}
.rose button,.rose-off,.rose-centre{display:flex;align-items:center;justify-content:center;font-size:11px;border-radius:2px}
.rose button{background:color-mix(in srgb,var(--way) 12%,transparent);border:1px solid color-mix(in srgb,var(--way) 45%,transparent);color:var(--way);cursor:pointer;padding:0}
.rose button:hover{background:color-mix(in srgb,var(--way) 28%,transparent)}
.rose-off{color:#3a4450;border:1px dashed #1f2832}
.rose-centre{color:var(--accent)}
.rose-extra{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px}
.rose-extra form{display:inline}
.rose-extra button{background:none;border:1px solid color-mix(in srgb,var(--way) 45%,transparent);color:var(--way);font-size:11px;padding:2px 6px;border-radius:2px;cursor:pointer}
.panel-place{font-family:var(--mono);font-size:15px;color:var(--accent);margin-bottom:2px!important}
.who-count{color:var(--dim);font-size:11px}
.online-roster li{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;border-bottom:1px dotted var(--line)}
.online-roster li strong{color:var(--who)}
.online-roster li[data-kind=agent] strong{color:#9fd6e8}
.online-roster small{flex-basis:100%;padding-left:15px}
.who-kind{color:var(--dim);font-size:10px}
.online-roster .chip{margin-left:auto}
/* the prompt */
.player-shell .command-dock{background:transparent;border-top:1px solid var(--line)}
.prompt{display:block;font-size:12px!important;letter-spacing:0!important;text-transform:none!important;color:var(--way)!important;margin:2px 0 4px}
.prompt-part+.prompt-part::before{content:" | ";color:var(--dim)}
.prompt::after{content:"▌";margin-left:4px;color:var(--way);animation:caret 1.1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){.prompt::after{animation:none}}
.command-line input{background:#030507;border-color:#26323f;color:#e6edf3;caret-color:var(--way)}
.command-line input:focus{border-color:var(--way);box-shadow:0 0 0 1px color-mix(in srgb,var(--way) 35%,transparent)}
.command-line button{border-radius:2px}
.display-choices{border-radius:2px}
/* the connect screen */
.banner{font-family:var(--mono);font-size:13px;line-height:1.15;color:var(--accent);text-shadow:0 0 16px color-mix(in srgb,var(--accent) 50%,transparent);margin:0 0 18px;white-space:pre}
.login-story p,.login-tips{color:#aab4bf;font-size:13px;max-width:52ch}
.login-tips{padding-left:18px;line-height:1.9}
.login-tips code{color:var(--way)}
.login-card{background:#0b1016;border-radius:3px;border:1px solid var(--line);border-top:2px solid var(--accent)}
.login-card h2{font-family:var(--mono);font-size:16px;color:var(--way)}
.login-card label{font-size:12px;color:#c9d1d9}
.login-card input{background:#05070a;border-radius:2px;font-family:var(--mono)}
.login-card button,.command-line button{border-radius:2px;font-family:var(--mono)}
@media(max-width:720px){.banner{font-size:10px}.shelf li.doc{grid-template-columns:2ch minmax(0,1fr) auto}.shelf li.doc .dim{display:none}}
.context-panel[data-panel=navigation]{flex:2.4}
.context-panel[data-panel=online]{flex:1.2}
.context-panel[data-panel=pulse]{flex:.8}
.nav-grid{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:flex-start}
.nav-grid>div:first-child{flex:1 1 150px;min-width:0}
.nav-grid .rose{grid-template-columns:repeat(3,2.3em);grid-auto-rows:1.8em;margin-top:6px}
.context-panel[data-panel=navigation]{flex:2}
.context-panel[data-panel=online]{flex:1.4}
.context-panel[data-panel=pulse]{flex:.7}
.shelf ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));column-gap:22px}
.shelf li.doc{grid-template-columns:2ch minmax(0,1fr) 7ch auto;gap:6px}
.shelf-tail{margin:6px 0 0}
.shelf-tail .chip{margin-left:2px}
@media(max-width:560px){
 .app-heading{gap:8px}
 .brand{font-size:16px}
 .session-controls{gap:5px}
 .session-controls>span{display:none}
 .small-button{padding:5px 8px;font-size:11px}
 .context-panels,.panel-layout-left .context-panels{overflow-x:auto;scroll-snap-type:x mandatory}
 .context-panel,.context-panel[data-panel=navigation]{flex:0 0 78%;scroll-snap-align:start}
 .communications-log .message{grid-template-columns:minmax(0,1fr)}
 .communications-log .message-heading{display:none}
 .output-log .room-prose,.room-prose{font-size:13px;text-indent:2ch}
 .company li,.things li{font-size:12.5px}
 .exits-line .exit button{font-size:12px}
 .dock-tools .display-choices label{padding:4px 7px;font-size:10px}
 .panel-preferences>summary{padding:4px}
}
@media(max-width:560px){.context-panel[data-panel]{flex:0 0 82%;min-width:0}}
html{background:var(--term)}
.document-details{grid-column:1/-1;color:var(--dim);font-size:11px}
.document-details>summary{cursor:pointer;padding:4px 0;color:var(--accent)}
.document-details[open]>.section-facts{margin-top:8px}
.banner{text-shadow:0 0 6px color-mix(in srgb,var(--accent) 35%,transparent)}
/* Reading keeps the document and its continuation close together. */
.output-log .reading-observation .room-heading{margin-bottom:4px}
.output-log .reading-observation .room-prose{font-size:12px;margin:4px 0;line-height:1.4}
.output-log .reading-observation .section-grid{margin-top:4px;gap:4px}
.output-log .reading-observation .world-section{padding:8px;margin-bottom:6px}
.reading-observation .world-section h2{margin-bottom:4px}
.reading-observation .quoted .eyebrow{margin-bottom:4px;font-size:9px}
.reading-observation .quoted pre{padding:8px;margin:4px 0;line-height:1.4}
.output-log .reading-observation .section-you_can{display:block;padding:4px 0;border:0}
.reading-observation .section-you_can .action{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;align-items:center}
.reading-observation .section-you_can h2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.reading-observation .action{margin-bottom:0}
.reading-observation .action button{padding:6px 8px}
.reading-observation .action button code{white-space:nowrap;overflow-x:auto;min-width:0;scrollbar-width:thin}
.reading-observation .action-marks{margin:4px 0 0}
.reading-observation .section-you_can .action-marks{margin:0}
.reading-observation .world-note{margin:4px 0;font-size:11px}
.reading-observation .legend{margin-top:6px;padding-top:4px}