* { box-sizing: border-box; }
:root { color-scheme: light; font-family: "Segoe UI", "Microsoft JhengHei", sans-serif; color: var(--world-text); background: var(--world-background); }
body { margin: 0; height: 100dvh; display: flex; flex-direction: column; }
header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 28px; border-bottom: 1px solid var(--world-border); background: var(--world-surface); }
h1 { margin: 4px 0 0; font-size: 25px; letter-spacing: .04em; }
.eyebrow { margin: 0; font-size: 11px; letter-spacing: .12em; color: var(--world-muted); }
.prototype { display: grid; gap: 5px; font-size: 12px; }
.prototype strong { color: var(--world-accent); }
.prototype { max-width: 30rem; line-height: 1.6; }
.return-system { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 12px; border: 1px solid currentColor; border-radius: 8px; color: inherit; font-size: 12px; text-decoration: none; white-space: nowrap; }
.return-system:hover { background: var(--world-hover); }
.return-system:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0,1fr) 260px; }
.world { min-width: 0; min-height: 0; position: relative; overflow: hidden; background: var(--world-sky); }
#canvas-container { position: absolute; inset: 0; overflow: hidden; }
canvas { display: block; width: 100%; height: 100%; touch-action: none; }
canvas:focus-visible { outline: 3px solid var(--world-accent); outline-offset: -3px; }
#labels { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.world-label { position: absolute; left: 0; top: 0; transform: translate(-50%,-50%); border: 1px solid var(--world-labelBorder); border-radius: 12px; padding: 3px 7px; color: var(--world-text); background: var(--world-surface); font-size: 11px; font-weight: 700; white-space: nowrap; }
.world-label.number { min-width: 26px; text-align: center; border-radius: 50%; }
#status { position: absolute; top: 16px; left: 16px; right: 16px; width: fit-content; max-width: calc(100% - 32px); z-index: 2; margin: 0; padding: 8px 12px; border-radius: 9px; background: var(--world-surface); font-size: 12px; }
#status[data-state="error"] { background: var(--world-errorSurface); border: 1px solid var(--world-errorBorder); }
.controls-help { position: absolute; bottom: 16px; left: 16px; max-width: calc(100% - 32px); padding: 8px 12px; border-radius: 9px; background: var(--world-surface); font-size: 12px; pointer-events: none; }
.legend { padding: 22px 18px; overflow-y: auto; background: var(--world-surface); border-left: 1px solid var(--world-border); }
h2 { margin: 6px 0 10px; font-size: 18px; }
.legend-note { font-size: 12px; color: var(--world-muted); line-height: 1.6; }
ol { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 10px; }
li { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.legend-number { display: inline-grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; flex-shrink: 0; border: 1px solid var(--world-labelBorder); color: var(--world-text); }
.route-key { border-top: 1px solid var(--world-border); padding-top: 10px; font-size: 11px; }
.route-key p { display: flex; gap: 8px; align-items: center; }
.route-key i { width: 22px; height: 3px; display: inline-block; }
.workflow { background: var(--world-workflow); }.intelligence { background: var(--world-intelligence); }
.foundation-key { margin-top: 20px; font-size: 11px; line-height: 1.7; color: var(--world-muted); }
.world-label.detail { font-size: 9px; padding: 2px 5px; }
.performance-key { border-top: 1px solid var(--world-border); padding-top: 12px; font-size: 11px; line-height: 1.7; color: var(--world-muted); }
.performance-key output { display: block; white-space: pre-line; font-variant-numeric: tabular-nums; margin: 5px 0; }
.performance-key small { font-size: 10px; }
.view-controls { position: absolute; z-index: 3; top: 64px; left: 16px; max-width: calc(100% - 32px); padding: 6px; border: 1px solid var(--world-border); border-radius: 12px; background: var(--world-surface); }
.view-controls[hidden] { display: none; }
.view-buttons { display: flex; flex-wrap: wrap; gap: 4px; }
.view-buttons button { min-height: 44px; min-width: 44px; padding: 8px 13px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--world-accent); font: inherit; font-size: 12px; cursor: pointer; }
.view-buttons button:hover { background: var(--world-hover); }
.view-buttons button[aria-pressed="true"] { background: var(--world-accent); color: var(--world-surface); }
.view-buttons button:focus-visible { outline: 3px solid var(--world-focus); outline-offset: 1px; }
.view-buttons .view-reset { border-left-color: var(--world-border); }
.view-status { margin: 5px 8px 3px; color: var(--world-muted); font-size: 11px; line-height: 1.6; }
.controls-help { top: 16px; right: 16px; bottom: auto; left: auto; }
.workflow-controls { position: absolute; z-index: 3; bottom: 16px; left: 16px; width: 202px; max-width: calc(100% - 32px); border: 1px solid var(--world-labelBorder); border-radius: 12px; background: var(--world-surface); }
.workflow-controls.is-expanded { width: 480px; }
#workflow-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 200px; max-width: 100%; height: 48px; padding: 8px 12px; border: 0; border-radius: 11px; color: var(--world-accent); background: var(--world-surface); font: inherit; font-size: 12px; cursor: pointer; }
#workflow-toggle[aria-expanded="true"] { width: 100%; background: var(--world-selection); border-radius: 11px 11px 0 0; }
#workflow-toggle:hover { background: var(--world-hover); }
#workflow-toggle:focus-visible { outline: 3px solid var(--world-focus); outline-offset: -3px; }
#workflow-compact-step { font-size: 10px; white-space: nowrap; }
.workflow-information { max-height: 0; overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(4px); transition: max-height 200ms ease, opacity 200ms ease, transform 200ms ease, visibility 200ms; padding: 0 12px; }
.is-expanded .workflow-information { max-height: calc(45dvh - 50px); opacity: 1; visibility: visible; transform: none; padding-bottom: 6px; }
.workflow-progress { flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) { .workflow-information { transition: none; } }
@media (max-width: 600px) { .workflow-controls { position: fixed; max-width: calc(100% - 32px); } .workflow-controls.is-expanded { width: 480px; } }
.workflow-controls[hidden] { display: none; }
.workflow-case { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; font-size: 11px; }
.workflow-case span { color: var(--world-muted); }
.workflow-status { margin: 6px 0; font-size: 12px; line-height: 1.5; }
.workflow-progress { display: flex; gap: 7px; margin: 5px 0; }
.workflow-progress li { display: grid; place-items: center; width: 23px; height: 23px; border: 1px solid var(--world-border); border-radius: 50%; color: var(--world-progress); font-size: 10px; }
.workflow-progress li[data-state="complete"] { background: var(--world-selection); color: var(--world-accent); border-color: var(--world-completedBorder); }
.workflow-progress li[data-state="current"] { color: var(--world-surface); background: var(--world-accent); border-color: var(--world-accent); font-weight: 700; outline: 2px solid var(--world-selection); outline-offset: 1px; }
.workflow-buttons { display: flex; gap: 4px; flex-wrap: wrap; }
.workflow-buttons button { min-height: 44px; padding: 8px 13px; color: var(--world-accent); background: transparent; border: 1px solid transparent; border-radius: 8px; font: inherit; font-size: 12px; cursor: pointer; }
.workflow-buttons button:hover:not(:disabled) { background: var(--world-hover); }
.workflow-buttons button[aria-pressed="true"] { background: var(--world-accent); color: var(--world-surface); }
.workflow-buttons button:disabled { opacity: .4; cursor: default; }
.workflow-buttons button:focus-visible { outline: 3px solid var(--world-focus); outline-offset: 1px; }
.orb-label { position: absolute; transform: translate(-50%, 8px); white-space: pre-line; text-align: center; padding: 4px 7px; border: 1px solid var(--world-workflow); border-radius: 8px; color: var(--world-accent); background: var(--world-surface); font-size: 10px; line-height: 1.4; }
.character-label { position: absolute; transform: translate(-50%,-100%); white-space: nowrap; padding: 3px 6px; border: 1px solid; border-radius: 7px; color: var(--world-accent); background: var(--world-surface); font-size: 10px; }
.character-label[data-support="true"] { font-size: 9px; }
.interaction-status { margin: 10px 0; padding: 9px 10px; border-left: 2px solid var(--world-intelligence); background: var(--world-hover); font-size: 12px; line-height: 1.6; color: var(--world-accent); }
.risk-controls { border-bottom: 1px solid var(--world-border); padding-bottom: 12px; margin-bottom: 18px; }
.risk-demo { margin: 0 0 10px; color: var(--world-muted); font-size: 10px; }
.risk-buttons { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; }
.risk-buttons button { min-height: 38px; border: 2px solid var(--risk-color); border-radius: 8px; color: var(--world-accent); background: var(--world-surface); font: inherit; font-size: 12px; cursor: pointer; }
.risk-buttons button[aria-pressed="true"] { background: var(--world-accent); color: var(--world-surface); font-weight: 700; outline: 1px solid var(--world-accent); outline-offset: 1px; }
.risk-buttons button:focus-visible { outline: 3px solid var(--world-accent); outline-offset: 2px; }
.risk-summary { font-size: 13px; font-weight: 700; line-height: 1.6; margin: 12px 0 5px; }
.risk-description,.risk-state { font-size: 11px; line-height: 1.7; margin: 5px 0; }
.risk-state { white-space: pre-line; color: var(--world-accent); }
.world-label.risk-scale { transform: translate(calc(-100% - 22px),calc(-100% - 12px)); padding: 4px 6px; white-space: pre-line; }
.risk-scale-row { display: flex; gap: 4px; font-size: 9px; }
.risk-scale-row span { opacity: .65; padding: 2px; }
.risk-scale-row span[data-current="true"] { opacity: 1; font-weight: 700; border-bottom: 2px solid currentColor; }
.risk-scale strong { display: block; font-size: 10px; text-align: center; margin-top: 2px; }
.world-label.risk-gate { transform: translate(12px,-50%); white-space: pre-line; font-size: 10px; line-height: 1.5; }
.gate-panel { border: 2px solid var(--gate-accent); border-radius: 10px; padding: 12px; margin-bottom: 16px; background: var(--world-surface); }
.gate-panel[hidden],.gate-actions[hidden] { display: none; }
.gate-panel h2 { font-size: 17px; line-height: 1.4; }
.gate-demo,.gate-simulation { font-size: 10px; color: var(--world-muted); line-height: 1.5; margin: 5px 0; }
.gate-risk,.gate-explanation { font-size: 11px; line-height: 1.6; margin: 7px 0; }
.gate-status { font-size: 12px; font-weight: 700; line-height: 1.6; color: var(--world-accent); }
.gate-actions { display: grid; gap: 6px; margin: 10px 0; }
.gate-actions button { min-height: 38px; padding: 6px; border: 1px solid var(--gate-accent); border-radius: 7px; background: var(--world-surface); color: var(--world-accent); font: inherit; font-size: 11px; cursor: pointer; }
.gate-actions button:last-child { background: var(--world-accent); color: var(--world-surface); }
.gate-actions button:focus-visible { outline: 3px solid var(--gate-accent); outline-offset: 2px; }
.world-label.decision-gate-active { border-width: 2px; padding: 6px 8px; }
@media (max-width: 800px) { header { padding: 12px 16px; flex-wrap: wrap; gap: 10px; } h1 { font-size: 20px; } main { grid-template-columns: minmax(0,1fr) 200px; } .legend { padding: 14px 10px; } }

