:root {
  color-scheme: dark;
  --space-0: #040810;
  --space-1: #07111d;
  --space-2: #0b1725;
  --panel: rgba(9, 19, 32, 0.82);
  --panel-solid: #0b1828;
  --panel-raised: rgba(17, 31, 48, 0.9);
  --border: rgba(151, 190, 218, 0.14);
  --border-strong: rgba(151, 190, 218, 0.28);
  --text: #f3f7fa;
  --muted: #91a7b8;
  --dim: #5e7588;
  --cyan: #69d6ff;
  --cyan-bright: #b5edff;
  --amber: #ffc76e;
  --green: #87e0b1;
  --danger: #ff9d97;
  --shadow: 0 24px 64px rgba(0, 0, 0, 0.42);
  --radius: 16px;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--space-0); }
body { color: var(--text); font-family: var(--sans); font-size: 15px; letter-spacing: -0.01em; }
button, input, select { font: inherit; color: inherit; }
button { border: 0; cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

#app { position: relative; width: 100%; height: 100%; overflow: hidden; background: radial-gradient(circle at 50% 45%, #101f31 0, #07111d 37%, #03070e 100%); }
#spaceCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
#spaceCanvas.dragging { cursor: grabbing; }

.topbar { position: absolute; z-index: 20; top: 0; left: 0; right: 0; height: 76px; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.topbar > * { pointer-events: auto; }
.brand-lockup { display: flex; gap: 11px; align-items: center; min-width: 230px; }
.brand-mark { position: relative; width: 29px; height: 29px; border: 1px solid rgba(117, 210, 246, .5); border-radius: 50%; display: grid; place-items: center; transform: rotate(-16deg); }
.brand-mark::before { content: ""; position: absolute; width: 42px; height: 14px; border: 1px solid rgba(117, 210, 246, .65); border-radius: 50%; }
.brand-mark span { width: 11px; height: 11px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 16px rgba(255, 199, 110, .65); }
.brand-mark i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--cyan-bright); right: -6px; top: 3px; }
.eyebrow, .panel-kicker { color: var(--dim); letter-spacing: .16em; font-size: 10px; font-weight: 650; }
.brand-name { margin-top: 2px; font-size: 17px; font-weight: 620; letter-spacing: -.02em; }
.mode-nav { display: flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: 999px; background: rgba(5, 13, 23, .48); backdrop-filter: blur(18px); }
.mode-button { padding: 8px 16px; border-radius: 999px; color: var(--muted); background: transparent; font-size: 13px; transition: .2s ease; }
.mode-button:hover { color: var(--text); }
.mode-button.active { color: var(--text); background: rgba(111, 211, 248, .14); box-shadow: inset 0 0 0 1px rgba(111, 211, 248, .18); }
.top-actions { display: flex; gap: 8px; min-width: 230px; justify-content: flex-end; }
.icon-button { width: 34px; height: 34px; display: grid; place-items: center; color: var(--muted); border: 1px solid var(--border); background: rgba(7, 17, 29, .56); border-radius: 50%; font-size: 18px; transition: .2s ease; }
.icon-button:hover { color: var(--cyan-bright); border-color: rgba(111, 211, 248, .42); transform: translateY(-1px); }

