:root {
  color-scheme: dark;
  --bg: #02090a;
  --bg-deep: #000607;
  --glass-bg: linear-gradient(135deg, rgba(255,255,255,.28), rgba(255,255,255,.11));
  --glass-bg-strong: linear-gradient(135deg, rgba(255,255,255,.34), rgba(255,255,255,.14));
  --glass-border: rgba(255,255,255,.28);
  --glass-border-soft: rgba(255,255,255,.16);
  --accent: #9AF7F0;
  --accent-2: #B8FFF7;
  --accent-3: #DFFDFC;
  --text-main: rgba(245,252,252,.96);
  --text-muted: rgba(218,233,233,.70);
  --text-dim: rgba(179,204,207,.52);
  --mx: 50%;
  --my: 50%;
  --nav-height: 76px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text-main);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(620px circle at var(--mx) var(--my), rgba(154,247,240,.105), transparent 45%);
}
body.palette-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
::selection { background: rgba(154,247,240,.25); color: #fff; }
.wallpaper-layer, .wallpaper-overlay, .noise-layer { position: fixed; inset: 0; pointer-events: none; }
.wallpaper-layer {
  z-index: -5;
  background-image: url("https://bing.img.run/uhd.php"), radial-gradient(circle at 20% 18%, rgba(154,247,240,.14), transparent 32%), linear-gradient(125deg, #011012, #031d20 46%, #010506);
  background-size: cover, cover, cover;
  background-position: center, center, center;
  transform: scale(1.04);
  transition: opacity .35s ease, filter .35s ease;
}
.wallpaper-layer.is-changing { opacity: .52; filter: saturate(.8); }
.wallpaper-overlay {
  z-index: -4;
  background: radial-gradient(circle at 20% 18%, rgba(154,247,240,.10), transparent 28%), radial-gradient(circle at 80% 30%, rgba(184,255,247,.10), transparent 32%), linear-gradient(102deg, rgba(0,8,10,.56), rgba(0,8,10,.32) 46%, rgba(0,8,10,.54));
}
.noise-layer {
  z-index: -3;
  opacity: .045;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(circle at 50% 30%, black, transparent 72%);
}
.container { width: min(1260px, calc(100% - 40px)); margin: 0 auto; }
.wide-container { width: min(1360px, calc(100% - 40px)); margin: 0 auto; }
.skip-link { position: absolute; left: 16px; top: -50px; z-index: 1000; padding: 10px 14px; border-radius: 999px; background: #fff; color: #001214; transition: top .2s; }
.skip-link:focus { top: 14px; }
.site-nav { position: fixed; top: 14px; left: 0; right: 0; z-index: 80; pointer-events: none; }
.nav-shell {
  width: min(1260px, calc(100% - 28px));
  margin: 0 auto;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 10px 9px 16px;
  pointer-events: auto;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 18px 60px rgba(0,0,0,.28);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.site-nav.is-scrolled .nav-shell { background: rgba(255, 255, 255, .18); border-color: rgba(184,255,247,.26); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 18px 70px rgba(0,0,0,.28); }
.brand { display: inline-flex; align-items: center; gap: 0; font-weight: 780; letter-spacing: -.02em; white-space: nowrap; }
.brand-text { font-size: 1.05rem; color: rgba(248,252,252,.98); }
.brand-text.solo { font-weight: 780; }
.brand-mark { display: none !important; }
.nav-links { display: flex; align-items: center; gap: 3px; }
.nav-links a, .nav-links button, .mobile-panel a, .mobile-panel button { border: 0; color: rgba(232,248,248,.77); background: transparent; cursor: pointer; border-radius: 999px; padding: 9px 13px; transition: color .18s ease, background .18s ease, transform .18s ease; }
.nav-links a:hover, .nav-links button:hover, .mobile-panel a:hover, .mobile-panel button:hover { color: #fff; background: rgba(255,255,255,.08); }
.nav-links .external { color: rgba(184,255,247,.82); }
.nav-actions { display: flex; align-items: center; gap: 8px; }
.icon-btn, .menu-btn { min-width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; background: rgba(255,255,255,.06); color: var(--text-main); cursor: pointer; transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.icon-btn:hover, .menu-btn:hover { transform: translateY(-1px); border-color: rgba(154,247,240,.38); background: rgba(154,247,240,.10); }
.menu-btn { display: none; }
.mobile-panel { display: none; }
main { position: relative; z-index: 1; padding-top: calc(var(--nav-height) + 42px); }
.hero { position: relative; min-height: min(760px, calc(100vh - 70px)); display: grid; grid-template-columns: minmax(440px, .86fr) minmax(680px, 1.14fr); align-items: center; gap: clamp(34px, 4.6vw, 80px); padding: clamp(26px, 6vh, 68px) 0 clamp(56px, 8vh, 96px); }
.hero-content { position: relative; z-index: 2; }
.hero-watermark { position: absolute; right: -6vw; bottom: 1%; z-index: 0; pointer-events: none; user-select: none; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(7rem, 18vw, 19rem); line-height: .8; letter-spacing: -.08em; opacity: .034; color: #fff; white-space: nowrap; }
.eyebrow { width: fit-content; display: inline-flex; align-items: center; gap: 9px; margin: 0 0 18px; padding: 8px 13px; border: 1px solid rgba(184,255,247,.18); border-radius: 999px; background: rgba(255,255,255,.09); color: var(--accent-2); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; box-shadow: inset 0 1px 0 rgba(255,255,255,.18); backdrop-filter: blur(12px); }
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 18px var(--accent); }
.hero-title { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(4rem, 10.5vw, 10.5rem); line-height: .84; letter-spacing: -.075em; color: var(--text-main); text-shadow: 0 12px 55px rgba(0,0,0,.55); }
.hero-subtitle { max-width: 680px; margin: 24px 0 0; color: rgba(240,252,252,.82); font-size: clamp(1.12rem, 1.8vw, 1.58rem); line-height: 1.55; letter-spacing: -.02em; }
.hero-desc { max-width: 560px; margin: 13px 0 0; color: var(--text-muted); font-size: 1.02rem; }
.action-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.14); color: var(--text-main); font-weight: 700; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease; backdrop-filter: blur(14px); }
.btn.primary { background: linear-gradient(135deg, rgba(154,247,240,.95), rgba(223,253,252,.78)); color: #001719; border-color: rgba(255,255,255,.48); box-shadow: 0 12px 40px rgba(154,247,240,.19); }
.btn:hover { transform: translateY(-2px); border-color: rgba(154,247,240,.40); box-shadow: 0 16px 40px rgba(0,0,0,.20), 0 0 25px rgba(154,247,240,.11); }
.info-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-top: 30px; }
.glass-card { background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 24px 70px rgba(0,0,0,.18); backdrop-filter: blur(28px) saturate(165%); -webkit-backdrop-filter: blur(28px) saturate(165%); border-radius: 24px; }
.info-card { padding: 16px; background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.10)); }
.info-card strong { display: block; margin-bottom: 4px; color: var(--accent-3); }
.info-card span { color: var(--text-muted); font-size: .92rem; }
.hero-visual { position: relative; z-index: 2; min-height: 430px; display: grid; place-items: center; }
.orb-stage { position: relative; width: min(430px, 100%); aspect-ratio: 1; border-radius: 42px; overflow: hidden; background: radial-gradient(circle at 50% 50%, rgba(154,247,240,.08), transparent 48%), linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.025)); }
.orb-stage::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(223,253,252,.22) 1px, transparent 1px); background-size: 24px 24px; opacity: .18; mask-image: radial-gradient(circle at 50% 50%, black 0 42%, transparent 74%); }
.glass-orb { position: absolute; width: 54%; aspect-ratio: 1; left: 50%; top: 49%; transform: translate3d(calc(-50% + var(--orb-x, 0px)), calc(-50% + var(--orb-y, 0px)), 0); border-radius: 999px; background: radial-gradient(circle at 34% 24%, rgba(255,255,255,.96), rgba(255,255,255,.18) 19%, transparent 27%), radial-gradient(circle at 64% 72%, rgba(154,247,240,.32), transparent 35%), radial-gradient(circle at 43% 42%, rgba(184,255,247,.12), rgba(255,255,255,.045) 58%, rgba(1,22,24,.20) 100%); border: 1px solid rgba(255,255,255,.34); box-shadow: inset 12px 16px 32px rgba(255,255,255,.11), inset -20px -26px 44px rgba(0,30,34,.34), 0 32px 85px rgba(0,0,0,.42), 0 0 80px rgba(154,247,240,.14); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); }
.glass-orb::after { content: ""; position: absolute; inset: 13%; border-radius: inherit; border: 1px solid rgba(255,255,255,.16); background: radial-gradient(circle at 55% 20%, rgba(255,255,255,.12), transparent 36%); mask-image: linear-gradient(145deg, black, transparent 76%); }
.orbit { position: absolute; inset: 14%; border: 1px solid rgba(184,255,247,.24); border-radius: 50%; transform: rotateX(67deg) rotateZ(18deg); box-shadow: 0 0 26px rgba(154,247,240,.08); animation: orbitRotate 18s linear infinite; }
.orbit.two { inset: 21%; transform: rotateX(72deg) rotateZ(-36deg); opacity: .65; animation-duration: 26s; animation-direction: reverse; }
.orbit.three { inset: 8%; opacity: .24; transform: rotateX(60deg) rotateZ(72deg); animation-duration: 34s; }
.shard { position: absolute; width: 44px; height: 18px; border-radius: 999px; background: linear-gradient(100deg, rgba(255,255,255,.34), rgba(154,247,240,.06)); border: 1px solid rgba(255,255,255,.16); box-shadow: 0 10px 30px rgba(0,0,0,.22); backdrop-filter: blur(8px); animation: floatShard 8s ease-in-out infinite; }
.shard.s1 { left: 14%; top: 28%; transform: rotate(-25deg); }
.shard.s2 { right: 10%; top: 58%; width: 58px; animation-delay: -2.5s; transform: rotate(17deg); }
.shard.s3 { left: 27%; bottom: 15%; width: 32px; animation-delay: -4s; transform: rotate(45deg); }
.core-label { position: absolute; left: 22px; bottom: 20px; right: 22px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border-radius: 18px; border: 1px solid rgba(255,255,255,.12); background: rgba(1,15,17,.38); color: var(--text-muted); font-size: 12px; backdrop-filter: blur(16px); }
.core-label strong { color: var(--accent-3); }
.code-stage { width: min(540px, 100%); min-height: 430px; padding: 18px; display: flex; align-items: stretch; background: linear-gradient(135deg, rgba(255,255,255,.20), rgba(255,255,255,.08)); }
.code-window { position: relative; width: 100%; border-radius: 30px; overflow: hidden; border: 1px solid rgba(255,255,255,.24); background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.05)); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 30px 80px rgba(0,0,0,.18); backdrop-filter: blur(26px) saturate(160%); -webkit-backdrop-filter: blur(26px) saturate(160%); }
.code-window::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 18% 16%, rgba(255,255,255,.22), transparent 20%), linear-gradient(135deg, rgba(255,255,255,.04), transparent 55%); pointer-events: none; }
.code-window-head { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); }
.code-dots { display: inline-flex; gap: 8px; }
.code-dots span { width: 10px; height: 10px; border-radius: 999px; background: rgba(255,255,255,.62); box-shadow: 0 0 12px rgba(255,255,255,.16); }
.code-dots span:nth-child(2) { background: rgba(184,255,247,.85); }
.code-dots span:nth-child(3) { background: rgba(154,247,240,.62); }
.code-tab { padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.08); color: rgba(246,252,252,.92); font-size: 13px; }
.code-window-body { position: relative; padding: 24px 24px 28px; min-height: 350px; display: flex; flex-direction: column; gap: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 14px; line-height: 1.6; }
.code-line { position: relative; max-width: 100%; width: 100%; min-height: 16px; padding: 2px 0; color: rgba(237,249,249,.85); opacity: .95; animation: codeFloat 8s ease-in-out infinite; }
.code-line.spacer { min-height: 12px; }
.code-line:nth-child(2n) { animation-delay: -.8s; }
.code-line:nth-child(3n) { animation-delay: -1.8s; }
.code-line.w-92 { width: 92%; }
.code-line.w-90 { width: 90%; }
.code-line.w-88 { width: 88%; }
.code-line.w-84 { width: 84%; }
.code-line.w-82 { width: 82%; }
.code-line.w-78 { width: 78%; }
.code-line.w-76 { width: 76%; }
.code-line.w-74 { width: 74%; }
.code-line.w-72 { width: 72%; }
.code-line.w-54 { width: 54%; }
.code-line.w-44 { width: 44%; }
.code-line.w-40 { width: 40%; }
.indent-1 { margin-left: 18px; }
.indent-2 { margin-left: 36px; }
.token.keyword { color: #bff7ff; }
.token.variable { color: #ffffff; }
.token.function, .token.property { color: #9af7f0; }
.token.string { color: #dffdfc; }
.token.array, .token.number, .token.boolean { color: #b8fff7; }
.token.tag, .token.attr { color: rgba(244,251,252,.9); }
.token.op, .token.brace { color: rgba(219,236,236,.72); }
.typing-caret { position: absolute; right: 26px; bottom: 28px; width: 10px; height: 20px; border-radius: 4px; background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(154,247,240,.80)); box-shadow: 0 0 22px rgba(154,247,240,.28); animation: caretBlink 1s steps(1) infinite; }
.code-reflection { position: absolute; inset: auto -20% -20% 30%; height: 160px; background: radial-gradient(circle at 20% 10%, rgba(154,247,240,.18), transparent 48%); filter: blur(40px); opacity: .72; pointer-events: none; }
@keyframes codeFloat { 0%, 100% { transform: translateX(0); opacity: .92; } 50% { transform: translateX(4px); opacity: 1; } }
@keyframes caretBlink { 0%, 45% { opacity: 1; } 46%, 100% { opacity: .15; } }
@keyframes orbitRotate { to { rotate: 360deg; } }
@keyframes floatShard { 0%,100% { translate: 0 0; opacity: .74; } 50% { translate: 0 -12px; opacity: 1; } }
.section { padding: 78px 0; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.section-kicker { margin: 0 0 8px; color: var(--accent); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.section-title { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(2.1rem, 4vw, 4rem); line-height: 1; letter-spacing: -.045em; }
.section-note { max-width: 430px; color: var(--text-muted); margin: 0; }
.project-card { position: relative; overflow: hidden; padding: clamp(24px, 4vw, 38px); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.project-card:hover { transform: translateY(-4px); border-color: rgba(154,247,240,.36); box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 28px 85px rgba(0,0,0,.40), 0 0 0 1px rgba(154,247,240,.10); }
.project-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(154,247,240,.70), transparent); opacity: .7; }
.project-top { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 18px; }
.project-icon { width: 52px; height: 52px; border-radius: 18px; display: grid; place-items: center; background: rgba(154,247,240,.10); border: 1px solid rgba(154,247,240,.20); color: var(--accent-3); box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }
.project-card h3 { margin: 0 0 10px; font-size: clamp(1.65rem, 3vw, 2.6rem); letter-spacing: -.04em; }
.project-card p { color: var(--text-muted); max-width: 690px; margin: 0 0 20px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 24px; }
.tag { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); color: rgba(234,250,250,.78); background: rgba(255,255,255,.055); font-size: 13px; }
.stack-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.stack-chip { padding: 16px 18px; text-align: center; color: var(--text-muted); transition: transform .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease; }
.stack-chip:hover { transform: translateY(-2px); background: var(--glass-bg-strong); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 18px 40px rgba(0,0,0,.24), 0 0 28px rgba(154,247,240,.10); }
.contact-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 16px; }
.contact-card { padding: 26px; }
.contact-card p { color: var(--text-muted); margin: 10px 0 22px; }
.link-list { display: grid; gap: 10px; }
.link-pill { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border-radius: 18px; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.10); color: rgba(236,250,250,.82); transition: background .18s ease, transform .18s ease, border-color .18s ease; }
.link-pill:hover { transform: translateY(-2px); background: rgba(154,247,240,.10); border-color: rgba(154,247,240,.25); }
.site-footer { padding: 38px 0 54px; color: var(--text-dim); border-top: 1px solid rgba(255,255,255,.08); }
.footer-inner { display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.footer-inner p { margin: 0; }
.palette-backdrop { position: fixed; inset: 0; z-index: 120; display: none; place-items: start center; padding-top: 13vh; background: rgba(0,7,8,.55); backdrop-filter: blur(10px); }
.palette-backdrop.open { display: grid; }
.command-palette { width: min(640px, calc(100% - 28px)); padding: 14px; border-radius: 26px; }
.palette-head { display: flex; align-items: center; gap: 10px; padding: 12px 13px 15px; color: var(--text-muted); border-bottom: 1px solid rgba(255,255,255,.10); }
.palette-head kbd { margin-left: auto; padding: 4px 8px; border-radius: 8px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.10); color: var(--text-dim); font-size: 12px; }
.command-list { display: grid; gap: 8px; padding-top: 12px; }
.command { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 15px; border: 1px solid rgba(255,255,255,.08); border-radius: 18px; background: rgba(255,255,255,.045); color: var(--text-main); cursor: pointer; text-align: left; transition: background .16s ease, border-color .16s ease; }
.command:hover, .command:focus-visible { outline: none; background: rgba(154,247,240,.10); border-color: rgba(154,247,240,.28); }
.command span:last-child { color: var(--text-dim); font-size: 12px; }
.tool-page main { padding-top: 100px; }
.tool-hero { padding: 36px 0 22px; }
.tool-title { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(2.5rem, 7vw, 6rem); line-height: .9; letter-spacing: -.055em; margin: 0 0 16px; }
.tool-desc { color: var(--text-muted); max-width: 720px; }
.tools-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; padding: 24px 0 70px; }
.tool-card { padding: 24px; transition: transform .18s, border-color .18s; }
.tool-card:hover { transform: translateY(-3px); border-color: rgba(154,247,240,.32); }
.tool-card h2 { margin: 0 0 10px; font-size: 1.35rem; }
.form-row { display: flex; gap: 10px; flex-wrap: wrap; }
.input, textarea, select { width: 100%; color: var(--text-main); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: 16px; padding: 13px 14px; outline: none; }
textarea { resize: vertical; min-height: 160px; }
.input:focus, textarea:focus, select:focus { border-color: rgba(154,247,240,.45); box-shadow: 0 0 0 3px rgba(154,247,240,.10); }
.ip-layout { display: grid; grid-template-columns: minmax(300px,.85fr) minmax(0,1.15fr); gap: 16px; align-items: stretch; padding: 24px 0 70px; }
.ip-panel { padding: 24px; }
.ip-stack { display: grid; gap: 16px; }
.ip-card { padding: 20px; overflow: hidden; }
.ip-card h2 { margin: 0 0 8px; font-size: 1.1rem; }
.ip-card .meta { margin: 0 0 14px; color: var(--text-dim); font-size: .92rem; }
.ip-result { margin-top: 14px; display: grid; gap: 6px; }
.info-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.08); color: var(--text-muted); }
.info-row strong { color: var(--text-main); text-align: right; word-break: break-all; }
.map-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.map-panel { min-height: 336px; overflow: hidden; position: relative; }
.map-panel h3 { position: absolute; left: 16px; top: 14px; z-index: 2; margin: 0; padding: 8px 12px; border-radius: 999px; background: rgba(0,12,14,.52); color: var(--accent-3); border: 1px solid rgba(255,255,255,.12); font-size: 13px; backdrop-filter: blur(12px); }
.map-frame { width: 100%; height: 100%; min-height: 336px; border: 0; filter: grayscale(78%) invert(92%) contrast(86%); opacity: .82; }
.local-map-visual { min-height: 336px; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 50% 52%, rgba(154,247,240,.18), transparent 33%), radial-gradient(circle at 30% 20%, rgba(255,255,255,.08), transparent 24%), linear-gradient(135deg, rgba(1,28,31,.72), rgba(1,8,10,.72)); }
.network-radar { width: min(260px, 78%); aspect-ratio: 1; border-radius: 50%; position: relative; border: 1px solid rgba(154,247,240,.28); box-shadow: inset 0 0 46px rgba(154,247,240,.06), 0 0 44px rgba(154,247,240,.12); background: repeating-radial-gradient(circle, rgba(154,247,240,.16) 0 1px, transparent 1px 42px), conic-gradient(from 160deg, rgba(154,247,240,.20), transparent 36%, rgba(255,255,255,.06) 50%, transparent 72%, rgba(154,247,240,.18)); }
.network-radar::before, .network-radar::after { content: ""; position: absolute; border-radius: 999px; background: var(--accent); box-shadow: 0 0 20px var(--accent); }
.network-radar::before { width: 10px; height: 10px; left: 47%; top: 47%; }
.network-radar::after { width: 7px; height: 7px; right: 24%; top: 32%; opacity: .75; }
.map-note { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 2; margin: 0; color: var(--text-muted); font-size: 13px; padding: 10px 12px; border-radius: 16px; background: rgba(0,12,14,.50); border: 1px solid rgba(255,255,255,.10); backdrop-filter: blur(12px); }
.draw-shell { display: grid; grid-template-columns: minmax(300px,.85fr) minmax(0,1.15fr); gap: 16px; padding: 24px 0 70px; }
.draw-panel, .draw-stage { padding: 24px; }
.draw-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.draw-tab { border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.055); color: var(--text-muted); border-radius: 999px; padding: 9px 12px; cursor: pointer; }
.draw-tab.active { color: #001719; background: linear-gradient(135deg, rgba(154,247,240,.95), rgba(223,253,252,.78)); border-color: rgba(255,255,255,.42); }
.draw-mode { display: none; gap: 12px; }
.draw-mode.active { display: grid; }
.option-row { display: grid; grid-template-columns: 1fr 110px; gap: 10px; }
.switch-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; color: var(--text-muted); font-size: 14px; }
.switch-row label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.draw-output { display: grid; place-items: center; min-height: 220px; margin: 0 0 18px; border-radius: 24px; border: 1px solid rgba(154,247,240,.18); background: radial-gradient(circle at 50% 40%, rgba(154,247,240,.13), transparent 42%), rgba(154,247,240,.055); font-size: clamp(2.1rem, 7vw, 5rem); font-weight: 850; letter-spacing: -.05em; text-align: center; padding: 24px; overflow-wrap: anywhere; }
.draw-output.rolling { animation: drawPulse .36s ease-in-out infinite alternate; }
@keyframes drawPulse { from { transform: scale(.992); border-color: rgba(154,247,240,.18); } to { transform: scale(1.006); border-color: rgba(154,247,240,.44); } }
.history-box { margin-top: 18px; }
.history-box h3 { margin: 0 0 8px; font-size: 1rem; color: var(--accent-3); }
.mini-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.stat-card { padding: 14px; border-radius: 18px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.08); }
.stat-card strong { display: block; font-size: 1.3rem; }
.stat-card span { color: var(--text-dim); font-size: .86rem; }
.article-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; padding: 24px 0 70px; }
.article-card { padding: 24px; min-height: 280px; display: flex; flex-direction: column; justify-content: space-between; }
.article-card h2 { margin: 0 0 12px; font-size: 1.45rem; }
.article-card p { color: var(--text-muted); }
@media (max-width: 1040px) {
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-visual { min-height: 340px; }
  .info-grid, .stack-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .contact-grid, .ip-layout, .draw-shell { grid-template-columns: 1fr; }
  .tools-grid, .article-grid { grid-template-columns: 1fr; }
}
@media (max-width: 920px) {
  :root { --nav-height: 68px; }
  .container, .wide-container { width: min(100% - 24px, 1260px); }
  .nav-links { display: none; }
  .menu-btn { display: inline-grid; place-items: center; }
  .icon-btn { display: none; }
  .mobile-panel { position: fixed; top: 82px; left: 14px; right: 14px; pointer-events: auto; padding: 10px; border: 1px solid rgba(255,255,255,.13); border-radius: 24px; background: rgba(3,13,15,.88); box-shadow: 0 26px 80px rgba(0,0,0,.45); backdrop-filter: blur(18px); }
  .mobile-panel.open { display: grid; gap: 6px; }
  .mobile-panel a, .mobile-panel button { text-align: left; border-radius: 15px; }
  .hero { padding-top: 28px; }
  .hero-title { font-size: clamp(3.5rem, 18vw, 6.2rem); }
  .hero-watermark { display: none; }
  .hero-visual { display: grid; min-height: 280px; }
  .code-stage { min-height: 280px; }
  .code-window-body { min-height: 240px; font-size: 12px; padding: 18px; }
  .info-grid { grid-template-columns: 1fr; }
  .section { padding: 56px 0; }
  .section-head { display: block; }
  .section-note { margin-top: 12px; }
  .footer-inner { display: block; }
  .footer-inner p + p { margin-top: 8px; }
  .tool-page main { padding-top: 92px; }
}
@media (max-width: 560px) {
  .nav-shell { padding-left: 12px; }
  .brand span:last-child { max-width: 124px; overflow: hidden; text-overflow: ellipsis; }
  .hero-title, .tool-title { letter-spacing: -.055em; }
  .action-row .btn { width: 100%; }
  .stack-grid, .mini-grid { grid-template-columns: 1fr; }
  .form-row .btn, .form-row .input { width: 100%; }
  .option-row { grid-template-columns: 1fr; }
  .info-row { grid-template-columns: 1fr; gap: 4px; }
  .info-row strong { text-align: left; }
  .map-panel, .map-frame, .local-map-visual { min-height: 280px; }
  .draw-output { min-height: 180px; font-size: clamp(1.8rem, 16vw, 3.8rem); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}


/* upgraded interactive code window */
.hero-visual { align-self: stretch; }
.code-stage { width: min(640px, 100%); min-height: 520px; padding: 16px; align-self: center; }
.code-window { display: flex; flex-direction: column; min-height: 488px; transform-style: preserve-3d; transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease; }
.code-window.is-tilting { box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 42px 90px rgba(0,0,0,.22); border-color: rgba(255,255,255,.34); }
.code-window-head { gap: 12px; justify-content: space-between; }
.code-tabs { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; overflow: auto hidden; scrollbar-width: none; }
.code-tabs::-webkit-scrollbar { display: none; }
.code-tab-btn { border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: rgba(245,252,252,.82); padding: 8px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease; }
.code-tab-btn:hover, .code-tab-btn.active { background: rgba(255,255,255,.14); border-color: rgba(184,255,247,.30); color: #fff; transform: translateY(-1px); }
.code-copy { border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.08); color: rgba(245,252,252,.9); padding: 8px 12px; border-radius: 999px; cursor: pointer; transition: background .18s ease, border-color .18s ease; }
.code-copy:hover { background: rgba(154,247,240,.12); border-color: rgba(154,247,240,.30); }
.code-window-body { min-height: 372px; gap: 10px; }
.code-pane { display: none; animation: paneFade .22s ease; }
.code-pane.active { display: flex; flex-direction: column; gap: 10px; }
.code-line { width: auto; }
.code-line.indent-1 { margin-left: 18px; }
.code-line.indent-2 { margin-left: 34px; }
.code-window-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: auto; padding: 14px 18px 18px; border-top: 1px solid rgba(255,255,255,.08); background: linear-gradient(180deg, rgba(255,255,255,.00), rgba(255,255,255,.04)); }
.code-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.code-window-foot .tag { margin: 0; }
.code-mini-status { color: rgba(228,247,247,.74); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
@keyframes paneFade { from { opacity: .1; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 1120px) {
  .hero { grid-template-columns: 1fr; }
  .hero-visual { order: 2; }
  .code-stage { width: min(720px, 100%); min-height: 460px; }
}
@media (max-width: 720px) {
  .code-stage { min-height: 360px; }
  .code-window { min-height: 330px; }
  .code-window-body { min-height: 250px; padding: 18px; font-size: 12px; }
  .code-window-head { flex-wrap: wrap; align-items: flex-start; }
  .code-copy { margin-left: auto; }
  .code-window-foot { flex-direction: column; align-items: flex-start; }
}


/* width + mobile refinement */
.hero-content { max-width: 680px; }
.hero-subtitle { max-width: 720px; }
.hero-desc { max-width: 620px; }
.hero-visual { justify-self: end; width: 100%; }
.code-stage { width: min(760px, 100%); min-height: 540px; padding: 18px; }
.code-window { min-height: 504px; }
.code-window-body { min-height: 390px; padding: 26px 26px 30px; }
.code-window-head { padding: 16px 18px; }
.code-tabs { gap: 10px; }
.code-tab-btn { padding: 9px 14px; }
.code-window-foot { padding: 14px 18px 18px; }

@media (max-width: 1360px) {
  .container { width: min(1180px, calc(100% - 34px)); }
  .nav-shell { width: min(1180px, calc(100% - 24px)); }
  .hero { grid-template-columns: minmax(0, .92fr) minmax(620px, 1.08fr); gap: clamp(28px, 3vw, 44px); }
  .code-stage { width: min(700px, 100%); }
}

@media (max-width: 1120px) {
  .hero { grid-template-columns: 1fr; gap: 24px; }
  .hero-content { max-width: 100%; }
  .hero-visual { order: 2; justify-self: stretch; }
  .code-stage { width: min(820px, 100%); min-height: 470px; margin-inline: auto; }
  .code-window { min-height: 430px; }
}

@media (max-width: 920px) {
  .nav-shell { width: min(calc(100% - 18px), 100%); min-height: 56px; padding: 8px 8px 8px 14px; }
  main { padding-top: calc(var(--nav-height) + 28px); }
  .hero { padding-top: 18px; gap: 18px; }
  .hero-title { font-size: clamp(3.2rem, 17vw, 5.9rem); line-height: .88; }
  .hero-subtitle { margin-top: 18px; font-size: clamp(1rem, 3.8vw, 1.26rem); line-height: 1.5; }
  .hero-desc { font-size: .96rem; }
  .action-row { gap: 10px; }
  .action-row .btn { min-height: 44px; }
  .hero-visual { min-height: auto; }
  .code-stage { width: 100%; min-height: 390px; padding: 12px; border-radius: 22px; }
  .code-window { min-height: 360px; border-radius: 24px; }
  .code-window-head { padding: 14px 14px 10px; gap: 10px; }
  .code-tabs { width: 100%; order: 2; }
  .code-copy { order: 3; margin-left: auto; }
  .code-window-body { min-height: 250px; padding: 16px 16px 18px; font-size: 11.5px; line-height: 1.55; }
  .code-window-foot { padding: 12px 14px 14px; flex-direction: column; align-items: flex-start; gap: 10px; }
  .tag { padding: 6px 10px; font-size: 12px; }
}

@media (max-width: 560px) {
  .nav-shell { padding-left: 12px; border-radius: 20px; }
  .brand-text { font-size: .98rem; }
  .mobile-panel { top: 74px; left: 10px; right: 10px; padding: 8px; border-radius: 18px; }
  .mobile-panel a, .mobile-panel button { padding: 11px 12px; }
  .hero { padding-bottom: 40px; }
  .hero-title { font-size: clamp(3rem, 18vw, 4.6rem); }
  .hero-subtitle { max-width: none; }
  .action-row { display: grid; grid-template-columns: 1fr; }
  .action-row .btn { width: 100%; }
  .code-stage { min-height: 340px; padding: 10px; }
  .code-window { min-height: 320px; }
  .code-window-body { min-height: 220px; padding: 14px 14px 16px; font-size: 11px; }
  .code-tab-btn { padding: 8px 11px; font-size: 12px; }
  .code-copy { padding: 7px 11px; font-size: 12px; }
  .code-badges { gap: 6px; }
  .code-mini-status { font-size: 11px; }
}


/* final hero spacing guard */
@media (min-width: 1121px) {
  .container { width: min(1500px, calc(100% - 64px)); }
  .nav-shell { width: min(1260px, calc(100% - 28px)); }
  .hero {
    grid-template-columns: minmax(520px, 0.92fr) minmax(720px, 1.08fr);
    gap: clamp(54px, 5vw, 96px);
  }
  .hero-content {
    max-width: 660px;
    z-index: 5;
  }
  .hero-title {
    font-size: clamp(4.8rem, 7.8vw, 8.6rem);
    letter-spacing: -.065em;
  }
  .hero-subtitle {
    max-width: 650px;
  }
  .hero-visual {
    justify-self: end;
    z-index: 3;
  }
  .code-stage {
    width: min(820px, 100%);
    max-width: 100%;
  }
}

@media (min-width: 1121px) and (max-width: 1380px) {
  .container { width: min(1240px, calc(100% - 42px)); }
  .hero {
    grid-template-columns: minmax(460px, 0.9fr) minmax(620px, 1.1fr);
    gap: 42px;
  }
  .hero-title {
    font-size: clamp(4.4rem, 7.2vw, 7.2rem);
  }
  .code-stage {
    width: min(680px, 100%);
  }
}

@media (max-width: 1120px) {
  .hero-title {
    max-width: 100%;
  }
  .hero-visual {
    margin-top: 6px;
  }
}


/* final-final phone layout only: desktop unchanged */
@media (max-width: 820px) {
  :root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --nav-height: 64px;
  }

  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    min-height: 100svh;
  }

  .wallpaper-layer {
    transform: scale(1.02);
  }

  .wallpaper-overlay {
    background:
      radial-gradient(circle at 50% 0%, rgba(154,247,240,.12), transparent 34%),
      linear-gradient(180deg, rgba(0,8,10,.50), rgba(0,8,10,.38) 42%, rgba(0,8,10,.62));
  }

  .noise-layer {
    opacity: .035;
  }

  .container,
  .wide-container {
    width: calc(100% - 22px);
    margin-inline: auto;
  }

  .site-nav {
    top: max(8px, calc(var(--safe-top) + 8px));
  }

  .nav-shell {
    width: calc(100% - 16px);
    min-height: 54px;
    padding: 8px 8px 8px 14px;
    border-radius: 22px;
    background: rgba(255,255,255,.16);
  }

  .brand-text {
    font-size: 1rem;
  }

  .menu-btn {
    width: 42px;
    height: 42px;
    min-width: 42px;
  }

  .mobile-panel {
    top: max(72px, calc(var(--safe-top) + 70px));
    left: 8px;
    right: 8px;
    max-height: calc(100svh - 92px - var(--safe-top));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px;
    border-radius: 20px;
    background: rgba(8,22,27,.72);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 22px 70px rgba(0,0,0,.38);
    -webkit-backdrop-filter: blur(24px) saturate(165%);
    backdrop-filter: blur(24px) saturate(165%);
  }

  .mobile-panel.open {
    display: grid;
    gap: 6px;
  }

  .mobile-panel a,
  .mobile-panel button {
    min-height: 46px;
    padding: 12px 13px;
    border-radius: 15px;
    font-size: 15px;
  }

  main {
    padding-top: calc(var(--nav-height) + 24px);
  }

  .tool-page main {
    padding-top: calc(var(--nav-height) + 22px);
  }

  .hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    min-height: auto;
    padding-top: 14px;
    padding-bottom: 44px;
  }

  .hero-content {
    max-width: 100%;
  }

  .eyebrow {
    margin-bottom: 14px;
    padding: 7px 11px;
    font-size: 12px;
    letter-spacing: .06em;
  }

  .hero-title {
    max-width: 100%;
    font-size: clamp(3.3rem, 19vw, 5.25rem);
    line-height: .9;
    letter-spacing: -.06em;
    overflow-wrap: normal;
  }

  .hero-subtitle {
    max-width: 100%;
    margin-top: 17px;
    font-size: clamp(1.02rem, 4.5vw, 1.26rem);
    line-height: 1.55;
  }

  .hero-desc {
    max-width: 100%;
    margin-top: 10px;
    font-size: .95rem;
    line-height: 1.65;
  }

  .action-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 20px;
  }

  .action-row .btn,
  .btn {
    width: 100%;
    min-height: 46px;
    padding-inline: 16px;
  }

  .project-top .btn {
    width: auto;
  }

  .hero-watermark {
    display: none;
  }

  .hero-visual {
    width: 100%;
    min-height: auto;
    justify-self: stretch;
    margin-top: 2px;
  }

  .code-stage {
    width: 100%;
    min-height: 352px;
    padding: 10px;
    border-radius: 24px;
  }

  .code-window {
    min-height: 326px;
    border-radius: 22px;
  }

  .code-window-head {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 9px;
    padding: 12px 12px 10px;
  }

  .code-dots {
    padding-top: 9px;
    flex: 0 0 auto;
  }

  .code-tabs {
    order: 2;
    flex: 1 0 100%;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
    gap: 8px;
  }

  .code-tab-btn {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 8px 11px;
    font-size: 12px;
  }

  .code-copy {
    margin-left: auto;
    min-height: 38px;
    padding: 8px 11px;
    font-size: 12px;
  }

  .code-window-body {
    min-height: 215px;
    max-height: 42svh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 13px 13px 15px;
    font-size: 10.8px;
    line-height: 1.55;
  }

  .code-pane.active {
    min-width: max-content;
    padding-right: 10px;
  }

  .code-line.indent-1 {
    margin-left: 14px;
  }

  .code-line.indent-2 {
    margin-left: 26px;
  }

  .typing-caret {
    width: 8px;
    height: 18px;
    right: 18px;
    bottom: 20px;
  }

  .code-window-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    padding: 11px 12px 13px;
  }

  .code-badges {
    gap: 6px;
  }

  .code-window-foot .tag {
    padding: 5px 8px;
    font-size: 11px;
  }

  .code-mini-status {
    font-size: 10px;
  }

  .section {
    padding: 50px 0;
  }

  .section-head {
    display: block;
    margin-bottom: 18px;
  }

  .section-title,
  .tool-title {
    font-size: clamp(2.35rem, 12vw, 4.2rem);
    line-height: 1;
  }

  .tool-hero {
    padding: 24px 0 16px;
  }

  .tool-desc {
    font-size: .95rem;
    line-height: 1.65;
  }

  .stack-grid,
  .contact-grid,
  .tools-grid,
  .ip-layout,
  .draw-shell,
  .article-grid {
    grid-template-columns: 1fr;
  }

  .tools-grid,
  .ip-layout,
  .draw-shell,
  .article-grid {
    gap: 14px;
    padding-top: 16px;
    padding-bottom: 50px;
  }

  .glass-card,
  .project-card,
  .contact-card,
  .tool-card,
  .ip-card,
  .draw-panel,
  .draw-stage,
  .article-card,
  .map-panel {
    border-radius: 22px;
  }

  .project-card,
  .contact-card,
  .tool-card,
  .ip-card,
  .draw-panel,
  .draw-stage,
  .article-card {
    padding: 20px;
  }

  .project-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .project-icon {
    width: 46px;
    height: 46px;
    border-radius: 16px;
  }

  .tags {
    gap: 7px;
  }

  .tag {
    padding: 6px 9px;
    font-size: 12px;
  }

  .link-pill {
    min-height: 46px;
    padding: 13px 14px;
  }

  .footer-inner {
    display: grid;
    gap: 8px;
  }

  .site-footer {
    padding: 30px 0 calc(34px + var(--safe-bottom));
  }

  .form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .input,
  textarea,
  select {
    min-height: 46px;
    border-radius: 15px;
    font-size: 16px;
  }

  textarea {
    min-height: 140px;
  }

  .info-row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 10px 0;
  }

  .info-row strong {
    text-align: left;
  }

  .map-grid {
    gap: 14px;
  }

  .map-panel,
  .map-frame,
  .local-map-visual {
    min-height: 270px;
  }

  .map-panel h3 {
    left: 12px;
    top: 12px;
    font-size: 12px;
  }

  .map-note {
    left: 12px;
    right: 12px;
    bottom: 12px;
    font-size: 12px;
  }

  .draw-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    gap: 8px;
  }

  .draw-tab {
    flex: 0 0 auto;
    white-space: nowrap;
    min-height: 42px;
    padding: 9px 12px;
  }

  .draw-output {
    min-height: 178px;
    font-size: clamp(1.9rem, 14vw, 4.2rem);
    padding: 20px;
  }

  .mini-grid {
    grid-template-columns: 1fr;
  }

  .switch-row {
    align-items: stretch;
  }

  .switch-row label,
  .switch-row .btn {
    min-height: 42px;
  }
}