.intelligence-status { max-width: 620px; margin: 6px 0; font-size: 10px; line-height: 1.55; white-space: pre-line; color: var(--world-accent); border-left: 2px solid var(--world-labelBorder); padding-left: 8px; }
.intelligence-status[hidden] { display: none; }
.world-label.intelligence-label { font-size: 9px; padding: 3px 5px; background: var(--world-surface); }

.security-controls { border-bottom: 1px solid var(--world-border); padding-bottom: 12px; margin-bottom: 18px; }
.security-controls[hidden],.security-audit[hidden] { display: none; }
.security-demo,.security-note,.security-roles { color: var(--world-muted); font-size: 10px; line-height: 1.6; margin: 6px 0; }
.security-context,.security-result,.security-audit { white-space: pre-line; font-size: 11px; line-height: 1.55; margin: 8px 0; }
.security-result { font-weight: 700; color: var(--world-accent); }
.security-filter { font-size: 11px; line-height: 1.55; }
.security-buttons { display: grid; grid-template-columns: repeat(2,1fr); gap: 5px; }
.security-buttons button { min-height: 38px; padding: 6px; border: 1px solid var(--world-labelBorder); border-radius: 7px; background: var(--world-surface); color: var(--world-accent); font: inherit; font-size: 11px; cursor: pointer; }
.security-buttons button[aria-pressed="true"] { background: var(--world-accent); color: var(--world-surface); }
.security-buttons button:focus-visible { outline: 3px solid var(--world-focus); outline-offset: 2px; }
.security-audit { border-left: 2px solid var(--security-allowed); padding-left: 8px; }
.world-label.security-label { font-size: 10px; padding: 2px 5px; }
.world-label.security-label[data-kind="level"] { transform: translate(0,-50%); }
.world-label.security-label[data-kind="boundary"] { background: var(--world-surface); font-size: 9px; }