.experience { position: absolute; inset: 0; }
.scene-stage { position: absolute; inset: 0; overflow: hidden; }
.scene-meta { position: absolute; z-index: 4; top: 92px; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; letter-spacing: .12em; }
.scene-meta-left { left: 318px; }
.scene-meta-right { right: 362px; gap: 16px; }
.live-dot, .status-dot, .time-pulse { width: 6px; height: 6px; background: var(--green); border-radius: 50%; box-shadow: 0 0 0 4px rgba(135, 224, 177, .1), 0 0 12px rgba(135, 224, 177, .9); }
.meta-divider { width: 1px; height: 13px; background: var(--border-strong); margin: 0 5px; }
.minimal-button { padding: 4px 0; color: var(--muted); background: transparent; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.minimal-button:hover { color: var(--cyan-bright); }
.minimal-button span { color: var(--dim); }
.scene-center-copy { position: absolute; z-index: 3; left: 50%; top: 48%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; transition: opacity .4s ease, transform .4s ease; }
.scene-center-copy.hidden { opacity: 0; transform: translate(-50%, -47%); }
.center-orbit-glyph { position: relative; width: 105px; height: 67px; margin: 0 auto 20px; opacity: .8; }
.center-orbit-glyph span { position: absolute; inset: 9px 2px; border: 1px solid rgba(121, 212, 247, .24); border-radius: 50%; transform: rotate(24deg); }
.center-orbit-glyph span:nth-child(2) { inset: 17px -6px; transform: rotate(-27deg); border-color: rgba(255, 199, 110, .22); }
.center-orbit-glyph span:nth-child(3) { width: 14px; height: 14px; inset: 25px 45px; border: 0; background: var(--amber); box-shadow: 0 0 30px rgba(255, 199, 110, .8); }
.center-kicker { margin: 0 0 10px; color: var(--cyan); font-size: 10px; letter-spacing: .22em; font-weight: 650; }
.scene-center-copy h1 { margin: 0; font-size: clamp(36px, 4.2vw, 66px); font-weight: 320; line-height: .98; letter-spacing: -.065em; text-shadow: 0 8px 30px rgba(0,0,0,.5); }
.scene-center-copy h1 em, .welcome-copy h2 em { color: var(--cyan-bright); font-family: Georgia, serif; font-weight: 400; letter-spacing: -.06em; }
.center-hint { margin: 20px 0 0; color: rgba(198, 218, 230, .6); font-size: 12px; }

.panel { position: absolute; z-index: 10; border: 1px solid var(--border); background: linear-gradient(155deg, rgba(12, 25, 42, .88), rgba(7, 15, 26, .78)); box-shadow: var(--shadow); backdrop-filter: blur(24px); border-radius: var(--radius); }
.navigator-panel { left: 22px; top: 108px; bottom: 162px; width: 274px; display: flex; flex-direction: column; }
.inspector-panel { right: 22px; top: 108px; bottom: 162px; width: 324px; overflow: hidden; }
.panel-heading { display: flex; justify-content: space-between; align-items: flex-start; padding: 21px 19px 14px; }
.panel h2 { margin: 5px 0 0; font-size: 18px; font-weight: 560; letter-spacing: -.035em; }
.search-field { display: flex; align-items: center; gap: 8px; height: 39px; margin: 0 15px 12px; padding: 0 11px; border: 1px solid var(--border); border-radius: 9px; background: rgba(4, 11, 20, .5); color: var(--dim); }
.search-field:focus-within { border-color: rgba(105, 214, 255, .55); box-shadow: 0 0 0 3px rgba(105, 214, 255, .08); }
.search-field input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 13px; }
.search-field input::placeholder { color: var(--dim); }
kbd { border: 1px solid rgba(155, 195, 222, .2); border-bottom-color: rgba(155, 195, 222, .35); border-radius: 4px; padding: 2px 5px; color: var(--dim); background: rgba(255,255,255,.04); font-family: var(--mono); font-size: 10px; }
.filter-row { display: flex; gap: 6px; padding: 0 15px 11px; }
.filter-chip { padding: 6px 9px; border-radius: 999px; color: var(--muted); background: transparent; font-size: 11px; }
.filter-chip:hover { color: var(--text); }
.filter-chip.active { color: var(--cyan-bright); background: rgba(105, 214, 255, .1); }
.catalog-list { overflow: auto; padding: 0 9px 10px; scrollbar-width: thin; scrollbar-color: rgba(145, 183, 206, .28) transparent; }
.catalog-group-title { padding: 12px 10px 6px; color: var(--dim); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.catalog-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: transparent; text-align: left; color: var(--muted); transition: .18s ease; }
.catalog-item:hover { background: rgba(116, 204, 240, .08); color: var(--text); }
.catalog-item.selected { color: var(--text); background: linear-gradient(90deg, rgba(105, 214, 255, .15), rgba(105, 214, 255, .04)); box-shadow: inset 2px 0 0 var(--cyan); }
.catalog-orb { width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%; box-shadow: inset -5px -4px 8px rgba(0,0,0,.34), 0 0 8px color-mix(in srgb, var(--orb) 35%, transparent); background: var(--orb); }
.catalog-item.selected .catalog-orb { box-shadow: inset -5px -4px 8px rgba(0,0,0,.34), 0 0 12px color-mix(in srgb, var(--orb) 60%, transparent); }
.catalog-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.catalog-copy strong { color: inherit; font-size: 13px; font-weight: 560; }
.catalog-copy small { color: var(--dim); font-size: 10px; }
.catalog-footer { display: flex; gap: 8px; align-items: center; padding: 12px 17px 14px; border-top: 1px solid var(--border); color: var(--dim); font-size: 10px; }

