@font-face{font-family:ApexSiteSans;src:url('fonts/apex-site-sans.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('fonts/jetbrains-mono.woff2') format('woff2');font-weight:400;font-display:swap}
@layer reset,tokens,base,layout,components,app,motion;
@layer reset{
  *,*::before,*::after{box-sizing:border-box}
  body,h1,h2,h3,p,figure,fieldset,dl,dd{margin:0}
  button,input,select{font:inherit}
  button,a{-webkit-tap-highlight-color:transparent}
  button{cursor:pointer;color:inherit}
  img,canvas,svg{display:block;max-width:100%}
  img{height:auto}
  a{color:inherit;text-decoration:none}
  fieldset{border:0;padding:0}
  button{border:0}
  ol{padding:0;list-style:none}
  [hidden]{display:none!important}
}
@layer tokens{
  :root{color-scheme:dark;--bg:#060b14;--surface:#0c1421;--surface-2:#101d2e;--ink:#f1f5fc;--muted:#9aaabe;--faint:#8596ad;--line:#233044;--blue:#64b5ff;--blue-strong:#0867c4;--glass:#060b14d9;--shadow:#0008;--glow:#0b6fd91c;--card-end:#0a111d;--shell:1120px;--pad:clamp(20px,5vw,56px)}
  :root[data-theme=light]{color-scheme:light;--bg:#f5f7fb;--surface:#fff;--surface-2:#eaf0f8;--ink:#101d30;--muted:#516178;--faint:#617088;--line:#d6e0ed;--blue:#0867c4;--glass:#f5f7fbe6;--shadow:#1c42651a;--glow:#287ac514;--card-end:#f5f8fc}
  /* 웹 체험판은 앱(src/ui/theme.py)의 색 토큰을 그대로 씁니다. */
  [data-app-theme=dark]{color-scheme:dark;--a-window-top:#0b1527;--a-window:#060b16;--a-surface:#0d1729;--a-surface-alt:#122038;--a-surface-hover:#19294a;--a-border:#1b2b47;--a-border-strong:#29406a;--a-text:#e7eef9;--a-muted:#95a6c4;--a-faint:#5a6b8c;--a-accent:#398fe1;--a-accent-hover:#5aa7f0;--a-accent-pressed:#0867c4;--a-accent-soft:rgba(57,143,225,.18);--a-select:#4cb4ff;--a-select-text:#03152b;--a-success:#34d399;--a-warning:#fbbf24;--a-danger:#f87171;--a-danger-soft:rgba(248,113,113,.14);--a-media:#03070e;--a-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%2395a6c4' d='M15.85 7.65a.5.5 0 0 1 0 .7l-5.46 5.49a.55.55 0 0 1-.78 0L4.15 8.35a.5.5 0 1 1 .7-.7L10 12.81l5.15-5.16a.5.5 0 0 1 .7 0Z'/%3E%3C/svg%3E")}
  [data-app-theme=light]{color-scheme:light;--a-window-top:#f4f7fd;--a-window:#e8eef8;--a-surface:#fff;--a-surface-alt:#f3f7fd;--a-surface-hover:#e3ebf7;--a-border:#d5e0ef;--a-border-strong:#b7c8e1;--a-text:#0b1730;--a-muted:#4d5f7e;--a-faint:#8d9bb5;--a-accent:#0867c4;--a-accent-hover:#1a78d4;--a-accent-pressed:#044586;--a-accent-soft:rgba(8,103,196,.12);--a-select:#0a84ff;--a-select-text:#fff;--a-success:#15803d;--a-warning:#b45309;--a-danger:#dc2626;--a-danger-soft:rgba(220,38,38,.09);--a-media:#0a1222;--a-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%234d5f7e' d='M15.85 7.65a.5.5 0 0 1 0 .7l-5.46 5.49a.55.55 0 0 1-.78 0L4.15 8.35a.5.5 0 1 1 .7-.7L10 12.81l5.15-5.16a.5.5 0 0 1 .7 0Z'/%3E%3C/svg%3E")}
}
@layer base{
  html{scroll-behavior:smooth;scroll-padding-top:95px}
  body{background:var(--bg);color:var(--ink);font-family:ApexSiteSans,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;line-height:1.65;word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
  ::selection{background:#398fe155}
  h1,h2,h3{line-height:1.2;letter-spacing:-.055em;text-wrap:balance}
  p{text-wrap:pretty}
  :focus-visible{outline:2px solid var(--blue);outline-offset:5px}
  input:focus-visible{outline-offset:3px}
  .icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
  .fi{width:18px;height:18px;fill:currentColor;flex:none}
  .symbols{position:absolute;width:0;height:0;overflow:hidden}
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .mono,.feature-number,.step-detail{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.025em}
  .skip{position:fixed;top:12px;left:12px;z-index:99;transform:translateY(-180%);padding:10px 20px;background:var(--surface);border-radius:8px}
  .skip:focus{transform:none}
  .muted{color:var(--muted)}
  .eyebrow{color:var(--blue);font-size:11px;letter-spacing:.17em;font-weight:650}
  .status-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
}
@layer layout{
  .shell{width:min(calc(100% - var(--pad)*2),var(--shell));margin-inline:auto}
  .section{padding-block:112px}
  .section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:42px}
  .section-heading h2,.faq-section h2{font-size:clamp(34px,4.2vw,52px);margin-top:15px;font-weight:650}
  .section-heading>p{font-size:15px;color:var(--muted);padding-bottom:4px;max-width:400px}
  .section-heading.centered{display:block;text-align:center}
  .centered>p{max-width:none;margin-top:22px}
  .section-heading.centered .eyebrow{margin-top:0}
}
@layer components{
  .topbar{position:sticky;top:0;z-index:20;border-bottom:1px solid var(--line);background:var(--glass);backdrop-filter:blur(24px) saturate(1.3)}
  .nav-inner{height:70px;display:flex;align-items:center;gap:30px}
  .brand{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:750;letter-spacing:-.04em;white-space:nowrap}
  .brand>span{color:var(--blue)}
  .brand b{color:var(--ink);font-weight:650}
  .nav-inner nav{margin-left:auto;display:flex;gap:25px;color:var(--muted);font-size:12px}
  .nav-inner nav a:hover,.footer a:hover{color:var(--blue)}
  .nav-actions{display:flex;align-items:center;gap:13px}
  .icon-button{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:transparent;color:var(--muted)}
  .icon-button:hover{background:var(--surface-2)}
  [data-theme=dark] .moon,[data-theme=light] .sun{display:none}
  .button{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:9px;font-size:14px;font-weight:600;padding:13px 21px;min-height:46px;transition:background .2s,transform .2s;background:var(--surface-2);border:1px solid var(--line)}
  .button:hover{transform:translateY(-2px);background:var(--surface)}
  .button.primary{background:#137ee4;color:#fff;border-color:#3998ed;box-shadow:inset 0 1px #ffffff14,0 6px 24px #0069db20}
  .button.primary:hover{background:#0867c4}
  .button.small{padding:7px 13px;min-height:34px;font-size:11px;border-radius:7px}
  .small .icon{width:14px;height:14px}
  .text-link{display:inline-flex;align-items:center;gap:9px;color:var(--blue);font-size:14px}
  .text-link:hover .icon{transform:translateX(4px)}
  .text-link .icon{transition:transform .2s}
  .hero{text-align:center;padding-top:54px;position:relative}
  .preview-badge{display:inline-flex;align-items:center;gap:8px;font-size:11px;color:var(--muted);border:1px solid var(--line);background:var(--surface);padding:5px 11px;border-radius:30px}
  .preview-badge:hover{border-color:var(--blue)}
  .preview-badge .status-dot{color:#34d399}
  .preview-badge>span:last-child{padding-left:8px;color:var(--blue)}
  .hero-eyebrow{margin-top:31px;font-size:10px;letter-spacing:.21em}
  .hero h1{font-size:clamp(45px,6.7vw,80px);font-weight:720;line-height:1.1;letter-spacing:-.067em;margin-top:18px}
  .hero h1>span{color:var(--blue)}
  .hero-description{font-size:17px;color:var(--muted);margin-top:24px;line-height:1.65}
  .hero-actions{display:flex;justify-content:center;align-items:center;gap:25px;margin-top:27px}
  .hero-meta{display:flex;justify-content:center;align-items:center;gap:13px;font-size:11px;color:var(--faint);margin-top:15px}
  .hero-meta span{border-inline:1px solid var(--line);padding-inline:13px}
  .playground{margin-top:52px;position:relative;isolation:isolate;scroll-margin-top:84px}
  .playground::before{content:'';position:absolute;inset:-100px 0 -70px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 55%,#126bd328,transparent 68%)}
  .demo-note{text-align:center;color:var(--faint);font-size:11px;max-width:800px;margin:19px auto 0;line-height:1.8}
  .demo-note b{color:var(--ink);font-weight:600}
  .spec-strip{display:grid;grid-template-columns:repeat(4,1fr);text-align:center;border-bottom:1px solid var(--line);padding-block:64px 60px}
  .spec-strip>div{display:flex;flex-direction:column;gap:9px}
  .spec-strip>div+div{border-left:1px solid var(--line)}
  .spec-strip strong{font-size:31px;line-height:1.2;font-weight:600;letter-spacing:-.055em}
  .spec-strip strong>span{font-size:21px;font-weight:300;color:var(--muted)}
  .spec-strip small{font-size:15px;font-weight:500}
  .spec-strip div>span{font-size:11px;color:var(--muted)}
  .feature-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
  .feature-card{grid-column:span 2;overflow:hidden;border:1px solid var(--line);border-radius:18px;padding:28px;position:relative;background:linear-gradient(145deg,var(--surface),var(--card-end));min-width:0}
  .feature-card.wide{grid-column:span 4;padding:32px 35px}
  .feature-card.quality{grid-column:span 2;padding:32px 28px}
  .feature-card.half{grid-column:span 3}
  .feature-number{color:var(--faint);font-size:9px;letter-spacing:.09em}
  .feature-card h3{font-size:24px;font-weight:600;line-height:1.35;letter-spacing:-.045em}
  .feature-copy h3{margin-top:18px;font-size:29px}
  .feature-card p{font-size:12px;color:var(--muted);margin-top:12px;line-height:1.85}
  .feature-card .feature-copy p{font-size:13px}
  .trim-visual{padding-top:24px}
  .trim-ruler{display:flex;justify-content:space-between;padding-inline:4px 30px;font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--faint);height:22px;position:relative}
  .trim-ruler span{border-left:1px solid var(--line);padding-left:4px;height:12px;line-height:1;align-self:flex-end}
  .trim-track{height:58px;position:relative;border-radius:7px;background:repeating-linear-gradient(90deg,transparent 0 calc(12.5% - 1px),#0008 calc(12.5% - 1px) 12.5%),linear-gradient(110deg,#0a1c35,#1c5789 30%,#11243f 55%,#226496 80%,#0d2c4d);border:1px solid #1b2b47}
  .trim-track::before,.trim-track::after{content:'';position:absolute;top:0;bottom:0;background:#03070eaa}
  .trim-track::before{left:0;width:30%;border-radius:6px 0 0 6px}
  .trim-track::after{left:68%;right:0;border-radius:0 6px 6px 0}
  .trim-selected{position:absolute;z-index:1;top:-1px;bottom:-1px;left:30%;width:38%;border-block:3px solid #4cb4ff}
  .trim-selected i{position:absolute;top:-3px;bottom:-3px;width:12px;background:#4cb4ff;border-radius:5px}
  .trim-selected i:first-of-type{left:-12px;border-radius:5px 0 0 5px}
  .trim-selected i:last-of-type{right:-12px;border-radius:0 5px 5px 0}
  .trim-selected i::after{content:'';position:absolute;top:50%;left:3.5px;width:5px;height:14px;transform:translateY(-50%);border-inline:1.4px solid #03152b}
  .trim-selected b{position:absolute;left:50%;top:-25px;transform:translateX(-50%);background:#4cb4ff;color:#03152b;border-radius:9px;padding:0 9px;font-size:10px;font-weight:700;line-height:17px;white-space:nowrap;letter-spacing:0}
  .trim-overview{height:6px;margin-top:7px;border-radius:3px;background:var(--surface-2);position:relative}
  .trim-overview span{position:absolute;left:30%;width:12%;top:-1px;bottom:-1px;border-radius:2px;background:#4cb4ff}
  .shortcut{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:18px;font-size:10px;color:var(--muted)}
  .shortcut span{margin-right:11px}
  kbd{font:inherit;border:1px solid var(--line);background:var(--surface-2);border-radius:4px;padding:1px 6px;color:var(--ink)}
  .pixel-art{height:110px;margin-top:22px;position:relative;overflow:hidden;display:flex;align-items:flex-end;justify-content:center}
  .pixel-art>span{position:relative;z-index:1;font-family:'JetBrains Mono',monospace;font-size:7px;color:var(--faint);background:var(--surface);padding:3px 8px}
  .pixel-orbit{width:160px;height:160px;position:absolute;top:12px;background:radial-gradient(circle at 30% 25%,#a1d8ff,#2b80c8 35%,#062a50 62%,#05101e 73%);border-radius:50%}
  .pixel-orbit::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(transparent 0 5px,#030c1733 5px 6px),repeating-linear-gradient(90deg,transparent 0 5px,#030c1733 5px 6px)}
  .fit-visual,.progress-visual,.save-visual,.local-visual,.lang-visual{height:102px;display:flex;align-items:center;justify-content:center;position:relative;margin-block:7px 12px}
  .fit-visual>div{width:132px;height:74px;border-radius:6px;background:linear-gradient(135deg,#327db8,#0c2433);position:relative;overflow:hidden}
  .fit-visual>div::before,.fit-visual>div::after{content:'';position:absolute;inset-inline:0;height:4px;background:#000a}
  .fit-visual>div::before{top:0}
  .fit-visual>div::after{bottom:0}
  .fit-visual>div>span{position:absolute;inset:4px 0;border:1.2px dashed #ffffffcc}
  .fit-visual>em{position:absolute;bottom:4px;font-style:normal;color:var(--blue);font-family:'JetBrains Mono',monospace;font-size:10px}
  .progress-visual{flex-direction:column;align-items:stretch;gap:9px;padding-inline:8px}
  .progress-visual>span{font-size:11px;color:var(--muted)}
  .progress-visual>i{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--blue) 64%,var(--surface-2) 64%)}
  .progress-visual>b{align-self:flex-start;margin-top:4px;font-size:11px;font-weight:700;color:#fff;background:#f87171;border-radius:8px;padding:5px 14px}
  .save-visual{flex-direction:column;gap:8px}
  .save-visual>span{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--ink);border:1px solid var(--line);background:var(--surface-2);border-radius:7px;padding:8px 10px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .save-visual>small{font-size:10px;color:var(--faint)}
  .local-orbit{position:absolute;width:110px;height:67px;border:1px solid var(--line);border-radius:50%;transform:rotate(-25deg)}
  .local-orbit::before{content:'';position:absolute;inset:0;border:1px solid var(--line);border-radius:50%;transform:rotate(50deg)}
  .local-core{color:var(--blue);background:var(--surface);padding:12px;font-family:'JetBrains Mono',monospace;font-size:19px;position:relative}
  .lang-visual{flex-wrap:wrap;gap:7px;align-content:center;padding-inline:12%}
  .lang-visual>span{font-family:'JetBrains Mono',monospace;font-size:11px;border:1px solid var(--line);background:var(--surface-2);border-radius:6px;padding:4px 9px;color:var(--ink)}
  .lang-visual>i{width:22px;height:22px;border-radius:50%;border:1px solid var(--line);margin-left:6px}
  .lang-visual>.dot-dark{background:linear-gradient(#0b1527,#060b16)}
  .lang-visual>.dot-light{background:linear-gradient(#f4f7fd,#e8eef8);margin-left:0}
  .section-note{color:var(--faint);font-size:11px;text-align:center;margin-top:24px}
  .section-note a,.faq-list a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
  .app-section{background:radial-gradient(ellipse at 50% 60%,var(--glow),transparent 68%);padding-top:30px}
  .app-figure{margin-top:48px}
  .screenshot-wrap{position:relative}
  .screenshot-button{display:block;padding:0;background:#060b14;border:1px solid #304362;border-radius:12px;width:100%;position:relative;overflow:hidden;box-shadow:0 30px 90px -32px var(--shadow)}
  .screenshot-button>img{width:100%;height:auto;transition:opacity .2s}
  .screenshot-button:hover>img{opacity:.86}
  .expand-label{position:absolute;right:17px;bottom:17px;display:flex;align-items:center;gap:7px;border-radius:7px;border:1px solid #415d80;background:#0b172ce6;color:#d4e4f8;padding:8px 13px;font-size:10px}
  .expand-label .icon{width:13px;height:13px}
  .hotspots{position:absolute;inset:0;margin:0;pointer-events:none}
  .hotspots li,.ui-legend li::before{width:24px;height:24px;border-radius:50%;background:#137ee4;color:#fff;font:600 11px/24px 'JetBrains Mono',monospace;text-align:center}
  .hotspots li{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);box-shadow:0 0 0 3px #060b14b3,0 0 0 6px #64b5ff4d}
  figcaption{text-align:center;font-size:11px;color:var(--faint);margin-top:17px}
  figcaption .status-dot{color:var(--blue);margin-right:6px}
  .ui-legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 34px;margin:38px 0 0;counter-reset:ui}
  .ui-legend li{counter-increment:ui;display:grid;grid-template-columns:24px 1fr;column-gap:14px;padding:14px 0;border-top:1px solid var(--line)}
  .ui-legend li::before{content:counter(ui);grid-row:span 2}
  .ui-legend b{font-size:14px;font-weight:600}
  .ui-legend span{font-size:12px;color:var(--muted);line-height:1.75;margin-top:3px}
  .steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;margin-block:45px 38px}
  .steps li{border-top:1px solid var(--line);padding-top:24px}
  .step-number{display:block;font-family:'JetBrains Mono',monospace;color:var(--blue);font-size:12px;margin-bottom:31px}
  .steps h3{font-size:22px;font-weight:600}
  .steps p{font-size:13px;color:var(--muted);margin-top:13px;line-height:1.9}
  .step-detail{display:block;color:var(--faint);font-size:9px;margin-top:25px;letter-spacing:.07em}
  .tip{padding:19px 23px;border:1px solid var(--line);background:var(--surface);border-radius:10px;display:flex;align-items:center;gap:23px;font-size:11px}
  .tip>span{color:var(--blue);font-weight:600;white-space:nowrap}
  .tip p{color:var(--muted)}
  .tip b{font-weight:550;color:var(--ink)}
  .faq-section{display:grid;grid-template-columns:.85fr 1.3fr;gap:65px;padding-top:20px}
  .faq-section>div>p.muted{font-size:13px;margin-top:19px}
  .faq-list details{border-bottom:1px solid var(--line)}
  .faq-list details:first-child{border-top:1px solid var(--line)}
  summary{cursor:pointer;list-style:none;font-size:14px;padding:21px 0;display:flex;justify-content:space-between;gap:20px;font-weight:500}
  summary::-webkit-details-marker{display:none}
  summary>span{font-size:19px;line-height:1;color:var(--faint);font-weight:300;transition:transform .2s}
  .faq-list details[open] summary>span{transform:rotate(45deg)}
  .faq-list details p{font-size:13px;color:var(--muted);line-height:1.85;padding:0 25px 23px 0}
  .download-section{padding-block:12px 95px}
  .download-card{position:relative;text-align:center;border:1px solid var(--line);border-radius:24px;padding:43px 30px;background:radial-gradient(ellipse at 50% 0,var(--glow),transparent 72%),var(--surface);overflow:hidden}
  .download-logo{margin:0 auto 7px;width:83px;height:83px}
  .download-card h2{font-size:clamp(30px,4vw,47px);font-weight:650;margin-top:15px}
  .download-card>p:not(.eyebrow){font-size:14px;color:var(--muted);margin-top:16px}
  .download-card>.button{margin-top:29px}
  .download-card p.release-meta{font-size:11px;margin-top:15px}
  .download-card p.release-sha{font-size:10px;color:var(--faint);margin:6px auto 0;max-width:560px}
  .release-sha code{font-family:'JetBrains Mono',monospace;word-break:break-all;color:var(--muted)}
  .install-steps{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:24px 0 0}
  .install-steps li{display:flex;align-items:center;gap:8px;font-size:12px;border:1px solid var(--line);border-radius:999px;padding:6px 14px 6px 8px;background:var(--surface-2)}
  .install-steps b{width:20px;height:20px;border-radius:50%;background:var(--glow);border:1px solid var(--line);color:var(--blue);font:600 10px/18px 'JetBrains Mono',monospace}
  .download-links{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 23px;margin-top:23px;font-size:11px;color:var(--blue)}
  .download-links a:hover{text-decoration:underline}
  .download-card p.development-note{font-size:11px;color:var(--faint);margin-top:24px}
  .footer{border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;padding-block:29px 32px}
  .footer .brand{font-size:12px}
  .footer>div>p{font-size:10px;color:var(--faint);margin-top:6px}
  .footer nav{display:flex;flex-wrap:wrap;gap:12px 23px;font-size:11px;color:var(--muted)}
  .footer .legal{flex-basis:100%;font-size:10px;color:var(--faint);padding-top:16px;border-top:1px solid var(--line)}
  #screenshot-dialog{border:1px solid #38506e;border-radius:14px;padding:16px;background:#08111f;color:#c3d2e7;width:min(1320px,94vw);max-height:92dvh;box-shadow:0 25px 100px #0008}
  dialog::backdrop{background:#020711d9;backdrop-filter:blur(12px)}
  #screenshot-dialog form{display:flex;justify-content:flex-end;margin-bottom:10px}
  #screenshot-dialog form .icon-button{color:#d6e4f7;background:#17253b}
  #screenshot-dialog>img{width:100%;max-height:75dvh;object-fit:contain}
  #screenshot-dialog>p{text-align:center;font-size:11px;margin-top:12px}
  html:has(dialog[open]){overflow:hidden}
  @media(min-width:1500px){.hero h1{font-size:88px}
    .hero{padding-top:70px}
    .hero-description{font-size:18px}
  }
  @media(max-width:950px){.nav-inner{gap:18px}
    .nav-inner nav{gap:16px}
    .brand{font-size:12px}
    .feature-card{padding:23px}
    .feature-card.wide{padding:27px}
    .feature-card h3{font-size:21px}
    .feature-copy h3{font-size:26px}
    .feature-card.quality{padding:27px 23px}
    .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 32px}
    .faq-section{gap:35px}
    .section-heading>p{max-width:300px;font-size:13px}
    .ui-legend{column-gap:22px}
  }
  @media(max-width:820px){.nav-inner nav a[href="#app-preview"]{display:none}}
  @media(max-width:700px){:root{--pad:22px}
    .nav-inner{height:62px}
    .nav-inner nav{display:none}
    .nav-actions{margin-left:auto;gap:7px}
    .brand img{width:30px;height:30px}
    .nav-actions .button.small{font-size:10px;padding:6px 9px}
    .hero{padding-top:38px}
    .hero h1{font-size:58px}
    .hero-eyebrow{margin-top:26px}
    .hero-description{font-size:15px}
    .hero-actions{gap:19px}
    .hero-actions .button{font-size:12px;padding:12px 16px}
    .hero-actions .text-link{font-size:12px}
    .hero-meta{font-size:9px;gap:9px}
    .hero-meta span{padding-inline:9px}
    .playground{margin-top:39px}
    .demo-note{font-size:10px;max-width:450px}
    .demo-note br{display:none}
    .spec-strip{grid-template-columns:repeat(2,1fr);padding-block:40px;row-gap:28px}
    .spec-strip>div:nth-child(3){border-left:0}
    .spec-strip strong{font-size:23px}
    .spec-strip small{font-size:11px}
    .spec-strip div>span{font-size:9px}
    .spec-strip strong>span{font-size:15px}
    .section{padding-block:70px}
    .section-heading{display:block;margin-bottom:30px}
    .section-heading>p{max-width:none;margin-top:20px}
    .section-heading h2,.faq-section h2{font-size:36px}
    .feature-grid{grid-template-columns:1fr 1fr;gap:12px}
    .feature-card,.feature-card.quality{grid-column:span 1}
    .feature-card.wide,.feature-card.half{grid-column:1/-1}
    .feature-card.quality{display:flex;flex-direction:column}
    .feature-copy h3{font-size:25px}
    .feature-card p,.feature-card .feature-copy p{font-size:12px}
    .feature-card p br{display:none}
    .pixel-art{margin-top:auto;min-height:100px}
    .app-section{padding-top:20px}
    .app-figure{margin-top:32px}
    .screenshot-button{border-radius:7px}
    .expand-label{right:9px;bottom:9px;padding:5px 8px;font-size:9px}
    .hotspots li{width:17px;height:17px;font-size:9px;line-height:17px;box-shadow:0 0 0 2px #060b14b3}
    .ui-legend{grid-template-columns:1fr;margin-top:26px}
    .steps{grid-template-columns:1fr;gap:26px;margin-top:32px}
    .steps li{position:relative;padding:22px 0 0 48px}
    .step-number{position:absolute;left:0;top:26px}
    .steps h3{font-size:22px}
    .steps p{margin-top:9px}
    .step-detail{margin-top:13px}
    .tip{align-items:flex-start;flex-direction:column;gap:8px;padding:17px;font-size:11px}
    .faq-section{display:block;padding-top:10px}
    .faq-list{margin-top:29px}
    .download-section{padding-bottom:60px}
    .download-card{padding:28px 20px;border-radius:16px}
    .download-card h2{font-size:30px}
    .download-card>p:not(.eyebrow){font-size:12px}
    .download-card p.development-note,.download-card p.release-meta{font-size:10px}
    .install-steps{flex-direction:column;align-items:center}
    .footer nav{gap:10px 18px;font-size:10px}
    .footer .legal{font-size:9px}
  }
  @media(max-width:390px){:root{--pad:16px}
    .brand{font-size:10px;gap:5px}
    .nav-actions .icon-button{width:29px}
    .hero h1{font-size:48px}
    .hero-actions{gap:14px;flex-direction:column}
    .hero-meta{font-size:8px}
    .feature-grid{grid-template-columns:1fr}
    .feature-card,.feature-card.quality{grid-column:1}
    .feature-card.quality{display:block}
    .pixel-art{margin-top:15px}
    .shortcut{gap:5px;font-size:9px}
    .shortcut span{margin-right:6px}
  }
}

/* 웹 체험판 (#sim) — 실제 앱(src/ui) 배치와 동작을 옮겼습니다. */
@layer app{
  .app{position:relative;border:1px solid var(--a-border-strong);border-radius:12px;background:linear-gradient(var(--a-window-top),var(--a-window));color:var(--a-text);font-size:13px;line-height:1.45;letter-spacing:0;box-shadow:0 40px 100px -35px var(--shadow);overflow:hidden;word-break:normal}
  .app button:focus-visible,.app input:focus-visible,.app select:focus-visible,.app-dialog button:focus-visible{outline:2px solid var(--a-accent);outline-offset:1px}
  .app ::selection{background:var(--a-accent);color:#fff}
  .app-titlebar{height:50px;display:flex;align-items:center;gap:8px;padding:0 8px 0 16px}
  .app-logo{width:22px;height:22px}
  .app-name{font-weight:800;font-size:14px;letter-spacing:.03em;white-space:nowrap}
  .app-name b{color:var(--a-accent);font-weight:800}
  .app .chip{display:inline-block;color:var(--a-muted);background:var(--a-surface-alt);border:1px solid var(--a-border);border-radius:9px;padding:0 8px;font-size:11.5px;line-height:18px;white-space:nowrap}
  .app .chip.accent{color:var(--a-accent)}
  .app .chip.warning{color:var(--a-warning);border-color:var(--a-warning)}
  .app-sep{width:1px;height:22px;background:var(--a-border);margin-inline:6px 2px;flex:none}
  .app-btn{display:inline-flex;align-items:center;gap:6px;background:var(--a-surface-alt);border:1px solid var(--a-border);border-radius:8px;padding:5px 14px;font-weight:600;font-size:13px;color:var(--a-text);white-space:nowrap;min-height:32px}
  .app-btn:hover{background:var(--a-surface-hover);border-color:var(--a-border-strong)}
  .app-btn:disabled{color:var(--a-faint);background:var(--a-surface-alt);border-color:var(--a-border);cursor:default}
  .app-btn.primary{background:linear-gradient(var(--a-accent-hover),var(--a-accent));color:#fff;border-color:var(--a-accent)}
  .app-btn.primary:hover{background:var(--a-accent-hover)}
  .app-btn.danger{background:var(--a-danger);border-color:var(--a-danger);color:#fff}
  .app-tool{width:32px;height:32px;display:grid;place-items:center;border-radius:7px;background:transparent;border:1px solid transparent;color:var(--a-text);flex:none}
  .app-tool:hover{background:var(--a-surface-hover)}
  .app-tool:disabled{color:var(--a-faint);background:transparent;cursor:default}
  .app-tool.small{width:28px;height:28px;color:var(--a-muted)}
  .app-tool.small .fi{width:16px;height:16px}
  .app-tool.framed{background:var(--a-surface-alt);border-color:var(--a-border);height:32px;width:34px}
  .app-tool.framed:hover{background:var(--a-surface-hover);border-color:var(--a-border-strong)}
  .app-tool.accent{color:var(--a-accent)}
  .app-video{flex:1;min-width:0;display:flex;align-items:center;gap:12px;margin-left:4px}
  .app-video b{font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .app-meta{margin-left:auto;color:var(--a-muted);white-space:nowrap;padding-right:6px}
  .app-menu-wrap{position:relative}
  .app-window-buttons{display:flex;gap:2px;margin-left:6px;color:var(--a-text)}
  .app-window-buttons .fi{width:32px;height:32px;padding:8px}
  .app-menu{position:absolute;top:calc(100% + 4px);right:0;z-index:5;width:232px;max-height:min(640px,82vh);overflow:auto;background:var(--a-surface);border:1px solid var(--a-border-strong);border-radius:8px;padding:5px;box-shadow:0 14px 34px #0007}
  .app-menu button{display:block;width:100%;text-align:left;padding:6px 26px 6px 30px;border-radius:6px;background:none;color:var(--a-text);position:relative;font-size:13px}
  .app-menu button:hover,.app-menu button:focus-visible{background:var(--a-surface-hover);outline:none}
  .app-menu [aria-checked=true]::before{content:'';position:absolute;left:9px;top:50%;width:14px;height:14px;transform:translateY(-50%);background:var(--a-accent);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3.37 10.17a.5.5 0 0 0-.75.66l4 4.5a.5.5 0 0 0 .73.02l10.5-10.5a.5.5 0 0 0-.7-.7L7.02 14.27Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3.37 10.17a.5.5 0 0 0-.75.66l4 4.5a.5.5 0 0 0 .73.02l10.5-10.5a.5.5 0 0 0-.7-.7L7.02 14.27Z'/%3E%3C/svg%3E") center/contain no-repeat}
  .menu-label{font-size:11px;color:var(--a-muted);padding:6px 10px 2px}
  .app-menu hr{border:0;height:1px;background:var(--a-border);margin:5px 6px}
  .app-content{padding:2px 14px 12px;display:flex;flex-direction:column;gap:10px}
  .app-preview{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .frame-pane{position:relative;border-radius:10px;overflow:hidden;background:var(--a-media);aspect-ratio:16/9}
  .frame-pane canvas{width:100%;height:100%}
  .pane-pill{position:absolute;top:10px;left:10px;margin:0;display:flex;gap:10px;background:#00000096;color:#fff;border-radius:12px;padding:0 10px;font-size:12px;font-weight:700;line-height:24px;text-align:left}
  .pane-pill b{color:var(--a-select)}
  .app-card{background:var(--a-surface);border:1px solid var(--a-border);border-radius:12px;padding:12px 14px;min-width:0}
  .app-card h3{font-size:13px;font-weight:800;letter-spacing:0;line-height:1.4;white-space:nowrap}
  .card-head{display:flex;align-items:center;gap:4px;margin-bottom:4px}
  .card-hint{flex:1;min-width:0;margin-left:8px;font-size:12px;color:var(--a-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .card-head .app-btn{margin-left:6px}
  .zoom-buttons{display:flex;gap:2px}
  .app-timeline{display:block;width:100%;height:96px;touch-action:pan-y;outline:none;user-select:none;-webkit-user-select:none}
  .time-fields{display:flex;align-items:flex-end;flex-wrap:wrap;gap:8px 14px;margin-top:6px}
  .time-field{display:flex;flex-direction:column;gap:3px}
  .time-field label,.field-label{font-size:12px;color:var(--a-muted)}
  .tf-box{display:flex;align-items:center;background:var(--a-surface-alt);border:1px solid var(--a-border);border-radius:8px;padding:1px 2px}
  .tf-box:focus-within{border-color:var(--a-accent)}
  .tf-box.invalid{border-color:var(--a-danger);background:var(--a-danger-soft)}
  .tf-box input{width:104px;min-width:0;text-align:center;background:transparent;border:0;padding:4px 2px;font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--a-text);outline:none}
  .time-field.short input{width:70px}
  .tf-nudge{width:26px;height:28px;display:grid;place-items:center;background:none;color:var(--a-muted);border-radius:6px;flex:none}
  .tf-nudge:hover{background:var(--a-surface-hover);color:var(--a-text)}
  .tf-nudge .fi{width:14px;height:14px}
  .field-chips{display:flex;gap:6px;padding-bottom:6px;margin-left:6px}
  .app-row{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:10px}
  .options-grid{display:grid;grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr);gap:8px 10px;align-items:center;margin-top:10px}
  .output-grid{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:center;margin-top:10px}
  .app input[type=text],.app input[type=number],.app select{background:var(--a-surface-alt);border:1px solid var(--a-border);border-radius:7px;padding:5px 8px;color:var(--a-text);font-size:13px;min-height:32px;min-width:0}
  .app input[type=text]:hover,.app input[type=number]:hover,.app select:hover{border-color:var(--a-border-strong)}
  .app input[type=text]:focus,.app input[type=number]:focus,.app select:focus{border-color:var(--a-accent);outline:none}
  .app input::placeholder{color:var(--a-faint)}
  .app input:disabled,.app select:disabled{color:var(--a-faint)}
  .app input.invalid{border-color:var(--a-danger);background:var(--a-danger-soft)}
  .app input[type=number]{appearance:textfield;-moz-appearance:textfield;text-align:center}
  .app input[type=number]::-webkit-inner-spin-button,.app input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
  .spin{width:72px}
  .spin.fps{width:60px;justify-self:start}
  .size-row,.dither-row,.output-row{display:flex;align-items:center;gap:6px;min-width:0}
  .times{color:var(--a-muted)}
  .app select{appearance:none;-webkit-appearance:none;padding-right:28px;background-image:var(--a-chevron);background-repeat:no-repeat;background-position:right 7px center;background-size:14px;cursor:pointer;width:100%}
  .app select option{background:var(--a-surface);color:var(--a-text)}
  .dither-row select{flex:1}
  .output-row input{flex:1}
  .app-generate{margin-top:10px;width:100%;display:flex;justify-content:center;align-items:center;gap:8px;padding:9px 18px;font-size:14.5px;font-weight:800;border-radius:10px;background:linear-gradient(var(--a-accent-hover),var(--a-accent));color:#fff;border:1px solid var(--a-accent)}
  .app-generate:hover{background:var(--a-accent-hover)}
  .app-generate:active{background:var(--a-accent-pressed)}
  .app-generate.busy{background:var(--a-danger);border-color:var(--a-danger)}
  .app-generate .fi{width:18px;height:18px}
  .progress-row{display:flex;align-items:center;gap:8px;margin-top:8px}
  .app-progress{flex:1;height:6px;border-radius:3px;background:var(--a-surface-hover);overflow:hidden;position:relative}
  .app-progress i{position:absolute;inset:0 auto 0 0;width:var(--p,0%);background:var(--a-accent);border-radius:3px}
  .app-progress.indeterminate i{width:28%;animation:indeterminate 1.1s linear infinite}
  @keyframes indeterminate{from{transform:translateX(-100%)}to{transform:translateX(360%)}}
  .stage{flex:1;min-width:0;font-size:12px;color:var(--a-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .log-head{display:flex;align-items:center;gap:8px}
  .log-toggle{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid transparent;border-radius:8px;padding:5px 12px 5px 8px;font-weight:600;color:var(--a-text)}
  .log-toggle:hover{background:var(--a-surface-hover)}
  .log-toggle .fi{width:16px;height:16px;color:var(--a-muted);transition:transform .15s}
  .log-toggle[aria-expanded=true] .fi{transform:rotate(90deg)}
  .last-line{flex:1;min-width:0;font-size:12px;color:var(--a-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .log-text{margin:6px 0 0;height:150px;overflow:auto;background:var(--a-surface-alt);border:1px solid var(--a-border);border-radius:8px;padding:6px 8px;font-family:'JetBrains Mono',monospace;font-size:12px;line-height:1.5;white-space:pre;color:var(--a-text)}
  .app-toast{position:absolute;left:50%;bottom:54px;transform:translateX(-50%);z-index:6;width:max-content;max-width:min(560px,calc(100% - 28px));background:var(--a-surface);border:1px solid var(--a-border-strong);color:var(--a-text);padding:9px 14px;border-radius:9px;font-size:12.5px;line-height:1.55;box-shadow:0 14px 34px #0007;white-space:pre-line}
  .app-dialog{border:1px solid var(--a-border-strong);border-radius:10px;padding:0;background:linear-gradient(var(--a-window-top),var(--a-window));color:var(--a-text);width:min(560px,94vw);max-height:92dvh;font-size:13px;line-height:1.5;letter-spacing:0;box-shadow:0 25px 90px #000a}
  .app-dialog::backdrop{background:#020711b3;backdrop-filter:blur(4px)}
  #sim-message{width:min(460px,94vw)}
  #sim-player{width:min(720px,94vw)}
  .app-dialog-bar{height:42px;display:flex;align-items:center;gap:8px;padding:0 6px 0 14px;font-weight:700}
  .app-dialog-bar img{width:18px;height:18px}
  .app-dialog-bar span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .app-dialog-body{padding:4px 20px 16px}
  .message-row{display:flex;gap:14px;align-items:flex-start}
  .message-icon{width:28px;height:28px;color:var(--a-accent)}
  .message-icon.warning{color:var(--a-warning)}
  .message-icon.danger{color:var(--a-danger)}
  .message-icon.success{color:var(--a-success)}
  .message-row p{white-space:pre-line;padding-top:3px;overflow-wrap:anywhere}
  .dialog-buttons{display:flex;gap:8px;justify-content:flex-end;align-items:center;margin-top:16px}
  .dialog-buttons .spacer{flex:1}
  .result-stage{position:relative;background:var(--a-surface);border:1px solid var(--a-border);border-radius:12px;padding:12px;display:grid;place-items:center;min-height:120px}
  .result-stage canvas{image-rendering:pixelated;max-width:100%;height:auto;background:#000}
  .result-pause{position:absolute;right:8px;bottom:8px}
  .result-pause .icon{width:15px;height:15px}
  .result-pause[aria-pressed=true]{background:var(--a-surface-hover);color:var(--a-accent)}
  .result-note{font-size:12px;color:var(--a-muted);margin-top:8px}
  .result-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;margin-top:14px}
  .result-grid div{display:flex;gap:12px;min-width:0}
  .result-grid dt{font-size:12px;color:var(--a-muted);flex:none;width:58px;padding-top:1px}
  .result-grid dd{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .player-canvas{width:100%;height:auto;border-radius:10px;background:var(--a-media)}
  .player-bar{display:flex;align-items:center;gap:10px;margin-top:10px}
  .player-bar output{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--a-muted)}
  .player-bar .app-progress i{transition:none}
  @media(max-width:950px){
    .app-meta{display:none}
    .card-hint{display:none}
    .app-row{grid-template-columns:1fr}
  }
  @media(max-width:700px){
    .app{font-size:12.5px;border-radius:10px}
    .app-titlebar{height:46px;padding:0 6px 0 12px;gap:6px}
    .app-window-buttons,.app-titlebar>.app-sep,.app-video{display:none}
    .app-titlebar>.app-btn{margin-left:auto;padding:5px 10px}
    .app-content{padding:2px 10px 10px;gap:8px}
    .app-preview{gap:6px}
    .frame-pane{border-radius:7px}
    .pane-pill{top:6px;left:6px;font-size:10px;line-height:19px;padding:0 7px;gap:6px}
    .app-card{padding:10px}
    .card-head{flex-wrap:wrap;row-gap:6px}
    .card-head h3{flex:1}
    .card-head>.app-sep{display:none}
    .card-head .app-btn{padding:4px 10px;min-height:30px}
    .zoom-buttons .app-tool{width:30px;height:30px}
    .time-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
    .time-field[data-field=length]{grid-column:1/-1;grid-row:2}
    .tf-box input,.time-field.short input{width:100%;flex:1}
    .field-chips{grid-column:1/-1;margin-left:0;padding-bottom:0;flex-wrap:wrap}
    .options-grid{grid-template-columns:auto minmax(0,1fr)}
    .spin{width:64px}
    .app-log .chip{display:none}
    .app-dialog-body{padding:4px 14px 14px}
    .result-grid{grid-template-columns:1fr}
  }
  @media(max-width:390px){
    .app-name{font-size:12.5px}
    .app .app-titlebar .chip{display:none}
    .app-titlebar>.app-btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
    .tf-nudge{width:22px}
  }
  @media(max-width:340px){
    .time-fields{grid-template-columns:1fr}
    .time-field[data-field=length]{grid-row:auto}
  }
}
@layer motion{
  @media(prefers-reduced-motion:no-preference){
    .hero h1{animation:arrive .7s both}
    .hero-description{animation:arrive .8s .08s both}
    .hero-actions{animation:arrive .8s .14s both}
    @keyframes arrive{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
    @supports(animation-timeline:view()){
      .feature-card,.steps li,.update-card{animation:reveal linear both;animation-timeline:view();animation-range:entry 0% entry 20%}
      @keyframes reveal{from{opacity:.25;transform:translateY(20px)}to{opacity:1;transform:none}}
    }
  }
  @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
    *,*::before,*::after{animation:none!important;transition:none!important}
  }
}

/* 자동 업데이트 섹션 (#updates) */
.update-card{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:44px;align-items:center;position:relative;overflow:hidden;border:1px solid var(--line);border-radius:22px;padding:42px 46px;background:radial-gradient(120% 140% at 100% 0%,var(--glow),transparent 62%),linear-gradient(145deg,var(--surface),var(--card-end))}
.update-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,var(--blue),transparent 46%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.75}
.update-copy h3{font-size:30px;font-weight:650;line-height:1.3;letter-spacing:-.05em;margin-top:14px}
.update-copy p{font-size:13px;color:var(--muted);margin-top:14px;line-height:1.9}
.update-points{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0}
.update-points li{font-size:11px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface-2);color:var(--ink)}
.update-flow{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.update-flow li{display:flex;align-items:center;gap:14px;padding:12px 18px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.update-flow b{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--blue);font-weight:600}
.update-flow span{font-size:14px;font-weight:550}
.update-flow small{margin-left:auto;font-size:11px;color:var(--faint);white-space:nowrap}
.update-flow .verify{border-color:var(--blue);box-shadow:0 0 0 3px var(--glow)}
.update-flow .verify small{color:var(--blue)}
@media(max-width:950px){.update-card{grid-template-columns:1fr;gap:28px;padding:32px}}
@media(max-width:700px){.update-card{padding:24px 20px;border-radius:18px}.update-copy h3{font-size:24px}.update-copy p br{display:none}.update-flow li{padding:11px 14px}}

/* 상단 '정식 출시' 배지: 마우스를 올리면(키보드 포커스 포함) 밝은 노란색으로 바뀝니다.
   다크 테마는 글자·테두리를 노랗게, 라이트 테마는 흰 바탕에서도 잘 보이도록 배지를 노랗게 칠하고 글자를 짙게 씁니다. */
.preview-badge{--badge-hot:#fde047;transition:color .18s,border-color .18s,background-color .18s}
.preview-badge>span:last-child,.preview-badge .status-dot{transition:color .18s}
.preview-badge:hover,.preview-badge:focus-visible{color:var(--badge-hot);border-color:rgba(253,224,71,.6);background:rgba(253,224,71,.09)}
.preview-badge:hover>span:last-child,.preview-badge:focus-visible>span:last-child{color:var(--badge-hot)}
:root[data-theme=light] .preview-badge{--badge-hot:#422006}
:root[data-theme=light] .preview-badge:hover,:root[data-theme=light] .preview-badge:focus-visible{border-color:#eab308;background:#fde047}
:root[data-theme=light] .preview-badge:hover .status-dot,:root[data-theme=light] .preview-badge:focus-visible .status-dot{color:#15803d}