@media (max-width: 430px) {
  .container,
  .wide-container {
    width: calc(100% - 18px);
  }

  .nav-shell {
    width: calc(100% - 14px);
    border-radius: 20px;
  }

  .brand-text {
    font-size: .98rem;
  }

  .hero-title {
    font-size: clamp(3rem, 18.5vw, 4.45rem);
  }

  .hero-subtitle {
    font-size: .98rem;
  }

  .code-stage {
    min-height: 326px;
    padding: 9px;
  }

  .code-window {
    min-height: 300px;
  }

  .code-window-body {
    min-height: 198px;
    max-height: 40svh;
    font-size: 10px;
    padding: 12px;
  }

  .code-tab-btn,
  .code-copy {
    font-size: 11px;
    padding: 7px 10px;
  }

  .map-panel,
  .map-frame,
  .local-map-visual {
    min-height: 244px;
  }

  .draw-output {
    min-height: 158px;
  }
}

/* Liquid Glass v4 - Apple-inspired smoother optical layer
   Scope: visual-only CSS. Wallpaper rules, HTML, and JS stay untouched. */
:root {
  --lg-clear: rgba(255, 255, 255, .085);
  --lg-clear-2: rgba(255, 255, 255, .045);
  --lg-mist: rgba(217, 255, 251, .105);
  --lg-cyan: rgba(154, 247, 240, .32);
  --lg-cyan-soft: rgba(154, 247, 240, .14);
  --lg-border: rgba(255, 255, 255, .30);
  --lg-border-soft: rgba(255, 255, 255, .145);
  --lg-shadow: rgba(0, 11, 12, .34);
  --lg-ease: cubic-bezier(.16, 1, .3, 1);
  --lg-fast: 360ms;
  --lg-slow: 760ms;
}