.inspector-scroll { height: 100%; overflow: auto; scrollbar-width: thin; scrollbar-color: rgba(145, 183, 206, .28) transparent; }
.inspector-hero { position: relative; min-height: 145px; padding: 22px 20px 17px; overflow: hidden; border-bottom: 1px solid var(--border); background: radial-gradient(circle at 72% 33%, color-mix(in srgb, var(--hero) 29%, transparent), transparent 44%); }
.inspector-hero::after { content: ""; position: absolute; right: -35px; top: -45px; width: 190px; height: 190px; border: 1px solid color-mix(in srgb, var(--hero) 30%, transparent); border-radius: 50%; opacity: .65; }
.hero-kicker { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.hero-kicker i { width: 7px; height: 7px; border-radius: 50%; background: var(--hero); box-shadow: 0 0 10px var(--hero); }
.inspector-hero h2 { position: relative; z-index: 1; margin: 11px 0 1px; font-size: 33px; font-weight: 340; letter-spacing: -.07em; }
.inspector-hero p { position: relative; z-index: 1; margin: 0; color: var(--muted); font-size: 12px; }
.inspector-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 13px 15px 12px; }
.inspector-action { display: grid; gap: 5px; place-items: center; min-height: 52px; border: 1px solid var(--border); border-radius: 9px; color: var(--muted); background: rgba(255,255,255,.025); font-size: 10px; }
.inspector-action span { font-size: 17px; color: var(--cyan); }
.inspector-action:hover { border-color: rgba(105,214,255,.42); color: var(--text); background: rgba(105,214,255,.08); }
.inspector-section { padding: 0 18px 15px; }
.inspector-section-title { display: flex; justify-content: space-between; align-items: center; margin: 8px 0 10px; color: var(--dim); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.inspector-section-title button { color: var(--cyan); background: transparent; font-size: 10px; }
.fact-copy { margin: 0 0 13px; color: #c5d3dd; font-size: 13px; line-height: 1.55; }
.data-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; overflow: hidden; border: 1px solid var(--border); border-radius: 10px; background: var(--border); }
.data-cell { min-height: 55px; padding: 10px; background: rgba(5, 13, 23, .58); }
.data-cell small { display: block; color: var(--dim); font-size: 10px; }
.data-cell strong { display: block; margin-top: 4px; color: var(--text); font-family: var(--mono); font-size: 12px; font-weight: 500; }
.source-note { display: flex; gap: 9px; align-items: flex-start; margin-top: 12px; padding: 10px; border: 1px solid rgba(255,199,110,.16); border-radius: 9px; background: rgba(255,199,110,.05); color: #cdbf9e; font-size: 10px; line-height: 1.45; }
.source-note span { color: var(--amber); }
.follow-banner { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 18px 13px; padding: 9px 10px; border: 1px solid rgba(105,214,255,.32); border-radius: 8px; color: var(--cyan-bright); background: rgba(105,214,255,.08); font-size: 11px; }
.follow-banner button { color: var(--cyan); background: transparent; font-size: 12px; }

.scene-hint { position: absolute; z-index: 7; left: 50%; bottom: 171px; transform: translateX(-50%); display: flex; align-items: center; gap: 9px; max-width: min(400px, calc(100vw - 50px)); padding: 10px 12px; border: 1px solid rgba(105,214,255,.18); border-radius: 999px; color: #c7dae4; background: rgba(5, 15, 27, .62); box-shadow: 0 10px 35px rgba(0,0,0,.25); backdrop-filter: blur(18px); font-size: 11px; transition: .25s ease; }
.scene-hint.hidden { opacity: 0; pointer-events: none; transform: translate(-50%, 8px); }
.hint-icon { color: var(--amber); font-size: 14px; }
.scene-hint strong { color: var(--text); font-weight: 600; }
.hint-close { margin-left: 4px; color: var(--dim); background: transparent; font-size: 15px; }
.orientation-map { position: absolute; z-index: 6; left: 311px; bottom: 177px; width: 118px; padding: 5px; border: 1px solid var(--border); border-radius: 12px; background: rgba(6, 16, 27, .6); backdrop-filter: blur(15px); }
.orientation-map canvas { display: block; width: 106px; height: 106px; opacity: .9; }
.orientation-label { display: flex; justify-content: space-between; align-items: center; padding: 3px 3px 1px; color: var(--dim); font-size: 8px; letter-spacing: .12em; }
.north-mark { color: var(--cyan); font-family: var(--mono); }
.scale-badge { position: absolute; z-index: 5; right: 356px; bottom: 180px; display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 10px; background: rgba(6, 15, 26, .56); backdrop-filter: blur(15px); }
.scale-icon { color: var(--cyan); font-size: 20px; }
.scale-badge strong, .scale-badge small { display: block; }
.scale-badge strong { font-size: 11px; font-weight: 600; }
.scale-badge small { margin-top: 2px; color: var(--dim); font-size: 9px; }
.scale-badge button { margin-left: 4px; width: 18px; height: 18px; border: 1px solid var(--border-strong); border-radius: 50%; color: var(--muted); background: transparent; font-size: 10px; }
.scene-toast { position: absolute; z-index: 30; left: 50%; top: 88px; transform: translate(-50%, -14px); opacity: 0; padding: 9px 13px; border: 1px solid rgba(105,214,255,.3); border-radius: 999px; color: var(--cyan-bright); background: rgba(6, 18, 31, .92); box-shadow: var(--shadow); font-size: 12px; transition: .24s ease; pointer-events: none; }
.scene-toast.visible { opacity: 1; transform: translate(-50%, 0); }

.time-dock { position: absolute; z-index: 15; left: 50%; bottom: 20px; transform: translateX(-50%); width: min(840px, calc(100% - 48px)); min-height: 100px; display: grid; grid-template-columns: 152px 260px 1fr 106px; align-items: center; gap: 15px; padding: 14px 16px; border: 1px solid var(--border-strong); border-radius: 18px; background: rgba(7, 16, 28, .84); box-shadow: 0 18px 58px rgba(0,0,0,.45); backdrop-filter: blur(25px); }
.time-context-title { display: flex; gap: 8px; align-items: center; color: var(--green); font-size: 9px; letter-spacing: .12em; }
.date-display { margin-top: 8px; color: var(--text); font-family: var(--mono); font-size: 11px; white-space: nowrap; }
.date-input { width: 122px; margin-top: 5px; border: 0; color: var(--dim); outline: 0; background: transparent; font-family: var(--mono); font-size: 9px; color-scheme: dark; }.date-input:focus { color: var(--cyan); }
.time-quick-actions { display: flex; gap: 8px; margin-top: 7px; }.time-quick-actions button { padding: 0; color: var(--cyan); background: transparent; font-family: var(--mono); font-size: 9px; text-transform: uppercase; }.time-quick-actions button + button { color: var(--dim); }
.time-controls { display: flex; align-items: center; gap: 9px; }
.round-control { width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 50%; color: var(--muted); background: rgba(255,255,255,.025); font-family: var(--mono); font-size: 10px; }
.round-control:hover { color: var(--cyan); border-color: rgba(105,214,255,.4); }
.play-control { width: 43px; height: 43px; display: grid; place-items: center; border: 1px solid rgba(105,214,255,.45); border-radius: 50%; color: #04101a; background: var(--cyan); box-shadow: 0 0 20px rgba(105,214,255,.18); font-size: 13px; }
.play-control:hover { background: var(--cyan-bright); transform: scale(1.04); }
.rate-control { flex: 1; min-width: 0; }
.rate-control label { display: block; margin: 0 0 4px; color: var(--dim); font-size: 9px; letter-spacing: .12em; }
.rate-control select { width: 100%; border: 0; color: var(--text); outline: 0; background: transparent; font-family: var(--mono); font-size: 11px; cursor: pointer; }
.rate-control option { color: #eaf5fb; background: #0b1828; }
.timeline-wrap { min-width: 0; }
.timeline-labels { display: flex; justify-content: space-between; margin-bottom: 5px; color: var(--dim); font-family: var(--mono); font-size: 9px; }
#timeline { width: 100%; accent-color: var(--cyan); cursor: pointer; }
.dock-actions { display: flex; justify-content: flex-end; gap: 4px; }
.dock-action { min-width: 31px; display: grid; justify-items: center; gap: 2px; padding: 3px 5px; color: var(--muted); background: transparent; }
.dock-action span { font-size: 17px; }
.dock-action small { color: var(--dim); font-size: 9px; }
.dock-action:hover { color: var(--cyan); }

.mobile-drawer-actions { display: none; }
.modal-backdrop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 22px; background: rgba(1, 5, 10, .68); backdrop-filter: blur(14px); }
.modal-backdrop.hidden { display: none; }
.welcome-card { position: relative; width: min(720px, 100%); min-height: 340px; display: grid; grid-template-columns: 42% 58%; overflow: hidden; border: 1px solid rgba(161, 208, 232, .2); border-radius: 22px; background: linear-gradient(125deg, #0d1c2c, #08111e 66%); box-shadow: 0 30px 100px rgba(0,0,0,.6); }
.welcome-art { position: relative; overflow: hidden; background: radial-gradient(circle at 40% 44%, rgba(255, 182, 83, .15), transparent 26%), radial-gradient(circle at 55% 50%, #10273a, #06101b 62%); }
.welcome-art::before { content: ""; position: absolute; inset: 0; opacity: .58; background-image: radial-gradient(circle at 14% 18%, rgba(255,255,255,.8) 0 1px, transparent 1.4px), radial-gradient(circle at 82% 26%, rgba(143,218,255,.65) 0 1px, transparent 1.3px), radial-gradient(circle at 70% 77%, rgba(255,255,255,.55) 0 1px, transparent 1.2px), radial-gradient(circle at 24% 74%, rgba(255,255,255,.5) 0 1px, transparent 1.3px); }
.welcome-sun { position: absolute; left: 34%; top: 36%; width: 76px; height: 76px; border-radius: 50%; background: radial-gradient(circle at 35% 32%, #fff6c2 0 8%, #ffc65b 34%, #eb782d 72%, #7d291d 100%); box-shadow: 0 0 35px rgba(255, 176, 65, .7), 0 0 90px rgba(255, 116, 49, .25); }
.welcome-orbit { position: absolute; left: 50%; top: 50%; border: 1px solid rgba(120, 214, 248, .34); border-radius: 50%; transform: translate(-50%, -50%) rotate(-20deg); }
.orbit-a { width: 150px; height: 52px; }.orbit-b { width: 205px; height: 76px; border-color: rgba(255, 199, 110, .24); }.orbit-c { width: 275px; height: 105px; border-color: rgba(120, 214, 248, .18); }
.welcome-copy { position: relative; padding: 45px 42px 30px 31px; align-self: center; }
.welcome-copy h2 { margin: 11px 0 13px; font-size: 37px; line-height: .96; letter-spacing: -.065em; font-weight: 320; }
.welcome-copy p { max-width: 350px; margin: 0; color: var(--muted); line-height: 1.6; font-size: 13px; }
.welcome-actions { display: flex; gap: 8px; margin-top: 23px; flex-wrap: wrap; }
.primary-button, .secondary-button { padding: 11px 13px; border-radius: 8px; font-size: 12px; }
.primary-button { color: #06131d; background: var(--cyan); }.primary-button:hover { background: var(--cyan-bright); }
.secondary-button { border: 1px solid var(--border-strong); color: var(--text); background: rgba(255,255,255,.03); }.secondary-button:hover { border-color: rgba(105,214,255,.5); }
.primary-button span, .secondary-button span { margin-left: 8px; }
.text-button { margin-top: 16px; padding: 3px 0; color: var(--muted); background: transparent; font-size: 11px; }.text-button:hover { color: var(--cyan); }
.modal-close { position: absolute; right: 16px; top: 13px; z-index: 2; width: 28px; height: 28px; border-radius: 50%; color: var(--muted); background: rgba(255,255,255,.04); font-size: 20px; }.modal-close:hover { color: var(--text); background: rgba(255,255,255,.1); }
.tool-card, .help-card { width: min(780px, 100%); max-height: min(760px, calc(100vh - 40px)); overflow: auto; position: relative; border: 1px solid var(--border-strong); border-radius: 18px; background: linear-gradient(150deg, #0d1e30, #07111e); box-shadow: var(--shadow); }
.tool-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 25px 26px 19px; border-bottom: 1px solid var(--border); }.tool-header h2, .help-card h2 { margin: 6px 0 0; font-size: 25px; font-weight: 420; letter-spacing: -.055em; }
.tool-header .modal-close, .help-card .modal-close { position: static; }
.tool-body { padding: 22px 26px 28px; }
.tool-intro { max-width: 590px; margin: 0 0 18px; color: var(--muted); line-height: 1.55; font-size: 13px; }
.compare-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.compare-card { padding: 15px; border: 1px solid var(--border); border-radius: 12px; background: rgba(255,255,255,.025); }.compare-card.featured { border-color: rgba(105,214,255,.36); background: rgba(105,214,255,.06); }
.compare-orb { width: 42px; height: 42px; margin-bottom: 12px; border-radius: 50%; background: var(--orb); box-shadow: inset -10px -8px 14px rgba(0,0,0,.34), 0 0 18px color-mix(in srgb, var(--orb) 35%, transparent); }
.compare-card h3 { margin: 0; font-size: 15px; font-weight: 560; }.compare-card small { color: var(--dim); font-size: 10px; }.compare-stat { display: flex; justify-content: space-between; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border); color: var(--dim); font-size: 10px; }.compare-stat strong { color: var(--text); font-family: var(--mono); font-weight: 500; }
.ratio-bar { height: 8px; margin: 15px 0 7px; border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden; }.ratio-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), #b1ecff); }
.tool-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); color: var(--dim); font-size: 10px; }.tool-footer .secondary-button { padding: 8px 11px; }
.scale-lab { display: grid; grid-template-columns: 1.35fr .65fr; gap: 18px; }.scale-stage { min-height: 255px; position: relative; display: flex; align-items: center; justify-content: center; gap: 25px; padding: 22px; border: 1px solid var(--border); border-radius: 14px; background: radial-gradient(circle at 50% 45%, rgba(105,214,255,.08), transparent 55%), rgba(3,10,18,.5); }.scale-stage::after { content: "escala linear · diâmetros relativos"; position: absolute; left: 14px; bottom: 12px; color: var(--dim); font-family: var(--mono); font-size: 9px; }.scale-planet { border-radius: 50%; box-shadow: inset -10px -8px 16px rgba(0,0,0,.34), 0 0 20px rgba(105,214,255,.15); }.scale-control-list { display: grid; align-content: start; gap: 8px; }.scale-option { padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: rgba(255,255,255,.025); }.scale-option label { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; }.scale-option input { width: 100%; margin-top: 10px; accent-color: var(--cyan); }
.tour-progress { height: 4px; border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden; }.tour-progress span { display: block; height: 100%; background: var(--cyan); }.tour-stop { display: grid; grid-template-columns: 130px 1fr; gap: 23px; align-items: center; }.tour-visual { min-height: 150px; border: 1px solid var(--border); border-radius: 12px; background: radial-gradient(circle at 48% 48%, rgba(255,199,110,.35) 0 5%, transparent 6%), radial-gradient(circle at 64% 50%, rgba(91,194,237,.55) 0 3%, transparent 4%), radial-gradient(circle at 75% 50%, rgba(255,255,255,.25) 0 2%, transparent 3%), #06101b; }.tour-copy h3 { margin: 0 0 7px; font-size: 21px; font-weight: 420; }.tour-copy p { margin: 0; color: var(--muted); line-height: 1.55; font-size: 13px; }.tour-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 19px; }.tour-nav-actions { display: flex; gap: 7px; }
.activity-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }.activity-card { padding: 15px; border: 1px solid var(--border); border-radius: 11px; background: rgba(255,255,255,.025); }.activity-card strong { display: block; margin-bottom: 6px; font-size: 13px; }.activity-card p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }.activity-card button { margin-top: 13px; color: var(--cyan); background: transparent; font-size: 11px; }
.help-card { padding: 24px 26px 25px; }.help-card .tool-header { padding: 0 0 17px; border-bottom: 1px solid var(--border); }.shortcut-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 18px; background: var(--border); border: 1px solid var(--border); border-radius: 11px; overflow: hidden; }.shortcut-grid div { display: flex; align-items: center; gap: 10px; padding: 13px; background: rgba(5, 14, 24, .72); color: var(--muted); font-size: 12px; }.shortcut-grid kbd { min-width: 39px; text-align: center; color: var(--text); }.help-note { display: flex; gap: 10px; margin-top: 18px; padding: 12px; border: 1px solid rgba(255,199,110,.17); border-radius: 9px; color: #cfbf9d; background: rgba(255,199,110,.05); font-size: 11px; line-height: 1.5; }.help-note span { color: var(--amber); }.help-note p { margin: 0; }
.command-card { width: min(560px, 100%); overflow: hidden; border: 1px solid var(--border-strong); border-radius: 14px; background: #0b1828; box-shadow: var(--shadow); }.command-search { display: flex; align-items: center; gap: 10px; padding: 15px; border-bottom: 1px solid var(--border); }.command-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 16px; }.command-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 15px; color: var(--muted); background: transparent; width: 100%; text-align: left; }.command-row:hover, .command-row.active { color: var(--text); background: rgba(105,214,255,.1); }.command-row small { color: var(--dim); }
.direction-control { color: var(--cyan); font-size: 16px; }
.lab-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }.lab-tab { padding: 8px 10px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); background: rgba(255,255,255,.025); font-size: 11px; }.lab-tab:hover, .lab-tab.active { border-color: rgba(105,214,255,.42); color: var(--cyan-bright); background: rgba(105,214,255,.08); }
.lab-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }.lab-card { min-height: 132px; padding: 14px; border: 1px solid var(--border); border-radius: 11px; background: radial-gradient(circle at 80% 20%, rgba(105,214,255,.1), transparent 42%), rgba(255,255,255,.025); }.lab-card strong { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 560; }.lab-card p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }.lab-card button { margin-top: 12px; color: var(--cyan); background: transparent; font-size: 11px; }
.lab-layout { display: grid; grid-template-columns: 1.1fr .9fr; gap: 17px; }.lab-visual { min-height: 230px; position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: 13px; background: radial-gradient(circle at 48% 52%, rgba(255,199,110,.24) 0 3%, transparent 3.8%), radial-gradient(circle at 48% 52%, rgba(255,199,110,.08) 0 20%, transparent 21%), #06101b; }.lab-visual::before, .lab-visual::after { content: ""; position: absolute; left: 7%; right: 7%; top: 50%; border-top: 1px dashed rgba(139,205,228,.28); transform: rotate(-15deg); }.lab-visual::after { transform: rotate(15deg); opacity: .5; }.lab-controls { display: grid; gap: 9px; align-content: start; }.lab-control { padding: 11px; border: 1px solid var(--border); border-radius: 9px; background: rgba(255,255,255,.025); }.lab-control label { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; }.lab-control strong { color: var(--text); font-family: var(--mono); font-weight: 500; }.lab-control input { width: 100%; margin-top: 9px; accent-color: var(--cyan); }.lab-result { margin-top: 10px; padding: 11px; border: 1px solid rgba(105,214,255,.2); border-radius: 9px; color: var(--cyan-bright); background: rgba(105,214,255,.05); font-family: var(--mono); font-size: 11px; line-height: 1.55; }
.journal-layout { display: grid; grid-template-columns: 1fr .85fr; gap: 16px; }.journal-layout textarea { width: 100%; min-height: 126px; resize: vertical; padding: 12px; border: 1px solid var(--border); border-radius: 10px; outline: 0; color: var(--text); background: rgba(3,10,18,.58); line-height: 1.5; font-size: 13px; }.journal-layout textarea:focus { border-color: rgba(105,214,255,.5); box-shadow: 0 0 0 3px rgba(105,214,255,.08); }.journal-entry-list { display: grid; gap: 7px; max-height: 220px; overflow: auto; }.journal-entry { padding: 10px; border: 1px solid var(--border); border-radius: 9px; color: var(--muted); background: rgba(255,255,255,.025); font-size: 11px; }.journal-entry strong { display: block; color: var(--text); font-size: 12px; }.journal-entry small { display: block; margin-top: 4px; color: var(--dim); font-family: var(--mono); font-size: 9px; }.journal-actions { display: flex; gap: 7px; margin-top: 9px; flex-wrap: wrap; }.journal-actions .secondary-button { padding: 8px 10px; font-size: 10px; }
.mission-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }.mission-card { padding: 14px; border: 1px solid var(--border); border-radius: 11px; background: rgba(255,255,255,.025); }.mission-card header { display: flex; justify-content: space-between; gap: 8px; }.mission-card h3 { margin: 0; font-size: 14px; font-weight: 560; }.mission-card small { color: var(--cyan); font-family: var(--mono); font-size: 9px; }.mission-card p { margin: 10px 0 0; color: var(--muted); line-height: 1.45; font-size: 11px; }.mission-card button { margin-top: 11px; color: var(--cyan); background: transparent; font-size: 11px; }
.outer-journey { display: grid; gap: 14px; }.outer-visual { position: relative; min-height: 190px; overflow: hidden; border: 1px solid var(--border); border-radius: 13px; background: radial-gradient(circle at 14% 50%, rgba(255,199,110,.85) 0 3%, transparent 4%), radial-gradient(circle at 68% 50%, rgba(75,119,189,.85) 0 2%, transparent 3%), radial-gradient(circle at 83% 50%, rgba(184,158,137,.8) 0 1.5%, transparent 2%), #040b14; }.outer-visual::before { content: ""; position: absolute; left: 15%; right: 9%; top: 50%; border-top: 1px solid rgba(143,194,217,.35); }.outer-marker { position: absolute; top: calc(50% - 6px); width: 12px; height: 12px; border: 2px solid #b5edff; border-radius: 50%; background: #06101b; box-shadow: 0 0 16px rgba(105,214,255,.7); transition: left .2s ease; }.outer-copy h3 { margin: 0 0 6px; font-size: 20px; font-weight: 420; }.outer-copy p { margin: 0; color: var(--muted); line-height: 1.55; font-size: 13px; }.outer-range { width: 100%; accent-color: var(--cyan); }.outer-axis { display: flex; justify-content: space-between; color: var(--dim); font-family: var(--mono); font-size: 9px; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: rgba(255,255,255,.025); }.setting-row span { color: var(--muted); font-size: 11px; }.setting-row input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--cyan); }.setting-row select { max-width: 135px; border: 1px solid var(--border); border-radius: 6px; padding: 5px; color: var(--text); background: #0b1828; font-size: 10px; }.setting-row input[type="range"] { width: 100px; accent-color: var(--cyan); }
.mobile-only { display: none; }
.empty-state { display: grid; justify-items: center; gap: 6px; padding: 28px 12px; color: var(--muted); text-align: center; }.empty-state span { color: var(--cyan); font-size: 24px; }.empty-state strong { color: var(--text); font-size: 12px; font-weight: 560; }.empty-state small { color: var(--dim); font-size: 10px; }
body.distraction .navigator-panel, body.distraction .inspector-panel, body.distraction .scene-meta, body.distraction .orientation-map, body.distraction .scale-badge, body.distraction .scene-hint, body.distraction .topbar, body.distraction .mobile-drawer-actions { opacity: 0; pointer-events: none; }
body.distraction .time-dock { opacity: .22; transform: translate(-50%, 90px); }
.time-dock.time-expanded { bottom: 80px; }

@media (max-width: 1100px) {
  .scene-meta-left { left: 300px; }.scene-meta-right { right: 24px; }.scale-badge { right: 22px; bottom: 180px; }.orientation-map { left: 310px; }
  .inspector-panel { width: 296px; }.navigator-panel { width: 250px; }.time-dock { grid-template-columns: 138px 245px 1fr 91px; }
}
@media (max-width: 760px) {
  .topbar { height: 62px; padding: 12px 14px; }.brand-lockup { min-width: 0; }.brand-name { font-size: 15px; }.brand-mark { width: 25px; height: 25px; }.brand-mark::before { width: 36px; }.eyebrow { font-size: 8px; }.mode-nav { display: none; }.top-actions { min-width: 0; }.top-actions .icon-button:nth-child(2) { display: none; }
  .scene-meta { top: 76px; font-size: 8px; }.scene-meta-left { left: 15px; }.scene-meta-right { display: none; }.scene-center-copy { top: 41%; width: 90%; }.scene-center-copy h1 { font-size: 43px; }.center-hint { font-size: 11px; line-height: 1.5; }
  .navigator-panel, .inspector-panel { top: auto; left: 10px; right: 10px; bottom: 143px; width: auto; height: min(68vh, 500px); transform: translateY(calc(100% + 35px)); opacity: 0; pointer-events: none; transition: transform .25s ease, opacity .2s ease; }.navigator-panel.mobile-open, .inspector-panel.mobile-open { transform: translateY(0); opacity: 1; pointer-events: auto; }.mobile-only { display: inline-grid; place-items: center; position: static; width: 28px; height: 28px; border-radius: 50%; color: var(--muted); background: rgba(255,255,255,.05); font-size: 19px; }.catalog-list { max-height: none; }
  .orientation-map { left: 13px; bottom: 151px; transform: scale(.78); transform-origin: bottom left; }.scale-badge { left: 13px; right: auto; bottom: 237px; transform: scale(.9); transform-origin: bottom left; }.scene-hint { bottom: 221px; width: calc(100% - 120px); border-radius: 12px; line-height: 1.3; }
  .time-dock { left: 10px; right: 10px; bottom: 64px; transform: none; width: auto; min-height: 112px; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 8px 12px; padding: 11px 12px; border-radius: 15px; }.time-context { grid-column: 1; }.time-controls { grid-column: 2; grid-row: 1 / span 2; flex-direction: column; gap: 5px; }.time-controls .rate-control { width: 84px; }.time-controls .rate-control label { text-align: center; }.time-controls .rate-control select { font-size: 9px; }.time-controls .round-control { display: none; }.play-control { width: 39px; height: 39px; }.timeline-wrap { grid-column: 1; grid-row: 2; }.dock-actions { position: absolute; right: 10px; bottom: -48px; gap: 12px; }.dock-action { min-width: 44px; }.dock-action small { font-size: 9px; }
  .mobile-drawer-actions { position: absolute; z-index: 18; left: 10px; right: 10px; bottom: 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; padding: 5px; border: 1px solid var(--border); border-radius: 13px; background: rgba(7,16,28,.86); backdrop-filter: blur(18px); }.mobile-drawer-actions button { padding: 7px; color: var(--muted); background: transparent; font-size: 10px; }.mobile-drawer-actions button span { display: block; margin-bottom: 2px; color: var(--cyan); font-size: 15px; }
  .welcome-card { grid-template-columns: 1fr; width: min(460px, 100%); }.welcome-art { min-height: 130px; }.welcome-copy { padding: 25px 23px 24px; }.welcome-copy h2 { font-size: 31px; }.welcome-sun { width: 55px; height: 55px; }.orbit-a { width: 115px; }.orbit-b { width: 165px; }.orbit-c { width: 220px; }
  .tool-card, .help-card { max-height: calc(100vh - 24px); border-radius: 14px; }.tool-header, .tool-body { padding-left: 18px; padding-right: 18px; }.compare-grid { grid-template-columns: 1fr; }.scale-lab, .lab-layout, .journal-layout { grid-template-columns: 1fr; }.scale-stage { min-height: 205px; }.tour-stop { grid-template-columns: 1fr; }.tour-visual { min-height: 105px; }.activity-grid, .lab-grid, .mission-grid, .settings-grid { grid-template-columns: 1fr; }.shortcut-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}