:root{--red: #b01d2e;--green: #0b6b4f;--gold: #f2c94c;--bg: #0d1512;--card: #16211d;--text: #f4f1ea;--muted: #a7b3ad}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:radial-gradient(circle at 50% 40%,#1b2a24 0%,var(--bg) 70%);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overscroll-behavior:none}.app{height:100%;display:flex;flex-direction:column}header{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;gap:12px;border-bottom:1px solid rgba(255,255,255,.06)}.brand{display:flex;align-items:center;gap:12px}.seven{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,var(--red),#7d1220);border:2px solid var(--green);font-weight:800;font-size:24px}h1{font-size:18px;margin:0;letter-spacing:.2px}header p{margin:2px 0 0;color:var(--muted);font-size:13px}.auth{display:flex;align-items:center;gap:10px}.who{font-size:14px;color:var(--muted);max-width:40vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lang{background:transparent;color:var(--text);font:inherit;font-size:14px;border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:7px 10px;cursor:pointer}.lang option{color:#1a1a1a}main{position:relative;flex:1;min-height:0}.shirt-wrap{position:absolute;top:0;right:0;bottom:0;left:0}.shirt-wrap canvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab}.shirt-wrap canvas:active{cursor:grabbing}.shirt-wrap.picking canvas{cursor:crosshair}.zoom{position:absolute;right:16px;top:16px;display:flex;flex-direction:column;gap:6px}.zoom button{width:42px;height:42px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:#16211dd9;color:var(--text);font-size:20px;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.zoom button:hover{background:#283a33f2}.cta{position:absolute;left:50%;bottom:44px;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:8px}.banner{position:absolute;left:50%;top:16px;transform:translate(-50%);background:var(--gold);color:#1a1a1a;font-weight:600;padding:10px 16px;border-radius:999px;display:flex;gap:14px;align-items:center;box-shadow:0 8px 30px #00000059;max-width:calc(100% - 100px);font-size:14px}.banner .link{color:#1a1a1a}.hint{position:absolute;left:0;right:0;bottom:12px;margin:0;text-align:center;font-size:12px;color:var(--muted);pointer-events:none}.btn{border:0;border-radius:12px;padding:12px 18px;font-size:15px;font-weight:600;cursor:pointer;color:var(--text);background:var(--card)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn.sm{padding:8px 14px;font-size:14px}.btn.big{padding:16px 28px;font-size:17px;border-radius:999px;box-shadow:0 10px 30px #0006}.btn.gold{background:var(--gold);color:#1a1a1a}.btn.gold:hover:not(:disabled){filter:brightness(1.05)}.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.18)}.btn.provider{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;background:#fff;color:#1f1f1f;margin-top:10px}.link{background:none;border:0;color:var(--muted);text-decoration:underline;cursor:pointer;font-size:14px;padding:6px}.link.small{font-size:13px}.modal-bg{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:grid;place-items:center;padding:16px;z-index:10}.modal{width:100%;max-width:460px;background:var(--card);border-radius:18px;padding:22px;border:1px solid rgba(255,255,255,.08);text-align:center;box-shadow:0 20px 60px #00000080}.modal h2{margin:0 0 6px;font-size:20px}.muted{color:var(--muted);margin:0 0 14px;font-size:14px}.pad{width:100%;aspect-ratio:2 / 1;border-radius:12px;touch-action:none;cursor:crosshair;background:repeating-linear-gradient(170deg,#b01d2e 0,#b01d2e 18px,#a51a2a 18px,#a51a2a 22px);border:2px solid var(--green)}.row{display:flex;justify-content:space-between;align-items:center;margin:10px 0}.colors{display:flex;gap:8px}.swatch{width:28px;height:28px;border-radius:50%;border:2px solid rgba(255,255,255,.25);cursor:pointer}.swatch.on{outline:3px solid var(--gold);outline-offset:2px}.field{display:flex;flex-direction:column;gap:6px;text-align:left;font-size:13px;color:var(--muted);margin-top:6px}.field input{padding:11px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.15);background:#0f1714;color:var(--text);font-size:15px}.actions{display:flex;gap:10px;margin-top:16px}.actions .btn{flex:1}.error{color:#ff8a8a;font-size:13px;margin:8px 0 0}code{background:#ffffff14;padding:1px 5px;border-radius:5px}.toast{position:fixed;left:50%;bottom:110px;transform:translate(-50%);background:#fff;color:#1a1a1a;padding:11px 18px;border-radius:999px;font-size:14px;font-weight:600;box-shadow:0 10px 30px #0006;z-index:20;max-width:calc(100% - 32px);text-align:center}@media (max-width: 560px){h1{font-size:16px}.seven{width:36px;height:36px;font-size:20px}.cta{bottom:40px}.lang{padding:6px 8px;font-size:13px}}[dir=rtl] .zoom{right:auto;left:16px}[dir=rtl] .field{text-align:right}[dir=rtl] .link{text-decoration-line:underline}.intro{position:fixed;top:0;right:0;bottom:0;left:0;z-index:30;display:grid;place-items:center;padding:24px;background:radial-gradient(ellipse at 50% 40%,#7810208c,#0a0608eb 55%,#050304);animation:introIn 1.2s ease both;overflow:auto}.intro.out{animation:introOut .65s ease forwards}.intro:before,.intro:after{content:"";position:absolute;left:0;right:0;height:9vh;background:#000;z-index:1;animation:bars 1.6s cubic-bezier(.7,0,.2,1) both}.intro:before{top:0}.intro:after{bottom:0}.intro-grain{position:absolute;top:-50%;right:-50%;bottom:-50%;left:-50%;opacity:.08;pointer-events:none;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>");animation:grain .9s steps(4) infinite}.intro-inner{position:relative;z-index:2;max-width:880px;text-align:center}.intro-kicker{margin:0 0 22px;color:var(--gold);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.5em;animation:track 2.2s ease .3s both}.intro-title{margin:0;font-weight:400;line-height:.95}.intro-title .l1{display:block;font-family:Bebas Neue,Impact,Arial Narrow,sans-serif;font-size:clamp(40px,7.4vw,96px);letter-spacing:.02em;text-transform:uppercase;color:#f6efe6;text-shadow:0 10px 40px rgba(0,0,0,.6);animation:rise 1.4s cubic-bezier(.2,.7,.1,1) .6s both}.intro-title .l2{display:block;margin-top:14px;font-family:Fraunces,Georgia,Times New Roman,serif;font-style:italic;font-weight:600;font-size:clamp(30px,5vw,64px);color:var(--gold);animation:rise 1.4s cubic-bezier(.2,.7,.1,1) 1.5s both}.intro-body{margin:30px auto 0;max-width:620px;color:#d9d2c9;font-size:clamp(15px,1.9vw,18px);line-height:1.7;animation:fade 1.4s ease 2.4s both}.intro-count{margin:26px 0 0;color:var(--muted);font-size:14px;letter-spacing:.14em;text-transform:uppercase;animation:fade 1.2s ease 3s both}.intro-count b{font-family:Bebas Neue,Impact,sans-serif;font-weight:400;font-size:34px;color:#fff;letter-spacing:.04em;margin:0 4px;vertical-align:-4px}.intro-actions{margin-top:30px;display:flex;flex-direction:column;align-items:center;gap:10px;animation:fade 1.2s ease 3.3s both}.intro-actions .btn.big{padding:18px 40px;font-size:18px;letter-spacing:.02em}html[lang^=zh] .intro-title .l1,html[lang=ar] .intro-title .l1{font-family:system-ui,sans-serif;font-weight:800;text-transform:none;font-size:clamp(34px,6.4vw,80px);line-height:1.15}html[lang^=zh] .intro-title .l2,html[lang=ar] .intro-title .l2{font-family:system-ui,serif;font-style:normal}html[lang^=zh] .intro-kicker,html[lang=ar] .intro-kicker{letter-spacing:.2em}.legal-note{margin:14px 0 2px;font-size:12px;line-height:1.5;color:var(--muted)}.legal-note a{color:var(--text)}@keyframes introIn{0%{opacity:0}to{opacity:1}}@keyframes introOut{to{opacity:0;transform:scale(1.03);filter:blur(4px)}}@keyframes bars{0%{height:50vh}to{height:9vh}}@keyframes track{0%{opacity:0;letter-spacing:1.2em}to{opacity:1;letter-spacing:.5em}}@keyframes rise{0%{opacity:0;transform:translateY(28px);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}@keyframes fade{0%{opacity:0}to{opacity:1}}@keyframes grain{0%{transform:translate(0)}25%{transform:translate(-5%,3%)}50%{transform:translate(4%,-4%)}75%{transform:translate(-3%,5%)}to{transform:translate(0)}}@media (max-width: 560px){.intro:before,.intro:after{height:5vh}.intro-kicker{letter-spacing:.3em}}@media (prefers-reduced-motion: reduce){.intro,.intro *,.intro:before,.intro:after{animation:none!important}}.sides{position:absolute;top:16px;left:50%;transform:translate(-50%);z-index:3;display:flex;padding:4px;gap:4px;border-radius:999px;background:#16211dd9;border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.sides button{border:0;background:transparent;color:var(--muted);font-weight:700;font-size:14px;padding:8px 18px;border-radius:999px;cursor:pointer}.sides button.on{background:var(--gold);color:#1a1a1a}.sides button:disabled{opacity:.5;cursor:not-allowed}main{perspective:1600px}.shirt-wrap.flip-back{animation:flipA .8s cubic-bezier(.3,.7,.2,1) both}.shirt-wrap.flip-front{animation:flipB .8s cubic-bezier(.3,.7,.2,1) both}@keyframes flipA{0%{transform:rotateY(-90deg);opacity:.2}to{transform:none;opacity:1}}@keyframes flipB{0%{transform:rotateY(90deg);opacity:.2}to{transform:none;opacity:1}}@media (prefers-reduced-motion: reduce){.shirt-wrap.flip-back,.shirt-wrap.flip-front{animation:none}}@media (max-width: 560px){.sides{top:12px}.banner{top:64px}}
