:root{
  --bg:#000; --bg2:#0a0a0c; --panel:rgba(255,255,255,.05); --panel-h:rgba(255,255,255,.10);
  --line:rgba(255,255,255,.12); --txt:#f5f5f7; --dim:#8e8e93; --accent:#0a84ff;
  --radius:14px; --spring:cubic-bezier(.34,1.56,.64,1); --max:1100px;
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",
    "Pretendard","Apple SD Gothic Neo",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; letter-spacing:.01em; line-height:1.5;
}
a{color:inherit}

/* ===================== HERO ===================== */
.hero{position:relative; min-height:100vh; display:flex; align-items:center;
  justify-content:center; overflow:hidden; padding:80px 28px}
.hero-glow{position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(60vw 60vw at 20% 0%, rgba(10,132,255,.20), transparent 60%),
    radial-gradient(50vw 50vw at 90% 30%, rgba(150,80,255,.14), transparent 60%),
    radial-gradient(60vw 50vw at 60% 110%, rgba(255,90,140,.12), transparent 60%);
  filter:blur(20px)}
.hero-inner{position:relative; max-width:880px; text-align:center}
.eyebrow{font-size:13px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--dim); margin-bottom:22px}
.hero h1{font-size:clamp(52px,9vw,104px); line-height:.98; font-weight:700;
  letter-spacing:-.035em; margin-bottom:30px}
.hero h1 .grad{background:linear-gradient(120deg,#0a84ff 0%,#9b6bff 45%,#ff6a9c 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.lede{font-size:clamp(16px,1.7vw,20px); color:#d6d6da; max-width:680px;
  margin:0 auto 18px; line-height:1.65}
.lede em{color:#fff; font-style:normal; font-weight:600}
.sub{font-size:15px; color:var(--dim); max-width:600px; margin:0 auto 34px}
.sub b{color:var(--txt)}
.legend{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
  max-width:680px; margin:0 auto 32px; text-align:left}
.legend .lg{display:flex; align-items:center; justify-content:center;
  padding:20px 14px; border:1px solid var(--line); border-radius:12px;
  background:var(--panel); font-size:18px; font-weight:600; color:var(--txt);
  letter-spacing:-.01em; transition:border-color .25s, transform .25s}
.legend .lg:hover{border-color:rgba(255,255,255,.3); transform:translateY(-2px)}
.links{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:46px}
.links a{font-size:13px; color:#cfe0ff; padding:9px 16px; border-radius:22px;
  border:1px solid rgba(120,170,255,.25); background:rgba(10,132,255,.08);
  text-decoration:none; transition:all .25s}
.links a:hover{background:rgba(10,132,255,.18); border-color:rgba(120,170,255,.5)}
.author{display:flex; align-items:center; justify-content:center; gap:10px;
  margin-bottom:40px}
.author .by{font-size:13px; color:var(--dim)}
.abtn{display:inline-flex; align-items:center; gap:7px; font-size:13.5px;
  font-weight:600; color:var(--txt); text-decoration:none;
  padding:8px 15px; border-radius:22px; border:1px solid var(--line);
  background:var(--panel); transition:all .25s var(--spring)}
.abtn:hover{background:var(--panel-h); border-color:rgba(120,170,255,.5);
  transform:translateY(-2px); box-shadow:0 8px 24px rgba(10,132,255,.25)}
.abtn svg{opacity:.85}
.abtn.icon{padding:8px 11px}
.scrollcue{display:inline-block; font-size:13px; color:var(--dim);
  text-decoration:none; letter-spacing:.04em; animation:bob 2s ease-in-out infinite}
.scrollcue:hover{color:var(--txt)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* ===================== PLAYGROUND ===================== */
.playground{min-height:100vh; border-top:1px solid var(--line);
  background:linear-gradient(180deg,var(--bg2),var(--bg))}
.pgbar{position:sticky; top:0; z-index:30; display:flex; align-items:center;
  gap:24px; padding:16px 30px; border-bottom:1px solid var(--line);
  background:rgba(8,8,10,.72); backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px)}
.title{display:flex; align-items:center; gap:11px}
.title .dot{width:9px; height:9px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 12px var(--accent)}
.title h2{font-size:17px; font-weight:600; letter-spacing:-.01em}
.model{font-size:11px; color:var(--dim); border:1px solid var(--line);
  padding:3px 9px; border-radius:20px}
nav#modes{display:flex; gap:5px; margin-left:6px; flex-wrap:wrap}
.tab{font-size:13px; color:var(--dim); background:transparent; border:none;
  padding:7px 14px; border-radius:20px; cursor:pointer; font-family:inherit;
  transition:all .25s ease}
.tab:hover{color:var(--txt); background:var(--panel)}
.tab.active{color:#fff; background:var(--panel-h)}
.tab:disabled{opacity:.28; cursor:not-allowed}
.status{margin-left:auto; font-size:12px; color:var(--dim)}

main{padding-bottom:40px}

/* ---------- CNN diagram ---------- */
.diagram{display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:0; padding:54px 30px 34px}
.layer{position:relative; display:flex; flex-direction:column; align-items:center;
  cursor:pointer}
.layer .bar{width:36px; border-radius:11px;
  background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.045));
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .4s var(--spring), box-shadow .35s ease, border-color .25s}
.layer:hover .bar{transform:translateY(-7px) scaleX(1.14);
  border-color:rgba(255,255,255,.35); box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.layer.sel .bar{transform:translateY(-7px) scaleX(1.14); border:1.5px solid #4aa8ff;
  box-shadow:0 0 6px #0a84ff, 0 0 18px rgba(10,132,255,.85),
    0 0 34px rgba(10,132,255,.45), inset 0 0 8px rgba(10,132,255,.4)}
.layer .name{margin-top:15px; font-size:11px; color:var(--dim);
  transition:color .25s; white-space:nowrap}
.layer .cnt{font-size:9.5px; color:rgba(255,255,255,.25); margin-top:2px}
.layer:hover .name, .layer.sel .name{color:var(--txt)}
.layer.nodata{opacity:.28; pointer-events:none}
.conn{width:30px; height:2px; flex:none; border-radius:2px;
  background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.22),rgba(255,255,255,.05))}

