@import url("https://fonts.googleapis.com/css2?family=Archivo+Black&family=Black+Han+Sans&family=Inter:wght@300;400;500;600&display=swap");

:root { --black:#050505; --white:#f3f1ed; --acid:#d7ff25; --grey:#9a9a95; --line:rgba(255,255,255,.22); --pad:clamp(20px,3vw,48px); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--black); }
body { margin:0; overflow-x:hidden; background:var(--black); color:#fff; font-family:Inter,Arial,sans-serif; }
button,input,textarea,select { font:inherit; }
button,a { color:inherit; }
a { text-decoration:none; }
button { cursor:pointer; }
[hidden] { display:none!important; }
::selection { background:var(--acid); color:#000; }

.site-header { position:fixed; z-index:40; inset:0 0 auto; height:88px; display:flex; align-items:center; justify-content:space-between; padding:0 var(--pad); mix-blend-mode:difference; color:#fff; }
.brand { display:flex; align-items:center; gap:12px; font:600 10px/1.05 Inter,sans-serif; letter-spacing:.08em; }
.brand-mark { width:34px; height:13px; display:block; background:#fff; clip-path:polygon(0 0,100% 0,77% 100%,0 100%); }
.site-header nav { display:flex; gap:clamp(18px,2.6vw,43px); font-size:10px; letter-spacing:.08em; }
.site-header nav a { position:relative; padding:10px 0; }
.site-header nav a::after { content:""; position:absolute; left:0; right:100%; bottom:5px; height:1px; background:#fff; transition:right .3s; }
.site-header nav a:hover::after { right:0; }
.menu-button,.mobile-menu { display:none; }

.hero { position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; padding:130px var(--pad) 44px; overflow:hidden; isolation:isolate; }
.hero-film { position:absolute; z-index:-3; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.65) contrast(1.08); }
.hero-shade { position:absolute; z-index:-2; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.04) 35%,rgba(0,0,0,.86)); }
.hero::after { content:""; position:absolute; z-index:-1; inset:0; opacity:.13; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.52'/%3E%3C/svg%3E"); }
.eyebrow { position:absolute; top:115px; left:var(--pad); margin:0; font-size:10px; letter-spacing:.13em; }
.hero h1 { margin:0; font:400 clamp(67px,13.2vw,210px)/.73 "Archivo Black",Arial Black,sans-serif; letter-spacing:-.085em; transform:scaleX(.93); transform-origin:left bottom; }
.hero h1 span { display:block; white-space:nowrap; }
.hero h1 span:last-child { margin-left:8.5vw; color:transparent; -webkit-text-stroke:1.5px #fff; }
.hero-copy { width:min(395px,80%); margin:48px 0 0 auto; font-size:14px; line-height:1.5; }
.scroll-cue { position:absolute; left:var(--pad); bottom:50px; display:flex; align-items:center; gap:20px; font-size:9px; letter-spacing:.1em; }
.scroll-cue i { width:34px; height:34px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.65); border-radius:50%; font-style:normal; }

.creator-section,.models-section { padding:105px var(--pad) 130px; background:var(--white); color:#080808; }
.section-index { display:grid; grid-template-columns:42px 1fr; gap:15px; padding-bottom:17px; border-bottom:1px solid rgba(0,0,0,.35); font-size:9px; letter-spacing:.11em; }
.section-index.light { border-color:rgba(255,255,255,.35); }
.creator-heading { display:grid; grid-template-columns:38% 1fr; align-items:start; padding:54px 0 62px; }
.creator-heading p,.model-statement>p { margin:7px 0; font-size:9px; letter-spacing:.14em; }
.creator-heading h2,.model-statement h2 { margin:0; font:400 clamp(45px,6.7vw,104px)/.9 "Archivo Black",Arial Black,sans-serif; letter-spacing:-.07em; }

.studio-shell { border:1px solid #aaa9a3; background:#fff; box-shadow:0 18px 55px rgba(0,0,0,.08); }
.mode-tabs { display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid #aaa9a3; }
.mode-tabs button { min-height:58px; border:0; border-right:1px solid #aaa9a3; background:#fff; color:#777; font-size:10px; letter-spacing:.08em; transition:.2s; }
.mode-tabs button:last-child { border-right:0; }
.mode-tabs button.active { background:#090909; color:#fff; }
#video-form { padding:clamp(18px,3vw,42px); }
.upload-panel { margin-bottom:20px; }
#upload-trigger { width:100%; min-height:98px; display:flex; align-items:center; justify-content:center; gap:18px; border:1px dashed #aaa; background:#f7f7f3; color:#111; }
.upload-plus { width:34px; height:34px; display:grid; place-items:center; border:1px solid #222; border-radius:50%; font-size:21px; font-weight:300; }
#upload-trigger span:last-child { display:grid; gap:5px; text-align:left; }
#upload-trigger strong { font-size:10px; letter-spacing:.07em; }
#upload-trigger small { color:#888; font-size:9px; }
.attachment-list { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:9px; }
.attachment { position:relative; min-width:0; height:86px; display:flex; align-items:center; gap:10px; padding:7px; border:1px solid #ccc; background:#fff; }
.attachment img,.attachment video { width:72px; height:70px; flex:none; object-fit:cover; background:#111; }
.attachment div { min-width:0; display:grid; gap:4px; }
.attachment strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9px; }
.attachment small { color:#888; font-size:8px; }
.attachment button { position:absolute; top:4px; right:4px; width:20px; height:20px; border:0; border-radius:50%; background:#111; color:#fff; font-size:10px; }
.prompt-wrap { padding:18px 20px 12px; border:1px solid #8f8f8b; }
.prompt-wrap>label { display:block; margin-bottom:15px; font-size:9px; letter-spacing:.1em; }
.prompt-wrap textarea { width:100%; min-height:112px; padding:0; resize:vertical; border:0; outline:0; background:transparent; color:#111; font-size:16px; font-weight:300; line-height:1.55; }
.prompt-wrap textarea::placeholder { color:#aaa; }
.prompt-meta { display:flex; justify-content:space-between; gap:20px; color:#888; font-size:9px; }
.prompt-meta b { font-weight:400; }
.generation-controls { display:grid; grid-template-columns:1.45fr repeat(3,1fr) 1.3fr; border:1px solid #aaa9a3; border-top:0; }
.select-control { position:relative; padding:13px 16px 12px; border-right:1px solid #aaa9a3; }
.select-control label,.sound-control small { display:block; margin-bottom:6px; color:#8a8a85; font-size:8px; letter-spacing:.1em; }
.select-control select { width:100%; padding:0 22px 0 0; border:0; outline:0; appearance:none; background:linear-gradient(45deg,transparent 50%,#111 50%) right 5px center/5px 5px no-repeat,linear-gradient(135deg,#111 50%,transparent 50%) right 0 center/5px 5px no-repeat; color:#111; font-size:10px; font-weight:600; }
.sound-control { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 15px; }
.sound-control strong { font-size:9px; }
.sound-control input { position:absolute; opacity:0; }
.sound-control i { position:relative; width:38px; height:21px; flex:none; border-radius:30px; background:#bbb; transition:.2s; }
.sound-control i::after { content:""; position:absolute; top:3px; left:3px; width:15px; height:15px; border-radius:50%; background:#fff; transition:.2s; }
.sound-control input:checked+i { background:#111; }.sound-control input:checked+i::after { transform:translateX(17px); background:var(--acid); }
.generate-row { display:flex; justify-content:space-between; align-items:center; gap:20px; padding-top:26px; }
.generate-row p { display:flex; align-items:center; gap:16px; margin:0; }.generate-row p span { padding:8px 11px; background:#eee; font-size:8px; letter-spacing:.08em; }.generate-row p small { color:#888; font-size:9px; }
#generate-button { min-width:230px; height:58px; display:flex; align-items:center; justify-content:space-between; padding:0 20px 0 24px; border:1px solid #080808; background:#080808; color:#fff; font-size:10px; letter-spacing:.09em; transition:.2s; }
#generate-button i { width:29px; height:29px; display:grid; place-items:center; border-radius:50%; background:var(--acid); color:#000; font-style:normal; }
#generate-button:hover:not(:disabled) { background:var(--acid); color:#000; }
#generate-button:disabled { opacity:.25; cursor:not-allowed; }

.generation-status { margin-top:18px; min-height:150px; display:grid; grid-template-columns:150px 1fr auto; align-items:center; gap:25px; padding:14px; border:1px solid #aaa9a3; }
.status-visual { position:relative; height:120px; display:grid; place-items:center; overflow:hidden; background:#111; color:#fff; }
.status-visual::before { content:""; position:absolute; width:60%; aspect-ratio:1; border:1px solid rgba(255,255,255,.4); border-radius:50%; animation:spin 3s linear infinite; box-shadow:27px 0 0 -1px #111,27px 0 0 0 rgba(255,255,255,.2); }
.status-visual span { position:relative; z-index:2; font:36px "Archivo Black"; }
.generation-status p { margin:0 0 8px; font-size:11px; letter-spacing:.08em; }.generation-status small { color:#777; font-size:10px; }
.generation-status>button { align-self:start; border:0; background:transparent; font-size:8px; letter-spacing:.08em; }
@keyframes spin { to { transform:rotate(360deg); } }
.result-section { margin-top:82px; }
.result-head { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:22px; }
.result-head span { font-size:8px; letter-spacing:.1em; }.result-head h3 { margin:7px 0 0; font:36px "Archivo Black"; letter-spacing:-.05em; }
.result-head>div:last-child { display:flex; gap:8px; }.result-head a { padding:12px 14px; border:1px solid #999; font-size:8px; letter-spacing:.08em; }
.result-frame { position:relative; min-height:360px; display:grid; place-items:center; overflow:hidden; background:#000; }
.result-frame video { display:block; width:100%; max-height:76vh; object-fit:contain; }
#remix-result { position:absolute; right:15px; bottom:15px; padding:13px 17px; border:0; background:var(--acid); color:#000; font-size:8px; letter-spacing:.08em; }
#result-prompt { max-width:760px; margin:18px 0 0; color:#666; font-size:11px; line-height:1.6; }

.showcase-section { padding:105px var(--pad) 130px; background:#080808; }
.showcase-title { display:grid; grid-template-columns:1fr 330px; align-items:end; gap:30px; padding:55px 0 75px; }
.showcase-title h2 { margin:0; font:clamp(45px,6.7vw,104px)/.9 "Archivo Black"; letter-spacing:-.07em; }.showcase-title p { margin:0; color:#a5a5a0; font-size:12px; line-height:1.7; }
.film-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:15px; }
.film-grid article { min-width:0; }
/* The template positioned exactly three tiles by index, so any additional tile fell
   back to a single 1/12 column and rendered as a sliver. Expressed as a repeating
   three-tile cadence instead, the same wide / offset-right / centred rhythm now
   carries however many clips the showcase holds. */
.film-grid article:nth-child(3n+1) { grid-column:1/8; }
.film-grid article:nth-child(3n+2) { grid-column:8/13; padding-top:120px; }
.film-grid article:nth-child(3n+3) { grid-column:3/10; margin-top:80px; }
.film-grid article:nth-child(n+4) { margin-top:90px; }
.film-grid video { width:100%; aspect-ratio:16/10; display:block; object-fit:cover; filter:saturate(.75); }
.film-grid article>div { display:grid; grid-template-columns:36px 1fr auto; align-items:center; padding:14px 0; border-bottom:1px solid var(--line); }
.film-grid span,.film-grid p { color:#888; font-size:8px; }.film-grid h3 { margin:0; font-size:10px; letter-spacing:.08em; }.film-grid p { margin:0; }

.model-statement { display:grid; grid-template-columns:38% 1fr; padding:56px 0 76px; }
.model-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #999; border-left:1px solid #999; }
.model-grid article { min-height:280px; display:flex; flex-direction:column; padding:24px; border-right:1px solid #999; border-bottom:1px solid #999; }
.model-grid span { width:44px; height:44px; display:grid; place-items:center; border:1px solid #111; border-radius:50%; font-size:8px; }
.model-grid h3 { margin:auto 0 18px; font:22px "Archivo Black"; letter-spacing:-.04em; }.model-grid p { margin:0; color:#696963; font-size:10px; line-height:1.65; }

footer { min-height:570px; display:flex; flex-direction:column; justify-content:space-between; padding:110px var(--pad) 35px; background:var(--acid); color:#050505; }
.footer-word { font:clamp(70px,14vw,220px)/.65 "Archivo Black"; letter-spacing:-.09em; }.footer-word em { margin-left:20vw; color:transparent; font-style:normal; -webkit-text-stroke:2px #050505; }
.footer-links { display:flex; align-items:center; gap:35px; padding-top:24px; border-top:1px solid #050505; font-size:9px; letter-spacing:.08em; }.footer-links span { margin-left:auto; }
.toast { position:fixed; z-index:100; right:18px; bottom:18px; max-width:390px; padding:15px 18px; border:1px solid rgba(255,255,255,.25); background:#111; color:#fff; box-shadow:0 10px 40px rgba(0,0,0,.35); font-size:11px; line-height:1.5; }

@media (max-width:900px) {
  .site-header { height:70px; }.site-header nav { display:none; }.menu-button { display:block; padding:10px; border:0; background:transparent; font-size:9px; letter-spacing:.09em; }
  .mobile-menu { position:fixed; inset:70px 0 auto; display:grid; padding:12px var(--pad) 25px; background:#050505; color:#fff; mix-blend-mode:normal; }.mobile-menu a { padding:13px 0; border-bottom:1px solid #333; font-size:10px; }
  .eyebrow { top:92px; }.hero { padding-bottom:35px; }.hero h1 { font-size:19vw; line-height:.78; }.hero h1 span:last-child { margin-left:0; }.hero-copy { margin-top:35px; }.scroll-cue { display:none; }
  .creator-section,.showcase-section,.models-section { padding-top:75px; padding-bottom:90px; }
  .creator-heading,.model-statement { grid-template-columns:1fr; gap:28px; padding:38px 0 45px; }
  .mode-tabs { overflow-x:auto; grid-template-columns:repeat(3,minmax(150px,1fr)); }.mode-tabs button { min-height:52px; }
  #video-form { padding:12px; }.generation-controls { grid-template-columns:repeat(2,1fr); }.select-control { border-bottom:1px solid #aaa9a3; }.sound-control { grid-column:1/-1; min-height:58px; }
  .attachment-list { grid-template-columns:repeat(2,1fr); }
  .showcase-title { grid-template-columns:1fr; }.showcase-title p { max-width:440px; }
  .model-grid { grid-template-columns:1fr; }.model-grid article { min-height:230px; }
}
@media (max-width:600px) {
  .hero { min-height:760px; }.hero h1 { font-size:20vw; }.hero-copy { width:90%; margin-left:0; }
  .creator-heading h2,.showcase-title h2,.model-statement h2 { font-size:44px; }
  .prompt-wrap { padding:15px; }.prompt-wrap textarea { min-height:150px; font-size:14px; }
  .generation-controls { grid-template-columns:1fr 1fr; }.model-control { grid-column:1/-1; }
  .generate-row { align-items:stretch; flex-direction:column; }.generate-row p { justify-content:space-between; }.generate-row p small { text-align:right; }#generate-button { width:100%; }
  .generation-status { grid-template-columns:90px 1fr; gap:15px; }.status-visual { height:90px; }.generation-status>button { display:none; }
  .result-head { align-items:flex-start; flex-direction:column; }.result-head h3 { font-size:29px; }.result-frame { min-height:220px; }
  .film-grid { display:block; }.film-grid article,.film-grid article:nth-child(n) { margin:0 0 45px; padding:0; }.film-grid article>div { grid-template-columns:30px 1fr; }.film-grid p { grid-column:2; margin-top:7px; }
  .footer-word { font-size:24vw; }.footer-links { flex-wrap:wrap; gap:18px; }.footer-links span { width:100%; margin:20px 0 0; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }

/* ── Palette additions ─────────────────────────────────────────────────────── */
/* The wordmark is a white PNG and the header uses mix-blend-mode:difference, so it
   inverts correctly over both the dark hero and the light creator section. */
.brand-logo { width:104px; height:auto; display:block; }

/* On-screen Korean: the control that makes this model different from the field, so
   it sits with the prompt rather than buried among the dropdowns. */
.text-panel { margin-top:22px; padding:20px; border:1px solid rgba(0,0,0,.16); background:#fff; }
.text-panel.required { border-color:#080808; box-shadow:inset 3px 0 0 var(--acid); }
.text-panel label { display:block; font-size:9px; letter-spacing:.11em; color:#080808; }
.text-panel label em { font-style:normal; color:#6d6d68; letter-spacing:.06em; }
.text-panel input { width:100%; margin-top:11px; padding:13px 14px; border:1px solid rgba(0,0,0,.2); background:#fbfbf9; color:#080808; font-size:15px; }
.text-panel input:focus-visible { outline:2px solid #080808; outline-offset:1px; }
.text-panel-note { margin:11px 0 0; max-width:64ch; font-size:11px; line-height:1.55; color:#55554f; }

/* Verified-text result. Numbers are the product, so they are set as data - tabular
   figures, the instrument floor stated next to the score. */
.accuracy-card { margin-top:22px; padding:22px; border:1px solid rgba(0,0,0,.18); background:#fff; }
.accuracy-head { display:flex; align-items:center; gap:14px; }
.accuracy-head p { margin:0; font-size:11px; color:#55554f; }
#accuracy-badge { padding:6px 11px; background:var(--acid); color:#000; font-size:9px; letter-spacing:.1em; }
#accuracy-badge.fail { background:#ff5436; color:#fff; }
#accuracy-table { width:100%; margin-top:17px; border-collapse:collapse; font-size:13px; }
#accuracy-table td { padding:10px 0; border-bottom:1px solid rgba(0,0,0,.1); }
#accuracy-table td:first-child { font-size:16px; }
#accuracy-table td:nth-child(2) { width:88px; font-variant-numeric:tabular-nums; font-weight:600; }
#accuracy-table td:last-child { width:190px; color:#6d6d68; font-size:11px; }
#accuracy-table td.ok { color:#1c7a3e; }
#accuracy-table td.bad { color:#c0342a; }
#accuracy-foot { display:block; margin-top:14px; max-width:78ch; font-size:11px; line-height:1.6; color:#6d6d68; }

/* AI 기본법 제31조: the notice must be visible, not only in file metadata. */
.ai-notice { margin-top:18px; font-size:10px; letter-spacing:.05em; color:#6d6d68; }

.proof-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:26px; margin-top:64px; padding-top:34px; border-top:1px solid rgba(0,0,0,.18); }
.proof-row div b { display:block; font:400 clamp(38px,5vw,62px)/1 "Archivo Black",Arial Black,sans-serif; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.proof-row div small { display:block; margin-top:9px; max-width:30ch; font-size:11px; line-height:1.55; color:#55554f; }

.api-section { padding:105px var(--pad) 130px; background:#080808; }
.api-code { margin-top:44px; padding:26px; overflow-x:auto; border:1px solid var(--line); background:#050505; }
.api-code code { font:400 12px/1.75 ui-monospace,SFMono-Regular,Menlo,monospace; color:#d8d8d2; white-space:pre; }

@media (max-width:760px) {
  .brand-logo { width:82px; }
  #accuracy-table td:last-child { display:none; }
}


/* ── Korean display type ───────────────────────────────────────────────────── */
/* The hero headline is Hangul, and Archivo Black has no Hangul glyphs. Left on the
   Latin treatment it fell back to a system face and then inherited metrics tuned for
   Latin capitals: line-height .73 and letter-spacing -.085em made the two lines
   collide, and scaleX(.93) squeezed the syllable blocks out of shape. Hangul blocks
   are full-height with no descender relief, so they need their own setting. */
.hero h1.ko { font-family:"Black Han Sans","Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  font-size:clamp(58px,11vw,178px); line-height:.98; letter-spacing:-.02em;
  transform:none; }
.hero h1.ko span:last-child { margin-left:6vw; }
.footer-word.ko { font-family:"Black Han Sans","Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  font-size:clamp(56px,11vw,168px); line-height:1.02; letter-spacing:-.02em; }
/* -webkit-text-stroke paints OUTSIDE the glyph box, so an outlined syllable runs into
   the solid one that follows it. Latin got away with it; a heavy Hangul face does not. */
.footer-word.ko em { margin-left:14vw; margin-right:.08em; -webkit-text-stroke-width:2px; }

/* ── Motion layer ──────────────────────────────────────────────────────────── */
/* The template shipped a nav underline, a tab fade and a spinner. Everything else
   arrived and sat still. Motion here is restrained on purpose: this is an editorial
   page, so things rise into place and images breathe on hover - nothing bounces.
   Two easing curves do all the work, and every rule below is disabled wholesale by
   the prefers-reduced-motion block the template already declares. */
:root { --ease:cubic-bezier(.22,.61,.36,1); --ease-io:cubic-bezier(.65,0,.35,1); }

/* Scroll reveal. Staggered by --i so a row of tiles arrives as a sequence rather
   than a block. */
.reveal { opacity:0; transform:translateY(22px); }
.reveal.in { opacity:1; transform:none;
  transition:opacity .7s var(--ease) calc(var(--i,0) * 70ms),
             transform .7s var(--ease) calc(var(--i,0) * 70ms); }

/* Showcase tiles: the clip is the content, so hovering brings it forward - full
   saturation, a slow push in, and the caption rule drawing itself across. */
.film-grid article { cursor:pointer; }
.film-grid article > video { transition:transform 1.1s var(--ease), filter .5s var(--ease); }
.film-grid article:hover > video { transform:scale(1.035); filter:saturate(1); }
.film-grid article { overflow:clip; }
.film-grid article > div { position:relative; transition:border-color .4s var(--ease); }
.film-grid article > div::after { content:""; position:absolute; left:0; bottom:-1px;
  width:0; height:1px; background:#fff; transition:width .55s var(--ease); }
.film-grid article:hover > div::after { width:100%; }
.film-grid article:hover h3 { color:#fff; }
.film-grid h3 { transition:color .35s var(--ease); }
.film-grid article > div > span { transition:transform .45s var(--ease), color .35s var(--ease); }
.film-grid article:hover > div > span { transform:translateX(3px); color:var(--acid); }

/* Engine cards lift and take the accent rule. */
.model-grid article { position:relative; transition:transform .5s var(--ease); }
.model-grid article::before { content:""; position:absolute; left:0; top:0; width:0; height:2px;
  background:var(--acid); transition:width .5s var(--ease); }
.model-grid article:hover { transform:translateY(-5px); }
.model-grid article:hover::before { width:100%; }

/* Controls: give focus and hover a real transition rather than a jump. */
.select-control select,.prompt-wrap textarea,.text-panel input {
  transition:border-color .3s var(--ease), background-color .3s var(--ease); }
.mode-tabs button { transition:background-color .3s var(--ease), color .3s var(--ease); }
.mode-tabs button:hover:not(.active) { background:#efeee9; color:#111; }
#generate-button i { transition:transform .45s var(--ease); }
#generate-button:hover:not(:disabled) i { transform:rotate(45deg); }
.scroll-cue i { display:inline-block; animation:nudge 2.4s var(--ease-io) infinite; }
@keyframes nudge { 0%,100% { transform:translateY(0); } 50% { transform:translateY(5px); } }

/* Result and accuracy panels arrive rather than appear. */
.result-section:not([hidden]),.accuracy-card:not([hidden]) {
  animation:rise .6s var(--ease) both; }
@keyframes rise { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }

/* The status counter is live data; give the digits a tick so it reads as running. */
#status-percent { transition:opacity .25s var(--ease); }


/* ── Korean-first display typography ───────────────────────────────────────── */
/* The page is now Korean throughout, and Archivo Black carries no Hangul at all - so
   every display heading would silently fall back to a system face while still using
   metrics tuned for Latin capitals. The Korean face is applied to the display roles
   directly, and each gets line-height and tracking that suit full-height syllable
   blocks rather than caps with descenders. */
h2.ko, h3.ko {
  font-family:"Black Han Sans","Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  letter-spacing:-.025em; }
.creator-heading h2.ko,
.showcase-title h2.ko,
.model-statement h2.ko { line-height:1.12; }
.result-head h3.ko { line-height:1.2; letter-spacing:-.02em; }

/* Body Korean wants a little more leading than the Latin default and must never
   break mid-word across a line. */
body { word-break:keep-all; }
.hero-copy,.showcase-title p,.model-grid p,.text-panel-note,.proof-row div small {
  line-height:1.75; }

/* Numbers stay on the Latin face: tabular figures are the whole point of the proof
   row, and the Korean display face has no tabular set. */
.proof-row div b { font-family:"Archivo Black",Arial Black,sans-serif; }

.duration-note { display:block; margin-top:8px; padding:0 14px 12px; font-size:10px;
  line-height:1.6; color:#6d6d68; grid-column:1/-1; }