*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{background:#000;color:#fff;font-family:Inter,Noto Sans TC,-apple-system,BlinkMacSystemFont,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow:hidden;overscroll-behavior:none;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;touch-action:manipulation}img{display:block;max-width:none;user-drag:none;-webkit-user-drag:none;pointer-events:none}button{background:none;border:0;padding:0;cursor:pointer;font:inherit;color:inherit}input{font:inherit}a{color:inherit;text-decoration:none}canvas{display:block}:root{--design-w-l: 1280;--design-h-l: 720;--design-w-m: 720;--design-h-m: 1280;--teal: #41d3c4;--teal-deep: #1a7d75;--bg-deep: #0c1f24;--ink: #ffffff;--ink-soft: rgba(255, 255, 255, .78)}#stage{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);container-type:size;container-name:stage;overflow:hidden;background:#000}#stage[data-mode=landscape]{width:min(100dvw,100dvh * var(--design-w-l) / var(--design-h-l));height:min(100dvh,100dvw * var(--design-h-l) / var(--design-w-l));aspect-ratio:var(--design-w-l) / var(--design-h-l);--sx: calc(100cqw / var(--design-w-l));--sy: calc(100cqh / var(--design-h-l))}#stage[data-mode=mobile]{width:min(100dvw,100dvh * var(--design-w-m) / var(--design-h-m));height:min(100dvh,100dvw * var(--design-h-m) / var(--design-w-m));aspect-ratio:var(--design-w-m) / var(--design-h-m);--sx: calc(100cqw / var(--design-w-m));--sy: calc(100cqh / var(--design-h-m))}.screen{position:absolute;inset:0;width:100%;height:100%;visibility:hidden;opacity:0;pointer-events:none;transition:opacity .2s ease}.screen.active{visibility:visible;opacity:1;pointer-events:auto}#stage-bg{position:absolute;inset:0;width:100%;height:100%;background-image:url(../assets/gradientBG.png);background-size:cover;background-position:center;background-repeat:no-repeat;z-index:0;pointer-events:none}#ar-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;visibility:hidden;z-index:1;object-fit:cover}#stage[data-ar=show] #ar-canvas{visibility:visible}.screen{z-index:2}#stage[data-ar-view^=portrait] #ar-canvas{inset:50% auto auto;transform:translate(-50%,-50%);width:calc(338 * var(--sx));height:calc(600 * var(--sy));border-radius:calc(26 * var(--sx));overflow:hidden;background:#09232a}#stage[data-ar-view=portrait] #ar-canvas{left:calc(860 * var(--sx))}#stage[data-ar-view=portrait-center] #ar-canvas{left:calc(680 * var(--sx))}.layer{position:absolute;pointer-events:none}.layer.clickable,.layer button,button.layer{pointer-events:auto;cursor:pointer}.fullscreen-bleed{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.cut1-screen{background:#000}.cut1-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.cut1-marquee{position:absolute;left:0;right:0;bottom:calc(90 * var(--sy));height:calc(290 * var(--sy));overflow:hidden;pointer-events:none}.cut1-track{display:flex;gap:calc(6 * var(--sx));width:max-content;height:100%;align-items:center;animation:cut1-marquee 28s linear infinite;will-change:transform}.cut1-card{height:calc(280 * var(--sy));width:auto;flex:0 0 auto;filter:drop-shadow(0 calc(6 * var(--sy)) calc(18 * var(--sy)) rgba(0,0,0,.55))}@keyframes cut1-marquee{0%{transform:translate(0)}to{transform:translate(-50%)}}.cut1-hint{position:absolute;left:50%;bottom:calc(18 * var(--sy));transform:translate(-50%);font-size:calc(13 * var(--sy));letter-spacing:.15em;text-transform:uppercase;color:var(--ink-soft);opacity:.7;animation:cut1-pulse 2s ease-in-out infinite}@keyframes cut1-pulse{0%,to{opacity:.4}50%{opacity:.85}}.cut2-screen{background:transparent}.cut2-title{top:calc(70 * var(--sy));left:calc(54 * var(--sx));width:calc(400 * var(--sx));height:auto;z-index:3}.cut2-hint{top:calc(320 * var(--sy));left:calc(76 * var(--sx));width:calc(280 * var(--sx));height:auto;z-index:3}.cut2-align{top:51%;left:calc(860 * var(--sx));transform:translate(-50%,-50%);width:calc(338 * var(--sx));height:calc(580 * var(--sy));object-fit:cover;object-position:center;border-radius:calc(28 * var(--sx));overflow:hidden;z-index:3;pointer-events:none}.cut3-screen{background:transparent}.cut3-title{top:calc(60 * var(--sy));left:calc(54 * var(--sx));width:calc(400 * var(--sx));height:auto;z-index:3}.cut3-jersey-buttons{position:absolute;top:calc(300 * var(--sy));left:calc(50 * var(--sx));display:flex;flex-direction:column;gap:calc(14 * var(--sy));z-index:3;pointer-events:auto}.cut3-jbtn{position:relative;display:block;width:calc(260 * var(--sx));height:calc(58 * var(--sy));background:transparent}.cut3-jbtn-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.cut3-jbtn-img[hidden]{display:none}.cut3-hint{position:absolute;top:50%;left:calc(680 * var(--sx));width:calc(220 * var(--sx));height:auto;margin:0;transform:translate(-50%,-50%);z-index:4;pointer-events:none;transition:opacity .35s ease}.cut3-hint.is-hidden{opacity:0}.cut3-outfit-panel{position:absolute;top:calc(60 * var(--sy));right:calc(90 * var(--sx));width:calc(220 * var(--sx));height:calc(560 * var(--sy));background:#051a1eb8;border:calc(2 * var(--sx)) solid rgba(76,220,196,.65);border-radius:calc(18 * var(--sx));z-index:3;pointer-events:auto;opacity:0;transform:translate(calc(20 * var(--sx)));transition:opacity .35s ease,transform .35s ease}.cut3-outfit-panel.is-visible{opacity:1;transform:translate(0)}.cut3-outfit-panel.is-hidden-during-countdown{opacity:0;transform:translate(calc(20 * var(--sx)));pointer-events:none}.cut3-outfit-header{position:absolute;top:calc(18 * var(--sy));left:50%;transform:translate(-50%);font-family:Inter,sans-serif;font-weight:800;font-size:calc(18 * var(--sy));letter-spacing:.22em;color:var(--ink);padding:calc(4 * var(--sy)) calc(14 * var(--sx));border:calc(1.5 * var(--sx)) solid rgba(76,220,196,.7);border-radius:calc(6 * var(--sx));background:#0003}.cut3-outfit-preview{position:absolute;top:calc(72 * var(--sy));left:50%;transform:translate(-50%);width:calc(180 * var(--sx));height:calc(380 * var(--sy));object-fit:contain;object-position:center}.cut3-confirm{position:absolute;left:50%;bottom:calc(28 * var(--sy));transform:translate(-50%);width:calc(190 * var(--sx));height:calc(52 * var(--sy));background:transparent;pointer-events:auto;display:block}.cut3-confirm img{width:100%;height:100%;object-fit:contain;display:block}.cut3-countdown{position:absolute;inset:0;z-index:6;display:grid;place-items:center;background:#0413162e;pointer-events:none}.cut3-countdown[hidden]{display:none}.cut3-countdown-num{min-width:calc(160 * var(--sx));text-align:center;font-family:Inter,sans-serif;font-size:calc(128 * var(--sy));font-weight:900;line-height:1;letter-spacing:-.05em;color:#fff;text-shadow:0 0 calc(18 * var(--sx)) rgba(76,220,196,.48),0 calc(6 * var(--sy)) calc(22 * var(--sy)) rgba(0,0,0,.42)}.cut3-hand-cursor{position:fixed;top:0;left:0;width:58px;height:58px;border-radius:50%;pointer-events:none;z-index:9999;opacity:0;--cursor-scale: 1;transform:translate(-50%,-50%) scale(var(--cursor-scale));transition:opacity .2s ease,background .1s ease,--cursor-scale .1s ease;background:radial-gradient(circle,#4cdcc4d9,#4cdcc48c 45%,#4cdcc400 70%);box-shadow:0 0 0 3px #ffffffd9,0 0 24px #4cdcc4bf;will-change:left,top,transform}.cut3-hand-cursor.is-visible{opacity:1}.cut3-hand-cursor.is-grabbing{--cursor-scale: .78;background:radial-gradient(circle,#ffdc64f2,#ffb43ca6 45%,#ffb43c00 70%)}.cut3-confirm.hand-hover{outline:calc(3 * var(--sx)) solid rgba(255,220,100,.95);outline-offset:calc(4 * var(--sx));border-radius:calc(12 * var(--sx))}.cut3-debug{position:fixed;inset:0;pointer-events:none;z-index:99999}.cut3-debug-rect{position:fixed;border:2px dashed magenta;background:#ff00ff14;box-sizing:border-box}.cut3-debug-text{position:fixed;top:12px;right:12px;margin:0;background:#000000d1;color:#fff;font:12px/1.4 monospace;padding:8px 10px;border-radius:6px;white-space:pre}.cut5-screen{background:transparent;overflow:hidden}.cut5-backdrop{position:absolute;inset:0;background:linear-gradient(90deg,#03121557,#03121524 28%,#03121500 52%),radial-gradient(circle at 53% 44%,rgba(178,255,246,.12),transparent 24%),radial-gradient(circle at 88% 48%,rgba(50,248,221,.08),transparent 18%)}.cut5-info{position:absolute;top:calc(26 * var(--sy));left:calc(48 * var(--sx));width:calc(340 * var(--sx));height:calc(360 * var(--sy));z-index:2}.cut5-title{position:absolute;top:calc(100 * var(--sy));left:0;width:calc(328 * var(--sx));height:auto;opacity:.38;filter:saturate(.72) brightness(.76)}.cut5-product-text{position:absolute;top:calc(292 * var(--sy));left:calc(8 * var(--sx));width:calc(330 * var(--sx));height:auto}.cut5-get{top:calc(40 * var(--sy));left:50%;transform:translate(-50%);width:calc(238 * var(--sx));height:auto;z-index:3;filter:drop-shadow(0 0 calc(16 * var(--sx)) rgba(156,255,242,.22))}.cut5-card-wrap{position:absolute;top:calc(134 * var(--sy));left:calc(462 * var(--sx));width:calc(354 * var(--sx));height:calc(529 * var(--sy));z-index:3;isolation:isolate;box-shadow:0 0 calc(26 * var(--sx)) #ffffff57,0 0 calc(58 * var(--sx)) #63ffea33}.cut5-card-frame-back,.cut5-card-frame-front{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.cut5-card-frame-back{z-index:1}.cut5-card-frame-front{z-index:3}.cut5-card-portrait{position:absolute;top:calc(70 * var(--sy));left:calc(42 * var(--sx));width:calc(268 * var(--sx));height:calc(352 * var(--sy));background-size:cover;background-position:50% 24%;background-repeat:no-repeat;background-color:#08242a8c;-webkit-mask-image:url(../assets/cut5/frame-mask.png);mask-image:url(../assets/cut5/frame-mask.png);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;z-index:2}.cut5-card-namebar{position:absolute;bottom:calc(34 * var(--sy));left:50%;transform:translate(-50%);width:calc(270 * var(--sx));height:auto;z-index:4}.cut5-card-jersey-tag{position:absolute;top:calc(74 * var(--sy));left:50%;transform:translate(-50%);width:calc(120 * var(--sx));font-family:Inter,sans-serif;font-size:calc(33 * var(--sy));font-weight:900;line-height:1;text-align:center;letter-spacing:-.03em;color:#523801;z-index:4}.cut5-card-number{position:absolute;top:calc(103 * var(--sy));right:calc(80 * var(--sx));font-family:Inter,sans-serif;font-size:calc(34 * var(--sy));font-weight:900;line-height:1;letter-spacing:-.04em;color:#fff;text-shadow:0 calc(2 * var(--sy)) calc(10 * var(--sy)) rgba(7,31,36,.18);z-index:4}.cut5-card-name{position:absolute;bottom:calc(62 * var(--sy));left:50%;transform:translate(-50%);width:calc(210 * var(--sx));font-family:Inter,sans-serif;font-size:calc(22 * var(--sy));font-style:italic;font-weight:700;line-height:1.1;text-align:center;letter-spacing:-.04em;color:#1d4a4d;z-index:5}.cut5-qr-panel{position:absolute;top:calc(164 * var(--sy));left:calc(872 * var(--sx));width:calc(333 * var(--sx));height:calc(452 * var(--sy));z-index:3}.cut5-qr-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.cut5-qr-canvas{position:absolute;left:50%;bottom:calc(48 * var(--sy));transform:translate(-50%);width:calc(136 * var(--sx));height:calc(136 * var(--sx));image-rendering:pixelated}.cut6m-screen,.cut7m-screen{background:transparent}.mobile-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.mobile-card-wrap{position:absolute;top:calc(120 * var(--sy));left:50%;transform:translate(-50%);width:calc(420 * var(--sx));height:calc(640 * var(--sy))}.mobile-card-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.mobile-card-portrait{position:absolute;top:calc(74 * var(--sy));left:calc(46 * var(--sx));width:calc(330 * var(--sx));height:calc(440 * var(--sy));background-size:cover;background-position:50% 30%;background-color:#062028;-webkit-mask-image:url(../assets/cut5/frame-mask.png);mask-image:url(../assets/cut5/frame-mask.png);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;z-index:0}.mobile-card-namebar{position:absolute;bottom:calc(46 * var(--sy));left:50%;transform:translate(-50%);width:calc(330 * var(--sx));height:auto}.mobile-card-jersey-tag{position:absolute;top:calc(60 * var(--sy));left:calc(58 * var(--sx));font-family:Inter,sans-serif;font-weight:900;font-size:calc(38 * var(--sy));color:#fff;text-shadow:0 calc(1 * var(--sy)) calc(2 * var(--sy)) rgba(0,0,0,.45);z-index:2}.mobile-card-number{position:absolute;top:calc(58 * var(--sy));right:calc(54 * var(--sx));font-family:Inter,sans-serif;font-weight:900;font-size:calc(64 * var(--sy));color:#fff;text-shadow:0 calc(1 * var(--sy)) calc(2 * var(--sy)) rgba(0,0,0,.45);z-index:2}.mobile-card-name{position:absolute;bottom:calc(72 * var(--sy));left:50%;transform:translate(-50%);font-family:Inter,sans-serif;font-weight:600;font-size:calc(24 * var(--sy));color:#1a3a3a;z-index:2}.mobile-hint{bottom:calc(330 * var(--sy));left:50%;transform:translate(-50%);width:calc(440 * var(--sx));height:auto;z-index:3}.mobile-name-input{position:absolute;bottom:calc(220 * var(--sy));left:50%;transform:translate(-50%);width:calc(440 * var(--sx));height:calc(60 * var(--sy))}.mobile-name-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.mobile-name-field{position:absolute;inset:0;width:100%;height:100%;background:transparent;border:none;outline:none;text-align:center;font-family:Inter,sans-serif;font-size:calc(22 * var(--sy));color:#1a3a3a;font-weight:500;pointer-events:auto}.mobile-name-field::placeholder{color:#1a3a3a80}.mobile-btn-create,.mobile-btn-upload,.mobile-btn-stamp{position:absolute;left:50%;transform:translate(-50%);width:calc(440 * var(--sx));height:calc(110 * var(--sy))}.mobile-btn-create img,.mobile-btn-upload img,.mobile-btn-stamp img{width:100%;height:100%;object-fit:contain}.mobile-btn-create{bottom:calc(80 * var(--sy))}.mobile-actions{position:absolute;left:0;right:0;bottom:calc(70 * var(--sy));display:flex;flex-direction:column;gap:calc(14 * var(--sy));align-items:center}.mobile-actions .mobile-btn-upload,.mobile-actions .mobile-btn-stamp{position:relative;left:auto;transform:none;bottom:auto}.mobile-toast{position:absolute;top:calc(40 * var(--sy));left:50%;transform:translate(-50%);background:#0a1f24eb;color:#fff;padding:calc(10 * var(--sy)) calc(20 * var(--sx));border-radius:calc(20 * var(--sx));font-size:calc(20 * var(--sy));z-index:5}