/* ---------- channel / node strip ---------- */
.strip{max-width:var(--max); margin:0 auto; padding:6px 30px 40px}
.strip .head{font-size:12px; color:var(--dim); margin-bottom:16px}
.strip .row{display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:12px}
.cell{text-align:center; cursor:pointer; opacity:0; animation:pop .4s var(--spring) forwards}
.cell img{width:100%; aspect-ratio:1; border-radius:10px; object-fit:cover;
  border:1px solid var(--line); background:#0c0c0e;
  transition:transform .3s var(--spring), box-shadow .3s}
.cell:hover img{transform:scale(1.12);
  box-shadow:0 10px 30px rgba(10,132,255,.35); border-color:rgba(255,255,255,.5)}
.cell .lab{font-size:10px; color:var(--dim); margin-top:6px}
.cell:hover .lab{color:var(--txt)}
@keyframes pop{to{opacity:1}}

/* ---------- class circles (logit / prob) ---------- */
.classgrid{max-width:var(--max); margin:0 auto;
  display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:22px 14px}
.ccell{text-align:center; cursor:pointer; opacity:0; animation:pop .4s var(--spring) forwards}
.ccell img{width:100%; aspect-ratio:1; border-radius:50%; object-fit:cover;
  border:1px solid var(--line); background:#0c0c0e;
  transition:transform .3s var(--spring), box-shadow .3s, border-color .25s}
.ccell:hover img{transform:scale(1.14);
  box-shadow:0 12px 34px rgba(10,132,255,.45); border-color:rgba(255,255,255,.6)}
.cname{font-size:10px; color:var(--dim); margin-top:8px; line-height:1.25;
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical}
.ccell:hover .cname{color:var(--txt)}

