/* ============================================================
   Design tokens — single source of truth (ui-acceptance-pipeline Rule 2)
   All colors / spacing / radius / shadow below must come from here.
   ============================================================ */
:root,
[data-theme="deep-space"] {
  --bg: #070B14;
  --bg-2: #0B1322;
  --surface: #101B2D;
  --surface-2: #16243A;
  --surface-3: #1D3050;
  --line: rgba(126, 166, 220, .16);
  --line-strong: rgba(126, 166, 220, .34);
  --text: #E6F1FF;
  --text-2: #A3B8D2;
  --text-3: #8AA2BE;
  --primary: #00E5FF;
  --secondary: #7C5CFF;
  --accent: #FF3D71;
  --ok: #35D6A4;
  --warn: #FFB84D;
  --on-primary: #04121A;
  --grid-line: rgba(0, 229, 255, .055);
  --glow: rgba(0, 229, 255, .22);
  --shadow-1: 0 8px 32px rgba(0, 0, 0, .38);
  --shadow-2: 0 20px 60px rgba(0, 0, 0, .52);
  --glass: rgba(16, 27, 45, .72);
  --font-display: "SF Mono", "JetBrains Mono", "Fira Code", ui-monospace, Menlo, Consolas, monospace;
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 16px; --sp-4: 24px;
  --sp-5: 32px; --sp-6: 48px; --sp-7: 64px; --sp-8: 96px;
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 20px; --r-pill: 999px;
  --maxw: 1120px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}
[data-theme="aurora-glass"] {
  --bg: #F3F6FB; --bg-2: #E9EFF8; --surface: rgba(255, 255, 255, .82);
  --surface-2: #FFFFFF; --surface-3: #E4ECF8;
  --line: rgba(24, 52, 96, .12); --line-strong: rgba(24, 52, 96, .26);
  --text: #0B1220; --text-2: #485A75; --text-3: #7A8AA0;
  --primary: #2C6BFF; --secondary: #00A998; --accent: #F2603C;
  --ok: #0F8F6A; --warn: #B26A00; --on-primary: #FFFFFF;
  --grid-line: rgba(44, 107, 255, .05); --glow: rgba(44, 107, 255, .16);
  --shadow-1: 0 8px 28px rgba(24, 52, 96, .10); --shadow-2: 0 24px 60px rgba(24, 52, 96, .16);
  --glass: rgba(255, 255, 255, .68);
  --font-display: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Noto Sans CJK SC", sans-serif;
}
[data-theme="neon-grid"] {
  --bg: #0A0618; --bg-2: #120826; --surface: #1B1040;
  --surface-2: #241657; --surface-3: #301E70;
  --line: rgba(196, 158, 255, .18); --line-strong: rgba(196, 158, 255, .38);
  --text: #F7EEFF; --text-2: #C0A9E8; --text-3: #8E76BC;
  --primary: #FF2E97; --secondary: #00F0FF; --accent: #FFD400;
  --ok: #4CE0B3; --warn: #FFC857; --on-primary: #1A0320;
  --grid-line: rgba(255, 46, 151, .075); --glow: rgba(255, 46, 151, .26);
  --shadow-1: 0 8px 32px rgba(0, 0, 0, .46); --shadow-2: 0 20px 64px rgba(0, 0, 0, .62);
  --glass: rgba(27, 16, 64, .74);
  --font-display: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}
[data-theme="blueprint"] {
  --bg: #F7F6F2; --bg-2: #EEECE4; --surface: #FFFFFF;
  --surface-2: #FAFAF7; --surface-3: #E8E6DE;
  --line: rgba(24, 40, 70, .16); --line-strong: rgba(24, 40, 70, .34);
  --text: #111827; --text-2: #52607A; --text-3: #8A94A6;
  --primary: #1E3A8A; --secondary: #0E7490; --accent: #E8590C;
  --ok: #177245; --warn: #A15C00; --on-primary: #FFFFFF;
  --grid-line: rgba(30, 58, 138, .07); --glow: rgba(30, 58, 138, .12);
  --shadow-1: 0 2px 10px rgba(24, 40, 70, .08); --shadow-2: 0 12px 32px rgba(24, 40, 70, .14);
  --glass: rgba(255, 255, 255, .86);
  --font-display: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-sans); font-size: 15px; line-height: 1.75;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
  transition: background-color .45s var(--ease), color .45s var(--ease);
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px),
                    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: var(--r-sm); }
