:root{--paper: oklch(97.3% .013 267);--paper-top: oklch(94.6% .026 270);--card: oklch(100% 0 90);--line: oklch(89.7% .022 266);--ink: oklch(20.5% .055 269);--ink-2: oklch(40% .045 269);--ink-3: oklch(55.6% .033 268);--cobalt: oklch(32.4% .151 264);--cobalt-2: oklch(51.8% .198 265);--ember: oklch(56.9% .175 39);--key-edge: oklch(84% .035 266);--shadow: oklch(30.7% .106 272 / .16);--shadow-2: oklch(30.7% .106 272 / .28);--focus: oklch(51.8% .198 265);--font-display: "IBM Plex Sans", "IBM Plex Sans JP", "IBM Plex Sans KR", "IBM Plex Sans Thai", system-ui, sans-serif;--font-body: "IBM Plex Sans", "IBM Plex Sans JP", "IBM Plex Sans KR", "IBM Plex Sans Thai", system-ui, -apple-system, "Segoe UI", sans-serif;--r-lg: 22px;--r-md: 16px;--r-sm: 11px;color-scheme:light}*,*:before,*:after{box-sizing:border-box}html{overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%}:lang(ko){word-break:keep-all;overflow-wrap:anywhere}body{margin:0;overflow-x:clip;color:var(--ink);font:400 1rem/1.7 var(--font-body);background:radial-gradient(1100px 520px at 18% -8%,oklch(88% .07 262 / .55),transparent 70%),radial-gradient(700px 420px at 92% 6%,oklch(88% .08 45 / .35),transparent 70%),linear-gradient(180deg,var(--paper-top),var(--paper) 520px);background-color:var(--paper)}:lang(th) body,body:lang(th){line-height:1.85}a{color:var(--cobalt-2);text-underline-offset:3px}a:hover{color:var(--cobalt)}:focus-visible{outline:2.5px solid var(--focus);outline-offset:3px;border-radius:6px}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.wrap{width:min(1180px,100% - 32px);margin-inline:auto}.bar{position:sticky;top:0;z-index:20;backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);background:#f2f6ffc7;border-bottom:1px solid oklch(89.7% .022 266 / .7)}.bar-in{display:flex;align-items:center;gap:12px;min-height:60px}.logo{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);font:800 1.12rem/1 var(--font-display);font-stretch:118%;letter-spacing:-.01em}.logo img{width:30px;height:30px;border-radius:9px;box-shadow:0 2px 6px var(--shadow)}.logo b{color:var(--cobalt-2)}.bar-sp{flex:1}.bar-home{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:999px;text-decoration:none;color:var(--ink-2);font-weight:600;font-size:.9rem;white-space:nowrap}.bar-home:hover{background:#e2e8f6;color:var(--ink)}.lang{position:relative;display:inline-flex;align-items:center}.lang svg{position:absolute;left:12px;pointer-events:none;color:var(--ink-3)}.lang select{appearance:none;-webkit-appearance:none;min-height:40px;padding:0 30px 0 34px;border-radius:999px;border:1px solid var(--line);background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237a869c' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center;font:600 .88rem var(--font-body);color:var(--ink);cursor:pointer;box-shadow:0 1px 0 var(--key-edge);max-width:170px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.hero{padding:clamp(28px,5vw,64px) 0 clamp(20px,3vw,36px)}.hero-in{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:center;gap:clamp(20px,4vw,56px)}.stage{position:relative;aspect-ratio:1 / 1;max-width:500px;width:100%;justify-self:center}.stage canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block}.stage .fallback{position:absolute;inset:12%;width:76%;height:76%;filter:drop-shadow(0 26px 30px var(--shadow-2));transition:opacity .5s}.stage.is-3d .fallback{opacity:0}.stage:after{content:"";position:absolute;left:18%;right:18%;bottom:4%;height:9%;border-radius:50%;background:radial-gradient(closest-side,oklch(30.7% .106 272 / .22),transparent);pointer-events:none}.hero h1{margin:0 0 14px;font:850 clamp(2.2rem,1.3rem + 3.6vw,4rem)/1.04 var(--font-display);font-stretch:112%;letter-spacing:-.008em;overflow-wrap:anywhere;min-width:0;color:var(--ink);text-wrap:balance}:lang(ja) .hero h1,:lang(ko) .hero h1,:lang(th) .hero h1,:lang(vi) .hero h1{font-stretch:100%;letter-spacing:-.01em;line-height:1.15}.lede{margin:0 0 22px;font-size:clamp(1.04rem,1rem + .3vw,1.2rem);color:var(--ink-2);max-width:60ch}.meta{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}.meta li{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:4px 13px;border-radius:999px;background:var(--card);border:1px solid var(--line);box-shadow:0 2px 0 var(--key-edge);font-size:.86rem;color:var(--ink-2);font-weight:600}.meta li svg{color:var(--cobalt-2);flex:none}.keys{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding:6px 0 clamp(30px,4vw,48px);margin:0;list-style:none;perspective:900px}.key{position:relative;padding:20px 18px 18px;border-radius:var(--r-lg);background:linear-gradient(180deg,var(--card),oklch(97.6% .01 266));border:1px solid oklch(92% .018 266);box-shadow:0 7px 0 var(--key-edge),0 18px 34px -12px var(--shadow-2),inset 0 1px #fff;transform:rotateX(8deg);transform-origin:50% 100%;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}.key:hover{transform:rotateX(0) translateY(-3px);box-shadow:0 10px 0 var(--key-edge),0 26px 40px -14px var(--shadow-2),inset 0 1px #fff}.key-ic{display:grid;place-items:center;width:46px;height:46px;margin-bottom:14px;border-radius:14px;color:#fff;background:linear-gradient(160deg,var(--cobalt-2),var(--cobalt));box-shadow:0 4px #03185a,0 10px 18px -6px #08287f8c}.key:nth-child(2) .key-ic{background:linear-gradient(160deg,oklch(66% .16 45),var(--ember));box-shadow:0 4px oklch(45% .15 39),0 10px 18px -6px #c8461080}.key h2{margin:0 0 6px;font:800 1.08rem/1.3 var(--font-display);letter-spacing:-.01em}.key p{margin:0;font-size:.92rem;line-height:1.6;color:var(--ink-2)}.doc{display:grid;grid-template-columns:250px minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start;padding-bottom:56px}.toc{position:sticky;top:80px;padding:16px 10px 14px;border-radius:var(--r-lg);background:#ffffffb3;border:1px solid var(--line);box-shadow:0 2px 0 var(--key-edge)}.toc h2{margin:0 10px 8px;font:800 .8rem/1 var(--font-display);color:var(--ink-3);letter-spacing:.02em}.toc ol{margin:0;padding:0;list-style:none}.toc a{display:block;padding:7px 10px;border-radius:10px;color:var(--ink-2);text-decoration:none;font-size:.9rem;line-height:1.35;font-weight:500}.toc a:hover{background:#e5ebf9;color:var(--ink)}.toc a[aria-current=true]{background:linear-gradient(90deg,oklch(92% .045 264),#e8effc);color:var(--cobalt);font-weight:700;box-shadow:inset 3px 0 0 var(--cobalt-2)}.secs{display:grid;gap:18px;min-width:0}.sec{scroll-margin-top:84px;padding:clamp(20px,2.6vw,30px);border-radius:var(--r-lg);background:var(--card);border:1px solid oklch(92% .018 266);box-shadow:0 1px 0 var(--key-edge),0 22px 44px -26px var(--shadow-2)}.sec-h{display:flex;align-items:center;gap:13px;margin:0 0 12px}.sec-h h2{margin:0;font:800 clamp(1.18rem,1.05rem + .5vw,1.42rem)/1.25 var(--font-display);letter-spacing:-.012em;min-width:0;overflow-wrap:anywhere}.sec-ic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;color:var(--cobalt);background:linear-gradient(160deg,oklch(95% .03 264),oklch(90% .05 264));box-shadow:0 3px 0 var(--key-edge),inset 0 1px #fff}.sec ul,.sec ol{margin:0;padding:0;list-style:none;display:grid;gap:10px}.sec li{position:relative;padding-left:22px;color:var(--ink-2);max-width:75ch}.sec li:before{content:"";position:absolute;left:4px;top:.72em;width:7px;height:7px;border-radius:2px;transform:rotate(45deg);background:linear-gradient(135deg,var(--cobalt-2),var(--cobalt))}.sec li a{overflow-wrap:anywhere}.sec.is-op{background:linear-gradient(160deg,#0f246e,#091443);color:#fff;border-color:transparent}.sec.is-op h2{color:#fff}.sec.is-op li{color:#d8deec}.sec.is-op li:before{background:var(--ember)}.sec.is-op a{color:oklch(85% .09 250)}.sec.is-op .sec-ic{color:#fff;background:linear-gradient(160deg,oklch(66% .16 45),var(--ember));box-shadow:0 3px oklch(40% .13 39)}.steps{counter-reset:st;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}.sec .steps li{max-width:none}.sec .steps li:before{transform:none}.steps li{counter-increment:st;position:relative;padding:58px 18px 18px;border-radius:var(--r-lg);color:var(--ink-2);background:linear-gradient(180deg,var(--card),oklch(97.6% .01 266));border:1px solid oklch(92% .018 266);box-shadow:0 7px 0 var(--key-edge),0 18px 34px -14px var(--shadow-2)}.steps li:before{content:counter(st);position:absolute;left:18px;top:16px;display:grid;place-items:center;width:32px;height:32px;border-radius:10px;color:#fff;font:800 1rem/1 var(--font-display);background:linear-gradient(160deg,var(--cobalt-2),var(--cobalt));box-shadow:0 3px #03185a}.solo{display:grid;gap:18px;padding-bottom:56px}.foot{border-top:1px solid var(--line);background:#eaf0fd;padding:26px 0 34px;font-size:.86rem;color:var(--ink-3)}.foot nav{display:flex;flex-wrap:wrap;gap:6px 18px;margin-bottom:10px}.foot nav a{color:var(--ink-2);font-weight:600;text-decoration:none;white-space:nowrap}.foot nav a:hover{color:var(--cobalt);text-decoration:underline}.foot p{margin:4px 0}@media (max-width: 980px){.keys{grid-template-columns:repeat(2,minmax(0,1fr))}.doc{grid-template-columns:minmax(0,1fr)}.toc{position:sticky;top:60px;z-index:10;padding:8px;border-radius:0;margin-inline:-16px;background:#f2f6ffe6;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:none;border-width:0 0 1px}.toc h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.toc ol{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:0 8px;scroll-snap-type:x proximity}.toc ol::-webkit-scrollbar{display:none}.toc a{white-space:nowrap;border:1px solid var(--line);background:var(--card);border-radius:999px;padding:7px 13px;scroll-snap-align:start}.toc a[aria-current=true]{box-shadow:none;background:var(--cobalt);color:#fff;border-color:var(--cobalt)}.sec{scroll-margin-top:124px}}@media (max-width: 720px){.hero-in{grid-template-columns:minmax(0,1fr)}.stage{max-width:260px}.steps{grid-template-columns:minmax(0,1fr)}.bar-home span{display:none}}@media (max-width: 420px){.bar-home{display:none}.lang select{max-width:150px}.keys{grid-template-columns:minmax(0,1fr)}.key{transform:none}.meta li{font-size:.8rem}}@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}.key,.key:hover{transform:none;transition:none}}@media print{.bar,.toc,.stage,.foot nav{display:none!important}.doc{display:block}.sec{box-shadow:none;break-inside:avoid}.sec.is-op{background:none;color:#000}}