/* v4 case skin: the home page's dark stage, display type and motion, laid over the existing case layout */
html.v3.v4{--f-display:"Sofia Sans Extra Condensed","Arial Narrow",sans-serif;--f-body:"Sofia Sans","Pretendard Variable",system-ui,sans-serif;--f-mono:"Sofia Sans Semi Condensed","Sofia Sans",sans-serif;
  --font-sans:var(--f-body);--font-mono:var(--f-mono);--font-serif:var(--f-body);color-scheme:dark;
  --fg:#d6d2ca;--strong:#f2efe8;--muted:#9d9a94;--weak:#b8b4ad;--line:rgb(242 239 232 / .12);--line-strong:rgb(242 239 232 / .24);
  --accent:var(--glow);--accent-ink:#121212;--accent-text:var(--glow);--accent-soft:color-mix(in srgb,var(--glow) 14%,transparent);--good:var(--glow);--even:#9fb4ff;
  --bg:var(--stage);--bg-2:color-mix(in srgb,var(--stage) 80%,#000);--surface:color-mix(in srgb,var(--stage) 86%,#fff 4%);
  --stage-a:color-mix(in srgb,var(--stage) 78%,#2a2c34);--stage-b:color-mix(in srgb,var(--stage) 92%,#000);--frame:#000;--frame-edge:#2c2f38;--spot:transparent}
html.v3.v4.c-momento,html.v3.v4 main[data-pt=momento]{--stage:#24121a;--glow:#ff7a6b}
html.v3.v4.c-mechoose,html.v3.v4 main[data-pt=mechoose]{--stage:#241510;--glow:#ff8a3d}
html.v3.v4.c-attennfc,html.v3.v4 main[data-pt=attennfc]{--stage:#0f1426;--glow:#6c8cff}
html.v3.v4.c-money-navigation,html.v3.v4 main[data-pt=money-navigation]{--stage:#0d2118;--glow:#3ddc84}
html.v3.v4.c-the-house,html.v3.v4 main[data-pt=the-house]{--stage:#0b0908;--glow:#d39032}
html.v3.v4.c-video-streaming,html.v3.v4 main[data-pt=video-streaming]{--stage:#1a1024;--glow:#c08bff}
html.v3.v4.c-adonis-ai,html.v3.v4 main[data-pt=adonis-ai]{--stage:#17150d;--glow:#ffd166}
html.v3.v4.c-memohub,html.v3.v4 main[data-pt=memohub]{--stage:#0e1820;--glow:#8fd3ff}
html.v3.v4.c-trading-bots,html.v3.v4 main[data-pt=trading-bots]{--stage:#0f170c;--glow:#9be15d}
html.v3.v4 main[data-pt]{--fg:#d6d2ca;--strong:#f2efe8;--muted:#9d9a94;--weak:#b8b4ad;--line:rgb(242 239 232 / .12);--line-strong:rgb(242 239 232 / .24);
  --accent:var(--glow);--accent-ink:#121212;--accent-text:var(--glow);--accent-soft:color-mix(in srgb,var(--glow) 14%,transparent);--good:var(--glow);
  --bg:var(--stage);--bg-2:color-mix(in srgb,var(--stage) 80%,#000);--surface:color-mix(in srgb,var(--stage) 86%,#fff 4%);
  --stage-a:color-mix(in srgb,var(--stage) 78%,#2a2c34);--stage-b:color-mix(in srgb,var(--stage) 92%,#000);--frame:#000;--frame-edge:#2c2f38;color-scheme:dark;background:transparent}
html.v3.v4{background:var(--stage)}html.v3.v4 body{background:transparent!important;color:var(--fg);font-family:var(--f-body);-webkit-font-smoothing:antialiased}
html.v3.v4 body::selection,html.v3.v4 ::selection{background:var(--glow);color:#111}
#v4-glow{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(60vmax 50vmax at var(--gx,75%) var(--gy,20%),color-mix(in srgb,var(--glow) 22%,transparent),transparent 70%),var(--stage)}
#v4-grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
#v4-progress{position:fixed;left:0;top:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--glow);z-index:70}
/* header */
html.v3.v4 body>header{background:linear-gradient(var(--stage) 0%,color-mix(in srgb,var(--stage) 70%,transparent) 70%,transparent);border-bottom:0;-webkit-backdrop-filter:none;backdrop-filter:none}
html.v3.v4 body>header a,html.v3.v4 body>header nav a{font-family:var(--f-mono);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:12.5px}
html.v3.v4 body>header a:first-child{font-size:13px}
html.v3.v4 [data-theme-toggle]{display:none}
/* type */
html.v3.v4 .v3-chapter-title{font-family:var(--f-display);font-weight:900;text-transform:uppercase;letter-spacing:0;line-height:.86;font-size:clamp(3.4rem,11vw,10.5rem)}
html.v3.v4 .t-h3{font-family:var(--f-display);font-weight:900;text-transform:uppercase;letter-spacing:0;line-height:.92;font-size:clamp(2rem,3.6vw,3.4rem)}
html.v3.v4 .t-label{font-family:var(--f-mono);font-weight:700;letter-spacing:.08em;font-size:12px}
html.v3.v4 .t-label.text-accent-text{font-family:var(--f-display);font-weight:900;font-size:clamp(2.6rem,4.6vw,4.4rem);letter-spacing:0;line-height:.8;color:var(--glow);text-shadow:0 18px 40px color-mix(in srgb,var(--glow) 30%,transparent)}
html.v3.v4 .t-lead{color:var(--strong);font-size:clamp(1.15rem,1.7vw,1.55rem)}
html.v3.v4 .prose-case{font-size:1.08rem;line-height:1.75}
html.v3.v4 .prose-case strong{color:var(--strong);background:linear-gradient(transparent 62%,color-mix(in srgb,var(--glow) 35%,transparent) 62%)}
html.v3.v4 .prose-case blockquote{border-left:2px solid var(--glow);padding:4px 0 4px 18px;margin-left:0;color:var(--strong);font-size:1.12em}
html.v3.v4 .prose-case blockquote em{display:block;margin-top:6px;font-size:.82em;color:var(--muted)}
html.v3.v4 .prose-case img{border-radius:14px;box-shadow:0 30px 60px -30px rgb(0 0 0 / .9),0 0 0 1px var(--line-strong)}
html.v3.v4 .prose-case a{color:var(--glow)}
html.v3.v4 .v3-badge{border-radius:999px;font-family:var(--f-mono);height:28px}
/* every bordered box becomes a lit card with depth */
html.v3.v4 main [class*="border border-line"],html.v3.v4 main [class*="rounded-[10px] border"],html.v3.v4 main aside:not(.bg-accent){border-color:var(--line-strong)!important;border-radius:22px!important;
  background:linear-gradient(160deg,color-mix(in srgb,var(--stage) 78%,#2a2c34),color-mix(in srgb,var(--stage) 94%,#000))!important;box-shadow:inset 0 1px 0 rgb(255 255 255 / .07),0 40px 70px -46px rgb(0 0 0 / .95)}
html.v3.v4 main .stage{border-radius:26px!important;box-shadow:inset 0 0 0 1px var(--line),0 50px 90px -50px rgb(0 0 0 / .95);
  background:radial-gradient(70% 80% at 50% 0%,color-mix(in srgb,var(--glow) 18%,transparent),transparent 70%),linear-gradient(180deg,var(--stage-a),var(--stage-b))!important;perspective:1400px}
html.v3.v4 main .stage img,html.v3.v4 main .stage video{transition:transform .9s cubic-bezier(.16,1,.3,1)}
html.v3.v4 main .border-t.border-line{border-color:var(--line-strong)}
/* sections: sticky numbers on the left read like the home's chapter index */
html.v3.v4 main section.grid.border-t{padding-top:clamp(28px,4vw,56px)}
/* next project: a big lit band */
html.v3.v4 a.group.mt-16{position:relative;isolation:isolate;overflow:hidden}
html.v3.v4 a.group.mt-16::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--glow);transform:scaleY(0);transform-origin:50% 100%;transition:transform .7s cubic-bezier(.16,1,.3,1)}
html.v3.v4 a.group.mt-16:hover::before{transform:scaleY(1)}
html.v3.v4 a.group.mt-16:hover *{color:#121212!important}
html.v3.v4 a.group.mt-16 .text-\[clamp\(3rem\,10vw\,9rem\)\]{font-family:var(--f-display);font-weight:900;text-transform:uppercase;letter-spacing:0}
html.v3.v4 a.group.mt-16 .link-u{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:12px;background:var(--glow);color:#121212!important;font-weight:700;box-shadow:0 4px 0 color-mix(in srgb,var(--glow) 45%,#000)}
/* stat numbers in display type */
html.v3.v4 main [class*="text-[clamp(2"],html.v3.v4 main [class*="text-[clamp(1.75"],html.v3.v4 main [class*="text-[clamp(2.25"]{font-family:var(--f-display);font-weight:900;letter-spacing:0;color:var(--glow)}
/* carousel */
html.v3.v4 [role=tablist] button[aria-selected=true]{background:var(--glow)}
html.v3.v4 button[aria-label=Previous],html.v3.v4 button[aria-label=Next]{border-radius:12px;background:color-mix(in srgb,var(--stage) 70%,#2a2c34);cursor:pointer}
/* motion */
html.v4.fx [data-reveal]{transition:opacity .9s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1),clip-path 1.1s cubic-bezier(.16,1,.3,1)}
html.v4.fx [data-reveal].in{opacity:1!important;transform:none!important}
html.v4.fx [data-reveal][style*=clip-path].in{clip-path:inset(0 0 0 0 round 26px)!important}
html.v4:not(.fx) [data-reveal]{opacity:1!important;transform:none!important;clip-path:none!important}
.v4-split{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em;margin-bottom:-.06em}
.v4-split>i{display:inline-block;font-style:normal;transform:translateY(105%);transition:transform 1s cubic-bezier(.22,.8,.25,1);transition-delay:calc(var(--i) * 34ms)}
.in .v4-split>i,.v4-split.in>i{transform:none}
html.v4 .t-h3.v4-blur{filter:blur(10px);opacity:0;transform:translateY(12px);transition:filter .9s,opacity .9s,transform 1s cubic-bezier(.16,1,.3,1)}
html.v4 .t-h3.v4-blur.in{filter:none;opacity:1;transform:none}
#v4-pt{position:fixed;inset:0;z-index:90;pointer-events:none}
#v4-pt div{position:absolute;inset:0;background:var(--glow);display:grid;place-items:center;clip-path:inset(100% 0 0 0)}
#v4-pt span{font-family:var(--f-display);font-weight:900;font-size:clamp(3rem,10vw,8rem);text-transform:uppercase;color:#111;line-height:.9;text-align:center;padding:0 16px}
#v4-pt.out div{clip-path:inset(0 0 0 0);animation:v4out .8s cubic-bezier(.7,0,.84,0) .1s forwards}
#v4-pt.go div{clip-path:inset(100% 0 0 0 round 40px 40px 0 0);animation:v4in .75s cubic-bezier(.16,1,.3,1) forwards}
@keyframes v4out{to{clip-path:inset(0 0 100% 0 round 0 0 40px 40px)}}
@keyframes v4in{to{clip-path:inset(0 0 0 0 round 0)}}
.v4-play{cursor:pointer}
@media (prefers-reduced-motion:reduce){#v4-pt{display:none}.v4-split>i{transform:none}html.v4 .t-h3.v4-blur{filter:none;opacity:1;transform:none}}

html.v3.v4 main aside.bg-accent{background:radial-gradient(80% 120% at 85% 0%,color-mix(in srgb,#fff 30%,var(--glow)),var(--glow) 60%)!important;color:#121212;border-radius:30px!important;box-shadow:0 60px 100px -50px color-mix(in srgb,var(--glow) 60%,#000)}
html.v3.v4 main aside.bg-accent .t-serif{font-family:var(--f-display);font-style:normal;font-weight:900;text-transform:uppercase;letter-spacing:0}
html.v3.v4 main aside.bg-accent li{color:#121212}
html.v3.v4 .t-h3,html.v3.v4 .v3-chapter-title,html.v3.v4 a.group.mt-16 p{overflow-wrap:normal;word-break:normal;hyphens:manual}
html.v3.v4 .t-h3{font-size:clamp(1.8rem,2.9vw,2.9rem)}
html.v3.v4 a.group.mt-16 .text-\[clamp\(3rem\,10vw\,9rem\)\]{font-size:clamp(2.6rem,7.4vw,7.4rem)}
html.v3.v4 main aside.bg-accent .t-serif{font-size:clamp(2.4rem,4.4vw,4rem)}
html.v3.v4 .v3-chapter-title{font-size:clamp(3rem,9.6vw,9.6rem)}

html.v3.v4.c-method{--stage:#10162a;--glow:#7f9cff}

html.v4 a.v4-next{position:relative;isolation:isolate;border-top-color:color-mix(in srgb,var(--glow) 45%,transparent)!important;background:linear-gradient(180deg,color-mix(in srgb,var(--stage) 0%,transparent),color-mix(in srgb,var(--stage) 92%,transparent) 55%),radial-gradient(70% 90% at 75% 60%,color-mix(in srgb,var(--glow) 26%,transparent),transparent 70%);transition:background .6s}
html.v4 a.v4-next::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--glow);transform:scaleX(.18);transform-origin:0 50%;transition:transform .9s cubic-bezier(.16,1,.3,1)}
html.v4 a.v4-next:hover::before{transform:scaleX(1)}
html.v4 a.v4-next [class*="text-[clamp(3rem"]{color:var(--glow)!important}
html.v4 a.v4-next .t-label{color:var(--glow)}
/* give display letters room above and below so masks never shave accents, Hangul or kana */
html.v4 .v4-split{padding-top:.22em;margin-top:-.22em;padding-bottom:.14em;margin-bottom:-.14em}
html.v4 main .block.overflow-hidden[class*="pb-[0.08"]{padding-top:.2em;margin-top:-.2em;padding-bottom:.16em;margin-bottom:-.16em}

#v4-skill{margin-top:clamp(28px,5vw,56px);padding:clamp(18px,3vw,32px);border-radius:24px;background:linear-gradient(180deg,rgb(255 255 255 / .04),rgb(255 255 255 / .015));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--glow) 38%,transparent),0 40px 80px -50px rgb(0 0 0 / .9)}
#v4-skill.in{animation:v4skIn .55s cubic-bezier(.16,1,.3,1)}
@keyframes v4skIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.v4-sk-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.v4-sk-k{margin:0 0 6px;font-family:"Sofia Sans Semi Condensed",var(--font-mono,monospace);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--glow)}
#v4-skill h3{margin:0;font-size:clamp(1.3rem,2.4vw,1.9rem);line-height:1.2;font-weight:700;color:#f4f1ea}
.v4-sk-x{flex:none;padding:8px 14px;border-radius:999px;background:rgb(255 255 255 / .06);color:#ddd;font-size:13px;font-weight:600;border:0;cursor:pointer}
.v4-sk-x:hover{background:rgb(255 255 255 / .12)}
.v4-sk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(150px,100%),1fr));gap:12px;margin-top:20px}
.v4-sk-card{display:flex;flex-direction:column;justify-content:space-between;gap:24px;min-height:118px;padding:18px 18px 16px;border-radius:18px;text-decoration:none;color:#f4f1ea;background:radial-gradient(90% 120% at 100% 0%,color-mix(in srgb,var(--c) 34%,transparent),transparent 70%),#12141c;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 45%,transparent);transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s}
.v4-sk-card:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px var(--c),0 24px 40px -24px color-mix(in srgb,var(--c) 70%,transparent)}
.v4-sk-card b{font-size:1.15rem;line-height:1.25;font-weight:700}
.v4-sk-card span{font-family:"Sofia Sans Semi Condensed",monospace;font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--c)}
html.v4 a.v4-on .link-u{color:var(--glow)}
html.v4 a.v4-on>span:last-child{color:var(--glow)}
html.v4 main [class*="border-accent/40"]{color:color-mix(in srgb,var(--glow) 58%,#fff)!important}
html.v4 main [class*="border-accent/40"] .opacity-80{opacity:1}
html.v4 main .text-even{color:#aab3c7!important}