:root{--bg:#09090a;--s1:#111113;--s2:#18181b;--line:#242428;--tx:#f4f4f5;--mu:#8b8b92;--r:14px;--px:'Minecraftia',monospace;--sans:'Inter',system-ui,sans-serif;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#09090a}}
:root[data-theme="dark"]{--bg:#09090a}
*{box-sizing:border-box;margin:0}html{scroll-behavior:smooth;scroll-padding-top:80px;background:var(--bg)}
body{background:var(--bg);color:var(--tx);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}.wrap{max-width:1100px;margin:0 auto;padding:0 24px}
nav{position:sticky;top:0;z-index:20;background:rgba(9,9,10,.8);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
nav .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:60px}
.brand{display:flex;align-items:center;gap:10px;font:600 18px var(--px)}.brand img{height:22px}
.links{display:flex;gap:30px;font-size:14px;color:var(--mu)}.links a:hover{color:var(--tx)}.nr{justify-self:end}
.btn{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 22px;border-radius:var(--r);font:500 14px var(--sans);border:1px solid var(--line);background:var(--s1);color:var(--tx);cursor:pointer;transition:.3s}
.btn:hover{background:var(--s2);border-color:#3a3a40}.btn.w{background:#f4f4f5;color:#09090a;border-color:#f4f4f5}.btn.w:hover{background:#fff;transform:translateY(-1px)}
.btn svg{width:16px;height:16px}
.hero{text-align:center;padding:100px 0 0;position:relative}

h1,h2{font-family:var(--px);font-weight:600;line-height:1.08;letter-spacing:-.01em}h1{font-size:clamp(42px,7.5vw,78px)}h2{font-size:clamp(30px,4.6vw,46px)}
.sub{color:var(--mu);max-width:540px;margin:22px auto 0}
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.stage{perspective:1400px;margin-top:64px}
.shot{border:1px solid #2c2c31;border-radius:16px;overflow:hidden;background:#000;box-shadow:0 0 0 8px rgba(255,255,255,.03),0 50px 100px -30px #000}
.shot img{display:block;width:100%;height:auto}
#tilt{transform:rotateX(18deg) scale(.94);transform-origin:50% 0;transition:transform .15s linear;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.sec{padding:120px 0;text-align:center}.sec p.l{color:var(--mu);max-width:560px;margin:20px auto 0}
.tabs{display:flex;gap:4px;justify-content:center;margin:56px 0 36px;flex-wrap:wrap}
.tab{padding:10px 18px;border-radius:12px;border:1px solid transparent;background:none;color:var(--mu);font:500 14px var(--sans);cursor:pointer;transition:.3s}.tab.on{background:var(--s1);border-color:var(--line);color:var(--tx)}
.rail{display:grid;grid-template-columns:1fr minmax(0,860px) 1fr;gap:20px;align-items:center;margin:0 -40vw}
.rail .side{opacity:.28;transform:scale(.9);filter:grayscale(1)}.rail img{transition:opacity .4s}
.zoom{aspect-ratio:16/9;background-size:var(--z,100%) auto;background-position:var(--p,0 0);background-repeat:no-repeat;transition:background-size .8s cubic-bezier(.2,.7,.2,1),background-position .8s cubic-bezier(.2,.7,.2,1)}
.cap{text-align:left;margin:28px auto 0;max-width:860px;display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap}.cap h3{font:600 28px var(--px);line-height:1.15}.cap p{color:var(--mu);max-width:380px;font-size:15px}
.mq{overflow:hidden;margin-top:56px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.track{display:flex;gap:12px;width:max-content;margin-bottom:12px;animation:mq 40s linear infinite}.track.r{animation-direction:reverse;animation-duration:50s}
@keyframes mq{to{transform:translateX(-50%)}}
.tile{display:flex;align-items:center;gap:12px;padding:12px 20px 12px 12px;background:var(--s1);border:1px solid var(--line);border-radius:var(--r);font:600 15px var(--px);white-space:nowrap}
.ico{width:36px;height:36px;border-radius:8px;background:#26262b;display:block;flex:none;image-rendering:pixelated;object-fit:cover}.ico b{width:14px;height:14px;background:#f4f4f5;display:block;clip-path:polygon(0 30%,30% 30%,30% 0,70% 0,70% 30%,100% 30%,100% 70%,70% 70%,70% 100%,30% 100%,30% 70%,0 70%)}
.big{margin-top:56px}
.hl{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px;text-align:left}
.hl div{padding:22px;background:var(--s1);border:1px solid var(--line);border-radius:var(--r)}.hl strong{font:600 18px var(--px);display:block;margin-bottom:6px}.hl span{color:var(--mu);font-size:14px}
.skinw{margin-top:0;display:flex;flex-direction:column;align-items:center}#sk{width:min(100%,440px);aspect-ratio:1;cursor:grab;touch-action:pan-y;border:1px solid var(--line);border-radius:18px;background:radial-gradient(closest-side,rgba(255,255,255,.07),transparent)}#sk:active{cursor:grabbing}.hint{color:var(--mu);font-size:13px;margin-top:14px}
.code{background:var(--s1);border:1px solid var(--line);border-radius:var(--r);padding:24px;font:13px/1.9 ui-monospace,Menlo,monospace;color:var(--mu);text-align:left}.code b{color:var(--tx);font-weight:500}
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;text-align:left}.split .cta{justify-content:flex-start}
.term{background:#0d0d0f;border:1px solid #2c2c31;border-radius:16px;overflow:hidden;text-align:left;box-shadow:0 40px 80px -30px #000,0 0 100px -30px rgba(255,255,255,.14);background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px);background-size:100% 4px}
.th{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--s1)}.th span{width:10px;height:10px;border-radius:50%;background:#34343a}.th em{margin-left:12px;font:12px ui-monospace,Menlo,monospace;color:var(--mu);font-style:normal}
.tb{padding:18px 0;font:13px/1.85 ui-monospace,Menlo,Consolas,monospace;color:#c9c9ce;overflow-x:auto}
.ln{display:flex;white-space:pre;padding-right:20px;opacity:0}.ln i{width:44px;flex:none;text-align:right;padding-right:18px;color:#4a4a52;font-style:normal;user-select:none}
.rv.in .ln{animation:ty .5s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(.35s + var(--i)*.16s)}@keyframes ty{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
.k{color:#fff;font-weight:600}.f{color:#e4e4e7}.s{color:#9a9aa2}.c{color:#5d5d66}.t{color:#a8a8b0}
.blink{display:inline-block;width:8px;background:#f4f4f5;animation:bl 1s steps(1) infinite}@keyframes bl{50%{opacity:0}}
#bg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;-webkit-mask-image:linear-gradient(#000 35%,transparent 88%);mask-image:linear-gradient(#000 35%,transparent 88%)}.hero{overflow:hidden}.hero>.wrap{position:relative;z-index:1}@keyframes up{from{opacity:0;transform:translateY(22px);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}@keyframes fd{from{opacity:0;transform:translateY(-10px)}}
.hero h1{animation:up 1.2s cubic-bezier(.16,1,.3,1) .1s both}.hero .sub{animation:up 1.2s cubic-bezier(.16,1,.3,1) .28s both}.hero .cta{animation:up 1.2s cubic-bezier(.16,1,.3,1) .44s both}.hero .stage{animation:up 1.5s cubic-bezier(.16,1,.3,1) .6s both}#bg{animation:fd 2s ease .2s both}nav{animation:fd 1s cubic-bezier(.16,1,.3,1) both}
#tilt{transition:none!important;will-change:transform}
.btn{transition:transform .6s cubic-bezier(.16,1,.3,1),background .35s ease,border-color .35s ease,box-shadow .35s ease}.btn:hover{transform:translateY(-2px)}.btn:active{transform:scale(.97);transition-duration:.12s}.btn.w:hover{transform:translateY(-2px);box-shadow:0 10px 30px -12px rgba(255,255,255,.35)}
.tab{transition:background .4s ease,color .4s ease,border-color .4s ease}.rail img,.cap h3,.cap p{transition:opacity .5s ease,transform .8s cubic-bezier(.16,1,.3,1)}
.tile{transition:transform .6s cubic-bezier(.16,1,.3,1),border-color .4s ease}.tile:hover{transform:translateY(-3px);border-color:#44444b}.mq:hover .track{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){*,*:before{animation:none!important;transition:none!important}.rv>*{opacity:1;transform:none}}
.ver{margin-top:18px;font-size:13px;color:var(--mu);animation:up 1.2s cubic-bezier(.16,1,.3,1) .52s both}.ver a{color:#c9c9ce;border-bottom:1px solid #3a3a40}.ver a:hover{color:#fff}.btn{border-radius:6px;font-family:var(--px);font-weight:600;font-size:13.5px;letter-spacing:-.01em;border:2px solid #2b2b30;background:#17171a;box-shadow:0 4px 0 #222226;margin-bottom:4px}
.btn:hover{background:#1d1d21;border-color:#3a3a40;transform:translateY(-1px);box-shadow:0 5px 0 #222226}.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #222226;transition-duration:.08s}
.btn.w{background:#e9e9ec;border-color:#e9e9ec;color:#0a0a0b;box-shadow:0 4px 0 #6f6f76}.btn.w:hover{background:#f4f4f6;border-color:#f4f4f6;transform:translateY(-1px);box-shadow:0 5px 0 #6f6f76}.btn.w:active{transform:translateY(3px);box-shadow:0 1px 0 #6f6f76}
.tab{border-radius:6px;font-family:var(--px);font-weight:600;font-size:13px;border-width:2px}.tab.on{background:#e9e9ec;border-color:#e9e9ec;color:#0a0a0b;box-shadow:0 3px 0 #6f6f76;margin-bottom:3px}
.tile,.card{border-radius:6px}.shot,.term{border-radius:8px}.ico{border-radius:6px}nav .btn{margin-bottom:0;box-shadow:0 3px 0 #6f6f76}
footer{border-top:1px solid var(--line);padding:56px 0;font-size:14px;color:var(--mu)}
footer .wrap{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}footer h5{color:var(--tx);font:600 15px var(--px);margin-bottom:12px}footer a{display:block;padding:3px 0}footer a:hover{color:var(--tx)}
.rv>*{opacity:0;transform:translateY(26px);transition:opacity 1.1s cubic-bezier(.16,1,.3,1),transform 1.1s cubic-bezier(.16,1,.3,1)}.rv.in>*{opacity:1;transform:none}.rv.in>*:nth-child(2){transition-delay:.09s}.rv.in>*:nth-child(3){transition-delay:.18s}.rv.in>*:nth-child(4){transition-delay:.27s}.rv.in>*:nth-child(5){transition-delay:.36s}
@media(max-width:760px){.links{display:none}nav .wrap{grid-template-columns:1fr auto}.rail{grid-template-columns:1fr;margin:0}.rail .side{display:none}.hl,.split{grid-template-columns:1fr}.sec{padding:80px 0}footer .wrap{grid-template-columns:1fr 1fr}.hero{padding-top:64px}}