:root { --paper:#f6f7f4; --ink:#202b2c; --muted:#606d6c; --accent:#a9e5c5; --accent-dark:#236347; --line:#d4dcd6; --white:#fff; --panel:#e7eee7; --device:#d9e2dc; --lens:#344b46; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.75 Arial,Helvetica,sans-serif; }
a { color:inherit; text-underline-offset:5px; }
a:hover { text-decoration-thickness:2px; }
a:focus-visible { outline:3px solid var(--accent-dark); outline-offset:6px; }
.skip-link { position:absolute; top:-100px; left:16px; padding:12px; background:var(--white); z-index:5; }
.skip-link:focus { top:12px; }
.shell { max-width:1220px; margin:auto; padding-left:44px; padding-right:44px; }
header { border-bottom:1px solid var(--line); }
.header-inner { min-height:108px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.wordmark { display:inline-flex; align-items:center; gap:13px; font-size:29px; line-height:1; letter-spacing:-1.4px; font-weight:750; text-decoration:none; white-space:nowrap; }
.brand-mark { display:flex; align-items:center; justify-content:center; width:40px; height:40px; background:var(--ink); color:var(--white); border-radius:9px; font-size:29px; letter-spacing:-4px; padding-right:4px; }
.brand-mark > span { color:var(--accent); }
.domain { color:var(--muted); font-weight:normal; font-size:21px; }
.header-tag { color:var(--muted); font-size:12px; }
.hero { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr); align-items:center; gap:48px; min-height:570px; padding-top:64px; padding-bottom:64px; }
.status { display:flex; align-items:center; gap:10px; font:11px/1.5 Consolas,'Courier New',monospace; letter-spacing:0.08em; color:var(--accent-dark); margin:0 0 28px; }
.status > span { display:block; width:8px; height:8px; border:2px solid var(--accent-dark); border-radius:2px; }
h1 { font-size:clamp(42px,5vw,65px); line-height:1.06; font-weight:750; letter-spacing:-0.06em; margin:0 0 30px; overflow-wrap:anywhere; }
h1 > span { color:var(--accent-dark); }
.intro { font-size:18px; color:var(--muted); line-height:1.85; max-width:530px; margin:0 0 22px; }
.welcome { font-size:15px; margin:0; }
.device-art { margin:0; min-width:0; }
.device-art > svg { display:block; width:100%; }
.device-art figcaption { text-align:center; margin-top:10px; color:var(--muted); font:9px/1.5 Consolas,'Courier New',monospace; letter-spacing:0.08em; }
.circuit { stroke:var(--line); stroke-width:2; stroke-linejoin:round; }
.node { fill:var(--paper); stroke:var(--accent-dark); stroke-width:2; }
.device-surface { fill:var(--device); stroke:var(--ink); stroke-width:2; }
.device-panel { fill:var(--panel); stroke:var(--ink); stroke-width:2; }
.lens-outer { fill:var(--lens); stroke:var(--ink); stroke-width:2; }
.lens-inner { fill:var(--accent); stroke:var(--ink); stroke-width:2; }
.aperture { fill:var(--lens); }
.device-line { stroke:var(--ink); stroke-width:3; stroke-linecap:round; }
.indicator { fill:var(--accent-dark); }
.speaker { fill:var(--white); stroke:var(--ink); stroke-width:2; }
.speaker-ring { fill:var(--device); stroke:var(--ink); stroke-width:2; }
.speaker-core { fill:var(--ink); }
.spark { stroke:var(--accent-dark); stroke-width:2; }
.update-banner { display:grid; grid-template-columns:250px minmax(0,1fr); gap:32px; padding:26px 30px; background:var(--panel); border:1px solid var(--line); border-radius:8px; margin-bottom:56px; }
.update-banner > div { display:flex; align-items:center; gap:14px; }
.pause-symbol { display:grid; place-items:center; width:28px; height:28px; border:1px solid var(--accent-dark); border-radius:50%; color:var(--accent-dark); font-size:17px; }
.update-banner strong { font-size:15px; }
.update-banner p { margin:0; color:var(--muted); font-size:14px; }
footer { border-top:1px solid var(--line); }
.footer-inner { min-height:86px; display:flex; justify-content:space-between; align-items:center; gap:24px; font-size:11px; color:var(--muted); }
.footer-inner > span:first-child { font-weight:bold; letter-spacing:0.07em; }
.error-page { padding-top:64px; padding-bottom:64px; }
.error-brand { display:inline-block; margin-bottom:56px; font-size:15px; font-weight:bold; text-decoration:none; }
.back-link { display:inline-block; margin-top:10px; }
@media (max-width:950px) {
  .shell { padding-left:32px; padding-right:32px; }
  .hero { gap:24px; }
  .update-banner { grid-template-columns:200px minmax(0,1fr); gap:24px; }
}
@media (max-width:700px) {
  .shell { padding-left:24px; padding-right:24px; }
  .header-inner { min-height:110px; flex-direction:column; align-items:flex-start; justify-content:center; gap:16px; padding-top:20px; padding-bottom:20px; }
  .wordmark { font-size:28px; }
  .header-tag { font-size:11px; }
  .hero { grid-template-columns:minmax(0,1fr); min-height:0; padding-top:42px; padding-bottom:32px; gap:28px; }
  h1 { font-size:47px; }
  .intro { font-size:17px; }
  .welcome { font-size:14px; }
  .device-art { max-width:400px; width:100%; margin:auto; }
  .device-art figcaption { font-size:8px; }
  .update-banner { grid-template-columns:minmax(0,1fr); gap:16px; padding:24px; margin-bottom:36px; }
  .footer-inner { flex-direction:column; align-items:flex-start; justify-content:center; gap:8px; padding-top:24px; padding-bottom:24px; }
}
@media (max-width:360px) {
  .shell { padding-left:20px; padding-right:20px; }
  h1 { font-size:42px; }
  .wordmark { font-size:25px; }
}