::selection { background: var(--primary); color: var(--on-primary); }
.shell { width: min(100% - var(--sp-5), var(--maxw)); margin-inline: auto; position: relative; z-index: 1; }
.mono { font-family: var(--font-mono); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* progress + cursor glow + starfield */
#progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: var(--primary); z-index: 90; box-shadow: 0 0 12px var(--glow); }
#starfield { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .7; }
[data-theme="aurora-glass"] #starfield, [data-theme="blueprint"] #starfield { opacity: .28; }
#aurora { position: fixed; width: 620px; height: 620px; border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle, var(--glow) 0%, transparent 68%); transform: translate(-50%, -50%); opacity: 0; transition: opacity .6s; }
[data-theme="aurora-glass"] #aurora, [data-theme="deep-space"] #aurora { opacity: .5; }

/* topbar */
.topbar { position: sticky; top: 0; z-index: 80; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  background: var(--glass); border-bottom: 1px solid var(--line); }
.topbar-in { display: flex; align-items: center; gap: var(--sp-4); height: 60px; }
.brand { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--font-mono); font-size: 14px; font-weight: 600; white-space: nowrap; }
.brand .prompt { color: var(--primary); }
.brand .cursor { width: 7px; height: 15px; background: var(--primary); animation: blink 1.1s step-end infinite; }
.nav { display: flex; gap: var(--sp-4); margin-left: auto; }
.nav a { color: var(--text-2); font-size: 13px; font-family: var(--font-mono); transition: color .2s; }
.nav a:hover, .nav a.active { color: var(--primary); text-decoration: none; }
.theme-switch { display: flex; gap: var(--sp-1); padding: 3px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); }
.theme-switch button { width: 22px; height: 22px; border: 0; border-radius: 50%; padding: 0; background: transparent;
  border: 1px solid var(--line-strong); transition: transform .2s, box-shadow .2s; }
.theme-switch button:hover { transform: scale(1.16); }
.theme-switch button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--primary); }
[data-theme="deep-space"] .theme-switch button[data-t="deep-space"] { background: #00E5FF; }
[data-theme="aurora-glass"] .theme-switch button[data-t="aurora-glass"] { background: #2C6BFF; }
[data-theme="neon-grid"] .theme-switch button[data-t="neon-grid"] { background: #FF2E97; }
[data-theme="blueprint"] .theme-switch button[data-t="blueprint"] { background: #1E3A8A; }
.sw-a { background: #070B14; } .sw-b { background: #F3F6FB; } .sw-c { background: #0A0618; } .sw-d { background: #F7F6F2; }
.menu-toggle { display: none; background: transparent; color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--r-md); padding: 6px 10px; }

/* hero */
.hero { position: relative; padding: var(--sp-8) 0 var(--sp-7); min-height: 78vh; display: flex; align-items: center; }
.hero-kicker { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; color: var(--primary); text-transform: uppercase; margin-bottom: var(--sp-4); }
.hero-kicker::before { content: "// "; color: var(--text-3); }
.hero h1 { font-family: var(--font-display); font-size: clamp(32px, 6vw, 66px); line-height: 1.18; margin: 0 0 var(--sp-3); letter-spacing: -.02em; font-weight: 700; }
.hero h1 .accent { color: var(--primary); }
.hero h1 .typed { border-right: 2px solid var(--primary); padding-right: 6px; }
.hero-sub { font-size: clamp(16px, 2.2vw, 21px); color: var(--text-2); max-width: 660px; margin: 0 0 var(--sp-3); }
.hero-pitch { color: var(--text-3); font-size: 14px; font-family: var(--font-mono); margin-bottom: var(--sp-5); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-7); }
.btn { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 11px 22px; border-radius: var(--r-md);
  background: var(--primary); color: var(--on-primary); border: 1px solid var(--primary); font-size: 14px; font-weight: 600;
  transition: transform .2s var(--ease), box-shadow .2s; text-decoration: none; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px var(--glow); text-decoration: none; }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--surface-2); box-shadow: none; }
.btn .arw { font-family: var(--font-mono); }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }
.fact { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-3); position: relative; overflow: hidden; }
.fact::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 2px; background: var(--primary); opacity: .5; }
.fact .num { font-family: var(--font-display); font-size: 34px; font-weight: 700; color: var(--primary); line-height: 1.1; }
.fact .num small { font-size: 15px; margin-left: 2px; }
.fact .lbl { font-size: 13px; font-weight: 600; margin-top: var(--sp-1); }
.fact .note { font-size: 11px; color: var(--text-3); }