/* STEP 13: event-driven selection, with a readable DOM information panel. */
main.module-open { grid-template-columns: minmax(0,1fr) 350px; }
.module-information[hidden] { display: none; }
.module-information { border-bottom: 1px solid var(--world-border); padding-bottom: 18px; margin-bottom: 18px; overflow-wrap: anywhere; }
.module-demo { font-size: 10px; letter-spacing: .06em; color: var(--world-muted); margin: 0 0 10px; }
.module-header { display: flex; align-items: start; gap: 8px; justify-content: space-between; }
.module-header h2 { margin: 6px 0; }
.module-information button, .module-list-button { font: inherit; color: var(--world-accent); background: var(--world-subtle); border: 1px solid var(--world-border); border-radius: 8px; min-height: 44px; cursor: pointer; padding: 8px 10px; }
.module-header button { min-width: 44px; font-size: 22px; padding: 3px; flex-shrink: 0; }
.module-english { font-size: 12px; color: var(--world-muted); margin: 0 0 10px; }
.module-status { display: inline-block; font-size: 11px; font-weight: 700; color: var(--world-surface); background: var(--panel-accent); border-radius: 6px; padding: 5px 8px; margin: 0 0 7px; }
.module-scope { font-size: 11px; line-height: 1.5; margin: 0 0 8px; }
.module-evidence-note { font-size: 10px; line-height: 1.5; color: var(--world-muted); margin: 0 0 12px; }
.module-fields { font-size: 12px; line-height: 1.55; margin: 0; }
.module-fields dt { font-size: 11px; font-weight: 700; color: var(--panel-accent); margin-top: 12px; }
.module-fields dd { margin: 4px 0 0; }
.module-information h3 { font-size: 12px; margin: 15px 0 8px; }
.module-related { display: flex; flex-wrap: wrap; gap: 5px; font-size: 11px; }
.module-related span { padding: 8px 0; }
.module-related button { font-size: 11px; text-align: left; }
.module-overview { width: 100%; margin-top: 12px; font-size: 12px !important; }
.module-navigation summary { cursor: pointer; font-size: 13px; padding: 12px 0; color: var(--world-accent); }
.module-navigation ol { gap: 5px; margin: 0 0 15px; }
.module-list-button { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; font-size: 12px; }
.module-list-button[aria-pressed="true"] { border-color: var(--world-accent); background: var(--world-selection); }
.module-information button:hover, .module-list-button:hover { background: var(--world-selection); }
.module-information button:focus-visible, .module-list-button:focus-visible, .module-navigation summary:focus-visible { outline: 3px solid var(--world-focus); outline-offset: 2px; }

