:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;background:#090d17;color:#f1f3fb;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse 70% 55% at 83% 10%,#19213f 0%,transparent 70%),#090d17}a{color:inherit;text-decoration:none}.glow{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse 40% 35% at 5% 66%,#111b345e,transparent 90%)}.topbar{position:relative;max-width:1210px;margin:auto;padding:28px 28px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #202738}.logo{display:flex;gap:13px;align-items:center;font-weight:900;letter-spacing:2px;font-size:14px;line-height:1.05}.logo small{display:block;font-weight:500;font-size:8px;letter-spacing:3px;color:#8690a9;margin-top:8px}.logo .light{color:#7a91fd}.logo-icon{width:43px;height:43px;border-radius:12px;background:linear-gradient(140deg,#8aa4ff,#555fe2);display:grid;place-items:center;box-shadow:0 6px 23px #575ef95a;font-size:24px}.pill{border:1px solid #343e58;border-radius:99px;padding:10px 15px;color:#afb9d2;letter-spacing:1px;font-size:10px;font-weight:700}.online{display:inline-block;width:7px;height:7px;background:#4be7b1;border-radius:50%;margin-right:8px;box-shadow:0 0 9px #4be7b1}.layout{max-width:1210px;margin:0 auto;padding:50px 28px 65px;display:grid;grid-template-columns:minmax(0,1.43fr) minmax(280px,.9fr);gap:48px;align-items:start;position:relative}.eyebrow{font-size:10px;letter-spacing:3px;color:#829aff;font-weight:800;display:flex;align-items:center;gap:12px}.eyebrow .line{display:block;background:#8097fa;height:2px;width:23px}h1{font-size:clamp(34px,4vw,53px);line-height:1.08;letter-spacing:-2px;margin:17px 0 15px;font-weight:830}h1 em{font-style:normal;color:#9aaaff}.lead{color:#98a3ba;line-height:1.7;font-size:14px;max-width:500px;margin-bottom:31px}.panel{border:1px solid #263048;background:#101623de;border-radius:16px;padding:26px;margin-top:20px;box-shadow:0 10px 40px #00000022}.panel-title{display:flex;gap:15px;align-items:center;padding-bottom:21px;border-bottom:1px solid #273148;margin-bottom:20px}.num{font-size:13px;font-weight:800;border:1px solid #4f6292;color:#9cb2ff;border-radius:8px;width:34px;height:34px;display:grid;place-items:center}.panel h2{font-size:18px;letter-spacing:-.5px;margin:0 0 5px}.panel-title p{font-size:12px;color:#8d98af;margin:0}.fields{display:grid;gap:18px}.fields.two{grid-template-columns:1fr 1fr}label{display:block;font-size:12px;color:#aeb9d3;font-weight:700}.hint{font-weight:400;float:right;color:#7583a2}input:not([type=range]),select{width:100%;margin-top:8px;padding:13px 13px;border-radius:9px;border:1px solid #303a51;background:#131b2b;color:#edf1ff;outline:none;font-size:13px;transition:border .16s}input:focus,select:focus{border-color:#7b91f7!important;box-shadow:0 0 0 3px #697ff720}input::placeholder{color:#657088}.tabs{display:flex;border:1px solid #313b53;border-radius:10px;padding:4px;gap:2px;background:#10192a;margin-bottom:18px}.tab{flex:1;background:transparent;color:#8794af;font-size:12px;font-weight:700;border:0;padding:11px 6px;cursor:pointer;border-radius:7px}.tab.active{background:#343d64;color:#eff3ff}.slider-field{padding:11px 0 12px;border-bottom:1px solid #20283b}.slider-field:last-child{border:0}.slider-top{display:flex;align-items:center;justify-content:space-between}.slider-top label{font-weight:650}.value{color:#b2c2ff;border-radius:5px;background:#253151;padding:3px 9px;font-variant-numeric:tabular-nums;font-size:11px;font-weight:800}.slider-line{display:flex;align-items:center;gap:11px;margin-top:13px}.adjust{height:29px;min-width:30px;color:#cbd3e9;background:#202a40;border:1px solid #37405c;border-radius:6px;cursor:pointer;font-size:17px}.slider-line input{width:100%;accent-color:#7e92f6;cursor:pointer}.note{font-size:11px;line-height:1.5;color:#8591ab;background:#121b2d;border-radius:8px;padding:12px;margin-top:16px}.submit{margin-top:22px;border:0;cursor:pointer;width:100%;padding:17px;background:linear-gradient(110deg,#7691f9,#6679e6);color:#fff;font-size:14px;font-weight:800;letter-spacing:.2px;border-radius:11px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 12px 35px #5d70e52f}.submit:disabled{opacity:.65;cursor:wait}.submit span{font-size:21px}.footnote{font-size:11px;text-align:center;color:#7c89a3;margin:13px}.error{margin-top:20px;padding:14px;border:1px solid #a14e60;background:#331c29;color:#ffb7c5;border-radius:9px;font-size:13px}.result{margin-top:22px;border:1px solid #4b619d;background:linear-gradient(145deg,#18294a,#131e37);border-radius:15px;padding:22px;text-align:center}.result-label{color:#aebfff;font-weight:900;font-size:11px;letter-spacing:2px}.code{font-size:clamp(24px,3vw,33px);letter-spacing:3px;font-weight:900;padding:17px 2px;font-variant-numeric:tabular-nums}.copy{background:#7993ff;color:white;border:0;border-radius:8px;padding:10px 18px;cursor:pointer;font-weight:800}.result p,.expires{color:#adbbd5;font-size:12px;line-height:1.6}.expires{color:#91ddc2}.preview-stick{position:sticky;top:30px}.preview-panel{padding-top:76px}.preview-stick{border:1px solid #303c5d;background:#121b2d;border-radius:19px;padding:25px;box-shadow:0 22px 80px #00000042}.preview-header{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:10px;letter-spacing:1.7px}.tiny{font-weight:900;color:#ecf0ff}.approx{border:1px solid #39486b;border-radius:6px;color:#8fa0c6;padding:6px;font-size:9px;letter-spacing:.7px}.preview-area{height:405px;display:grid;place-items:center;overflow:hidden;background:radial-gradient(ellipse 55% 65% at 50% 54%,#39496a,#1d2840 64%,#151f33 100%);border:1px solid #344362;border-radius:12px;margin-top:18px;position:relative}.preview-area:before{content:'';position:absolute;inset:0;background:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:28px 28px;mask-image:linear-gradient(transparent,#000 20%,#000 80%,transparent)}.scene{height:345px;width:230px;position:relative;display:flex;align-items:center;justify-content:center}.avatar{--skin:#d7ab86;--hair:#382a26;--eyes:#453d36;--brow:#322a25;--beard:#322a25;--bodyScale:1;position:relative;width:165px;height:315px;transform:scale(var(--bodyScale));z-index:2;filter:drop-shadow(12px 13px 6px #03071355)}.head{position:absolute;z-index:5;left:48px;top:38px;width:71px;height:79px;background:var(--skin);border:4px solid #00000016;border-radius:10px 10px 20px 20px;box-shadow:inset -9px 0 #00000017}.hair{position:absolute;left:43px;top:29px;width:81px;height:20px;border-radius:13px 13px 4px 4px;background:var(--hair);z-index:7;box-shadow:inset -12px 1px #0003}.eye{position:absolute;width:8px;height:9px;background:var(--eyes);top:34px;border:2px solid #fff7;border-radius:3px}.eye-left{left:15px}.eye-right{right:16px}.brow{position:absolute;width:14px;height:4px;background:var(--brow);top:25px}.brow-left{left:13px}.brow-right{right:14px}.nose{position:absolute;background:#0002;width:5px;height:13px;left:31px;top:43px}.mouth{position:absolute;background:#7a4842;width:19px;height:4px;border-radius:5px;left:23px;top:61px}.beard{position:absolute;z-index:5;left:13px;bottom:-2px;width:43px;height:6px;border-radius:0 0 15px 15px;background:var(--beard)}.neck{position:absolute;left:72px;top:105px;width:26px;height:24px;background:var(--skin)}.torso{position:absolute;z-index:4;left:45px;top:124px;width:84px;height:99px;background:#6e7cb1;border:3px solid #33426f;border-radius:11px 11px 4px 4px;box-shadow:inset -13px 0 #0002}.arm{position:absolute;z-index:3;top:128px;height:117px;width:27px;background:linear-gradient(#6e7cb1 0 56%,var(--skin) 56%);border-radius:10px 10px 7px 7px;box-shadow:inset -8px 0 #0002}.arm-left{left:20px;transform:rotate(5deg)}.arm-right{left:125px;transform:rotate(-5deg)}.leg{position:absolute;top:214px;height:90px;width:35px;background:#303b65;box-shadow:inset -9px 0 #0003;border-radius:2px 2px 6px 6px}.leg-left{left:47px}.leg-right{left:87px}.shadow{background:#04091060;position:absolute;width:154px;height:20px;border-radius:50%;bottom:0;filter:blur(8px)}.char-label{display:flex;align-items:center;gap:13px;padding:19px 0 16px}.char-icon{width:39px;height:39px;background:#293b64;border-radius:8px;display:grid;place-items:center;color:#a4bcff;font-size:24px}.char-label strong{display:block;font-size:13px;letter-spacing:1px;overflow-wrap:anywhere}.char-label span{display:block;color:#7d8fac;font-size:11px;margin-top:6px}.separation{height:1px;background:#303c55;margin-bottom:17px}.feature{font-size:12px;color:#aebbd5;display:flex;align-items:center;gap:12px;margin:13px 0}.feature span{color:#64e2b4;font-weight:900}footer{max-width:1210px;margin:auto;border-top:1px solid #263047;padding:28px;color:#6d7d98;text-align:center;letter-spacing:2px;font-size:9px}footer span{color:#4e628d;margin:0 8px}[hidden]{display:none!important}@media(max-width:920px){.layout{grid-template-columns:1fr;gap:6px}.preview-panel{padding-top:15px}.preview-stick{position:static}.preview-area{height:350px}.topbar{padding:19px 18px}}@media(max-width:550px){.layout{padding:32px 14px 40px}.panel{padding:19px}.fields.two{grid-template-columns:1fr}.pill{display:none}h1{letter-spacing:-1.4px}.tabs{gap:0}.tab{font-size:11px}.preview-panel{padding-top:10px}.preview-stick{padding:16px}.preview-area{height:350px}}

/* Actual StateMC PNG preview using skinview3d rather than the previous schematic avatar. */
#skinCanvas{width:min(100%,350px);height:100%;position:relative;z-index:2;cursor:grab;outline:none}
#skinCanvas:active{cursor:grabbing}
#skinFallback{position:relative;z-index:3;width:220px;height:220px;image-rendering:pixelated;object-fit:contain;background:#131a29;border-radius:10px}
.skin-loading{position:absolute;z-index:4;bottom:14px;left:12px;right:12px;color:#bcc9e5;font-size:11px;text-align:center;padding:8px;border:1px solid #425372;background:#111c32ec;border-radius:8px}