/* sections */
section { padding: var(--sp-7) 0; scroll-margin-top: 72px; }
.sec-head { display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.sec-head .idx { font-family: var(--font-mono); font-size: 12px; color: var(--primary); letter-spacing: .1em; }
.sec-head h2 { font-family: var(--font-display); font-size: clamp(22px, 3.4vw, 32px); margin: 0; font-weight: 700; letter-spacing: -.01em; }
.sec-head .desc { color: var(--text-3); font-size: 13px; margin-left: auto; }
.divider { height: 1px; background: var(--line); margin-bottom: var(--sp-5); }
.about-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: var(--sp-5); align-items: start; }
.about p { font-size: 16px; line-height: 1.95; color: var(--text-2); margin: 0 0 var(--sp-3); }
.about p strong { color: var(--text); font-weight: 600; }
.side-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-4); }
.side-card h3 { font-family: var(--font-mono); font-size: 12px; color: var(--primary); letter-spacing: .1em; margin: 0 0 var(--sp-3); text-transform: uppercase; }
.side-card dl { margin: 0; }
.side-card dt { font-size: 11px; color: var(--text-3); font-family: var(--font-mono); margin-top: var(--sp-2); }
.side-card dd { margin: 0; font-size: 14px; color: var(--text); }

/* skills */
.skill-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--sp-3); }
.skill-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-4);
  transition: border-color .25s, transform .25s var(--ease), box-shadow .25s; }
.skill-card:hover { border-color: var(--line-strong); transform: translateY(-3px); box-shadow: var(--shadow-1); }
.skill-top { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.skill-top h3 { margin: 0; font-size: 16px; flex: 1; }
.tag { font-family: var(--font-mono); font-size: 10px; padding: 2px 8px; border-radius: var(--r-pill);
  border: 1px solid var(--primary); color: var(--primary); white-space: nowrap; }
.bar { height: 4px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; margin: var(--sp-3) 0; }
.bar > i { display: block; height: 100%; width: 0; border-radius: var(--r-pill); background: var(--primary);
  transition: width 1.1s var(--ease); }
.skill-card.in-view .bar > i { width: var(--level); }
.skill-card ul { list-style: none; padding: 0; margin: 0; }
.skill-card li { font-size: 12.5px; color: var(--text-2); padding-left: var(--sp-3); position: relative; margin-bottom: 5px; line-height: 1.6; }
.skill-card li::before { content: "›"; position: absolute; left: 0; color: var(--primary); font-family: var(--font-mono); }

/* works */
.filter-bar { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.filter-bar button { background: transparent; color: var(--text-2); border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 6px 16px; font-size: 12.5px; font-family: var(--font-mono); transition: all .2s; }
.filter-bar button:hover { border-color: var(--primary); color: var(--primary); }
.filter-bar button[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.work-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--sp-4); }
.work-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  display: flex; flex-direction: column; transform-style: preserve-3d; transition: border-color .25s, box-shadow .25s, opacity .3s; will-change: transform; }
.work-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-2); }
.work-card.hidden { display: none; }
.work-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-3); cursor: zoom-in; }
.work-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.work-card:hover .work-media img { transform: scale(1.05); }
.work-media .no { position: absolute; left: var(--sp-3); top: var(--sp-3); font-family: var(--font-display);
  font-size: 26px; font-weight: 700; color: var(--primary); text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.work-body { padding: var(--sp-4); flex: 1; display: flex; flex-direction: column; }
.status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10.5px;
  padding: 3px 9px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); color: var(--text-2); align-self: flex-start; margin-bottom: var(--sp-2); }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status.live { color: var(--ok); border-color: var(--ok); }