/* Guided captions share the existing sidebar, never cover the 3D story subject. */
main.story-active { grid-template-columns: minmax(0,1fr) 350px; }
.story-controls { padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--world-border); }
.story-counter { font-size: 11px; color: var(--world-muted); margin: 0 0 8px; }
.story-title { color: var(--world-accent); margin: 0 0 8px; }
.story-subtitle { font-size: 13px; font-weight: 600; line-height: 1.5; margin: 0 0 8px; }
.story-narration, .story-governance { font-size: 12px; line-height: 1.6; margin: 8px 0; overflow-wrap: anywhere; }
.story-governance { border-left: 2px solid var(--world-intelligence); padding-left: 8px; color: var(--world-muted); }
.story-governance:empty { display: none; }
.story-buttons { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 12px; }
.story-controls button { min-height: 44px; padding: 8px 12px; border: 1px solid var(--world-border); border-radius: 8px; font: inherit; font-size: 12px; color: var(--world-accent); background: var(--world-hover); cursor: pointer; }
.story-controls button[hidden] { display: none; }
.story-controls button:disabled { opacity: .45; cursor: default; }
.story-controls button:hover:not(:disabled) { background: var(--world-selection); }
.story-controls button:focus-visible { outline: 3px solid var(--world-focus); outline-offset: 2px; }
.story-controls [data-story-action="start"], .story-controls [data-story-action="next"] { color: var(--world-surface); background: var(--world-accent); }
.story-controls [data-story-action="start"]:hover:not(:disabled), .story-controls [data-story-action="next"]:hover:not(:disabled) { background: var(--world-accent); }
.story-security { margin-top: 10px; background: transparent !important; }
.story-active .module-navigation, .story-active .route-key, .story-active .performance-key, .story-active .foundation-key { color: var(--world-muted); }
.story-active .workflow-buttons { opacity: .8; }

