:root{--bg:#0A0A0B;--bg2:#111113;--ink:#ECECEE;--muted:#A3A3AA;--dim:#76767E;--line:rgba(255,255,255,.09);--line2:rgba(255,255,255,.16);--plat:#D9D9DE;--champ:#C9B896;--r:4px;--serif:"Cormorant Garamond",Georgia,serif;--sans:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;--sec:56px}
@media(min-width:760px){:root{--sec:88px}}
*{box-sizing:border-box}
body{margin:0;font-family:var(--sans);font-weight:300;color:var(--ink);background:var(--bg);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}a{color:var(--plat)}b{font-weight:500}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}
header{position:sticky;top:0;z-index:10;background:rgba(10,10,11,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;justify-content:space-between;align-items:center;height:60px}.brand img{height:20px;width:auto}
.nav-tag{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--champ)}
.intro{padding:32px 0 28px}
.eyebrow{display:block;font-size:11px;font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:var(--champ);margin-bottom:12px;line-height:1}
h1{font-weight:300;font-size:clamp(34px,8vw,60px);line-height:1.05;margin:0 0 14px;color:#fff;letter-spacing:-.02em}
h1 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--champ);letter-spacing:0}
.lede{color:var(--muted);font-size:17px;max-width:620px;margin:0}
.layout{display:grid;gap:20px}
@media(min-width:900px){.layout{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:start}.preview-col{position:sticky;top:80px}}
.stage{position:relative;border:1px solid var(--line);border-radius:var(--r);background:radial-gradient(70% 60% at 50% 35%,rgba(217,217,222,.10),transparent 70%),linear-gradient(180deg,#151517,#0b0b0d);padding:16px 16px 12px;overflow:hidden}
.stage:after{content:"";position:absolute;left:12%;right:12%;bottom:44px;height:1px;background:linear-gradient(90deg,transparent,rgba(201,184,150,.4),transparent)}
.avatar{max-width:300px;margin:0 auto;aspect-ratio:200/300}.avatar svg{width:100%;height:100%;display:block}
.stage-meta{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--dim);padding-top:8px}
.stage-meta span:first-child{color:var(--champ)}
.avatar svg .bob{animation:bob 3.2s ease-in-out infinite;transform-origin:100px 280px}
.avatar svg .spark{animation:tw 2.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-3px)}}@keyframes tw{50%{opacity:.25}}
.controls{display:grid;gap:20px}
.panel{border:1px solid var(--line);border-radius:var(--r);background:var(--bg2);padding:22px 18px}
@media(min-width:760px){.panel{padding:28px}}
.panel h2{display:flex;align-items:baseline;gap:12px;font-size:22px;font-weight:300;color:#fff;margin:0 0 18px}
.num{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--champ)}
.field{margin-bottom:18px}.field:last-child{margin-bottom:0}.field.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.lbl{display:block;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.swatches{display:flex;flex-wrap:wrap;gap:10px}
.sw{width:36px;height:36px;border-radius:50%;border:1px solid var(--line2);cursor:pointer;padding:0;position:relative;transition:transform .15s}
.sw[aria-checked=true]{outline:1px solid var(--champ);outline-offset:3px}
.sw:hover{transform:scale(1.06)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:inherit;font-size:13px;color:#cfcfd4;background:transparent;border:1px solid var(--line2);border-radius:999px;padding:8px 14px;cursor:pointer;transition:border-color .2s,background .2s}
.chip:hover{border-color:rgba(255,255,255,.35)}
.chip[aria-checked=true],.chip[aria-pressed=true]{border-color:var(--champ);background:rgba(201,184,150,.1);color:#fff}
.sw:focus-visible,.chip:focus-visible,.btn:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--champ);outline-offset:2px}
.grid-f{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.f{display:flex;flex-direction:column;gap:6px;font-size:12px;letter-spacing:.06em;color:var(--muted)}.f small{color:var(--dim)}
.full{grid-column:1/-1}
input[type=text],input[type=number],select{font:inherit;font-size:16px;color:#fff;background:#0c0c0e;border:1px solid var(--line2);border-radius:var(--r);padding:11px 12px;width:100%;-webkit-appearance:none;appearance:none}
select{background-image:linear-gradient(45deg,transparent 50%,var(--champ) 50%),linear-gradient(135deg,var(--champ) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat}
input:invalid{border-color:#a05a5a}
.check{display:flex;align-items:center;gap:10px;font-size:15px;color:#cfcfd4;cursor:pointer}.check input{width:18px;height:18px;accent-color:var(--champ)}
.hint{font-size:13px;color:var(--dim);margin:14px 0 0}
.gear,.poses{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.poses{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);grid-template-columns:repeat(3,1fr)}
.g{display:flex;align-items:center;gap:14px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r)}
.g svg{width:40px;height:40px;flex:none}
.g .t{flex:1;min-width:0}.g .t b{display:block;font-weight:400;color:#fff;font-size:15px}.g .t span{font-size:12px;color:var(--dim)}
.g .st{font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.g.on{border-color:rgba(201,184,150,.35);background:linear-gradient(100deg,rgba(201,184,150,.07),transparent 70%)}.g.on .st{color:var(--champ)}
.g .prog{height:2px;background:rgba(255,255,255,.08);margin-top:6px}.g .prog i{display:block;height:100%;background:var(--champ)}
.p{text-align:center;font-size:12px;color:var(--dim);border:1px solid var(--line);border-radius:var(--r);padding:10px 6px}
.p b{display:block;font-weight:400;font-size:13px;color:var(--muted)}.p.on{border-color:rgba(201,184,150,.4);color:var(--champ)}.p.on b{color:#fff}
.card-panel{margin-top:20px}
.fmt{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.card-out{display:flex;justify-content:center;background:#060607;border:1px solid var(--line);border-radius:var(--r);padding:16px}
#cardCanvas{width:auto;height:auto;max-width:100%;max-height:70vh;border-radius:6px;box-shadow:0 30px 60px -30px #000}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.btn{font:inherit;display:inline-block;background:var(--plat);color:#0A0A0B;font-weight:500;font-size:12px;letter-spacing:.16em;text-transform:uppercase;padding:15px 22px;border-radius:var(--r);border:1px solid var(--plat);cursor:pointer;transition:background .2s}
.btn:hover{background:#fff}.btn.ghost{background:transparent;color:var(--plat);border-color:var(--line2)}.btn.ghost:hover{border-color:var(--plat)}
.btn.text{background:transparent;border-color:transparent;color:var(--dim)}.btn.text:hover{color:#fff}
.disc{font-size:13px;color:var(--dim);margin:28px 0 0;max-width:720px}
footer{margin-top:var(--sec);padding:32px 0 40px;border-top:1px solid var(--line);font-size:13px}footer a{color:var(--muted);text-decoration:none}
.unlock-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:50;display:flex;align-items:center;gap:16px;padding:14px 22px 14px 18px;border:1px solid rgba(201,184,150,.55);border-radius:var(--r);background:linear-gradient(100deg,#1d1c1a,#0b0b0d);color:#fff;font-size:18px;box-shadow:0 20px 50px -10px #000,0 0 30px -8px rgba(201,184,150,.35);min-width:260px}
.unlock-toast small{display:block;font-size:9px;letter-spacing:.32em;text-transform:uppercase;color:var(--champ);margin-bottom:3px}.unlock-toast b{font-weight:300}
.unlock-toast.show{animation:toast 3.2s cubic-bezier(.2,.8,.2,1) both}.unlock-toast.show .ach-i{animation:spin .9s cubic-bezier(.2,.8,.2,1) both}
.ach-i{flex:none;width:30px;height:30px;border:1px solid rgba(201,184,150,.6);transform:rotate(45deg);display:grid;place-items:center;background:rgba(201,184,150,.08)}
.ach-i:after{content:"";transform:rotate(-45deg) translateY(-1px);border:4px solid transparent;border-bottom:6px solid var(--champ)}
@keyframes toast{0%{opacity:0;transform:translate(-50%,16px)}12%{opacity:1;transform:translate(-50%,0)}85%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,8px)}}
@keyframes spin{from{transform:rotate(-135deg) scale(.6);opacity:0}to{transform:rotate(45deg);opacity:1}}
.stage.flash{animation:flash 1.2s ease-out}
@keyframes flash{30%{box-shadow:0 0 0 1px rgba(201,184,150,.6),0 0 40px -6px rgba(201,184,150,.45)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.unlock-toast.show{opacity:1}}
.unlock-toast[hidden]{display:none}

/* Walk scene */
.returning .intro{display:none}
.walk{padding:28px 0 8px}.walk h2{font-weight:300;font-size:clamp(28px,6vw,42px);margin:0 0 18px;color:#fff;line-height:1.1}.walk h2 em{font-family:var(--serif);font-style:italic;color:var(--champ);font-weight:400}
.returning .walk{padding-top:32px}
.scene{--dur:1.05s;position:relative;height:230px;overflow:hidden;border:1px solid var(--line);border-radius:var(--r);background:radial-gradient(60% 80% at 50% 100%,rgba(201,184,150,.07),transparent 70%),linear-gradient(180deg,#0f0f11,#09090a 75%,#050506)}
.scene .far,.scene .mid,.scene .dash{position:absolute;left:0;right:0;background-repeat:repeat-x;will-change:background-position}
.scene .far{top:34px;height:110px;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22640%22%20height%3D%22110%22%3E%3Cpath%20d%3D%22M0%2096%20L60%2070%20L110%2084%20L170%2040%20L230%2078%20L290%2058%20L350%2088%20L420%2030%20L480%2072%20L540%2054%20L600%2082%20L640%2096%22%20fill%3D%22none%22%20stroke%3D%22rgba%28217%2C217%2C222%2C.16%29%22%20stroke-width%3D%221%22/%3E%3Cpath%20d%3D%22M0%20104%20L80%2090%20L150%20100%20L240%2080%20L330%2098%20L410%2086%20L500%20102%20L580%2090%20L640%20104%22%20fill%3D%22none%22%20stroke%3D%22rgba%28217%2C217%2C222%2C.08%29%22%20stroke-width%3D%221%22/%3E%3C/svg%3E");background-size:640px 110px;animation:panFar calc(var(--dur) * 40) linear infinite}
.scene .mid{bottom:36px;height:120px;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22360%22%20height%3D%22120%22%3E%3Cpath%20d%3D%22M40%20120%20V22%20M40%2022%20h14%22%20stroke%3D%22rgba%28217%2C217%2C222%2C.22%29%22%20stroke-width%3D%221.2%22%20fill%3D%22none%22/%3E%3Ccircle%20cx%3D%2256%22%20cy%3D%2224%22%20r%3D%222.4%22%20fill%3D%22%23C9B896%22/%3E%3Ccircle%20cx%3D%2256%22%20cy%3D%2224%22%20r%3D%229%22%20fill%3D%22%23C9B896%22%20opacity%3D%22.12%22/%3E%3Cpath%20d%3D%22M220%20120%20V86%20M212%20120%20V96%20M228%20120%20V100%22%20stroke%3D%22rgba%28217%2C217%2C222%2C.12%29%22%20stroke-width%3D%221%22/%3E%3C/svg%3E");background-size:360px 120px;animation:panMid calc(var(--dur) * 10) linear infinite}
.scene .ground{position:absolute;left:0;right:0;bottom:36px;height:1px;background:linear-gradient(90deg,transparent,rgba(217,217,222,.28) 20%,rgba(217,217,222,.28) 80%,transparent)}
.scene .dash{bottom:22px;height:2px;background-image:repeating-linear-gradient(90deg,rgba(201,184,150,.38) 0 22px,transparent 22px 60px);background-size:60px 2px;animation:panDash calc(var(--dur) * 1.2) linear infinite}
@keyframes panFar{to{background-position-x:-640px}}@keyframes panMid{to{background-position-x:-360px}}@keyframes panDash{to{background-position-x:-60px}}
.walker{position:absolute;left:50%;bottom:18px;width:118px;margin-left:-59px;aspect-ratio:200/300}.walker svg{width:100%;height:100%;display:block;overflow:visible}
.walker .wbody{animation:wbob calc(var(--dur) / 2) ease-in-out infinite}
.walker .legL{animation:stepL var(--dur) ease-in-out infinite}.walker .legR{animation:stepL var(--dur) ease-in-out infinite;animation-delay:calc(var(--dur) / -2)}
.walker .armL{transform-origin:66px 154px;animation:swing var(--dur) ease-in-out infinite;animation-delay:calc(var(--dur) / -2)}.walker .armR{transform-origin:134px 154px;animation:swing var(--dur) ease-in-out infinite}
.walker .capeG{transform-origin:100px 150px;animation:cape calc(var(--dur) * 1.4) ease-in-out infinite}
@keyframes wbob{50%{transform:translateY(-4px)}}
@keyframes stepL{0%,100%{transform:translateY(0)}25%{transform:translateY(-8px)}50%{transform:translateY(0)}}
@keyframes swing{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(14deg)}}
@keyframes cape{0%,100%{transform:skewX(0) scaleX(1)}50%{transform:skewX(5deg) scaleX(1.04)}}
.scene[data-level="Limit Break"] .walker .armL,.scene[data-level="Limit Break"] .walker .armR{animation-name:swingBig}@keyframes swingBig{0%,100%{transform:rotate(-22deg)}50%{transform:rotate(22deg)}}
.walker.celebrate{animation:jump .6s cubic-bezier(.3,.7,.4,1) 3}@keyframes jump{40%{transform:translateY(-34px)}}
.walker.celebrate .armL{animation:none;transform:rotate(150deg)}.walker.celebrate .armR{animation:none;transform:rotate(-150deg)}
.scene.paused *,.scene.paused{animation-play-state:paused!important}
.w-stats{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-top:0;background:var(--bg2)}
.w-stats div{padding:14px 12px;border-left:1px solid var(--line)}.w-stats div:first-child{border-left:0}
.w-stats small,.lstats small{display:block;font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--dim);margin-bottom:4px}
.w-stats b,.lstats b{font-weight:300;font-size:22px;color:#fff}
.w-next{margin-top:14px;font-size:15px;color:var(--champ)}.wbar{height:2px;background:rgba(255,255,255,.08);margin-top:8px}.wbar i{display:block;height:100%;background:var(--champ);width:0;transition:width .6s}
.logf{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end}.logf .btn{padding:13px 18px}
input[type=date]{font:inherit;font-size:16px;color:#fff;background:#0c0c0e;border:1px solid var(--line2);border-radius:var(--r);padding:10px 10px;width:100%;color-scheme:dark}
.err{color:#f0a3a3;font-size:13px;min-height:1em;margin:8px 0 0}
.lstats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin:10px 0 14px}.lstats div{background:var(--bg2);padding:10px}.lstats b{font-size:18px}
.streaks{list-style:none;padding:0;margin:0 0 18px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sb{display:flex;align-items:center;gap:12px;padding:9px 12px;border:1px solid var(--line);border-radius:var(--r);font-size:14px;color:var(--dim)}.sb small{display:block;font-size:8px;letter-spacing:.3em;text-transform:uppercase}
.sb .ach-i{width:22px;height:22px;opacity:.35}.sb.on{border-color:rgba(201,184,150,.38);color:#fff;background:linear-gradient(100deg,rgba(201,184,150,.07),transparent 70%)}.sb.on small{color:var(--champ)}.sb.on .ach-i{opacity:1}
.sub{font-size:11px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}.sub small{letter-spacing:.04em;text-transform:none;color:var(--dim);font-weight:300}
.loglist{list-style:none;padding:0;margin:0;max-height:300px;overflow:auto}
.loglist li{display:grid;grid-template-columns:1fr 120px 36px;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line)}.loglist .ld{font-size:14px;color:#cfcfd4}
.loglist input{padding:7px 10px;font-size:15px;text-align:right}.loglist .empty{display:block;color:var(--dim);font-size:14px;border:0}
.x{font:inherit;font-size:20px;line-height:1;color:var(--dim);background:none;border:1px solid transparent;border-radius:var(--r);height:34px;cursor:pointer}.x:hover,.x:focus-visible{color:#fff;border-color:var(--line2)}
#totalHint{color:var(--dim);letter-spacing:0;font-size:12px}
@media(prefers-reduced-motion:reduce){.scene *,.walker{animation:none!important}}
/* 3D stage */
.scene.loading3d,.scene.has3d{height:min(78vw,380px);cursor:grab;touch-action:none;background:radial-gradient(55% 45% at 50% 78%,rgba(201,184,150,.10),transparent 70%),radial-gradient(70% 60% at 50% 20%,rgba(217,217,222,.06),transparent 70%),linear-gradient(180deg,#111113,#070708)}
@media(min-width:760px){.scene.loading3d,.scene.has3d{height:440px}}
.scene.has3d:active{cursor:grabbing}
.scene.has3d .far,.scene.has3d .mid,.scene.has3d .dash,.scene.has3d .ground,.scene.has3d .walker{display:none}
.s3d{position:absolute;inset:0}.s3d canvas{width:100%!important;height:100%!important;display:block}
.snap{position:absolute;right:12px;top:12px;font:inherit;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--plat);background:rgba(10,10,11,.6);border:1px solid var(--line2);border-radius:999px;padding:8px 12px;cursor:pointer;backdrop-filter:blur(6px)}
.snap:hover{border-color:var(--champ);color:#fff}
.s3d-hint{display:none;position:absolute;left:14px;bottom:12px;font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--dim)}.has3d .s3d-hint{display:block}
.lblnote{letter-spacing:.02em;text-transform:none;color:var(--dim);font-size:11px}
.loader3d{display:none;position:absolute;inset:0;align-items:center;justify-content:center;flex-direction:column;gap:14px;z-index:2;background:radial-gradient(50% 40% at 50% 60%,rgba(201,184,150,.06),transparent 70%)}
.scene.loading3d .loader3d{display:flex}.scene.loading3d .walker{opacity:.25}
.lring{width:46px;height:46px;border-radius:50%;border:1px solid rgba(201,184,150,.2);border-top-color:var(--champ);animation:lspin 1s linear infinite}
.ltxt{font-size:9px;letter-spacing:.32em;text-transform:uppercase;color:var(--dim)}
@keyframes lspin{to{transform:rotate(360deg)}}
.scene.ready3d .walker,.scene.ready3d .far,.scene.ready3d .mid,.scene.ready3d .dash,.scene.ready3d .ground{display:none}
.photo-ctl{margin:-4px 0 18px}.photo-ctl[hidden],.photo-sl[hidden]{display:none}
.photo-pick{display:inline-flex;cursor:pointer;position:relative}
.vh{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.photo-pick:focus-within{outline:1px solid var(--champ);outline-offset:3px}
.photo-ctl .note{font-size:12px;color:var(--dim);margin:10px 0 12px}
.photo-sl{display:grid;gap:10px;max-width:420px}.photo-sl label{display:grid;grid-template-columns:110px 1fr;align-items:center;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.photo-sl input[type=range]{accent-color:#C9B896;width:100%}
.chip.locked{opacity:.45;cursor:not-allowed}
/* v4.1: 3D stage is the live preview; sticky while editing options */
.layout{display:block}.preview-col[hidden]{display:none!important}
.stickwrap>.scene{position:sticky;top:var(--hdr,58px);z-index:6;box-shadow:0 14px 24px -14px #000}
.walk2{padding-top:10px}
@media(max-width:899px){.stickwrap>.scene{height:min(250px,32vh)}}

.upl{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:12px}.upl .or{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim)}.upl small{flex-basis:100%;color:var(--dim);font-size:12px}.upl .btn{padding:13px 18px}
.upl .btn.busy{opacity:.6;pointer-events:none}
.sheet{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.66);display:flex;align-items:flex-end;justify-content:center;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.sheet[hidden]{display:none}
.sheet-in{width:100%;max-width:520px;background:#141416;border:1px solid rgba(255,255,255,.16);border-bottom:0;border-radius:14px 14px 0 0;padding:20px 20px calc(20px + env(safe-area-inset-bottom))}
@media(min-width:700px){.sheet{align-items:center}.sheet-in{border-radius:12px;border-bottom:1px solid rgba(255,255,255,.16)}}
.sheet-in img{display:block;max-height:30vh;max-width:100%;margin:0 auto 14px;border-radius:8px;border:1px solid rgba(255,255,255,.09)}
.sheet-t{font-size:19px;color:#ECECEE;margin:0 0 12px;text-align:center}.sheet-t b{color:#C9B896;font-weight:400}.sheet-t small{display:block;font-size:13px;color:#A3A3AA;margin-top:4px}
.sheet-f{display:grid;grid-template-columns:1fr 1fr;gap:10px}.sheet-b{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}


:root{--t-common:#B4B4BC;--t-uncommon:#86B7CC;--t-rare:#C9B896;--t-legendary:#E9C45E}
.tier{font-style:normal;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;padding:2px 7px;border-radius:99px;border:1px solid;margin-right:6px}
.t-common{color:var(--t-common);border-color:rgba(180,180,188,.4)}.t-gift{color:var(--t-rare);border-color:rgba(201,184,150,.45);letter-spacing:.14em}
.t-uncommon{color:var(--t-uncommon);border-color:rgba(134,183,204,.5);box-shadow:0 0 8px rgba(134,183,204,.25)}
.t-rare{color:var(--t-rare);border-color:rgba(201,184,150,.55);box-shadow:0 0 8px rgba(201,184,150,.25)}
.t-legendary{color:#140f02;border-color:transparent;background:linear-gradient(100deg,#B8902E,#F6E3A1 45%,#E9C45E 55%,#B8902E);background-size:200% 100%;animation:tshim 3.5s linear infinite;box-shadow:0 0 10px rgba(233,196,94,.45)}
@keyframes tshim{from{background-position:100% 0}to{background-position:-100% 0}}
.g.tr-uncommon.on{border-color:rgba(134,183,204,.45)!important}.g.tr-uncommon.on svg g{fill:var(--t-uncommon);stroke:var(--t-uncommon)}
.g.tr-rare.on{border-color:rgba(201,184,150,.55)!important}
.g.tr-legendary.on{border-color:rgba(233,196,94,.7)!important;box-shadow:0 0 18px rgba(233,196,94,.25)}.g.tr-legendary.on svg g{fill:var(--t-legendary);stroke:var(--t-legendary)}
.g.tr-common.on svg g{fill:var(--t-common);stroke:var(--t-common)}
#toast.tier-common{border-color:rgba(180,180,188,.5)!important}
#toast.tier-uncommon{border-color:rgba(134,183,204,.7)!important;box-shadow:0 0 28px rgba(134,183,204,.35)!important}
#toast.tier-rare{border-color:rgba(201,184,150,.8)!important;box-shadow:0 0 28px rgba(201,184,150,.35)!important}
#toast.tier-legendary{border-color:#E9C45E!important;box-shadow:0 0 36px rgba(233,196,94,.55)!important}
@media(prefers-reduced-motion:reduce){.t-legendary{animation:none}}
#toast.tier-uncommon #toastTier{color:#86B7CC}#toast.tier-rare #toastTier{color:#C9B896}#toast.tier-legendary #toastTier{color:#E9C45E}#toast.tier-common #toastTier{color:#B4B4BC}

.syncbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 16px;padding:10px 14px;border:1px solid rgba(255,255,255,.09);border-radius:8px;background:#111113;font-size:13px;color:#A3A3AA;min-height:44px}
.syncbar:empty{display:none}.sy-dot{width:8px;height:8px;border-radius:50%;background:#7fc79a;box-shadow:0 0 8px rgba(127,199,154,.6)}
.syncbar[data-state=saving] .sy-dot{background:#C9B896;box-shadow:none}.syncbar[data-state=err] .sy-dot{background:#e08a8a}
.sy-s{color:#ECECEE;font-weight:400}.sy-k{color:#A3A3AA}.sy-out{background:none;border:0;color:#D9D9DE;text-decoration:underline;font:inherit;cursor:pointer;padding:0}
.sy-f{display:flex;gap:8px;flex:1 1 260px}.sy-f input{flex:1;min-width:0;background:#141416;border:1px solid rgba(255,255,255,.16);border-radius:4px;color:#ECECEE;font:400 14px Jost,sans-serif;letter-spacing:.06em;padding:9px 10px;text-transform:uppercase}.sy-f .btn{padding:9px 14px}
.sy-e{flex-basis:100%;color:#f0a3a3}

.mavg-note{margin:0;font-size:13px;line-height:1.5;color:var(--dim)}
.lvl-hint{display:block;margin-top:6px;font-size:11px;letter-spacing:.02em;text-transform:none;color:var(--dim);line-height:1.4}
.lvl-hint,#lvlHint,.mavg-note{font-size:15px!important;line-height:1.5!important;color:#d9d6cf!important;opacity:1!important;letter-spacing:.01em}
#lvlHint{display:block;margin-top:10px}

.sheet-pick{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:4px 0 12px}
.sheet-pick small{flex-basis:100%;text-align:center;opacity:.7;font-size:13px}
.sheet-pick .chip{font:inherit;font-size:15px;padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:transparent;color:inherit;cursor:pointer}
.sheet-pick .chip.on{background:#d9d9de;color:#111;border-color:#d9d9de}

.lb-panel{margin-top:0}.lb-tog{margin-bottom:14px}.lb-f{display:grid;grid-template-columns:1fr;gap:14px}@media(min-width:560px){.lb-f{grid-template-columns:1fr 1fr}}
.lb-f[aria-disabled=true]{opacity:.45}.lb-msg{font-size:13px;color:var(--champ);margin:12px 0 0;min-height:1.3em}.lb-msg.bad{color:#E8A0A0}

.gp-list{list-style:none;margin:0 0 6px;padding:0}.gp-list li{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;margin-bottom:10px;background:#0c0c0e}
.gp-list b{display:block;color:#fff;font-weight:400;font-size:16px}.gp-list small{color:var(--dim);font-size:12px;letter-spacing:.06em}.gp-list code{color:var(--champ);letter-spacing:.2em;font-size:13px}
.gp-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.gp-acts .chip{font-size:12px;padding:6px 12px;text-decoration:none}.gp-acts .chip.x{color:#E8A0A0;border-color:rgba(232,160,160,.3)}
.gp-forms{display:grid;gap:14px}@media(min-width:560px){.gp-forms{grid-template-columns:1fr 1fr}}
.gp-f{display:flex;gap:8px;align-items:flex-end}.gp-f .f{flex:1;min-width:0}.gp-f .btn{padding:12px 14px;flex:none}

.nav{gap:14px}.nav .brand{flex:none}
@media(max-width:520px){.nav-tag{flex:0 1 auto;min-width:0;max-width:140px;text-align:right;line-height:1.35;font-size:9px;letter-spacing:.2em}}
@media(max-width:340px){.nav-tag{display:none}}

/* anchor targets clear the sticky header + pinned 3D viewer */
[id^="h-"]{scroll-margin-top:calc(var(--hdr,58px) + 12px)}
.stickwrap [id^="h-"]{scroll-margin-top:calc(var(--pin,var(--hdr,58px)) + 12px)}
/* builder tabs */
.tabs{display:flex;gap:6px;margin:0 0 10px}
.tabs .tab{flex:1 1 0;min-width:0;padding:11px 6px;font-size:10.5px;letter-spacing:.12em;line-height:1.25;text-align:center;text-decoration:none;white-space:normal;display:flex;align-items:center;justify-content:center;opacity:.5;transition:opacity .2s,box-shadow .2s,background .2s}
.tabs .tab:hover{opacity:.8}
.tabs .tab.on{opacity:1;box-shadow:0 0 0 1px var(--bg),0 0 0 2px var(--champ)}
.tabs #tb-equip{flex:1.6 1 0}.tabs .tab{font-size:10px;letter-spacing:.1em;padding:9px 6px;min-height:44px}
.tabp{margin:0 0 12px}
.tab-h{display:flex;align-items:center;justify-content:space-between;padding:4px 2px 8px;border-bottom:1px solid var(--line);margin-bottom:8px}
.tab-h span{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--champ);cursor:pointer}
.tab-chev{background:transparent;border:1px solid var(--line2);color:var(--plat);border-radius:var(--r);width:30px;height:26px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.tab-chev svg{transition:transform .3s;transform:rotate(180deg)}
.tabp.collapsed .tab-chev svg{transform:rotate(0deg)}
.tab-b{display:grid;grid-template-rows:1fr;transition:grid-template-rows .35s ease,opacity .3s}
.tab-b>.tab-in{overflow:hidden;min-height:0}
.tabp.collapsed .tab-b{grid-template-rows:0fr;opacity:0}
.tabp.collapsed .tab-h{margin-bottom:0}
.tabp .panel{margin-top:0}
.tabp .panel+.panel{margin-top:12px}
/* loading: text only, no cartoon */
#scene .far,#scene .mid,#scene .ground,#scene .dash,#scene .walker,#scene .lring{display:none!important}
#scene .ltxt{display:none!important} /* no text over the still; thin champagne shimmer along the stage bottom instead */
/* loading bar: compositor-only (transform) so it keeps sweeping while the main thread compiles shaders / parses the model; fades out after the first drawn frame */
#scene .loader3d{background:none;pointer-events:none;overflow:hidden;display:flex!important;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s}#scene.loading3d .loader3d{opacity:1;visibility:visible;transition:opacity .15s ease}#scene .loader3d::after{content:'';position:absolute;left:0;bottom:0;width:40%;height:2px;background:linear-gradient(90deg,transparent,rgba(201,184,150,.85),transparent);will-change:transform;transform:translateX(-100%);animation:plLoadBar 1.4s ease-in-out infinite}
@keyframes plLoadBar{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}@media (prefers-reduced-motion:reduce){#scene .loader3d::after{animation:none;width:100%;transform:none;opacity:.35}}
#scene:not(.loading3d):not(.ready3d):not(.has3d){height:min(78vw,380px);display:flex;align-items:center;justify-content:center}
#scene:not(.loading3d):not(.ready3d):not(.has3d)::after{content:'Avatar preview unavailable';font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--dim)}
.up-panel{padding-top:10px;padding-bottom:10px}.upl-top{margin-top:0}.upl-top:focus{outline:none}
.g[data-id]{cursor:pointer;-webkit-tap-highlight-color:transparent}.g[data-id]:focus-visible{outline:1px solid var(--champ);outline-offset:2px}
.g.eq{border-color:var(--champ)!important;box-shadow:inset 0 0 0 1px rgba(201,184,150,.35);background:linear-gradient(100deg,rgba(201,184,150,.16),transparent 75%)}.g.eq .st{color:var(--champ);font-weight:500}
.namef{margin-top:0}.namef .f{display:block;margin:0}.namef .f small{display:inline;margin-left:4px}.namef .f input{display:block;width:100%;margin-top:6px}
.upl-log{margin-top:12px}
#shotDate.locked{opacity:.8;pointer-events:none}

.upl-row{display:flex;gap:8px;flex-wrap:wrap}.upl-row .btn{flex:0 0 auto}
.ws-cam{position:relative;border-radius:10px;overflow:hidden;background:#000;margin:0 0 10px;aspect-ratio:4/3}.ws-cam video{width:100%;height:100%;object-fit:cover;display:block}
.ws-frame{position:absolute;left:31%;top:10%;width:38%;height:68%;border:2px solid rgba(201,184,150,.85);border-radius:22%/18%;box-shadow:0 0 0 999px rgba(0,0,0,.35)}.ws-hint{position:absolute;left:0;right:0;bottom:6px;text-align:center;font-size:11px;letter-spacing:.04em;color:#e8e2d4;text-shadow:0 1px 2px #000;pointer-events:none}
#watchPrev{display:block;max-width:100%;max-height:22vh;margin:0 auto 10px;border-radius:8px}#watchPrev[hidden],.ws-cam[hidden],.ws [hidden]{display:none!important}
.ws .sheet-t b{font-size:1.25em}.ws-hint{text-align:center;font-size:12.5px;color:#A3A3AA;margin:-6px 0 10px}
.loglist .lw{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#C9B896;border:1px solid rgba(201,184,150,.4);border-radius:999px;padding:1px 6px;margin-left:6px;vertical-align:middle}
.upl-row{flex-wrap:nowrap}.upl-row .btn{flex:1 1 auto;padding-left:12px;padding-right:12px;white-space:normal;text-align:center}.upl-row [data-watch]{flex:1 1 0}.upl-row .btn{flex:1 1 0}

/* unlockables: locked vs unlocked */
.gear li.g{position:relative;transition:border-color .2s,box-shadow .2s}
.gear li.g.on{border-color:rgba(201,184,150,.55)!important;box-shadow:0 0 0 1px rgba(201,184,150,.12),0 0 18px -6px rgba(201,184,150,.45)}
.gear li.g.on svg:first-child,.gear li.g.on>:first-child{opacity:1;filter:none}
.gear li.g:not(.on)>:first-child{opacity:.45;filter:grayscale(1)}
.gear li.g:not(.on) .t b{color:#8E8E96}.gear li.g:not(.on) .t span{color:#6E6E76}
.gear li.g .st{display:inline-flex;align-items:center;gap:5px}
.gear li.g.on .st{color:#C9B896}
.gear .st .ck{display:inline-flex;width:15px;height:15px;border-radius:50%;background:#C9B896;align-items:center;justify-content:center;flex:none}
.gear .st .ck svg{width:10px;height:10px;fill:none;stroke:#0A0A0B;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gear .st .lk{width:16px;height:16px;fill:none;stroke:#8E8E96;stroke-width:1.3;stroke-linecap:round}
.gear .st .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.gear li.g .prog{height:3px;margin-top:6px;background:rgba(255,255,255,.07);border-radius:3px;overflow:hidden}.gear li.g .prog i{display:block;height:100%;background:linear-gradient(90deg,#8E8E96,#C9B896);border-radius:3px}
.gear li.g .pv{display:block;margin-top:3px;font-size:10px;letter-spacing:.08em;color:#8E8E96}

/* eq1: equipped vs unlocked (preview) */
.gear li.g.on:not(.eq){border-color:rgba(217,217,222,.16)!important;box-shadow:none!important;background:rgba(255,255,255,.025)!important}
.gear li.g.tr-uncommon.on:not(.eq){border-color:rgba(134,183,204,.28)!important}
.gear li.g.tr-legendary.on:not(.eq){border-color:rgba(233,196,94,.32)!important}
.gear li.g.on:not(.eq) .st{color:#B9B9C0;font-weight:400}
.gear li.g.on:not(.eq) .st .ck{background:transparent;box-shadow:inset 0 0 0 1.3px #9A9AA2}
.gear li.g.on:not(.eq) .st .ck svg{stroke:#C4C4CA}
.gear li.g.on.eq{border-color:#C9B896!important;box-shadow:0 0 0 1px rgba(201,184,150,.28),0 0 22px -6px rgba(201,184,150,.6)!important;background:linear-gradient(100deg,rgba(201,184,150,.16),rgba(201,184,150,.07) 75%)!important}
.gear li.g.on.eq .st{background:linear-gradient(180deg,#E4D2A6,#C9B896);color:#0A0A0B;font-weight:600;letter-spacing:.18em;padding:4px 9px 4px 4px;border-radius:999px;gap:5px;box-shadow:0 1px 6px -2px rgba(201,184,150,.6)}
.gear li.g.on.eq .st .ck{background:#0A0A0B;width:14px;height:14px}
.gear li.g.on.eq .st .ck svg{stroke:#E4D2A6;stroke-width:2}
.gear li.g{transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease}
@media (prefers-reduced-motion:reduce){.gear li.g{transition:none}}
/* eq2: locked vs unlocked (preview) */
.gear li.g.on .t b{color:#fff;font-weight:500}
.gear li.g:not(.on){border:1px dashed rgba(200,200,208,.2)!important;background:#0c0c0e!important;box-shadow:none!important}
.gear li.g:not(.on)>svg:first-child{opacity:.5;filter:grayscale(1)}
.gear li.g:not(.on)>svg:first-child>g:last-child{display:none}
.gear li.g:not(.on)::before{content:"";position:absolute;left:39px;top:calc(50% + 7px);width:17px;height:17px;border-radius:50%;background:#1a1a1d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='4' y='7.2' width='8' height='5.8' rx='1.2' fill='%23A4A4AC'/%3E%3Cpath d='M5.8 7.2V5.6a2.2 2.2 0 0 1 4.4 0v1.6' fill='none' stroke='%23A4A4AC' stroke-width='1.4'/%3E%3C/svg%3E") center/13px no-repeat;box-shadow:0 0 0 1.5px #0c0c0e,0 0 0 2.5px rgba(200,200,208,.22);pointer-events:none}
.gear li.g:not(.on) .t b{color:#7E7E86}
.gear li.g:not(.on) .t span{color:#8E8E96}
.gear li.g:not(.on) .pv{color:#8E8E96}
.gear li.g:not(.on) .prog{height:3px;background:rgba(255,255,255,.09)}
.gear li.g:not(.on) .prog i{background:linear-gradient(90deg,#A8966E,#E4D2A6)}
.gear li.g:not(.on) .st{color:#8E8E96;gap:5px;letter-spacing:.22em}
.gear li.g:not(.on) .st .lk{width:12px;height:12px;stroke:#8E8E96;stroke-width:1.5}
.gear li.g:not(.on) .st .sr{position:static;width:auto;height:auto;overflow:visible;clip:auto}