:root {
  color-scheme: light;
  --ink: #10243a;
  --ink-subtle: #597086;
  --muted: #8392a2;
  --line: #e3e9ef;
  --paper: #ffffff;
  --app-bg: #f5f7fa;
  --aqua: #3ac1aa;
  --aqua-dark: #159a83;
  --navy: #101d30;
  --shadow: 0 10px 42px rgba(18, 44, 68, .045);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background:var(--app-bg); color:var(--ink); font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button, select, input { font:inherit; }
button { cursor:pointer; }
button:disabled { opacity:.4; cursor:not-allowed; }
button:focus-visible, select:focus-visible, input:focus-visible, a:focus-visible { outline:3px solid rgba(45,192,162,.45); outline-offset:3px; }
.topbar { height:81px; padding:0 max(38px,calc((100vw - 1320px)/2)); display:flex; align-items:center; justify-content:space-between; background:var(--paper); border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:13px; }
.brand-logo { width:39px; height:39px; border-radius:11px; background:#102439; display:grid; place-items:center; position:relative; }
.brand-logo:before { content:""; width:17px; height:17px; border:2.3px solid #73dec9; border-radius:50%; position:absolute; }
.brand-logo:after { content:""; background:#73dec9; width:2px; height:30px; position:absolute; opacity:.8; }
.logo-dot { width:4px; height:4px; background:#73dec9; border-radius:50%; position:relative; z-index:1; box-shadow:0 0 0 3px #102439; }
.brand-name { font-size:23px; font-weight:800; letter-spacing:-1.18px; line-height:1; }
.brand-next { margin-left:3px; color:#25ae99; font-weight:400; letter-spacing:-1.2px; }
.brand-divider { height:23px; width:1px; background:#d8e2e7; margin:0 8px 0 6px; }
.brand-caption { font-size:10px; letter-spacing:1.25px; color:#8a9aa7; font-weight:750; white-space:nowrap; }
.topbar-right { display:flex; align-items:center; gap:34px; }
.edition-pill { border:1px solid #dbece7; color:#4b897e; border-radius:50px; background:#f3faf8; padding:8px 12px; font-size:10px; font-weight:770; letter-spacing:.65px; white-space:nowrap; }
.status-dot { width:6px; height:6px; border-radius:50%; background:#2ac2a3; display:inline-block; margin-right:6px; vertical-align:1px; }
.top-link { font-size:12px; font-weight:650; color:#435d75; white-space:nowrap; }
.top-link span { font-size:15px; margin-left:5px; color:#97a7b2; }
.main-wrap { max-width:1320px; margin:0 auto; padding:45px 38px 44px; }
.eyebrow { display:flex; align-items:center; gap:9px; color:#319f8f; font-size:10px; letter-spacing:1.75px; font-weight:850; }
.eyebrow-line { width:19px; height:2px; background:#35b7a3; }
.page-intro { margin-bottom:30px; }
.intro-row { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-top:14px; }
h1,h2,p { margin-top:0; }
.intro-row h1 { font-size:clamp(34px,3.2vw,44px); line-height:1.1; letter-spacing:-2.35px; font-weight:740; margin-bottom:12px; }
.headline-period { color:#36bca8; }
.intro-row p { color:#738394; font-size:14px; margin-bottom:0; line-height:1.55; }
.intro-meta { color:#a1aeba; font-size:9.5px; font-weight:760; letter-spacing:1.1px; padding-bottom:7px; white-space:nowrap; }
.intro-meta span { padding:0 6px; color:#c2ced6; }
.workspace-grid { display:grid; grid-template-columns:343px minmax(0,1fr); gap:20px; align-items:stretch; }
.control-panel,.viewer-panel,.utility-card,.heritage-card { background:#fff; border:1px solid #e5ebf1; border-radius:14px; box-shadow:var(--shadow); overflow:hidden; }
.control-panel { padding:24px 25px 25px; }
.panel-title-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; }
.overline { font-size:10px; color:#8b9ba9; letter-spacing:1.42px; font-weight:800; }
.panel-icon { width:25px; height:25px; background:#eef4f6; border-radius:7px; color:#8da4b4; display:flex; align-items:center; justify-content:center; font-size:18px; }
.form-block { padding-bottom:25px; margin-bottom:24px; border-bottom:1px solid #e9edf1; }
.block-head { display:flex; align-items:center; gap:11px; margin-bottom:20px; }
.block-head h2 { font-size:14px; margin:0; font-weight:760; letter-spacing:-.3px; }
.step { height:26px; width:26px; display:grid; place-items:center; background:#eff8f6; color:#279e8c; font-size:10px; font-weight:850; border-radius:8px; }
.input-label { display:block; color:#7990a0; font-size:9.4px; font-weight:820; letter-spacing:1.07px; margin-bottom:10px; white-space:nowrap; }
.select-wrap { position:relative; }
select { width:100%; height:46px; padding:0 32px 0 13px; background:#f8fafb; border:1px solid #dce5eb; border-radius:8px; color:#233e55; font-weight:650; font-size:12.5px; outline:0; appearance:none; }
.select-wrap .select-chevron { position:absolute; right:14px; top:9px; font-size:24px; pointer-events:none; color:#91a3af; }
.chip-row { display:flex; gap:7px; margin-top:13px; }
.quick-chip { border:1px solid #e0e9ee; background:#fff; color:#657e8f; border-radius:6px; height:31px; padding:0 12px; font-weight:700; font-size:11px; }
.quick-chip:hover { border-color:#b3d6ce; }
.quick-chip.active { color:#128c77; background:#eaf7f3; border-color:#a9dfd1; }
.measurements { padding-bottom:19px; }
.measurement-notice { color:#8b9ba9; font-size:11px; line-height:1.5; margin-top:-10px; margin-bottom:18px; min-height:31px; }
.fields-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.unit-input { display:flex; align-items:center; height:45px; border:1px solid #dce5eb; border-radius:8px; background:#f8fafb; padding-right:12px; }
.unit-input:focus-within { border-color:#64cdb6; background:#fff; }
.unit-input input { color:#1b344a; background:transparent; border:0; min-width:0; width:100%; padding:0 0 0 11px; outline:0; font-size:16px; font-weight:740; font-variant-numeric:tabular-nums; }
.unit-input input:disabled { color:#a1aeba; }
.unit-input span { font-size:11px; color:#a1aeb9; }
.reset-button { display:flex; align-items:center; gap:7px; padding:0; margin-top:15px; background:transparent; color:#699585; font-size:10.5px; border:0; }
.reset-button span { font-size:19px; margin-top:-2px; }
.reset-button strong { font-weight:500; color:#9daeb5; margin-left:auto; }
.input-error { margin-top:10px; color:#bf574f; font-size:11px; line-height:1.5; }
.display-block { margin-bottom:0; padding-bottom:16px; border-bottom:0; }
.display-block .block-head { margin-bottom:10px; }
.toggle-row { display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px solid #edf1f3; position:relative; cursor:pointer; }
.toggle-row:last-child { border:0; }
.toggle-row strong { display:block; font-size:12px; font-weight:730; color:#395066; margin-bottom:4px; }
.toggle-row small { display:block; font-size:10.5px; color:#9aaab8; }
.toggle-row input { position:absolute; opacity:0; right:0; width:40px; height:24px; cursor:pointer; }
.switch { width:35px; height:20px; border-radius:20px; background:#ced8df; position:relative; transition:.2s; }
.switch:after { content:""; height:14px; width:14px; position:absolute; left:3px; top:3px; border-radius:50%; background:#fff; box-shadow:0 1px 3px #17314433; transition:.2s; }
.toggle-row input:checked + .switch { background:#2bbaa3; }
.toggle-row input:checked + .switch:after { left:18px; }
.toggle-row input:focus-visible + .switch { outline:3px solid #a9dfd1; outline-offset:3px; }
.provenance-panel { display:flex; gap:12px; align-items:flex-start; border-radius:8px; padding:14px; background:#f1f6f9; color:#718999; font-size:10.5px; line-height:1.65; }
.provenance-panel strong { color:#466276; font-weight:740; }
.archive-glyph { font-size:19px; color:#5daaa1; line-height:1.2; }
.viewer-panel { padding:0; min-width:0; display:flex; flex-direction:column; }
.viewer-header { padding:25px 27px 22px; display:flex; justify-content:space-between; align-items:flex-end; gap:10px; }
.viewer-overline { color:#92a3b3; }
.viewer-header h2 { margin:10px 0 0; font-size:20px; font-weight:760; letter-spacing:-.8px; line-height:1.15; }
.viewer-subtitle { font-size:13px; font-weight:500; color:#98a9b8; padding-left:4px; }
.viewer-header-meta { display:flex; align-items:center; gap:8px; white-space:nowrap; font-size:9px; color:#8ba2af; font-weight:740; letter-spacing:.75px; padding-bottom:1px; }
.mini-glow { width:6px; height:6px; border-radius:50%; background:#43c9aa; box-shadow:0 0 0 3px #e7f8f3; }
.viewer-stage { background:radial-gradient(circle at 50% 35%, #1b3047 0%, #12233a 56%, #0e1d2e 100%); margin:0 17px; border:1px solid #243b52; border-radius:10px; height:411px; position:relative; display:flex; flex-direction:column; overflow:hidden; }
.viewer-stage:before { content:""; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(#bed3e5 1px,transparent 1px),linear-gradient(90deg,#bed3e5 1px,transparent 1px); background-size:29px 29px; opacity:.038; }
.stage-topline,.stage-bottomline,.stage-orientations { position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; color:#607f99; font-size:9px; font-weight:750; letter-spacing:1px; }
.stage-topline { padding:19px 22px 0; }
.stage-topline span:last-child { color:#3d9d92; }
.stage-orientations { padding:16px 22px 0; color:#8ba8bf; }
.svg-holder { min-height:0; width:100%; flex:1; display:flex; align-items:center; justify-content:center; padding:4px 7% 6px; z-index:1; position:relative; }
.svg-holder svg { display:block; min-width:0; max-width:100%; }
.stage-bottomline { padding:0 22px 18px; }
.viewer-footer { display:flex; justify-content:space-between; padding:17px 26px; align-items:center; min-height:51px; gap:12px; }
.legend-items { display:flex; gap:14px; flex-wrap:wrap; }
.legend-item { display:inline-flex; align-items:center; gap:6px; color:#4e687a; font-size:10px; font-weight:630; white-space:nowrap; }
.legend-item i { width:7px; height:7px; border-radius:2px; background:#5d7185; flex-shrink:0; }
.legend-item.muted { color:#a0acb8; }
.legend-item.muted i { background:#9caebe; }
.render-details { display:flex; gap:8px; font-size:9px; font-weight:770; color:#9aaab5; white-space:nowrap; }
.model-description { background:#f7fafb; margin:0 17px; border-radius:8px; color:#718899; padding:14px 17px; font-size:11.5px; line-height:1.6; min-height:63px; }
.export-bar { margin-top:auto; min-height:83px; display:flex; justify-content:space-between; gap:14px; align-items:center; padding:15px 25px; }
.export-caption strong { display:block; font-size:12.5px; color:#334d61; margin-bottom:6px; }
.export-caption span { display:block; font-size:11px; color:#9babb7; }
.export-buttons { display:flex; gap:10px; }
.action-primary,.action-secondary { height:39px; border-radius:8px; font-size:11px; font-weight:760; padding:0 15px; white-space:nowrap; }
.action-primary { background:#1aa58d; color:white; border:1px solid #159e87; box-shadow:0 4px 10px #14a68a26; }
.action-primary:hover { background:#158d79; }
.action-secondary { background:white; color:#3d6776; border:1px solid #d6e2e8; }
.action-secondary:hover { background:#f3f9f8; border-color:#b2ded3; }
.empty-state { color:#f8b4aa; font-size:12px; text-align:center; }
.bottom-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:20px; }
.utility-card,.heritage-card { padding:24px 26px; min-width:0; }
.utility-head { display:flex; align-items:flex-start; justify-content:space-between; }
.utility-head h2 { font-size:17px; margin:11px 0 9px; letter-spacing:-.55px; font-weight:750; }
.utility-heading-light { font-weight:450; color:#8196a5; }
.utility-mark { display:grid; place-items:center; border-radius:9px; width:34px; height:34px; color:#2d8f87; background:#edf8f5; font-style:italic; font-size:16px; }
.utility-card > p { font-size:11.5px; line-height:1.6; color:#8394a2; max-width:430px; margin:0 0 17px; }
.utility-form { display:flex; align-items:end; gap:14px; }
.utility-input { flex:1; min-width:0; }
.utility-input label,.utility-result > span { display:block; font-size:9px; font-weight:810; color:#8da0ad; letter-spacing:.8px; margin-bottom:9px; }
.utility-input .unit-input { max-width:230px; height:40px; }
.utility-input .unit-input input { font-size:14px; }
.equals-sign { color:#becbd3; padding:0 0 11px; }
.utility-result { flex:1; min-width:0; }
.utility-result strong { font-size:21px; letter-spacing:-.8px; color:#189885; line-height:40px; font-variant-numeric:tabular-nums; }
.utility-result small { font-size:12px; font-weight:500; color:#a0b3b4; }
.utility-result strong.is-error { font-size:13px; color:#ce6357; }
.utility-foot { color:#a1afb8; font-size:10px; margin-top:17px; line-height:1.65; }
.utility-foot code { color:#416f70; background:#f3f8f8; padding:2px 5px; border-radius:4px; }
.utility-foot span { padding:0 4px; }
.heritage-card { background:#f7fafc; position:relative; }
.heritage-body { display:grid; grid-template-columns:auto 1fr; gap:25px; margin:28px 0 25px; align-items:center; }
.huge-year { font-weight:750; font-size:47px; letter-spacing:-3px; color:#b9d9d3; line-height:1; }
.heritage-body h2 { margin:0 0 8px; color:#334c61; font-size:16px; letter-spacing:-.5px; }
.heritage-body p { font-size:11.5px; color:#8699aa; margin:0; line-height:1.65; }
.heritage-bottom { color:#6c9296; font-size:10px; font-weight:850; letter-spacing:.9px; border-top:1px solid #e1e9ed; padding-top:15px; }
.heritage-bottom > span:first-child { margin:0 12px; color:#39bda9; }
.since { float:right; color:#adbac5; font-weight:700; font-size:9px; }
.research-notice { display:flex; gap:12px; padding:18px 21px; align-items:flex-start; margin-top:20px; background:#eaf0f4; border-radius:10px; border:1px solid #dde7ed; color:#74899b; font-size:11px; line-height:1.65; }
.research-notice strong { color:#446075; }
.notice-icon { display:grid; place-items:center; border:1.5px solid #7295a7; color:#66869a; width:20px; height:20px; flex:none; border-radius:50%; font-size:12px; font-weight:800; }
.site-footer strong { color:#647c91; font-weight:800; letter-spacing:.85px; }
.site-footer .footer-separator { color:#b4bec7; padding:0 3px; }
.site-footer { margin:0 auto; max-width:1320px; padding:17px 38px 37px; display:flex; justify-content:space-between; gap:15px; color:#a0aeb9; font-size:9px; font-weight:730; letter-spacing:1px; }
.print-sheet { display:none; }
@media (max-width:1140px) {
  .workspace-grid { grid-template-columns:312px minmax(0,1fr); gap:14px; }
  .control-panel { padding:20px; }
  .viewer-stage { height:382px; }
  .viewer-header-meta,.render-details { display:none; }
  .export-bar { flex-wrap:wrap; }
  .heritage-body { gap:14px; }
}
@media (max-width:900px) {
  .topbar { padding:0 22px; }
  .topbar-right { gap:10px; }
  .edition-pill { display:none; }
  .main-wrap { padding:30px 20px; }
  .workspace-grid { grid-template-columns:1fr; }
  .control-panel { display:grid; grid-template-columns:1fr 1fr; gap:14px 24px; }
  .panel-title-row { grid-column:1/-1; margin-bottom:0; }
  .form-block { border:0; padding:0; margin:0; }
  .display-block { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; gap:0 25px; }
  .display-block .block-head { grid-column:1/-1; }
  .provenance-panel { grid-column:1/-1; }
  .viewer-stage { height:430px; }
  .bottom-grid { grid-template-columns:1fr; }
}
@media (max-width:600px) {
  .topbar { height:69px; padding:0 17px; }
  .brand-name { font-size:21px; }
  .brand-divider,.brand-caption,.top-link { display:none; }
  .main-wrap { padding:25px 14px; }
  .intro-row { display:block; }
  .intro-row h1 { font-size:35px; }
  .intro-row p { font-size:12px; }
  .intro-meta { display:none; }
  .control-panel { display:block; padding:21px; }
  .panel-title-row { margin-bottom:25px; }
  .form-block { border-bottom:1px solid #e9edf1; padding-bottom:22px; margin-bottom:22px; }
  .display-block { display:block; border:0; margin-bottom:10px; }
  .viewer-header { padding:20px 18px; }
  .viewer-header h2 { font-size:17px; }
  .viewer-stage { height:335px; margin:0 10px; }
  .stage-topline,.stage-bottomline { padding-left:12px; padding-right:12px; font-size:8px; }
  .stage-orientations { padding-left:12px; padding-right:12px; font-size:8px; }
  .svg-holder { padding:0 3%; }
  .viewer-footer { padding:14px; }
  .model-description { margin:0 10px; }
  .export-bar { padding:18px; }
  .export-buttons { width:100%; }
  .action-primary,.action-secondary { flex:1; }
  .utility-card,.heritage-card { padding:20px; }
  .utility-form { gap:8px; }
  .utility-result > span,.utility-input label { font-size:8px; }
  .utility-result strong { font-size:17px; }
  .heritage-body { grid-template-columns:1fr; margin:20px 0; }
  .huge-year { font-size:38px; }
  .since { display:none; }
  .site-footer { display:block; padding:10px 18px 28px; line-height:2; }
  .site-footer > span { display:block; }
}
@page { size:A4; margin:12mm; }
@media print {
  html, body { background:white; color:black; }
  .app-shell { display:none !important; }
  .print-sheet { display:block !important; padding:0; color:#111; font-family:Arial,sans-serif; }
  .print-sheet header { border-bottom:1px solid #a6b1bb; padding-bottom:8mm; margin-bottom:10mm; }
  .print-sheet header h1 { font-size:21pt; margin:0 0 2mm; letter-spacing:-1px; }
  .print-sheet header p { color:#526274; font-size:10pt; margin:0; }
  #print-graphic { display:block; }
  #print-graphic svg { display:block; width:auto !important; height:auto !important; max-width:none !important; }
  .print-instruction { font-size:8pt; color:#606060; line-height:1.5; max-width:160mm; margin-top:10mm; }
  .print-disclaimer { margin-top:10mm; padding-top:4mm; border-top:1px solid #ccc; font-size:8pt; color:#707070; }
}