/* STEP 15.5: visual hierarchy only; layout and label projection stay unchanged. */
.view-controls, .workflow-controls, #status, .controls-help { box-shadow: var(--world-shadow); }
.world-label.title { border-color: var(--world-labelBorder); padding: 4px 9px; letter-spacing: .025em; }
.world-label.detail, .world-label.intelligence-label, .world-label.security-label[data-kind="boundary"] { opacity: var(--world-labelSecondaryOpacity); }
.character-label[data-support="true"] { opacity: var(--world-labelSecondaryOpacity); }
.view-buttons button[aria-pressed="true"], .workflow-buttons button[aria-pressed="true"],
.risk-buttons button[aria-pressed="true"], .security-buttons button[aria-pressed="true"] {
  background: var(--world-selection); color: var(--world-accent); border-color: var(--world-labelBorder);
}

/* UX PATCH 02: disclosure overlays preserve the canvas size and all world state. */
main, main.module-open, main.story-active { position: relative; grid-template-columns: minmax(0,1fr); }
.view-controls { width: 202px; padding: 0; border-color: var(--world-labelBorder); }
.view-controls.is-expanded { width: 500px; }
.disclosure-toggle { display: block; width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--world-labelBorder); border-radius: 11px; color: var(--world-accent); background: var(--world-surface); font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.view-controls .disclosure-toggle { border: 0; }
.disclosure-toggle[aria-expanded="true"] { background: var(--world-selection); }
.disclosure-toggle:hover { background: var(--world-hover); }
.disclosure-toggle:focus-visible { outline: 3px solid var(--world-focus); outline-offset: -3px; }
.disclosure-content { max-height: 0; overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: max-height 200ms ease, opacity 200ms ease, transform 200ms ease, visibility 200ms; }
.is-expanded > .disclosure-content { opacity: 1; visibility: visible; transform: none; }
.view-controls.is-expanded > .disclosure-content { max-height: 45dvh; overflow-y: auto; padding: 6px; }
.legend { position: absolute; z-index: 4; top: 64px; right: 16px; width: 260px; max-width: calc(100% - 32px); max-height: calc(100% - 80px); padding: 0; border: 0; background: transparent; overflow-y: auto; pointer-events: none; }
.legend > * { pointer-events: auto; }
#module-list-toggle { width: 140px; margin-left: auto; }
.legend.is-expanded > .disclosure-content { max-height: 4000px; padding: 12px; border: 1px solid var(--world-labelBorder); border-radius: 12px; background: var(--world-surface); }
.legend > .story-controls, .legend > .gate-panel { padding: 12px; border-radius: 12px; background: var(--world-surface); margin: 8px 0; }
.legend:not(.is-expanded) > .story-controls { display: none; }
.story-active .legend > .story-controls { display: block; }
@media (max-width: 600px) { .view-controls { max-width: calc(100% - 32px); } .legend { width: 260px; top: 120px; max-height: calc(100% - 136px); } }
@media (prefers-reduced-motion: reduce) { .disclosure-content { transition: none; } }