@property --lg-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 145deg;
}

@property --lg-shine {
  syntax: '<percentage>';
  inherits: false;
  initial-value: -42%;
}

.nav-shell,
.mobile-panel,
.glass-card,
.btn,
.icon-btn,
.menu-btn,
.eyebrow,
.nav-links a,
.nav-links button,
.mobile-panel a,
.mobile-panel button,
.code-tab-btn,
.code-copy,
.link-pill,
.command,
.draw-tab,
.tag,
.stat-card,
.project-icon,
.input,
textarea,
select,
.map-panel h3,
.map-note,
.core-label {
  -webkit-backdrop-filter: blur(22px) saturate(148%) contrast(1.015);
  backdrop-filter: blur(22px) saturate(148%) contrast(1.015);
  transition:
    transform var(--lg-fast) var(--lg-ease),
    background-color var(--lg-fast) var(--lg-ease),
    background var(--lg-fast) var(--lg-ease),
    border-color var(--lg-fast) var(--lg-ease),
    box-shadow var(--lg-fast) var(--lg-ease),
    color var(--lg-fast) var(--lg-ease),
    filter var(--lg-fast) var(--lg-ease),
    opacity var(--lg-fast) var(--lg-ease);
}

.nav-shell,
.mobile-panel,
.glass-card,
.btn,
.icon-btn,
.menu-btn,
.eyebrow,
.nav-links a,
.nav-links button,
.mobile-panel a,
.mobile-panel button,
.code-tab-btn,
.code-copy,
.link-pill,
.command,
.draw-tab,
.tag,
.stat-card,
.project-icon,
.map-panel h3,
.map-note,
.core-label {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.nav-shell::before,
.mobile-panel::before,
.glass-card::before,
.btn::before,
.icon-btn::before,
.menu-btn::before,
.eyebrow::after,
.nav-links a::before,
.nav-links button::before,
.mobile-panel a::before,
.mobile-panel button::before,
.code-tab-btn::before,
.code-copy::before,
.link-pill::before,
.command::before,
.draw-tab::before,
.tag::before,
.stat-card::before,
.project-icon::before,
.map-panel h3::before,
.map-note::before,
.core-label::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

.nav-shell::after,
.mobile-panel::after,
.glass-card::after,
.btn::after,
.icon-btn::after,
.menu-btn::after,
.nav-links a::after,
.nav-links button::after,
.mobile-panel a::after,
.mobile-panel button::after,
.code-tab-btn::after,
.code-copy::after,
.link-pill::after,
.command::after,
.draw-tab::after,
.tag::after,
.stat-card::after,
.project-icon::after {
  content: "";
  position: absolute;
  inset: -62% -42%;
  border-radius: inherit;
  pointer-events: none;
  opacity: .0;
  transform: translate3d(-36%, -18%, 0) rotate(10deg);
  background: linear-gradient(105deg, transparent 18%, rgba(255,255,255,.24) 38%, rgba(255,255,255,.08) 48%, transparent 68%);
  transition: opacity var(--lg-slow) var(--lg-ease), transform var(--lg-slow) var(--lg-ease);
  z-index: 0;
}

.nav-shell > *,
.mobile-panel > *,
.glass-card > *,
.btn > *,
.icon-btn > *,
.menu-btn > *,
.nav-links a > *,
.nav-links button > *,
.mobile-panel a > *,
.mobile-panel button > *,
.code-tab-btn > *,
.code-copy > *,
.link-pill > *,
.command > *,
.draw-tab > *,
.tag > *,
.stat-card > *,
.project-icon > * {
  position: relative;
  z-index: 1;
}

.nav-shell {
  border-color: rgba(255,255,255,.235);
  background:
    radial-gradient(90% 140% at 10% 0%, rgba(255,255,255,.16), transparent 38%),
    radial-gradient(100% 160% at 90% 100%, rgba(154,247,240,.075), transparent 42%),
    linear-gradient(145deg, rgba(255,255,255,.096), rgba(255,255,255,.042) 52%, rgba(255,255,255,.062));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.40),
    inset 0 -1px 0 rgba(255,255,255,.075),
    0 14px 42px rgba(0, 8, 10, .28),
    0 1px 0 rgba(255,255,255,.075);
  animation: lgNavBreathe 7.8s var(--lg-ease) infinite both;
}