.status.wip { color: var(--warn); border-color: var(--warn); }
.status.draft { color: var(--text-3); }
.work-body h3 { margin: 0 0 4px; font-size: 18px; }
.work-body .sub { font-size: 12.5px; color: var(--text-3); margin: 0 0 var(--sp-3); }
.work-body .ctx { font-size: 13px; color: var(--text-2); line-height: 1.75; margin: 0 0 var(--sp-3); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: var(--sp-2); }
.chip { font-family: var(--font-mono); font-size: 10.5px; padding: 3px 8px; border-radius: var(--r-sm);
  background: var(--surface-3); color: var(--text-2); }
.work-metrics { display: flex; gap: var(--sp-4); margin: 0 0 var(--sp-3); }
.work-metrics div { font-family: var(--font-mono); }
.work-metrics b { color: var(--primary); font-size: 18px; }
.work-metrics span { display: block; font-size: 10px; color: var(--text-3); }
.work-more { background: transparent; border: 0; border-top: 1px solid var(--line); color: var(--primary);
  font-family: var(--font-mono); font-size: 12px; padding: 11px var(--sp-4); text-align: left; width: 100%; }
.work-more:hover { background: var(--surface-2); }
.extras { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-3); margin-top: var(--sp-4); }
.extra { border: 1px dashed var(--line-strong); border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4); }
.extra h4 { margin: 0 0 4px; font-size: 14px; }
.extra p { margin: 0; font-size: 12.5px; color: var(--text-2); }
.extra .st { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3); }

/* services + process + boundaries */
.rows { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.row { display: grid; grid-template-columns: 44px 1.4fr 2fr 1.1fr; gap: var(--sp-3); align-items: center;
  padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); background: var(--surface); font-size: 13px; transition: background .2s; }
.row:last-child { border-bottom: 0; }
.row:hover { background: var(--surface-2); }
.row.head { background: var(--surface-2); font-family: var(--font-mono); font-size: 11px; color: var(--text-3); letter-spacing: .06em; }
.row .p { font-family: var(--font-mono); color: var(--primary); font-size: 11px; }
.row .name { font-weight: 600; }
.row .deliver { color: var(--text-2); }
.row .price { font-family: var(--font-mono); color: var(--primary); text-align: right; font-size: 12.5px; }
.price-note { font-size: 12px; color: var(--text-3); margin-top: var(--sp-3); }
.timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--sp-3); position: relative; }
.timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 18px; height: 1px; background: var(--line-strong); }
.tstep { position: relative; padding-top: var(--sp-6); }
.tstep .dot { position: absolute; top: 11px; left: 0; width: 14px; height: 14px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--primary); }
.tstep .s { font-family: var(--font-mono); font-size: 11px; color: var(--primary); }
.tstep h4 { margin: 4px 0; font-size: 15px; }
.tstep .t { font-size: 11px; color: var(--text-3); font-family: var(--font-mono); }
.tstep p { font-size: 12.5px; color: var(--text-2); margin: var(--sp-2) 0 0; line-height: 1.7; }
.boundary { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--sp-4); }
.boundary .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-4); }
.boundary h3 { font-family: var(--font-mono); font-size: 12px; color: var(--primary); letter-spacing: .1em; margin: 0 0 var(--sp-3); }
.boundary li { font-size: 13px; color: var(--text-2); margin-bottom: 6px; }
.boundary ul { list-style: none; padding: 0; margin: 0; }
.boundary li::before { content: "✕ "; color: var(--accent); font-family: var(--font-mono); }
.boundary .card.ok li::before { content: "✓ "; color: var(--ok); }

