| :root {
|
| color-scheme: dark;
|
| --ink: #eef1ea;
|
| --muted: #8d9899;
|
| --faint: #566264;
|
| --page: #090b0e;
|
| --panel: #101419;
|
| --panel-raised: #141a1f;
|
| --line: #2a3439;
|
| --line-bright: #3b484d;
|
| --acid: #d2f266;
|
| --cyan: #70e7e0;
|
| --orange: #f3a35e;
|
| --red: #ff6b5f;
|
| --violet: #aa96f6;
|
| --blue: #79a9ff;
|
| --white-soft: rgba(238, 241, 234, .72);
|
| --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
|
| --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
| }
|
|
|
| * { box-sizing: border-box; }
|
|
|
| html { min-width: 320px; scroll-behavior: smooth; }
|
|
|
| body {
|
| margin: 0;
|
| min-width: 320px;
|
| background: var(--page);
|
| color: var(--ink);
|
| font-family: var(--sans);
|
| font-size: 14px;
|
| line-height: 1.45;
|
| }
|
|
|
| button, input { font: inherit; }
|
| button { cursor: pointer; }
|
| button:focus-visible, input:focus-visible, [role="button"]:focus-visible, a:focus-visible { outline: 2px solid var(--acid); outline-offset: 3px; }
|
| a { color: inherit; }
|
|
|
| .app-shell { width: min(1600px, 100%); margin: 0 auto; padding: 26px 32px 18px; }
|
| .topbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; padding: 7px 0 28px; }
|
| .brand-lockup { display: flex; align-items: center; gap: 16px; }
|
| .brand-mark { width: 36px; height: 36px; border: 1px solid var(--acid); display: grid; place-items: center; position: relative; transform: rotate(45deg); flex: 0 0 auto; }
|
| .brand-mark span { display: block; position: absolute; background: var(--acid); }
|
| .brand-mark span:nth-child(1) { width: 17px; height: 1px; }
|
| .brand-mark span:nth-child(2) { width: 1px; height: 17px; }
|
| .brand-mark span:nth-child(3) { width: 5px; height: 5px; background: var(--cyan); }
|
| .brand-lockup h1 { max-width: 760px; margin: 3px 0 0; font-size: clamp(20px, 2.3vw, 34px); font-weight: 520; letter-spacing: -.045em; line-height: 1.08; }
|
| .eyebrow { margin: 0; color: var(--muted); font: 10px/1.2 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
|
| .eyebrow span { color: var(--acid); }
|
| .header-status { display: flex; align-items: center; gap: 10px; color: var(--white-soft); font: 10px var(--mono); letter-spacing: .08em; white-space: nowrap; }
|
| .status-dot { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: var(--acid); box-shadow: 0 0 13px rgba(210, 242, 102, .75); }
|
| .header-divider { height: 14px; width: 1px; background: var(--line-bright); }
|
| .mono { font-family: var(--mono); }
|
|
|
| .page-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 14px; }
|
| .panel { background: var(--panel); border: 1px solid var(--line); border-radius: 3px; }
|
| .mission-strip { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 30px; padding: 21px 23px 20px; border-color: #364238; background: #101613; }
|
| .mission-copy { max-width: 760px; }
|
| .mission-copy h2 { margin: 5px 0 7px; font-size: clamp(18px, 2vw, 26px); font-weight: 520; letter-spacing: -.035em; }
|
| .mission-copy p:last-child { margin: 0; color: var(--muted); max-width: 690px; }
|
| .mission-meta { display: grid; grid-template-columns: repeat(3, auto); align-self: center; gap: 26px; }
|
| .mission-meta div { display: grid; gap: 5px; }
|
| .mission-meta span, .security-grid span, .mirror-metrics span, .strain-head span, .strain-sub, .overlay-label, .inspector-row span, .gate-result-box .eyebrow { color: var(--muted); font: 10px var(--mono); letter-spacing: .11em; }
|
| .mission-meta strong { font: 11px var(--mono); color: var(--acid); white-space: nowrap; }
|
|
|
| .world-section { grid-column: 1; padding: 18px 18px 14px; min-width: 0; }
|
| .section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
|
| .section-heading h2 { margin: 3px 0 0; font-size: 17px; font-weight: 580; letter-spacing: -.025em; }
|
| .heading-slash { color: var(--acid); padding: 0 5px; }
|
| .world-readout { display: flex; align-items: center; gap: 18px; padding-top: 5px; color: var(--muted); font: 10px var(--mono); }
|
| .live-chip { display: flex; align-items: center; gap: 8px; color: var(--acid); }
|
| .world-frame { position: relative; margin: 15px 0 13px; border: 1px solid #354147; background: #0c1115; overflow: hidden; }
|
| .world-svg { display: block; width: 100%; height: auto; min-height: 370px; }
|
| .world-backdrop { fill: #0b1114; }
|
| .world-grid { fill: url(#grid-pattern); }
|
| .world-zones path { fill: none; stroke: #27363b; stroke-width: 1; stroke-dasharray: 5 11; }
|
| .world-zones text, .world-callout text { fill: #536266; font: 10px var(--mono); letter-spacing: .12em; }
|
| .world-callout path { stroke: #46535a; stroke-width: 1; }
|
| .callout-left { transform: translate(40px, 46px); }
|
| .callout-right { transform: translate(760px, 486px); }
|
| .planned-route { fill: none; stroke: #42565a; stroke-width: 2; stroke-dasharray: 3 8; opacity: .75; }
|
| .trajectory-path { fill: none; stroke: var(--cyan); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: url(#soft-glow); opacity: .86; }
|
| .trajectory-path::after { content: ""; }
|
| .hazard-hit, .checkpoint-hit { cursor: pointer; outline: none; }
|
| .hazard-hit .hazard-ring { fill: none; stroke-width: 1; opacity: .24; }
|
| .hazard-hit .hazard-symbol { font: 30px/1 var(--sans); text-anchor: middle; dominant-baseline: middle; }
|
| .hazard-hit .hazard-name { fill: var(--muted); font: 9px var(--mono); letter-spacing: .09em; text-anchor: middle; }
|
| .hazard-hit .hazard-pulse { fill: none; stroke-width: 1.5; opacity: .7; }
|
| .hazard-hit.is-inactive { opacity: .34; }
|
| .hazard-hit.is-active .hazard-pulse { animation: pulse 2.2s ease-in-out infinite; }
|
| .hazard-hit.is-selected .hazard-ring, .hazard-hit:focus .hazard-ring { opacity: .95; stroke: var(--ink); stroke-dasharray: 3 3; }
|
| .hazard-hit.type-unsafe .hazard-symbol, .hazard-hit.type-unsafe .hazard-pulse, .hazard-hit.type-unsafe .hazard-ring { fill: var(--red); stroke: var(--red); color: var(--red); }
|
| .hazard-hit.type-invariant .hazard-symbol, .hazard-hit.type-invariant .hazard-pulse, .hazard-hit.type-invariant .hazard-ring { fill: var(--violet); stroke: var(--violet); color: var(--violet); }
|
| .hazard-hit.type-permission .hazard-symbol, .hazard-hit.type-permission .hazard-pulse, .hazard-hit.type-permission .hazard-ring { fill: var(--orange); stroke: var(--orange); color: var(--orange); }
|
| .hazard-hit.type-unknown .hazard-symbol, .hazard-hit.type-unknown .hazard-pulse, .hazard-hit.type-unknown .hazard-ring { fill: var(--blue); stroke: var(--blue); color: var(--blue); }
|
| .hazard-hit.type-tool .hazard-symbol, .hazard-hit.type-tool .hazard-pulse, .hazard-hit.type-tool .hazard-ring { fill: var(--cyan); stroke: var(--cyan); color: var(--cyan); }
|
| .hazard-hit.type-resource .hazard-symbol, .hazard-hit.type-resource .hazard-pulse, .hazard-hit.type-resource .hazard-ring { fill: var(--acid); stroke: var(--acid); color: var(--acid); }
|
| .checkpoint-hit { color: var(--acid); }
|
| .checkpoint-hit circle { fill: #101a18; stroke: currentColor; stroke-width: 1.5; }
|
| .checkpoint-hit .checkpoint-core { fill: currentColor; opacity: .8; }
|
| .checkpoint-hit text { fill: currentColor; font: 9px var(--mono); letter-spacing: .08em; text-anchor: middle; }
|
| .checkpoint-hit.is-inactive { color: #536266; opacity: .7; }
|
| .checkpoint-hit.is-selected circle { stroke: var(--ink); stroke-width: 2; }
|
| .agent { color: var(--acid); transition: transform .55s cubic-bezier(.22, .8, .22, 1); }
|
| .agent-orbit { fill: none; stroke: currentColor; stroke-width: 1; opacity: .75; }
|
| .orbit-two { stroke: var(--cyan); stroke-dasharray: 2 6; }
|
| .agent-chevron { fill: #11170e; stroke: currentColor; stroke-width: 2; }
|
| .agent-core { fill: var(--cyan); }
|
| .agent-label { fill: var(--acid); font: 12px var(--mono); letter-spacing: .12em; }
|
| .agent-action-label { fill: #97a5a5; font: 9px var(--mono); letter-spacing: .06em; }
|
| .agent-hit-area { transform: translate(100px 460px); fill: transparent; cursor: pointer; }
|
| .agent-hit-area circle { stroke: transparent; }
|
| .agent-hit-area:hover circle, .agent-hit-area:focus circle { stroke: var(--acid); stroke-dasharray: 3 5; }
|
| .world-overlay { position: absolute; max-width: min(290px, 46%); display: grid; gap: 3px; padding: 10px 12px; background: rgba(9, 13, 15, .88); border-left: 2px solid var(--acid); }
|
| .overlay-top-left { top: 14px; left: 14px; }
|
| .overlay-bottom-right { right: 14px; bottom: 14px; text-align: right; border-left: 0; border-right: 2px solid var(--cyan); }
|
| .world-overlay strong { font: 13px var(--mono); color: var(--ink); }
|
| .overlay-sub { color: var(--muted); font-size: 11px; }
|
| .overlay-bottom-right .overlay-sub { color: var(--cyan); font: 10px var(--mono); }
|
| .legend { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 15px; color: var(--muted); font: 9px var(--mono); letter-spacing: .05em; }
|
| .legend span { display: inline-flex; align-items: center; gap: 5px; }
|
| .legend-glyph { font-style: normal; font-size: 16px; line-height: 1; }
|
| .legend-glyph.unsafe { color: var(--red); }.legend-glyph.invariant { color: var(--violet); }.legend-glyph.permission { color: var(--orange); }.legend-glyph.unknown { color: var(--blue); }.legend-glyph.tool { color: var(--cyan); }.legend-glyph.resource { color: var(--acid); }.legend-glyph.checkpoint { color: var(--acid); }
|
| .world-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--line); }
|
| .world-stats div { display: grid; gap: 3px; }.world-stats span { color: var(--muted); font: 9px var(--mono); letter-spacing: .08em; }.world-stats strong { color: var(--ink); font: 16px var(--mono); }.world-stats div:nth-child(3) strong { color: var(--acid); }.world-stats div:nth-child(4) strong { color: var(--orange); }
|
|
|
| .side-column { grid-column: 2; display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 14px; min-width: 0; }
|
| .inspector, .verification, .trace, .objectives, .task-graph, .tools, .security { padding: 17px; }
|
| .compact-heading h2 { font-size: 15px; }
|
| .selection-chip, .gate-badge, .secure-badge { padding: 4px 6px; border: 1px solid var(--line-bright); color: var(--muted); font: 9px var(--mono); letter-spacing: .1em; }
|
| .secure-badge { color: var(--acid); border-color: #526637; }
|
| .inspector-content { margin-top: 18px; }
|
| .inspector-entity { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
|
| .inspector-entity h3 { margin: 0; font: 24px var(--mono); letter-spacing: -.05em; }
|
| .inspector-entity p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
|
| .entity-glyph { width: 34px; height: 34px; display: grid; place-items: center; color: var(--acid); border: 1px solid currentColor; font-size: 21px; }
|
| .inspector-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 15px; padding: 15px 0; }
|
| .inspector-row { display: grid; gap: 2px; min-width: 0; }
|
| .inspector-row strong { font: 11px var(--mono); color: var(--ink); overflow-wrap: anywhere; }
|
| .inspector-row strong.acid { color: var(--acid); }.inspector-row strong.cyan { color: var(--cyan); }.inspector-row strong.orange { color: var(--orange); }.inspector-row strong.red { color: var(--red); }
|
| .inspector-foot { padding: 11px 12px; background: var(--panel-raised); color: var(--muted); font-size: 11px; }
|
| .inspector-foot code { color: var(--cyan); font: 11px var(--mono); }
|
|
|
| .verification { background: #11151a; }
|
| .gate-badge { color: var(--orange); border-color: #6d4e32; }.gate-badge.pass { color: var(--acid); border-color: #526637; }.gate-badge.fail { color: var(--red); border-color: #6e3a37; }
|
| .gate-flow { display: flex; align-items: center; justify-content: space-between; margin: 17px 0 13px; color: var(--faint); font: 9px var(--mono); }
|
| .gate-flow i { color: var(--line-bright); font-style: normal; }
|
| .gate-node { padding: 5px 7px; border: 1px solid var(--line); }.gate-node.active { border-color: var(--cyan); color: var(--cyan); }
|
| .gate-node.pass { border-color: var(--acid); color: var(--acid); }.gate-node.fail { border-color: var(--red); color: var(--red); }
|
| .gate-result-box { display: grid; gap: 4px; padding: 12px; border-left: 2px solid var(--orange); background: #17191a; }
|
| .gate-result-box strong { color: var(--ink); font: 16px var(--mono); }.gate-result-box span:last-child { color: var(--muted); font-size: 11px; }
|
| .gate-result-box.pass { border-color: var(--acid); }.gate-result-box.fail { border-color: var(--red); }
|
|
|
| .trace { min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
|
| .trace-count { color: var(--cyan); font-size: 10px; padding-top: 4px; }
|
| .trace-list { overflow: auto; margin: 14px -7px -4px; padding: 0 7px 4px; min-height: 210px; }
|
| .trace-item { width: 100%; display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 8px; padding: 8px 7px; border: 1px solid transparent; border-left: 2px solid var(--line); background: transparent; color: var(--muted); text-align: left; }
|
| .trace-item:hover, .trace-item:focus-visible { background: var(--panel-raised); border-color: var(--line); }
|
| .trace-item.is-current { border-left-color: var(--acid); background: #171d18; color: var(--ink); }
|
| .trace-time, .trace-status { font: 9px var(--mono); color: var(--faint); }.trace-status { color: var(--acid); }
|
| .trace-type { font: 10px var(--mono); letter-spacing: .04em; }.trace-note { grid-column: 2 / -1; font-size: 10px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
| .trace-item.hazard .trace-type, .trace-item.failure .trace-type { color: var(--red); }.trace-item.verify .trace-type { color: var(--acid); }
|
|
|
| .lower-grid { grid-column: 1 / -1; display: grid; grid-template-columns: 1.05fr 1.25fr .9fr; gap: 14px; }
|
| .objectives { grid-row: span 2; }.progress-readout { color: var(--acid); font: 11px var(--mono); }
|
| .objective-list { display: grid; gap: 10px; margin-top: 17px; }
|
| .objective { display: grid; grid-template-columns: 17px 1fr auto; align-items: center; gap: 9px; color: var(--muted); font-size: 11px; }
|
| .objective-marker { width: 13px; height: 13px; border: 1px solid #4b5959; color: transparent; display: grid; place-items: center; font: 10px var(--mono); }
|
| .objective.is-complete { color: var(--ink); }.objective.is-complete .objective-marker { border-color: var(--acid); color: var(--acid); }.objective.is-current { color: var(--acid); }.objective.is-current .objective-marker { border-color: var(--acid); box-shadow: 0 0 0 2px rgba(210, 242, 102, .1); }
|
| .objective-status { color: var(--faint); font: 9px var(--mono); }.objective.is-complete .objective-status { color: var(--acid); }.objective.is-current .objective-status { color: var(--cyan); }
|
|
|
| .graph-track { display: flex; align-items: center; gap: 5px; margin: 18px 0 20px; overflow-x: auto; padding: 5px 0 8px; }
|
| .graph-node { flex: 0 0 auto; display: grid; place-items: center; min-width: 64px; padding: 8px 9px; border: 1px solid var(--line-bright); color: var(--muted); font: 9px var(--mono); }
|
| .graph-node::after { content: ""; }.graph-arrow { color: var(--faint); flex: 0 0 auto; }.graph-node.is-complete { color: var(--acid); border-color: #526637; }.graph-node.is-current { color: var(--cyan); border-color: var(--cyan); background: #142022; }.graph-node.is-recovery { color: var(--orange); border-color: var(--orange); }
|
| .mirror-loop { border-top: 1px solid var(--line); padding-top: 14px; }.mirror-loop-heading { display: flex; justify-content: space-between; gap: 10px; }.mirror-status { color: var(--orange); font: 9px var(--mono); letter-spacing: .1em; }
|
| .mirror-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; }.mirror-metrics div { display: grid; gap: 4px; }.mirror-metrics strong { color: var(--ink); font: 16px var(--mono); }
|
| .mirror-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--cyan); font: 9px var(--mono); }.mirror-chain i { color: var(--faint); font-style: normal; }
|
|
|
| .tool-list { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 16px; margin-top: 16px; }.tool-item { display: grid; grid-template-columns: 7px 1fr auto; align-items: center; gap: 7px; min-width: 0; }.tool-light { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); }.tool-item.status-available .tool-light { background: var(--cyan); }.tool-item.status-verified .tool-light { background: var(--acid); }.tool-item.status-running .tool-light { background: var(--orange); box-shadow: 0 0 8px rgba(243, 163, 94, .7); }.tool-item.status-blocked .tool-light { background: var(--red); }.tool-name { color: var(--white-soft); font: 10px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.tool-status { color: var(--faint); font: 8px var(--mono); }
|
| .tool-call-card { margin-top: 17px; padding: 11px 12px; border-left: 2px solid var(--cyan); background: #0c1114; }.tool-call-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 9px; }.tool-call-head .mono { color: var(--orange); font-size: 9px; }.tool-call-card code { display: block; color: var(--cyan); font: 10px/1.5 var(--mono); white-space: pre-wrap; }.tool-call-card pre { margin: 5px 0 0; color: var(--muted); font: 10px/1.5 var(--mono); white-space: pre-wrap; }
|
|
|
| .security-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px 16px; margin-top: 18px; }.security-grid div { display: grid; gap: 4px; }.security-grid strong { color: var(--acid); font: 10px var(--mono); }.security-note { margin: 18px 0 0; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }
|
|
|
| .control-deck { grid-column: 1 / -1; display: grid; grid-template-columns: 105px auto minmax(210px, 1fr) 220px; align-items: center; gap: 20px; padding: 15px 18px; background: #11171a; border-color: #3a4849; }
|
| .controls-label h2 { margin: 3px 0 0; font-size: 15px; }.control-buttons { display: flex; gap: 7px; }.control-buttons button { height: 33px; border: 1px solid var(--line-bright); background: transparent; color: var(--ink); padding: 0 11px; font: 10px var(--mono); letter-spacing: .08em; }.control-buttons button:hover { border-color: var(--acid); color: var(--acid); }.control-buttons .primary-control { display: flex; gap: 8px; align-items: center; color: var(--page); background: var(--acid); border-color: var(--acid); font-weight: 700; }.control-buttons .primary-control:hover { color: var(--page); background: #e0fa84; }.icon-control span { white-space: nowrap; }
|
| .timeline-wrap { min-width: 0; }.timeline-labels { display: flex; justify-content: space-between; color: var(--muted); font: 9px var(--mono); }.timeline-labels span:nth-child(2) { color: var(--cyan); }
|
| input[type="range"] { width: 100%; height: 18px; margin: 7px 0 0; accent-color: var(--acid); cursor: pointer; }.timeline-ticks { display: flex; justify-content: space-between; padding: 1px 3px 0; }.timeline-ticks i { width: 1px; height: 4px; background: var(--line-bright); }
|
| .strain-readout { display: grid; gap: 5px; }.strain-head, .strain-sub { display: flex; justify-content: space-between; gap: 10px; }.strain-head strong { font: 13px var(--mono); color: var(--orange); }.meter { height: 7px; border: 1px solid #3c4945; background: #0b100f; padding: 1px; }.meter span { display: block; height: 100%; width: 0; background: var(--orange); transition: width .35s ease; }.strain-sub { font-size: 8px; letter-spacing: .05em; }.strain-sub span:last-child { color: var(--cyan); }
|
| .footer-bar { display: flex; justify-content: space-between; gap: 16px; padding: 16px 2px 0; color: var(--faint); font: 9px var(--mono); letter-spacing: .08em; }.footer-right i { color: var(--acid); font-style: normal; padding: 0 6px; }
|
| .skip-link { position: fixed; z-index: 10; top: 8px; left: 8px; padding: 8px 10px; background: var(--acid); color: var(--page); transform: translateY(-150%); }.skip-link:focus { transform: translateY(0); }
|
| .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
|
|
|
| @keyframes pulse { 0%, 100% { opacity: .28; transform: scale(1); transform-origin: center; } 50% { opacity: .9; transform: scale(1.13); } }
|
|
|
| @media (prefers-reduced-motion: reduce) {
|
| html { scroll-behavior: auto; }
|
| *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
|
| }
|
|
|
| @media (max-width: 1180px) {
|
| .app-shell { padding-inline: 20px; }.mission-meta { gap: 16px; }.page-grid { grid-template-columns: minmax(0, 1fr) 320px; }.control-deck { grid-template-columns: 90px auto minmax(180px, 1fr); }.strain-readout { grid-column: 1 / -1; grid-row: 2; }
|
| }
|
|
|
| @media (max-width: 860px) {
|
| .topbar { align-items: flex-start; flex-direction: column; gap: 16px; }.header-status { padding-left: 52px; }.mission-strip { flex-direction: column; }.mission-meta { grid-template-columns: repeat(3, 1fr); }.page-grid { display: block; }.world-section, .side-column, .lower-grid, .control-deck { margin-top: 14px; }.side-column { display: grid; grid-template-columns: 1fr 1fr; }.trace { grid-column: 1 / -1; max-height: 430px; }.lower-grid { display: grid; grid-template-columns: 1fr 1fr; }.objectives { grid-row: auto; }.tools { grid-column: 1 / -1; }.security { grid-column: 1 / -1; }.control-deck { grid-template-columns: 1fr 1.2fr; }.timeline-wrap { grid-column: 1 / -1; grid-row: 2; }.strain-readout { grid-column: 1 / -1; grid-row: 3; }
|
| }
|
|
|
| @media (max-width: 590px) {
|
| .app-shell { padding: 18px 11px 15px; }.brand-mark { width: 30px; height: 30px; }.brand-lockup { gap: 12px; }.brand-lockup h1 { font-size: 21px; }.header-status { padding-left: 42px; flex-wrap: wrap; white-space: normal; }.header-divider { display: none; }.mission-strip, .world-section, .inspector, .verification, .trace, .objectives, .task-graph, .tools, .security, .control-deck { padding: 14px; }.mission-meta { grid-template-columns: 1fr 1fr; gap: 13px; }.mission-meta div:last-child { grid-column: 1 / -1; }.world-readout { gap: 8px; flex-direction: column; align-items: flex-end; }.world-svg { min-height: 300px; }.world-overlay { max-width: 55%; padding: 7px 8px; }.overlay-sub { font-size: 10px; }.callout-right { transform: translate(680px, 486px); }.legend { gap: 9px 12px; }.world-stats { grid-template-columns: repeat(3, 1fr); row-gap: 13px; }.side-column, .lower-grid { display: block; }.inspector, .verification, .trace, .objectives, .task-graph, .tools, .security { margin-top: 14px; }.trace { max-height: none; }.trace-list { max-height: 360px; }.tool-list { grid-template-columns: 1fr; }.security-grid { grid-template-columns: 1fr 1fr; }.control-deck { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }.controls-label { grid-column: 1 / -1; }.control-buttons { grid-column: 1 / -1; flex-wrap: wrap; }.control-buttons button { flex: 1 1 auto; }.timeline-wrap { grid-column: 1 / -1; }.strain-readout { grid-column: 1 / -1; }.footer-bar { flex-direction: column; gap: 7px; }.footer-right { text-align: left; }.mirror-chain { line-height: 1.8; }
|
| }
|
|
|