.nav-shell::before {
  padding: 1px;
  background: linear-gradient(120deg, rgba(255,255,255,.62), rgba(255,255,255,.12) 30%, rgba(154,247,240,.20) 70%, rgba(255,255,255,.10));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .78;
}

.site-nav.is-scrolled .nav-shell {
  background:
    radial-gradient(100% 150% at 14% 0%, rgba(255,255,255,.17), transparent 40%),
    radial-gradient(100% 160% at 88% 100%, rgba(154,247,240,.095), transparent 45%),
    linear-gradient(145deg, rgba(255,255,255,.115), rgba(255,255,255,.050) 54%, rgba(255,255,255,.070));
  border-color: rgba(255,255,255,.275);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.43),
    inset 0 -1px 0 rgba(255,255,255,.09),
    0 16px 48px rgba(0, 8, 10, .31);
}

.nav-links a,
.nav-links button,
.mobile-panel a,
.mobile-panel button {
  border: 1px solid transparent;
  background:
    radial-gradient(95% 150% at 18% 0%, rgba(255,255,255,.055), transparent 40%),
    linear-gradient(145deg, rgba(255,255,255,.030), rgba(255,255,255,.010));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
}

.nav-links a:hover,
.nav-links button:hover,
.mobile-panel a:hover,
.mobile-panel button:hover,
.nav-links a:focus-visible,
.nav-links button:focus-visible,
.mobile-panel a:focus-visible,
.mobile-panel button:focus-visible {
  color: #fff;
  background:
    radial-gradient(110% 160% at 20% 0%, rgba(255,255,255,.18), transparent 42%),
    radial-gradient(120% 170% at 88% 100%, rgba(154,247,240,.13), transparent 45%),
    linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.040));
  border-color: rgba(255,255,255,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    0 8px 26px rgba(0, 10, 12, .22);
  transform: translate3d(0, -1px, 0) scale(1.012);
}

