:root{--paper:#f6f4ee;--ink:#17273c;--muted:#718094;--blue:#365bd7;--blue-deep:#2447b7;--line:#e1e4e7;--white:#fff;--green:#257e62;--orange:#f47a50;--shadow:0 12px 40px #1a315208;--radius:26px;font-family:ui-rounded,'SF Pro Rounded','Arial Rounded MT Bold',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default;opacity:.48}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #f2a527;outline-offset:4px}button{touch-action:manipulation}button svg,a svg{flex:none}a{color:var(--blue)}button{border:0}button,select{color:inherit}h1,h2,h3,p{margin:0}button:not(.sticker):not(.swatch):active{transform:translateY(1px)}svg{vertical-align:middle}main{min-height:calc(100dvh - 160px)}.shell{max-width:1100px;margin:auto;padding:0 38px 34px}.topbar{height:106px;display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{display:flex;align-items:center;gap:12px;background:none;padding:0;text-align:left}.brand img{width:43px;height:43px;transform:rotate(-7deg)}.brand strong{font-size:20px;letter-spacing:-.6px;display:block}.brand small{color:var(--muted);font-size:12px;display:block;margin-top:3px}.top-actions{display:flex;gap:9px}.icon-btn{width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:15px;background:#ffffff80;color:var(--ink)}.icon-btn.active{color:var(--blue);background:#e9edff;border-color:#d9e0fe}.eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--blue)}.eyebrow .dot{width:7px;height:7px;background:#749c70;border-radius:50%}.hero{display:grid;grid-template-columns:1.08fr 1fr;align-items:center;min-height:430px;gap:20px;padding:24px 0 28px}.hero-copy{position:relative;z-index:2}.hero h1{font-size:clamp(42px,5vw,64px);line-height:1.07;letter-spacing:-2.5px;font-weight:800;margin:22px 0 22px}.hero h1 em{font-style:normal;color:var(--blue);position:relative;white-space:nowrap}.hero h1 em:after{content:'';position:absolute;bottom:-5px;left:2px;right:0;height:7px;border-radius:50%;border-top:3px solid #e2a748;transform:rotate(-2deg)}.hero p{font-size:17px;line-height:1.65;color:#657284;max-width:380px}.hero-art{position:relative;min-height:380px;display:flex;justify-content:center;align-items:center}.hero-art:before{content:'';position:absolute;width:355px;height:355px;border-radius:50%;background:#ebece7;background-image:radial-gradient(#c7cec7 1px,transparent 1px);background-size:17px 17px;opacity:.65}.hero-art canvas{position:relative;z-index:1;width:100%;height:365px;max-width:470px}.floating-note{position:absolute;z-index:2;border-radius:12px;background:white;padding:12px 16px;font-size:12px;font-weight:700;box-shadow:0 8px 25px #17273c0b;display:flex;align-items:center;gap:9px}.note-top{right:12px;top:22px;transform:rotate(5deg)}.note-bottom{left:8px;bottom:38px;transform:rotate(-5deg)}.spark{position:absolute;font-size:33px;color:#e6a33d;right:0;bottom:95px;transform:rotate(12deg)}.selection-label{font-size:13px;color:#697789;font-weight:650;margin:27px 0 11px}.size-options{display:flex;gap:10px}.size-card{background:#ffffff90;border:1.5px solid var(--line);border-radius:18px;padding:13px 18px;display:flex;gap:13px;align-items:center;min-width:151px;text-align:left;transition:.15s}.size-card.selected{background:#eef1ff;border-color:var(--blue);box-shadow:0 0 0 1px #365bd715}.size-card strong{font-size:18px;display:block}.size-card small{font-size:11px;color:var(--muted);display:block;margin-top:4px}.mini-grid{width:32px;height:32px;display:grid;grid-template-columns:repeat(var(--n),1fr);gap:2px;transform:rotate(-6deg)}.mini-grid i{background:#5472df;border-radius:2px}.size-card:not(.selected) .mini-grid i{background:#91a1bc}.start-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:21px}.btn{min-height:55px;border-radius:16px;padding:15px 23px;display:inline-flex;align-items:center;justify-content:center;gap:11px;font-weight:750;font-size:15px;line-height:1.2;transition:background .15s,box-shadow .15s;text-decoration:none}.btn-primary{color:#fff;background:var(--blue);box-shadow:0 5px 0 #2746ab}.btn-primary:hover{background:var(--blue-deep)}.btn-secondary{background:#fff;border:1px solid var(--line);box-shadow:0 3px 0 #e5e7e9}.btn-subtle{background:transparent;color:#6b7788;padding:12px 8px;min-height:48px;font-size:13px}.btn-green{background:#237c60;color:#fff;box-shadow:0 5px 0 #195b47}.btn-full{width:100%}.btn-small{min-height:44px;padding:11px 15px;font-size:13px;border-radius:12px}.intro-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin:20px 0 28px}.intro-card{background:#ffffff85;border:1px solid #e5e6e1;border-radius:22px;display:flex;align-items:flex-start;gap:14px;padding:22px 19px}.step-icon{width:43px;height:43px;background:#edf0fb;border-radius:14px;color:var(--blue);display:flex;align-items:center;justify-content:center;flex:none}.intro-card:nth-child(2) .step-icon{background:#fff0d5;color:#b77b1e}.intro-card:nth-child(3) .step-icon{background:#e1f3e9;color:#398464}.intro-card h3{font-size:14px;margin:1px 0 7px}.intro-card p{font-size:12px;line-height:1.55;color:#7c8794}.footer{display:flex;justify-content:space-between;gap:15px;align-items:center;padding:20px 2px 0;border-top:1px solid #e0e3df;color:#88939e;font-size:11px}.footer button{color:#74818e;background:none;font-size:11px;padding:8px}.local-note{display:flex;align-items:center;gap:7px}.resume-strip{border-radius:18px;background:#e8f2e9;padding:16px 19px;display:flex;gap:12px;align-items:center;justify-content:space-between;margin-top:8px}.resume-strip strong{font-size:14px}.resume-strip p{font-size:12px;color:#5b7665;margin-top:3px}.resume-strip button{flex:none}.workspace{max-width:890px;margin:auto;padding-top:12px}.page-top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:24px}.back-link{display:flex;gap:7px;align-items:center;background:none;padding:8px 0;font-size:12px;font-weight:650;color:#738095;min-height:44px}.badge{display:inline-flex;align-items:center;gap:7px;border:1px solid #dde3e8;background:#ffffff80;border-radius:100px;padding:8px 12px;font-size:11px;font-weight:700;color:#6f7d8d}.page-title{font-size:34px;letter-spacing:-1.2px;line-height:1.15}.page-desc{font-size:14px;color:#758193;line-height:1.6;margin-top:12px;max-width:640px}.face-progress{display:flex;gap:8px;margin:24px 0}.face-progress button{height:39px;min-width:39px;padding:8px 11px;display:flex;justify-content:center;align-items:center;gap:6px;border-radius:11px;background:#e8ebea;font-size:12px;color:#9aa3ad;font-weight:700}.face-progress button.done{background:#dfefe6;color:#287556}.face-progress button.current{background:var(--blue);color:#fff}.face-progress button.current span{display:inline}.face-progress button span{display:none}.scan-layout{display:grid;grid-template-columns:1.15fr 1fr;gap:24px;align-items:start;margin:22px 0}.camera-stage{position:relative;border-radius:24px;aspect-ratio:1;overflow:hidden;background:#e8ecee;display:flex;justify-content:center;align-items:center;border:1px solid #dce1e6}.camera-stage video,.camera-stage>canvas.capture-image{position:absolute;width:100%;height:100%;object-fit:cover}.camera-stage video{transform:none}.capture-placeholder{text-align:center;color:#738091;padding:28px}.capture-placeholder .big-camera{display:flex;justify-content:center;margin-bottom:15px;color:#8d9dad}.capture-placeholder p{font-size:13px;line-height:1.6;max-width:240px}.capture-placeholder h3{font-size:17px;margin:12px 0}.camera-stage .scan-overlay{position:absolute;left:12%;right:12%;top:12%;bottom:12%;display:grid;grid-template-columns:repeat(var(--n),1fr);pointer-events:none;border:2px solid #ffffffd0;border-radius:4px;box-shadow:0 0 0 160px #14203940;z-index:3}.scan-overlay i{border:.5px solid #ffffff70}.scan-overlay:after{content:'';position:absolute;inset:-6px;border-radius:12px;border:3px solid #fbc766;clip-path:polygon(0 0,25% 0,25% 5%,5% 5%,5% 25%,0 25%,0 0,100% 0,100% 25%,95% 25%,95% 5%,75% 5%,75% 0,100% 0,100% 100%,75% 100%,75% 95%,95% 95%,95% 75%,100% 75%,100% 100%,0 100%,0 75%,5% 75%,5% 95%,25% 95%,25% 100%,0 100%)}.scan-caption{position:absolute;bottom:16px;left:16px;right:16px;text-align:center;z-index:4;font-size:11px;font-weight:600;color:white;text-shadow:0 1px 3px #0008}.camera-controls{display:flex;gap:10px;align-items:center;margin-top:14px;flex-wrap:wrap}.camera-controls .btn-primary{flex:1}.camera-controls .btn-secondary{padding:13px 16px}.orientation-tip{padding:16px 18px;background:#edf0ff;border-radius:16px;display:flex;gap:12px;font-size:13px;line-height:1.5;color:#4562a5;margin-bottom:19px}.orientation-tip svg{flex:none;margin-top:2px}.side-card{padding:23px;border-radius:24px;border:1px solid var(--line);background:#fff}.side-card h3{font-size:17px}.side-card>p{font-size:12px;line-height:1.6;color:#8190a0;margin-top:8px}.face-grid{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:5px;width:min(100%,244px);margin:21px auto;padding:7px;background:#203149;border-radius:15px;aspect-ratio:1}.sticker{position:relative;border:1px solid #0000000c;border-radius:6px;min-width:0;aspect-ratio:1;padding:0;box-shadow:inset 0 2px 1px #ffffff30}.sticker.uncertain:after{content:'?';font-size:12px;font-weight:900;color:#14243b;background:#fff9;position:absolute;inset:26%;border-radius:50%;display:flex;align-items:center;justify-content:center}.sticker.active{outline:3px solid #b48aee;outline-offset:-3px}.palette{display:flex;gap:7px;justify-content:center;margin:17px 0}.swatch{height:33px;width:33px;border-radius:50%;border:1.5px solid #00000014;position:relative;box-shadow:inset 0 2px 0 #ffffff40}.swatch.selected:after{content:'';position:absolute;inset:-5px;border:2px solid var(--ink);border-radius:50%}.palette-label{text-align:center;font-size:11px;color:#8994a1;margin:10px 0 17px}.hint{padding:13px 15px;background:#f9f5e9;border-radius:13px;font-size:12px;line-height:1.6;color:#9c7c39;margin:14px 0}.hint.error{background:#fff0ee;color:#b6554b}.hint.success{background:#e9f6ec;color:#38845d}.small-muted{font-size:11px;color:#8a96a2;line-height:1.55}.manual-toggle{display:block;background:none;color:#7587a0;text-align:center;margin:10px auto;padding:10px;font-size:12px;text-decoration:underline;text-underline-offset:3px;min-height:44px}.face-nav{margin:24px 0;display:flex;justify-content:space-between;gap:10px}.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin:26px 0}.review-face{background:white;border:1px solid var(--line);padding:17px;border-radius:20px}.review-face h3{font-size:13px;display:flex;justify-content:space-between;align-items:center}.review-face h3 span{font-size:10px;color:#99a4b0}.review-face .face-grid{width:100%;max-width:175px;margin:15px auto 0;padding:6px;gap:4px;border-radius:12px}.review-face .sticker{border-radius:4px}.counts{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0}.count-pill{display:flex;align-items:center;gap:7px;border-radius:100px;border:1px solid var(--line);background:#fff;padding:8px 12px;font-size:12px;color:#657588}.count-pill i{width:13px;height:13px;border:1px solid #0001;border-radius:50%;display:inline-block}.count-pill.invalid{border-color:#f2aaa0;background:#fff1ee;color:#ba5a4a}.review-actions{display:flex;gap:15px;align-items:center;justify-content:center;margin:25px 0}.center{text-align:center}.busy-view{max-width:600px;margin:40px auto;text-align:center}.busy-view h1{font-size:33px;letter-spacing:-1px;margin:15px 0}.busy-view p{color:#7e8b9a;line-height:1.6;font-size:14px}.spinner{height:46px;width:46px;border:4px solid #e0e5ee;border-top-color:var(--blue);border-radius:50%;animation:spin 1s linear infinite;margin:25px auto}.busy-view canvas{width:100%;height:270px}.player-layout{display:grid;grid-template-columns:1.2fr 1fr;gap:26px;align-items:center;margin:22px 0}.cube-stage{position:relative;min-height:340px;background:#ebece660;border:1px solid #e5e8e4;border-radius:30px;overflow:hidden}.cube-stage:before{content:'';position:absolute;inset:0;background-image:radial-gradient(#c8cfca 1px,transparent 1px);background-size:18px 18px;opacity:.4}.cube-stage canvas{position:relative;width:100%;height:350px;z-index:1;touch-action:none}.stage-hint{position:absolute;left:0;bottom:18px;right:0;text-align:center;color:#7f8b94;font-size:11px;z-index:2}.move-card{border:1px solid var(--line);background:white;border-radius:26px;padding:26px}.move-overline{color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase}.move-title{font-size:29px;line-height:1.2;letter-spacing:-.7px;margin:13px 0}.move-description{font-size:14px;line-height:1.65;color:#758499;min-height:63px}.move-symbol{display:inline-flex;align-items:center;justify-content:center;background:#f0f3f7;color:#758497;font-size:13px;font-family:monospace;min-width:38px;border-radius:10px;padding:8px 12px;margin:17px 0}.move-card .btn{margin-top:12px}.progress-track{background:#e1e6e5;border-radius:12px;height:7px;overflow:hidden;margin:18px 0 9px}.progress-fill{height:100%;background:#69ad87;border-radius:12px;transition:width .3s}.progress-meta{display:flex;justify-content:space-between;font-size:11px;color:#8b98a4}.player-tools{display:flex;justify-content:space-between;gap:10px;margin:20px 0}.player-tools .btn{font-size:12px;min-height:46px;padding:12px 15px}.check-grip{font-size:13px;display:flex;align-items:flex-start;gap:10px;line-height:1.5;background:#f7f7ef;border-radius:15px;padding:14px;margin:17px 0}.check-grip input{height:20px;width:20px;flex:none;accent-color:var(--blue)}.celebrate{max-width:670px;text-align:center;margin:30px auto}.celebrate h1{font-size:45px;letter-spacing:-1.5px;margin:10px 0}.celebrate>p{font-size:16px;line-height:1.6;color:#788698}.celebrate canvas{height:290px;width:100%;max-width:410px}.celebrate .stars{font-size:28px;letter-spacing:10px;color:#e4a941;margin:16px}.celebrate .btn{margin:25px 8px 10px}.finish-note{font-size:12px!important}.toast{position:fixed;left:50%;transform:translateX(-50%) translateY(16px);bottom:28px;max-width:min(90vw,500px);background:#172a42;color:#fff;padding:13px 19px;border-radius:14px;z-index:100;font-size:13px;line-height:1.45;opacity:0;transition:.2s;pointer-events:none}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}.modal-scrim{position:fixed;inset:0;background:#14243a70;backdrop-filter:blur(4px);z-index:90;display:flex;align-items:center;justify-content:center;padding:22px}.modal{max-width:500px;width:100%;max-height:90dvh;overflow:auto;background:#fcfbf7;border-radius:28px;padding:28px}.modal-top{display:flex;align-items:center;justify-content:space-between;gap:15px}.modal h2{font-size:25px;letter-spacing:-.5px}.modal p{font-size:13px;line-height:1.7;color:#758294;margin-top:14px}.modal h3{font-size:14px;margin-top:23px}.modal .btn{margin-top:16px}.modal-actions{display:flex;gap:10px;flex-wrap:wrap}.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:17px 0;border-bottom:1px solid var(--line)}.toggle-row strong{font-size:14px}.toggle-row small{font-size:11px;color:var(--muted);display:block;margin-top:5px;line-height:1.5}.toggle-row input{width:21px;height:21px;accent-color:var(--blue)}.crop-tools{display:flex;gap:10px;align-items:center;padding:10px 5px}.crop-tools input{width:100%;accent-color:var(--blue)}.crop-tools span{font-size:11px;color:#718096;white-space:nowrap}.camera-stage.dragging{cursor:grabbing}.camera-stage.editable-photo{touch-action:none;cursor:grab}.camera-stage.editable-photo canvas{pointer-events:none}.hidden{display:none!important}.fade-in{animation:enter .25s ease-out}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.confetti-piece{position:fixed;width:8px;height:12px;z-index:80;top:-20px;animation:confetti 2.7s ease-in forwards;pointer-events:none}.mobile-only{display:none}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes confetti{to{transform:translate(var(--drift),105dvh) rotate(600deg);opacity:0}}
@media(max-width:780px){.shell{padding:0 23px 28px}.topbar{height:88px}.hero{grid-template-columns:1fr 1fr;gap:0}.hero h1{font-size:43px;letter-spacing:-1.6px}.hero p{font-size:14px}.hero-art{min-height:330px}.hero-art canvas{height:300px}.hero-art:before{height:280px;width:280px}.floating-note{font-size:10px;padding:10px}.note-top{top:18px;right:0}.note-bottom{left:0;bottom:24px}.intro-card{padding:17px 14px;gap:10px;flex-direction:column}.intro-card h3{font-size:13px}.intro-card p{font-size:11px}.size-card{min-width:125px;padding:12px;gap:10px}.scan-layout{gap:16px}.side-card{padding:18px}.player-layout{gap:18px}.move-card{padding:22px}.move-title{font-size:25px}.cube-stage canvas{height:320px}.cube-stage{min-height:320px}.page-title{font-size:30px}}
@media(max-width:560px){.shell{padding:0 19px 26px}.topbar{height:80px}.brand img{width:35px;height:35px}.brand strong{font-size:17px}.brand small{font-size:10px}.icon-btn{width:40px;height:40px;border-radius:13px}.top-actions{gap:7px}.hero{display:flex;flex-direction:column;align-items:stretch;padding:14px 0 0;min-height:auto}.hero-copy{display:contents}.eyebrow{font-size:9px;letter-spacing:1.2px;order:0;margin-top:4px}.hero h1{font-size:43px;line-height:1.08;letter-spacing:-1.7px;margin:17px 0 15px;order:1;max-width:360px}.hero p{font-size:14px;line-height:1.6;order:2;max-width:310px}.hero-art{order:3;min-height:235px;margin-top:6px}.hero-art canvas{height:245px;width:290px}.hero-art:before{width:227px;height:227px;background-size:15px 15px}.floating-note{font-size:10px;padding:9px 11px;border-radius:10px}.note-top{top:32px;right:0}.note-bottom{left:0;bottom:25px}.spark{right:8px;bottom:35px;font-size:27px}.selection-label{order:4;margin:11px 0 11px;font-size:12px}.size-options{order:5;gap:10px}.size-card{flex:1;padding:14px 17px;border-radius:15px;gap:15px}.size-card strong{font-size:17px}.size-card small{font-size:10px}.start-row{order:6;gap:9px;margin-top:17px;display:grid;grid-template-columns:1fr}.start-row .btn-primary{width:100%;min-height:58px}.start-row .btn-subtle{justify-self:center;padding:12px 0}.intro-steps{gap:8px;margin:15px 0 24px}.intro-card{padding:14px 11px;border-radius:17px;gap:10px}.step-icon{width:33px;height:33px;border-radius:10px}.step-icon svg{width:19px;height:19px}.intro-card h3{font-size:11px;line-height:1.4;margin:0}.intro-card p{display:none}.footer{font-size:10px;flex-wrap:wrap;gap:2px}.footer button{font-size:10px}.resume-strip{font-size:12px;padding:13px;gap:6px}.resume-strip strong{font-size:12px}.resume-strip .btn{font-size:11px;padding:10px;min-height:40px}.workspace{padding-top:0}.page-top{margin-bottom:13px}.page-title{font-size:29px}.page-desc{font-size:13px;margin-top:9px}.face-progress{margin:18px 0;gap:6px}.face-progress button{min-width:34px;height:34px;font-size:11px;border-radius:10px;padding:7px}.scan-layout{grid-template-columns:1fr;gap:18px;margin:15px 0}.camera-stage{border-radius:21px;max-width:100%}.camera-controls .btn{font-size:13px}.orientation-tip{margin-bottom:13px;font-size:12px;padding:13px 14px}.side-card{padding:20px}.side-card h3{font-size:16px}.side-card .face-grid{width:215px;margin:19px auto}.palette{gap:11px}.swatch{width:35px;height:35px}.face-nav{margin:18px 0}.review-grid{grid-template-columns:repeat(2,1fr);gap:11px;margin-top:21px}.review-face{padding:13px;border-radius:17px}.review-face h3{font-size:11px}.review-face .face-grid{gap:3px;padding:5px;margin-top:12px}.counts{gap:6px;justify-content:center}.count-pill{font-size:11px;padding:7px 10px}.review-actions{flex-direction:column;gap:5px}.review-actions .btn-primary{width:100%}.player-layout{grid-template-columns:1fr;gap:17px;margin-top:16px}.cube-stage{min-height:260px;border-radius:25px}.cube-stage canvas{height:270px}.move-card{padding:21px}.move-title{font-size:27px;margin:11px 0}.move-description{font-size:13px;min-height:auto}.move-symbol{margin:13px 0 0;font-size:11px;padding:6px 10px;position:absolute;right:21px;top:12px}.move-card{position:relative}.move-card .btn{min-height:54px;font-size:15px;margin-top:12px}.stage-hint{bottom:13px;font-size:10px}.player-tools{margin:16px 0;gap:8px}.player-tools .btn{font-size:11px;padding:12px;flex:1;gap:6px}.progress-meta{font-size:10px}.celebrate{margin-top:22px}.celebrate h1{font-size:37px}.celebrate>p{font-size:14px}.celebrate canvas{height:260px}.celebrate .btn{margin:20px 0 5px;width:100%}.celebrate .stars{font-size:26px}.modal{padding:23px;border-radius:24px}.modal h2{font-size:22px}.modal-scrim{padding:16px}.badge{padding:7px 9px;font-size:10px}.mobile-only{display:block}.busy-view{margin:35px auto}.busy-view h1{font-size:29px}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
.palette{gap:5px}.swatch{width:44px;height:44px;flex:none}.side-card .face-grid{width:min(100%,252px)}
@media(max-width:560px){.swatch{width:44px;height:44px}.side-card .face-grid{width:245px}.face-progress button{height:44px;min-width:38px}.btn-small{min-height:48px}}

.view-tools{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:13px}.view-note{text-align:center;font-size:11px;color:var(--muted);line-height:1.5;margin:11px 10px 0}.player-visual{min-width:0}