/* ---------- joint ---------- */
.joint{display:flex; gap:34px; justify-content:center; align-items:flex-start;
  width:100%; max-width:var(--max); margin:0 auto; padding-top:6px}
.jside{display:flex; flex-direction:column; gap:12px}
.jhead{font-size:12px; color:var(--dim); letter-spacing:.06em; text-align:center}
.jcol{display:grid; grid-template-columns:repeat(2,92px); gap:12px}
.jsw{cursor:pointer; text-align:center}
.jsw img{width:92px; height:92px; border-radius:12px; object-fit:cover;
  border:1px solid var(--line); background:#0c0c0e;
  transition:transform .25s var(--spring), box-shadow .25s, border-color .2s}
.jsw:hover img{transform:scale(1.08); border-color:rgba(255,255,255,.4)}
.jsw.on img{border:1.5px solid #4aa8ff;
  box-shadow:0 0 6px #0a84ff, 0 0 16px rgba(10,132,255,.85)}
.jsw .lab{font-size:10px; color:var(--dim); margin-top:4px}
.jsw.on .lab{color:#fff}
.jcenter{flex:1; max-width:560px; display:flex; flex-direction:column;
  align-items:center; gap:18px; padding-top:10px}
.jpick{font-size:15px; color:var(--txt)}
.jpick b{color:#4aa8ff; font-weight:700}
.jresult{display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
  align-items:center; min-height:180px}
.jresult .fan{width:clamp(96px,9vw,150px); animation-duration:.45s}
.jhintbig{font-size:14px; color:var(--dim); text-align:center; line-height:1.7}

/* ---------- 촤라락 stage ---------- */
.stage{position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  gap:18px; pointer-events:none; z-index:50;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.74),rgba(0,0,0,.95));
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  opacity:0; transition:opacity .28s ease}
.stage.show{opacity:1; pointer-events:auto; cursor:pointer}
.stage .meta{position:absolute; top:8%; font-size:15px; color:var(--dim); letter-spacing:.03em}
.stage .meta b{color:#fff; font-weight:600}
.stage .close{position:absolute; bottom:7%; font-size:12px; color:var(--dim);
  border:1px solid var(--line); padding:7px 14px; border-radius:20px}
.fan{width:clamp(150px,17vw,260px); aspect-ratio:1; border-radius:18px;
  object-fit:cover; border:1px solid rgba(255,255,255,.18);
  box-shadow:0 24px 70px rgba(0,0,0,.6); background:#0c0c0e;
  opacity:0; transform:translateY(40px) scale(.8) rotate(var(--rot));
  animation:fan .5s var(--spring) forwards; animation-delay:var(--d)}
@keyframes fan{to{opacity:1; transform:translateY(0) scale(1) rotate(0)}}

/* ---------- footer ---------- */
.foot{display:flex; flex-direction:column; gap:6px; align-items:center;
  padding:40px 28px 60px; border-top:1px solid var(--line);
  font-size:12px; color:var(--dim); text-align:center}
.foot a{color:#9bb8e8; text-decoration:none}
.foot a:hover{text-decoration:underline}

/* ---------- misc ---------- */
.hidden{display:none !important}
::-webkit-scrollbar{width:10px; height:10px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14); border-radius:8px}
::-webkit-scrollbar-track{background:transparent}

@media (max-width:720px){
  .legend{grid-template-columns:1fr 1fr}
  .strip .row,.classgrid{grid-template-columns:repeat(5,minmax(0,1fr))}
  .joint{flex-direction:column; align-items:center}
}

/* model selector (segmented control) */
.model-tabs{display:flex; gap:5px; padding:3px; border:1px solid var(--line);
  border-radius:22px; background:var(--panel)}
.mtab{font-size:12.5px; color:var(--dim); background:transparent; border:none;
  padding:6px 14px; border-radius:18px; cursor:pointer; font-family:inherit;
  transition:all .2s ease; font-weight:600}
.mtab:hover{color:var(--txt)}
.mtab.active{color:#fff; background:rgba(10,132,255,.85);
  box-shadow:0 2px 10px rgba(10,132,255,.4)}