.btn,
.icon-btn,
.menu-btn,
.code-tab-btn,
.code-copy,
.draw-tab,
.link-pill,
.command,
.tag,
.stat-card,
.project-icon,
.input,
textarea,
select,
.map-panel h3,
.map-note,
.core-label {
  border-color: rgba(255,255,255,.235);
  background:
    radial-gradient(110% 150% at 18% 0%, rgba(255,255,255,.145), transparent 42%),
    radial-gradient(130% 170% at 86% 100%, rgba(154,247,240,.090), transparent 45%),
    linear-gradient(145deg, rgba(255,255,255,.092), rgba(255,255,255,.034) 52%, rgba(255,255,255,.054));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(255,255,255,.075),
    0 10px 30px rgba(0, 10, 12, .18);
}

.btn::before,
.icon-btn::before,
.menu-btn::before,
.code-tab-btn::before,
.code-copy::before,
.draw-tab::before,
.link-pill::before,
.command::before,
.tag::before,
.stat-card::before,
.project-icon::before,
.map-panel h3::before,
.map-note::before,
.core-label::before {
  padding: 1px;
  background: linear-gradient(128deg, rgba(255,255,255,.58), rgba(255,255,255,.12) 34%, rgba(154,247,240,.20) 66%, rgba(255,255,255,.10));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .68;
}

