:root{
--bg:#ffffff;
--panel:#f7f7f7;
--panel-border:#e2e2e2;
--hole:#e6e6e6;
--screen-bg:#18191c;
--screen-hole:#232428;
--text-primary:#202020;
--text-muted:#707070;
--text-faint:#9a9a9a;
--accent-primary:#ee1133;
--accent-primary-hover:#d5001a;
--accent-primary-dim:rgba(238,17,51,.12);
--accent-secondary:#1153ee;
--accent-secondary-dim:rgba(17,83,238,.14);
--danger:#bb0000;
--mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
--sans:'Raleway', Arial, Helvetica, sans-serif;
--heading:'Quicksand', Tahoma, Arial, sans-serif;
--radius:6px;
}
*{box-sizing:border-box;}
body{
margin:0;
background-color:var(--bg);
color:var(--text-primary);
font-family:var(--sans);
-webkit-font-smoothing:antialiased;
min-height:100vh;
}
a{color:var(--accent-primary);}
a:hover{color:var(--accent-primary-hover);}
header{
max-width:1400px;
margin:0 auto;
padding:8px 24px 8px;
}
.eyebrow{
font-family:var(--mono);
font-size:11px;
letter-spacing:.14em;
color:var(--accent-primary);
text-transform:uppercase;
margin:0 0 6px;
}
h1{
font-family:var(--heading);
font-weight:700;
font-size:clamp(20px,3vw,28px);
letter-spacing:-0.01em;
margin:0 0 6px;
}
.panel-head{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:14px;
}
.panel-head .section-label{margin:0;}
.info-btn{
width:22px;
height:22px;
border-radius:50%;
background:var(--bg);
border:1px solid var(--panel-border);
color:var(--accent-primary);
font-family:var(--heading);
font-size:13px;
font-weight:700;
font-style:italic;
line-height:1;
padding:0;
display:inline-flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition:border-color .15s, background-color .15s;
}
.info-btn:hover{border-color:var(--accent-primary); background:var(--accent-primary-dim);}
header p{
color:var(--text-muted);
font-size:14px;
max-width:640px;
line-height:1.5;
margin:0;
}
.app{
display:grid;
grid-template-columns:320px 1fr;
gap:20px;
max-width:1400px;
margin:0 auto;
padding:20px 24px 48px;
align-items:start;
}
@media (max-width:900px){
.app{grid-template-columns:1fr;}
}
.panel{
background:var(--panel);
border:1px solid var(--panel-border);
border-radius:var(--radius);
padding:16px;
margin-bottom:16px;
}
.panel:last-child{margin-bottom:0;}
.section-label{
font-family:var(--mono);
font-size:11px;
letter-spacing:.1em;
text-transform:uppercase;
color:var(--accent-primary);
border-left:2px solid var(--accent-primary);
padding-left:8px;
margin:0 0 14px;
}
.field-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
margin-bottom:10px;
}
.field{display:flex; flex-direction:column; gap:5px; margin-bottom:10px;}
.field:last-child{margin-bottom:0;}
.field label{
font-size:12px;
color:var(--text-primary);
font-family:var(--mono);
}
.shape-picker{
display:flex;
gap:8px;
}
.shape-btn{
flex:1;
display:flex;
align-items:center;
justify-content:center;
padding:8px 0;
background:var(--bg);
border:1px solid var(--panel-border);
border-radius:var(--radius);
color:var(--text-muted);
transition:border-color .15s, color .15s, background-color .15s;
}
.shape-btn svg{display:block;}
.shape-btn:hover{border-color:var(--accent-primary); color:var(--accent-primary);}
.shape-btn.active{
border-color:var(--accent-primary);
color:var(--accent-primary);
background:var(--accent-primary-dim);
}
.input-unit{position:relative;}
.input-unit input[type=number]{
width:100%;
background:var(--bg);
border:1px solid var(--panel-border);
color:var(--text-primary);
font-family:var(--mono);
font-size:13px;
padding:7px 30px 7px 8px;
border-radius:var(--radius);
}
.input-unit span{
position:absolute;
right:8px;
top:50%;
transform:translateY(-50%);
font-size:10px;
color:var(--text-faint);
font-family:var(--mono);
pointer-events:none;
}
input[type=number]:focus, select:focus, button:focus-visible{
outline:2px solid var(--accent-primary);
outline-offset:1px;
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{
-webkit-appearance:none; margin:0;
}
.slider-field{margin-bottom:14px;}
.slider-field:last-child{margin-bottom:0;}
input:disabled,
input[type=range]:disabled::-webkit-slider-thumb{
opacity:.4;
cursor:not-allowed;
}
.slider-head{
display:flex;
justify-content:space-between;
align-items:baseline;
margin-bottom:6px;
}
.slider-head label{
font-size:12px;
color:var(--text-primary);
font-family:var(--mono);
}
.slider-head .field-number{
width:64px;
background:var(--bg);
border:1px solid var(--panel-border);
border-radius:4px;
color:var(--accent-primary);
font-family:var(--mono);
font-size:12px;
text-align:right;
padding:3px 6px;
}
input[type=range]{
-webkit-appearance:none;
width:100%;
height:4px;
background:var(--hole);
border-radius:2px;
outline:none;
}
input[type=range]::-webkit-slider-thumb{
-webkit-appearance:none;
width:14px; height:14px;
border-radius:50%;
background:var(--accent-primary);
box-shadow:0 0 0 3px var(--accent-primary-dim);
cursor:pointer;
margin-top:0;
}
input[type=range]::-moz-range-thumb{
width:14px; height:14px; border:none;
border-radius:50%;
background:var(--accent-primary);
box-shadow:0 0 0 3px var(--accent-primary-dim);
cursor:pointer;
}
.hint{
font-size:11.5px;
color:var(--text-faint);
line-height:1.5;
margin:2px 0 0;
}
.preset-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
}
button{
font-family:var(--mono);
cursor:pointer;
}
.btn{
background:var(--bg);
border:1px solid var(--panel-border);
color:var(--text-primary);
font-size:11px;
letter-spacing:.03em;
text-transform:uppercase;
padding:9px 8px;
border-radius:var(--radius);
transition:border-color .15s, color .15s;
}
.btn:hover{border-color:var(--accent-primary); color:var(--accent-primary);}
.btn-primary{
background:var(--accent-primary);
border:1px solid var(--accent-primary);
color:#fff;
font-size:12px;
font-weight:700;
letter-spacing:.03em;
text-transform:uppercase;
padding:10px 12px;
border-radius:var(--radius);
width:100%;
transition:background-color .15s, border-color .15s;
}
.btn-primary:hover{background:var(--accent-primary-hover); border-color:var(--accent-primary-hover);}
.toggle-row{
display:flex;
align-items:center;
gap:8px;
font-size:12px;
color:var(--text-muted);
font-family:var(--mono);
margin-top:14px;
}
input[type=checkbox]{
appearance:none;
width:14px; height:14px;
border:1px solid var(--panel-border);
border-radius:3px;
background:var(--bg);
position:relative;
cursor:pointer;
flex:none;
}
input[type=checkbox]:checked{
background:var(--accent-secondary-dim);
border-color:var(--accent-secondary);
}
input[type=checkbox]:checked::after{
content:'';
position:absolute;
left:3px; top:0px;
width:4px; height:8px;
border:solid var(--accent-secondary);
border-width:0 2px 2px 0;
transform:rotate(45deg);
}
.viewport-col{position:sticky; top:20px;}
.hud-bar{
display:flex;
align-items:center;
gap:18px;
flex-wrap:wrap;
margin-bottom:14px;
}
.hud-toggle{
margin-top:0;
margin-left:auto;
}
.hud-stat{
background:var(--panel);
border:1px solid var(--panel-border);
border-radius:var(--radius);
padding:8px 14px;
}
.hud-stat .hud-val{
font-family:var(--mono);
font-size:16px;
color:var(--accent-secondary);
}
.hud-stat .hud-label{
font-family:var(--mono);
font-size:10px;
color:var(--text-faint);
letter-spacing:.06em;
text-transform:uppercase;
margin-top:2px;
height:14px;
line-height:14px;
overflow:hidden;
}
.hud-label-nudge{
position:relative;
top:2px;
}
.reticle-wrap{
position:relative;
display:block;
padding:14px;
background-color:var(--screen-bg);
background-image:radial-gradient(circle, var(--screen-hole) 1.4px, transparent 1.4px);
background-size:26px 26px;
border-radius:8px;
box-shadow:0 1px 2px rgba(0,0,0,.1), 0 10px 28px rgba(0,0,0,.1);
}
.reticle-wrap::before, .reticle-wrap::after,
.reticle-corner-tr, .reticle-corner-bl{
content:'';
position:absolute;
width:18px; height:18px;
border-color:var(--accent-primary);
border-style:solid;
border-width:0;
}
.reticle-wrap::before{
top:0; left:0;
border-top-width:2px; border-left-width:2px;
}
.reticle-wrap::after{
bottom:0; right:0;
border-bottom-width:2px; border-right-width:2px;
}
.reticle-corner-tr{
top:0; right:0;
border-top-width:2px; border-right-width:2px;
}
.reticle-corner-bl{
bottom:0; left:0;
border-bottom-width:2px; border-left-width:2px;
}
canvas{
display:block;
width:100%;
aspect-ratio:4/3;
border-radius:2px;
background:var(--screen-bg);
}
.viewport-caption{
max-width:640px;
color:var(--text-muted);
font-size:12.5px;
line-height:1.6;
margin-top:14px;
}
.viewport-caption b{color:var(--text-primary); font-weight:600;}
footer{
max-width:1400px;
margin:0 auto;
padding:0 24px 40px;
color:var(--text-faint);
font-size:11.5px;
font-family:var(--mono);
}

.info-dialog{
border:1px solid var(--panel-border);
border-radius:var(--radius);
background:var(--bg);
padding:20px;
max-width:640px;
width:90vw;
box-shadow:0 20px 60px rgba(0,0,0,.25);
}
.info-dialog::backdrop{
background:rgba(10,10,12,.55);
}
.info-dialog-head{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:12px;
}
.info-dialog-head .section-label{margin:0;}
.info-close-btn{
width:26px;
height:26px;
padding:0;
font-size:16px;
line-height:1;
border-radius:50%;
}
.schematic{
width:100%;
height:auto;
display:block;
}
.dim-label{
font-family:var(--mono);
font-size:10.5px;
}
.dia{
font-size:1.8em;
vertical-align:-0.08em;
baseline-shift:-10%;
}
.term-list{
margin:16px 0 0;
display:grid;
grid-template-columns:1fr 1fr;
gap:12px 20px;
}
.term-list dt{
font-family:var(--mono);
font-size:12px;
color:var(--accent-primary);
margin:0 0 3px;
}
.term-list dd{
font-size:12.5px;
color:var(--text-muted);
line-height:1.5;
margin:0;
}
@media (max-width:600px){
.term-list{grid-template-columns:1fr;}
}