/* EP–35 / editorial instrument-panel theme. System fonts, no remote assets. */
:root {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #171918;
  background: #f0f2f1;
  --ink: #171918;
  --muted: #656a67;
  --line: #c8ccca;
  --accent: #f45b27;
  --paper: #f0f2f1;
  --orange: #f45b27;
}
body { background: var(--paper); -webkit-font-smoothing: antialiased; }
button, input, summary { border-radius: 0; }
button:focus-visible, input:focus-visible, summary:focus-visible, a:focus-visible { outline-color: var(--orange); }
button { transition: background .12s, color .12s; }
::selection { background: #f45b2745; }

.masthead {
  height: 158px;
  padding: 28px 38px;
  display: grid;
  grid-template-columns: 270px 1fr auto;
  align-items: start;
  gap: 34px;
  border-bottom: 1px solid var(--ink);
}
.brand { display: block; letter-spacing: -3px; font-size: 64px; font-weight: 300; line-height: .95; }
.brand .brand-subtitle { display: block; margin-top: 14px; font-size: 15px; line-height: 1.15; letter-spacing: -.25px; font-weight: 400; }
.brand-symbol, .brand-divider { display: none; }
.privacy { display: block; padding-top: 3px; font-size: 13px; line-height: 1.1; letter-spacing: -.2px; text-transform: uppercase; }
.privacy strong { font-weight: 400; }
.privacy .privacy-detail { display: block; padding: 15px 0 0; margin: 0; border: 0; font-size: 10px; line-height: 1.5; text-transform: none; color: var(--muted); letter-spacing: 0; }
.status-dot { display: none; }
.masthead > .text-button { padding: 4px 0; font-size: 12px; text-transform: lowercase; }
.masthead > .text-button span { font-size: 19px; margin-left: 28px; }
.studio { grid-template-columns: 310px minmax(0,1fr); max-width: 1800px; }
.controls { padding: 31px 28px 20px 38px; border-color: var(--line); }
.intro { margin-bottom: 34px; }
.eyebrow { font-size: 9px; font-weight: 400; letter-spacing: .2px; color: var(--muted); }
h1 { margin: 16px 0 15px; font-size: 34px; font-weight: 400; line-height: .98; letter-spacing: -1.4px; }
.intro p { max-width: 210px; font-size: 11px; color: #555b57; line-height: 1.5; }
.control-section { padding: 19px 0 22px; border-color: var(--line); }
.section-heading { gap: 6px; margin-bottom: 17px; }
.section-heading h2 { font-size: 13px; font-weight: 400; text-transform: lowercase; }
.section-heading h2 span { color: var(--ink); font-size: 12px; margin-right: 8px; letter-spacing: -1px; }
.tiny-note { font-size: 8px; color: var(--muted); }
.text-button { font-size: 11px; }
.small { font-size: 10px; text-transform: lowercase; }
.upload { background: #e1e4e2; border: 1px solid #aeb4b0; border-radius: 0; padding: 9px; gap: 10px; }
.upload:hover, .upload.drag-over { background: #daddda; border-color: #171918; }
.upload canvas { width: 64px; height: 64px; border-radius: 0; }
.upload-copy { gap: 5px; }
.upload-copy strong { font-size: 11px; font-weight: 400; text-transform: lowercase; }
.upload-copy > span { color: #555b57; font-size: 10px; max-width: 142px; }
.upload-copy small { font-size: 8px; color: #5e6460; }
.samples { margin-top: 11px; gap: 3px; font-size: 9px; }
.sample { border-radius: 0; padding: 4px 6px; font-size: 10px; text-transform: lowercase; }
.sample.active { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.sample:hover:not(.active) { border-color: #8b938d; }
.range-field { margin: 19px 0; gap: 8px; }
.range-field label { font-size: 11px; }
.range-field output { font: 10px "Helvetica Neue", Helvetica, Arial, sans-serif; font-variant-numeric: tabular-nums; color: var(--ink); }
.range-field input[type=range] { appearance: none; -webkit-appearance: none; height: 18px; margin: 0; background: transparent; accent-color: var(--ink); }
.range-field input[type=range]::-webkit-slider-runnable-track { height: 1px; background: #878d89; border: 0; }
.range-field input[type=range]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; height: 15px; width: 10px; margin-top: -7px; background: var(--ink); border: 0; border-radius: 0; }
.range-field input[type=range]::-moz-range-track { height: 1px; background: #878d89; }
.range-field input[type=range]::-moz-range-thumb { height: 15px; width: 10px; background: var(--ink); border: 0; border-radius: 0; }
.range-field input[type=range]:hover::-webkit-slider-thumb { background: var(--orange); }
.check { font-size: 10px; }
.check input { accent-color: var(--orange); border-radius: 0; }
.crop-details summary { font-size: 11px; color: #464d47; border-bottom: 1px solid var(--line); }
.mode-selector { gap: 0; }
.mode { padding: 12px 9px; border: 1px solid #7c837f; border-radius: 0; box-shadow: none; column-gap: 7px; }
.mode + .mode { border-left: 0; }
.mode.active { color: var(--paper); background: var(--ink); border-color: var(--ink); box-shadow: none; }
.mode strong { font-weight: 400; font-size: 12px; text-transform: lowercase; }
.mode small { font-size: 8px; color: #656a67; }
.mode.active small { color: #c8ceca; }
.mode-pattern { font-size: 9px; letter-spacing: 0; }
.pattern-c { font-size: 18px; letter-spacing: -3px; }
.mode-description, .control-hint { font-size: 10px; line-height: 1.6; color: #626863; }
.fixed-setting, .fixed-setting strong { color: var(--ink); font-size: 10px; }
.fixed-setting small { border-color: #b3b9b4; border-radius: 0; color: #5a615b; }
.template-lock { font-size: 7px; color: #5a615b; letter-spacing: .1px; }
.template-source { border: 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); background: transparent; border-radius: 0; color: var(--ink); font-size: 11px; padding: 10px 0; }
.template-dimensions { gap: 0; }
.template-dimensions > div { padding: 7px 0; border-bottom: 1px solid #d9ddda; }
.template-dimensions dt { color: #5e655f; }
.template-dimensions dd { color: var(--ink); }
.print-profile { color: var(--ink); }
.print-profile div > span { color: #626963; line-height: 1.6; }

.workspace { padding: 30px 38px 28px; }
.workspace-top { align-items: flex-start; margin-bottom: 25px; }
.workspace-top h2 { font-size: clamp(27px,3vw,45px); font-weight: 300; line-height: 1.05; letter-spacing: -1.1px; margin-top: 13px; }
.dimension-badge { border: 0; padding: 2px 0; border-radius: 0; color: var(--ink); font: 10px "Helvetica Neue", Helvetica, Arial, sans-serif; }
.device-toolbar { border-top: 1px solid var(--ink); padding: 13px 0; color: var(--ink); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 10px; }
.projection-label { gap: 7px; }
.projection-label > span:last-child { font-size: 8px; color: #666e68; border-left-color: #a7aea8; }
.projection-symbol { color: var(--ink); font-size: 18px; }
.drawing-options { gap: 13px; }
.drawing-options .check { font-size: 10px; font-family: inherit; }
.device-viewport { border: 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); border-radius: 0; background: #e6e9e7; padding: 17px 20px 16px; min-height: 550px!important; }
.drawing-topline, .drawing-bottomline { color: #515a53; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 8px; letter-spacing: .2px; border-color: #c4cbc6; }
.drawing-topline { padding-bottom: 13px; }
.drawing-topline > span:last-child { color: #3b453d; font-size: 8px; }
.drawing-topline > span:last-child:before { content: ""; display: inline-block; width: 5px; height: 5px; background: var(--orange); margin-right: 5px; }
.device-drawings { padding-top: 21px; min-height: 430px; column-gap: 20px; }
.device-figure figcaption, .section-detail figcaption { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #4e5750; letter-spacing: .3px; font-size: 9px; }
.device-figure figcaption span:first-child { color: var(--ink); }
.device-figure figcaption b { opacity: 1; font-size: 9px; }
.device-figure figcaption span:last-child { font-size: 7px; }
.device-figure p { font-size: 9px; line-height: 1.5; color: #5b655d; }
.device-shell { fill: #edf0ed; stroke: #4e5650; stroke-width: 1.15; }
.device-shell .device-orange { fill: var(--orange); stroke: #7c4029; }
.device-drivers { stroke: #6f7c71; }
.device-aperture, .device-datum { stroke: #9da69e; }
.frame-section { stroke: #636f65; }
.panel-section { stroke: #252c27; stroke-width: 1.35; }
.panel-outline { stroke: #3e4940; }
.device-dimension { fill: #4c574e; stroke: #88968b; }
.device-dimension text { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 9px; }
.section-detail { border-top-color: #c4cbc6; margin-top: 19px; padding-top: 13px; }
.section-detail figcaption { font-size: 8px; }
.section-detail figcaption span:last-child { color: var(--ink); font-size: 12px; }
.detail-label { fill: #536056; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.device-viewport .material-controls > span { color: #515a53; font-size: 9px; }
.swatch { box-shadow: 0 0 0 1px #929b94; }
.swatch.active { outline-color: var(--ink); }
.swatch.ivory { background: #deded8; }
.swatch.charcoal { background: #303131; }
.swatch.clay { background: #ef6025; }
.device-viewport .busy { color: var(--ink); border: 1px solid #858e87; background: #f0f2f1; border-radius: 0; }
.busy:before { background: var(--orange); }
.device-context { margin-top: 12px; color: #626b64; line-height: 1.6; font-size: 10px; }
.preview-stale .drawing-topline > span:last-child { color: #a1401b; }
.metrics { margin-top: 23px; gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--ink); padding-bottom: 0; }
.metrics > div { padding: 13px 12px 16px; border-left: 1px solid var(--line); }
.metrics > div:first-child { padding-left: 0; border-left: 0; }
.metrics span { color: #5e6760; font-size: 10px; }
.metrics small { font-size: 8px; }
.metrics strong { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; font-size: 26px; letter-spacing: -.7px; }
.geometry-note { color: #616b63; font-size: 10px; }
.geometry-note.adjusted { color: #a4401b; }
.export-bar { gap: 14px; margin-top: 24px; }
.export-copy strong { font-size: 14px; font-weight: 400; letter-spacing: -.25px; }
.export-copy span { font-size: 9px; color: #626b64; }
.button { padding: 15px 17px; border: 1px solid var(--ink); border-radius: 0; font-weight: 400; font-size: 12px; gap: 26px; }
.button.primary { background: var(--orange); color: #151816; border-color: var(--orange); }
.button.primary:hover { background: #ff703e; border-color: #ff703e; }
.button.secondary:hover { background: var(--ink); color: var(--paper); }
.validation-note { color: #717b73; font-size: 9px; line-height: 1.7; }
.error { background: #f3ded5; border: 1px solid #ba5a35; color: #8f3211; border-radius: 0; }
footer { border-color: var(--ink); color: #4b564e; padding: 20px 38px; letter-spacing: .2px; }
dialog { color: var(--ink); border: 1px solid var(--ink); border-radius: 0; background: var(--paper); box-shadow: none; padding: 32px; }
dialog::backdrop { background: #17191866; backdrop-filter: none; }
dialog h2 { font-size: 33px; line-height: 1.05; font-weight: 300; }
dialog ol, dialog p { color: #535e56; }
.dialog-close { color: var(--ink); }

@media(min-width:1600px) {
  .masthead { grid-template-columns: 310px 1fr auto; padding-left: 50px; padding-right: 50px; }
  .studio { grid-template-columns: 360px minmax(0,1fr); }
  .controls { padding-left: 50px; padding-right: 35px; }
  .workspace { padding-left: 50px; padding-right: 50px; }
  .device-drawings { min-height: 500px; }
}
@media(max-width:1100px) {
  .masthead { padding: 27px 26px; grid-template-columns: 255px 1fr auto; gap: 20px; }
  .studio { grid-template-columns: 280px minmax(0,1fr); }
  .controls { padding: 29px 22px 20px 26px; }
  .workspace { padding: 29px 26px 25px; }
  .brand { font-size: 58px; }
  .privacy-detail { display: block; }
  .intro h1 { font-size: 32px; }
  .workspace-top h2 { font-size: 31px; }
  .dimension-badge { font-size: 9px; padding-top: 2px; white-space: nowrap; }
  .device-toolbar { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 11px; }
  .device-viewport { min-height: 470px!important; padding: 16px 14px; }
  .device-drawings { min-height: 340px; }
  .metrics strong { font-size: 22px; }
  .metrics > div { padding-left: 8px; padding-right: 8px; }
}
@media(max-width:760px) {
  .masthead { height: 146px; grid-template-columns: 1fr auto; padding: 23px 22px; gap: 0 16px; }
  .brand { font-size: 53px; }
  .brand .brand-subtitle { font-size: 13px; margin-top: 11px; }
  .masthead > .text-button { align-self: start; font-size: 11px; }
  .masthead > .text-button span { margin-left: 13px; }
  .privacy { display: none; }
  .studio { display: flex; }
  .workspace { padding: 25px 22px; }
  .workspace-top { margin-bottom: 22px; gap: 10px; }
  .workspace-top h2 { font-size: 30px; }
  .controls { display: block; padding: 26px 22px; }
  .intro h1 { font-size: 38px; }
  .intro p { max-width: none; }
  .upload { flex-direction: row; align-items: center; }
  .upload canvas { width: 72px; height: 72px; }
  .upload-copy > span { max-width: 240px; }
  .samples > span { width: auto; margin: 0 auto 0 0; }
  .mode { grid-template-columns: auto 1fr; }
  .mode-pattern { display: block; }
  .mode small { font-size: 10px; }
  .tiny-note { display: block; font-size: 9px; }
  .device-figure figcaption span:last-child { display: none; }
  .section-detail { grid-template-columns: 1fr; gap: 0; }
  .section-detail figcaption { flex-direction: row; justify-content: space-between; }
  .export-bar { flex-direction: column; }
  .export-actions { width: 100%; }
  .export-actions .button { flex: 1; }
  .export-copy { display: block; width: 100%; }
  .export-copy span { display: none; }
  footer { padding: 20px 22px; }
}
@media(max-width:600px) {
  .metrics { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0; }
  .metrics > div { padding: 14px 12px; }
  .metrics > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .metrics > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .metrics span { font-size: 10px; }
  .metrics small { font-size: 8px; }
  .metrics strong { font-size: 28px; }
  .device-viewport { min-height: 410px!important; }
  .device-drawings { min-height: 280px; column-gap: 8px; }
  .device-context { font-size: 10px; }
  .drawing-bottomline > span { max-width: 160px; line-height: 1.6; }
  .device-viewport .material-controls > span { display: none; }
}
@media(max-width:420px) {
  .masthead { padding-left: 18px; padding-right: 18px; }
  .workspace, .controls { padding-left: 18px; padding-right: 18px; }
  .workspace-top h2 { font-size: 26px; }
  .dimension-badge { font-size: 8px; }
  .projection-label > span:last-child { font-size: 7px; padding-left: 7px; }
  .drawing-options .check { font-size: 10px; }
  .device-figure p { font-size: 8px; }
  .drawing-topline, .drawing-topline > span:last-child { font-size: 7px; }
  .button { padding-left: 12px; padding-right: 12px; gap: 13px; }
}
@media(prefers-reduced-motion:reduce) { button { transition: none; } }

/* Actual two-part CAD inspection, alongside the fixed device elevations. */
.preview-tabs{display:flex;gap:0;margin:0 0 16px;border:1px solid var(--ink);width:max-content;max-width:100%}
.preview-tabs button{border:0;background:transparent;padding:10px 16px;font-size:11px;color:var(--ink)}
.preview-tabs button+button{border-left:1px solid var(--ink)}
.preview-tabs button.active{background:var(--ink);color:var(--paper)}
.assembly-view{position:relative}
.assembly-scene{height:460px;width:100%;position:relative;touch-action:none;background:#cdd3ce}
.assembly-scene canvas{display:block;width:100%;height:100%;touch-action:none;outline:none}
.assembly-pose{display:flex;justify-content:flex-end;gap:0;padding:12px 0 0}
.assembly-pose button{font-size:10px;padding:5px 10px;border:1px solid #9ba49c;background:transparent;color:var(--ink)}
.assembly-pose button+button{border-left:0}
.assembly-pose button:hover{background:var(--paper)}
.assembly-loading{position:absolute;left:20px;right:20px;top:100px;text-align:center;line-height:1.6;font-size:12px;color:#525c54;pointer-events:none}
.assembly-instructions{font-size:10px;color:#5e6860;text-align:center;margin:0 0 20px;line-height:1.5}
.assembly-inspection{border-top:1px solid #c4cbc6;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;padding:15px 0 18px}
.separation-control{display:grid;grid-template-columns:1fr auto;gap:8px;max-width:400px;font-size:10px;color:#3b463d}
.separation-control output{font-variant-numeric:tabular-nums}
.separation-control input{grid-column:1/-1;width:100%;accent-color:var(--orange);margin:0}
.fixing-status{font-size:10px;color:#2a4e31;border-left:3px solid #536e4c;padding:5px 0 5px 10px;margin:13px 0 0;line-height:1.6}
.fixing-status.failed{color:#a1401b;border-left-color:var(--orange)}
.preview-stale .assembly-view{opacity:.45;pointer-events:none}
.preview-stale+.fixing-status{opacity:.45}
.projection-label>#projection-title{color:var(--ink);font-size:10px;border:0;padding:0}
@media(max-width:1100px){.assembly-scene{height:410px}.assembly-inspection{grid-template-columns:1fr;gap:16px}}
@media(max-width:760px){.assembly-scene{height:380px}.assembly-inspection{grid-template-columns:1fr;gap:15px}.separation-control{max-width:none}.preview-tabs button{padding:10px 13px}.fixing-status{font-size:9px}}
@media(max-width:420px){.assembly-scene{height:320px}.assembly-instructions{font-size:9px}.assembly-pose button{font-size:9px;padding:6px 9px}}

/* Surface v0.6: aperture shape, directional lighting and a wider finish palette. */
.shape-control{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:20px 0 22px;font-size:11px}
.shape-switch,.lighting-presets{display:flex;border:1px solid #929b94;width:max-content;max-width:100%}
.shape-switch button,.lighting-presets button{border:0;background:transparent;color:var(--ink);padding:9px 12px;font-size:11px}
.shape-switch button+button,.lighting-presets button+button{border-left:1px solid #929b94}
.shape-switch button.active,.lighting-presets button.active{background:var(--ink);color:var(--paper)}
.preview-lighting{display:flex;align-items:center;gap:24px;padding:14px 0 18px;border-top:1px solid #c4cbc6}
.light-direction{display:grid;grid-template-columns:1fr auto;gap:7px;flex:1;max-width:330px;font-size:10px}
.light-direction input{grid-column:1/-1;width:100%;accent-color:var(--orange);margin:0}
.light-direction output{font-variant-numeric:tabular-nums}
.assembly-scene{background:radial-gradient(ellipse at 50% 38%,#d6dcd8,#b8c2bc)}
.drawing-bottomline{display:flex;flex-wrap:wrap;align-items:center;gap:15px}
.device-viewport .material-controls{display:flex;position:static;align-items:center;flex-wrap:wrap;gap:10px;margin-left:auto}
.device-viewport .material-controls>span{display:block!important;white-space:nowrap}
.colour-swatches{display:flex;flex-wrap:wrap;gap:9px;padding:4px}
.colour-swatches .swatch{background:var(--swatch);width:19px;height:19px;flex:0 0 19px;margin:0}
@media(max-width:1100px){.device-viewport .material-controls{width:100%;margin-left:0;justify-content:space-between}}
@media(max-width:560px){.preview-lighting{flex-direction:column;align-items:stretch;gap:16px}.light-direction{max-width:none}.device-viewport .material-controls{gap:8px}.colour-swatches{gap:10px}.shape-switch button{padding:9px 10px}}