.btn:hover,
.icon-btn:hover,
.menu-btn:hover,
.code-tab-btn:hover,
.code-copy:hover,
.draw-tab:hover,
.link-pill:hover,
.command:hover,
.command:focus-visible,
.tag:hover,
.stat-card:hover,
.project-icon:hover {
  border-color: rgba(255,255,255,.34);
  background:
    radial-gradient(120% 160% at 18% 0%, rgba(255,255,255,.19), transparent 44%),
    radial-gradient(130% 170% at 86% 100%, rgba(154,247,240,.125), transparent 46%),
    linear-gradient(145deg, rgba(255,255,255,.118), rgba(255,255,255,.044) 52%, rgba(255,255,255,.066));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -1px 0 rgba(255,255,255,.09),
    0 16px 38px rgba(0, 10, 12, .24),
    0 0 0 1px rgba(154,247,240,.045);
  transform: translate3d(0, -2px, 0) scale(1.012);
}

.btn:hover::after,
.icon-btn:hover::after,
.menu-btn:hover::after,
.nav-links a:hover::after,
.nav-links button:hover::after,
.mobile-panel a:hover::after,
.mobile-panel button:hover::after,
.code-tab-btn:hover::after,
.code-copy:hover::after,
.draw-tab:hover::after,
.link-pill:hover::after,
.command:hover::after,
.tag:hover::after,
.stat-card:hover::after,
.project-icon:hover::after,
.btn:focus-visible::after,
.code-tab-btn:focus-visible::after,
.code-copy:focus-visible::after,
.command:focus-visible::after {
  opacity: .72;
  transform: translate3d(36%, 14%, 0) rotate(10deg);
}