/* contact + footer */
.contact { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: var(--sp-6); text-align: center; position: relative; overflow: hidden; }
.contact::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 0%, var(--glow), transparent 62%); pointer-events: none; }
.contact h2 { font-family: var(--font-display); font-size: clamp(22px, 3.6vw, 34px); margin: 0 0 var(--sp-2); position: relative; }
.contact p { color: var(--text-2); font-size: 14px; margin: 0 0 var(--sp-5); position: relative; }
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--sp-3); position: relative; }
.contact-item { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-3); background: var(--bg-2); text-align: left; }
.contact-item .k { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3); letter-spacing: .08em; }
.contact-item .v { font-size: 12.5px; margin-top: 4px; word-break: normal; overflow-wrap: anywhere; color: var(--text); }
.contact-item .v.ph { color: var(--warn); }
.copy-hint { font-size: 11px; color: var(--text-3); margin-top: var(--sp-4); position: relative; }
footer { border-top: 1px solid var(--line); padding: var(--sp-5) 0 var(--sp-6); color: var(--text-3); font-size: 12px; }
.foot-in { display: flex; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; font-family: var(--font-mono); }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(3, 7, 14, .92); backdrop-filter: blur(10px);
  display: none; align-items: center; justify-content: center; padding: var(--sp-4); }
.lightbox.open { display: flex; }
.lb-in { width: min(100%, 940px); max-height: 88vh; overflow: auto; background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-xl); box-shadow: var(--shadow-2); }
.lb-img { width: 100%; max-height: 46vh; object-fit: contain; background: var(--surface-3); display: block; }
.lb-body { padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.lb-body h3 { margin: 0 0 var(--sp-2); font-size: 22px; }
.lb-body h4 { font-family: var(--font-mono); font-size: 11px; color: var(--primary); letter-spacing: .1em; margin: var(--sp-4) 0 var(--sp-2); }
.lb-body p, .lb-body li { font-size: 13.5px; color: var(--text-2); line-height: 1.8; }
.lb-body ul { padding-left: var(--sp-4); margin: 0; }
.lb-body .ev { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); border-top: 1px solid var(--line); padding-top: var(--sp-3); margin-top: var(--sp-4); }
.lb-close { position: absolute; top: var(--sp-4); right: var(--sp-5); background: var(--surface); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: 50%; width: 36px; height: 36px; font-size: 18px; line-height: 1; }

/* reveal + animations */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in-view { opacity: 1; transform: none; }
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.toast { position: fixed; bottom: var(--sp-5); left: 50%; transform: translateX(-50%) translateY(20px); z-index: 120;
  background: var(--surface); color: var(--text); border: 1px solid var(--primary); border-radius: var(--r-md);
  padding: 10px 18px; font-size: 13px; opacity: 0; transition: all .3s var(--ease); pointer-events: none; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .row { grid-template-columns: 32px 1fr 1fr; }
  .row .deliver { display: none; }
  .nav { display: none; }
  .nav.open { display: flex; position: absolute; top: 60px; left: 0; right: 0; flex-direction: column;
    background: var(--glass); backdrop-filter: blur(16px); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); gap: var(--sp-3); }
  .menu-toggle { display: block; margin-left: auto; }
  .theme-switch { order: 3; }
}
@media (max-width: 620px) {
  .hero { padding: var(--sp-6) 0 var(--sp-5); min-height: auto; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .row { grid-template-columns: 1fr; gap: 4px; }
  .row .price { text-align: left; }
  .row.head { display: none; }
  .sec-head .desc { margin-left: 0; }
  .contact { padding: var(--sp-5) var(--sp-3); }
  .lb-body { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  #starfield, #aurora { display: none; }
}
@media print {
  .topbar, #progress, #starfield, #aurora, .hero-actions, .theme-switch, .filter-bar, .work-more, .lightbox { display: none !important; }
  body::before { display: none; }
  body { background: #fff; color: #000; }
  .reveal { opacity: 1; transform: none; }
  section { padding: 12px 0; break-inside: avoid; }
}