:root { --dark:#102F34; --ivory:#EFEADF; --lime:#D7F079; --sea:#7CA19B; --line:#496265; --muted:#B7CDC7; }
* { box-sizing:border-box; }
body { margin:0; background:var(--dark); color:var(--ivory); font-family:Arial,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
.page { width:min(100% - 96px,1280px); margin-inline:auto; }
header { min-height:108px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:flex; align-items:center; gap:12px; font-size:17px; }
.mark { width:36px; height:36px; display:grid; place-items:center; border:1px solid var(--sea); border-radius:50%; color:var(--lime); font:27px Georgia,serif; }
.location { color:var(--muted); font-size:14px; }
.demo-notice { margin:0; padding:16px 0; border-top:1px solid var(--line); color:var(--muted); font-size:13px; line-height:1.5; }
main { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:64px; align-items:center; padding:36px 0 45px; }
.contact { grid-column:2; grid-row:1; }
.dash { display:block; width:42px; height:3px; background:var(--lime); margin-bottom:27px; }
h1 { font:normal clamp(72px,8vw,104px)/1 Georgia,serif; letter-spacing:-.05em; margin:0; }
h1 span { display:block; font:normal .43em/1.2 Arial,sans-serif; letter-spacing:-.025em; margin-top:14px; }
.intro { color:var(--muted); font-size:17px; line-height:1.6; margin:35px 0 26px; }
.actions a { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:76px; padding:18px 23px; border:1px solid var(--lime); border-radius:4px; color:var(--dark); background:var(--lime); text-decoration:none; font-size:clamp(22px,2.2vw,31px); letter-spacing:-.025em; font-variant-numeric:tabular-nums; transition:background-color .16s ease; }
.actions a:hover { background:var(--ivory); }
a:focus-visible { outline:3px solid var(--ivory); outline-offset:5px; }
.place { color:var(--muted); font-size:13px; margin:20px 0 0; }
.drawing { grid-column:1; grid-row:1; position:relative; min-width:0; padding:0 0 24px; }
.drawing svg { display:block; width:100%; height:auto; }
.guide { fill:none; stroke:var(--line); stroke-width:1; }
.key-outline { fill:var(--dark); stroke:var(--ivory); stroke-width:5; }
.key-inner { fill:none; stroke:var(--sea); stroke-width:2; }
.shaft { fill:none; stroke:var(--ivory); stroke-width:5; stroke-linejoin:round; }
.teeth { fill:var(--lime); }
.dot { fill:var(--sea); }
.drawing-label { display:block; text-align:center; color:var(--sea); font:11px "Courier New",monospace; letter-spacing:.18em; }
footer { border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:24px; padding:28px 0 36px; color:var(--muted); font-size:13px; }
footer a { color:var(--ivory); text-decoration:none; }
footer a:hover { text-decoration:underline; text-underline-offset:4px; }
@media(max-width:800px) {
 .page { width:calc(100% - 48px); }
 main { grid-template-columns:minmax(0,1fr); gap:36px; padding-top:24px; }
 .contact { grid-column:1; grid-row:1; max-width:540px; }
 .drawing { grid-column:1; grid-row:2; max-width:540px; width:100%; justify-self:center; }
 h1 { font-size:94px; }
 .intro { margin-top:26px; }
}
@media(max-width:440px) {
 .page { width:calc(100% - 36px); }
 header { min-height:78px; gap:12px; }
 .brand { font-size:14px; gap:8px; }
 .mark { width:30px; height:30px; font-size:24px; }
 .location { max-width:88px; text-align:right; font-size:12px; line-height:1.45; }
 .demo-notice { font-size:12px; padding:12px 0; }
 h1 { font-size:78px; }
 .dash { margin-bottom:20px; }
 .intro { font-size:15px; margin:24px 0 20px; }
 .actions a { font-size:25px; padding:17px; min-height:68px; gap:12px; }
 footer { font-size:12px; gap:12px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; animation:none!important; scroll-behavior:auto!important; } }