.btn:active,
.icon-btn:active,
.menu-btn:active,
.code-tab-btn:active,
.code-copy:active,
.draw-tab:active,
.link-pill:active,
.command:active {
  transform: translate3d(0, 0, 0) scale(.985);
  transition-duration: 110ms;
}

.btn.primary,
.draw-tab.active {
  color: #f5ffff;
  text-shadow: 0 1px 1px rgba(0, 26, 28, .28);
  border-color: rgba(255,255,255,.36);
  background:
    radial-gradient(120% 160% at 16% 0%, rgba(255,255,255,.28), transparent 42%),
    radial-gradient(140% 180% at 90% 110%, rgba(154,247,240,.24), transparent 48%),
    linear-gradient(145deg, rgba(154,247,240,.26), rgba(255,255,255,.075) 48%, rgba(154,247,240,.145));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.48),
    inset 0 -1px 0 rgba(255,255,255,.10),
    0 15px 42px rgba(0, 12, 14, .25),
    0 0 28px rgba(154,247,240,.075);
}

.icon-btn,
.menu-btn {
  display: inline-grid;
  place-items: center;
}

.glass-card,
.mobile-panel,
.command-palette {
  border-color: rgba(255,255,255,.205);
  background:
    radial-gradient(120% 150% at 14% 0%, rgba(255,255,255,.115), transparent 38%),
    radial-gradient(125% 170% at 94% 102%, rgba(154,247,240,.075), transparent 48%),
    linear-gradient(145deg, rgba(255,255,255,.078), rgba(255,255,255,.028) 55%, rgba(255,255,255,.044));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.33),
    inset 0 -1px 0 rgba(255,255,255,.065),
    0 24px 64px rgba(0, 9, 11, .25);
}

.glass-card::before,
.mobile-panel::before {
  padding: 1px;
  background: linear-gradient(135deg, rgba(255,255,255,.47), rgba(255,255,255,.09) 31%, rgba(154,247,240,.17) 70%, rgba(255,255,255,.075));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .66;
}

.glass-card:hover {
  border-color: rgba(255,255,255,.25);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -1px 0 rgba(255,255,255,.075),
    0 29px 76px rgba(0, 9, 11, .30);
}

.project-card:hover,
.tool-card:hover,
.article-card:hover,
.ip-card:hover,
.contact-card:hover,
.stack-chip:hover {
  transform: translate3d(0, -3px, 0) scale(1.004);
}

.code-stage {
  border-color: rgba(255,255,255,.19);
  background:
    radial-gradient(90% 120% at 16% 0%, rgba(255,255,255,.100), transparent 34%),
    radial-gradient(90% 120% at 88% 100%, rgba(154,247,240,.068), transparent 40%),
    linear-gradient(145deg, rgba(255,255,255,.054), rgba(255,255,255,.020) 55%, rgba(255,255,255,.032));
}

.code-window {
  position: relative;
  isolation: isolate;
  border-color: rgba(255,255,255,.245);
  background:
    radial-gradient(100% 140% at 15% 0%, rgba(255,255,255,.115), transparent 34%),
    radial-gradient(110% 150% at 88% 100%, rgba(154,247,240,.080), transparent 44%),
    linear-gradient(145deg, rgba(255,255,255,.074), rgba(255,255,255,.028) 56%, rgba(255,255,255,.044));
  -webkit-backdrop-filter: blur(22px) saturate(138%) contrast(1.02);
  backdrop-filter: blur(22px) saturate(138%) contrast(1.02);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -1px 0 rgba(255,255,255,.070),
    0 24px 58px rgba(0, 10, 12, .28);
  transition:
    transform 240ms cubic-bezier(.2, .8, .2, 1),
    border-color 420ms var(--lg-ease),
    box-shadow 420ms var(--lg-ease),
    background 420ms var(--lg-ease),
    filter 420ms var(--lg-ease);
  will-change: transform;
}

.code-window.is-tilting {
  border-color: rgba(255,255,255,.31);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -1px 0 rgba(255,255,255,.08),
    0 30px 74px rgba(0, 10, 12, .32);
}

.code-window::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(var(--lg-angle), rgba(255,255,255,.62), rgba(255,255,255,.115) 33%, rgba(154,247,240,.16) 66%, rgba(255,255,255,.08));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .74;
  z-index: 3;
  animation: lgAngle 10s var(--lg-ease) infinite alternate;
}

.code-window::after {
  content: "";
  position: absolute;
  inset: -45% -35%;
  pointer-events: none;
  border-radius: inherit;
  z-index: 1;
  opacity: .23;
  background:
    radial-gradient(closest-side at 16% 18%, rgba(255,255,255,.22), transparent 70%),
    linear-gradient(105deg, transparent 22%, rgba(255,255,255,.16) 42%, rgba(255,255,255,.045) 49%, transparent 64%);
  transform: translate3d(-18%, -4%, 0) rotate(9deg);
  animation: lgSpecularDrift 11s var(--lg-ease) infinite alternate;
}

.code-window-head,
.code-window-body,
.code-window-foot {
  position: relative;
  z-index: 4;
}

.code-window-head {
  background: linear-gradient(180deg, rgba(255,255,255,.046), rgba(255,255,255,.018));
  border-bottom-color: rgba(255,255,255,.105);
}

.code-window-foot {
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.024));
  border-top-color: rgba(255,255,255,.095);
}

.code-window-body {
  scrollbar-color: rgba(255,255,255,.18) transparent;
}

.code-line {
  border-radius: 8px;
  padding-inline: 4px;
  color: rgba(244,253,253,.86);
  background: linear-gradient(90deg, rgba(255,255,255,.046), rgba(255,255,255,.017) 62%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.040);
  animation: lgCodeFloat 9s var(--lg-ease) infinite;
}

.code-line.spacer {
  background: transparent;
  box-shadow: none;
}

.code-tab-btn.active,
.draw-tab.active {
  border-color: rgba(255,255,255,.38);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.46),
    inset 0 -1px 0 rgba(255,255,255,.09),
    0 12px 34px rgba(0, 10, 12, .23),
    0 0 20px rgba(154,247,240,.055);
}

.token.keyword,
.token.function,
.token.property,
.token.array,
.token.number,
.token.boolean,
.token.string,
.token.tag,
.token.attr {
  filter: brightness(1.05) saturate(1.08);
  text-shadow: 0 0 16px rgba(154,247,240,.10);
}

.typing-caret {
  opacity: .86;
  animation: caretBlink 1.05s steps(1) infinite, lgCaretGlow 2.8s var(--lg-ease) infinite;
}

.input:focus,
textarea:focus,
select:focus {
  border-color: rgba(255,255,255,.44);
  background:
    radial-gradient(110% 150% at 18% 0%, rgba(255,255,255,.17), transparent 44%),
    linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.040));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.36),
    0 0 0 3px rgba(154,247,240,.11),
    0 16px 40px rgba(0, 10, 12, .23);
}

.palette-backdrop {
  background: rgba(0, 7, 8, .32);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
}

.command-palette {
  transform-origin: 50% 0%;
}

.palette-backdrop.open .command-palette {
  animation: lgPaletteIn 420ms var(--lg-ease) both;
}

.code-pane {
  animation: lgPaneOut 170ms var(--lg-ease) both;
}

.code-pane.active {
  animation: lgPaneIn 420ms var(--lg-ease) both;
}

.draw-output.rolling {
  animation: lgDrawPulse 620ms var(--lg-ease) infinite alternate;
}

.map-frame {
  opacity: .86;
  filter: grayscale(66%) invert(88%) contrast(88%) brightness(1.02) saturate(104%);
}

.hero-title,
.tool-title,
.section-title {
  text-shadow:
    0 1px 0 rgba(255,255,255,.12),
    0 16px 54px rgba(0,0,0,.48),
    0 0 22px rgba(154,247,240,.050);
}

@keyframes lgNavBreathe {
  0%, 100% { filter: saturate(1) brightness(1); }
  50% { filter: saturate(1.07) brightness(1.025); }
}

@keyframes lgAngle {
  from { --lg-angle: 126deg; }
  to { --lg-angle: 166deg; }
}

@keyframes lgSpecularDrift {
  0% { opacity: .16; transform: translate3d(-22%, -7%, 0) rotate(9deg); }
  52% { opacity: .27; transform: translate3d(3%, 1%, 0) rotate(9deg); }
  100% { opacity: .18; transform: translate3d(20%, 8%, 0) rotate(9deg); }
}

@keyframes lgCodeFloat {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: .93; }
  50% { transform: translate3d(0, -1px, 0); opacity: 1; }
}

@keyframes lgCaretGlow {
  0%, 100% { filter: brightness(1); box-shadow: 0 0 18px rgba(154,247,240,.22); }
  50% { filter: brightness(1.12); box-shadow: 0 0 26px rgba(154,247,240,.32); }
}

@keyframes lgPaletteIn {
  from { opacity: .0; transform: translate3d(0, -10px, 0) scale(.985); filter: blur(4px); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}

@keyframes lgPaneIn {
  from { opacity: .0; transform: translate3d(0, 10px, 0) scale(.995); filter: blur(3px); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}

@keyframes lgPaneOut {
  from { opacity: 1; }
  to { opacity: .0; }
}

@keyframes lgDrawPulse {
  from { transform: translate3d(0, 0, 0) scale(.996); border-color: rgba(255,255,255,.18); }
  to { transform: translate3d(0, -1px, 0) scale(1.008); border-color: rgba(255,255,255,.36); }
}

@media (hover: none) {
  .btn:hover,
  .icon-btn:hover,
  .menu-btn:hover,
  .code-tab-btn:hover,
  .code-copy:hover,
  .draw-tab:hover,
  .link-pill:hover,
  .command:hover,
  .tag:hover,
  .stat-card:hover,
  .project-icon:hover,
  .nav-links a:hover,
  .nav-links button:hover,
  .mobile-panel a:hover,
  .mobile-panel button:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-shell,
  .code-window::before,
  .code-window::after,
  .code-line,
  .typing-caret,
  .palette-backdrop.open .command-palette,
  .code-pane,
  .code-pane.active,
  .draw-output.rolling {
    animation: none !important;
  }
  .code-window,
  .btn,
  .icon-btn,
  .menu-btn,
  .code-tab-btn,
  .code-copy,
  .draw-tab,
  .link-pill,
  .command,
  .tag,
  .stat-card,
  .project-icon,
  .nav-links a,
  .nav-links button,
  .mobile-panel a,
  .mobile-panel button,
  .glass-card {
    transition-duration: .01ms !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .nav-shell,
  .mobile-panel,
  .glass-card,
  .btn,
  .icon-btn,
  .menu-btn,
  .eyebrow,
  .nav-links a,
  .nav-links button,
  .mobile-panel a,
  .mobile-panel button,
  .code-tab-btn,
  .code-copy,
  .link-pill,
  .command,
  .draw-tab,
  .tag,
  .stat-card,
  .project-icon,
  .input,
  textarea,
  select,
  .map-panel h3,
  .map-note,
  .core-label {
    background-color: rgba(8, 28, 31, .76);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
/* Mobile-only polish layer. Keep desktop rules untouched. */
@media (max-width: 820px) {
  .site-nav {
    z-index: 110;
  }

  .nav-shell {
    position: relative;
    z-index: 112;
  }

  .mobile-panel {
    position: fixed;
    top: max(70px, calc(env(safe-area-inset-top, 0px) + 68px));
    left: 8px;
    right: 8px;
    z-index: 111;
    display: none;
    max-height: calc(100svh - 88px - env(safe-area-inset-top, 0px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px;
    border-radius: 20px;
    background:
      radial-gradient(110% 150% at 14% 0%, rgba(255,255,255,.14), transparent 38%),
      radial-gradient(130% 170% at 92% 100%, rgba(154,247,240,.08), transparent 46%),
      rgba(5, 18, 22, .90);
    border-color: rgba(255,255,255,.20);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.24),
      0 22px 72px rgba(0,0,0,.48);
  }

  .mobile-panel.open {
    display: grid;
    gap: 7px;
  }

  .mobile-panel a,
  .mobile-panel button {
    width: 100%;
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 13px;
    border-radius: 15px;
    background:
      radial-gradient(110% 150% at 18% 0%, rgba(255,255,255,.12), transparent 42%),
      rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.10);
    color: rgba(242,252,252,.88);
  }

  .mobile-panel a::after {
    content: "→";
    color: rgba(184,255,247,.68);
  }

  .mobile-panel button::after {
    content: "↻";
    color: rgba(184,255,247,.68);
  }

  .hero {
    gap: 16px;
    padding-bottom: 34px;
  }

  .hero-subtitle {
    text-wrap: pretty;
  }

  .hero-desc {
    display: none;
  }

  .code-stage {
    min-height: 330px;
    padding: 10px;
  }

  .code-window {
    min-height: 306px;
  }

  .code-window-body {
    min-height: 206px;
    max-height: 228px;
  }

  .code-window-foot {
    display: none;
  }

  .code-tabs,
  .draw-tabs {
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  .code-tabs::-webkit-scrollbar,
  .draw-tabs::-webkit-scrollbar {
    display: none;
  }

  .code-tab-btn,
  .draw-tab {
    scroll-snap-align: start;
  }

  .tool-card {
    padding: 18px;
  }

  .tool-card h2 {
    font-size: 1.22rem;
    line-height: 1.2;
  }

  .info-row strong,
  .info-row span,
  .map-note {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .palette-backdrop {
    padding: max(82px, calc(env(safe-area-inset-top, 0px) + 80px)) 9px 18px;
    place-items: start center;
  }

  .command-palette {
    width: 100%;
    max-height: calc(100svh - 108px - env(safe-area-inset-top, 0px));
    overflow-y: auto;
  }
}

@media (max-width: 430px) {
  .mobile-panel {
    left: 7px;
    right: 7px;
    border-radius: 18px;
  }

  .mobile-panel a,
  .mobile-panel button {
    min-height: 44px;
    padding: 11px 12px;
  }

  .code-stage {
    min-height: 306px;
  }

  .code-window {
    min-height: 282px;
  }

  .code-window-body {
    min-height: 184px;
    max-height: 206px;
  }
}
@media (max-width: 820px) and (prefers-reduced-transparency: reduce) {
  .mobile-panel,
  .command-palette {
    background-color: rgba(8, 28, 31, .92);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
/* Targeted desktop fixes: brand wordmark, menu visibility, stable code tabs. */

.menu-btn {
  display: none;
}
@media (min-width: 821px) {
  .nav-shell {
    position: relative;
    justify-content: center;
  }

  .nav-links {
    justify-content: center;
  }

  .nav-actions {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
  }
}
.code-dots {
  flex: 0 0 auto;
}

.code-tabs {
  position: relative;
  z-index: 2;
  min-height: 38px;
}

.code-tab-btn,
.code-tab-btn:hover,
.code-tab-btn.active,
.code-tab-btn:active {
  transform: none;
}

.code-tab-btn {
  min-height: 34px;
  overflow: hidden;
}

.code-tab-btn:hover::after,
.code-tab-btn:focus-visible::after {
  transform: none;
}

@media (max-width: 820px) {
  .menu-btn {
    display: inline-grid;
  }
}