*{box-sizing:border-box} :root{color-scheme:dark;--bg:#111212;--panel:#1a1b1b;--ink:#eeeae5;--muted:#92918c;--accent:#d94a5b;--line:#ffffff1c}body{margin:0;background:var(--bg);color:var(--ink);font-family:'Avenir Next',Avenir,'Helvetica Neue','PingFang SC',sans-serif;font-size:13px}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a{color:inherit}button{cursor:pointer}button{border:0;background:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:5px}button:disabled{opacity:.4;cursor:wait}a{text-decoration:none}header{height:104px;display:flex;align-items:center;justify-content:space-between;padding:12px 5%;position:absolute;z-index:4;top:0;width:100%;pointer-events:none}header>*{pointer-events:auto}.brand img{width:150px;height:76px;object-fit:contain}.edition{font-size:9px;letter-spacing:3px;color:var(--muted)}.plain{font-size:11px;letter-spacing:.5px;padding:10px 0}#savedCount{margin-left:10px;border-bottom:1px solid var(--accent);padding:4px}main{max-width:1800px;margin:auto}.studio{display:grid;grid-template-columns:57% 43%;min-height:100svh}.preview{background:#080909;position:relative;padding:120px 7% 25px;min-width:0;display:flex;flex-direction:column;align-items:stretch;overflow:hidden}.stage-top{display:flex;justify-content:space-between;color:#aaa7a2;font-size:9px;position:relative;z-index:2;letter-spacing:1px}.pill{display:flex;align-items:center;gap:7px}.pill i{width:4px;height:4px;background:var(--accent);border-radius:50%}.canvas-wrap{position:relative;display:flex;justify-content:center;align-items:center;flex:1;min-height:360px;padding:20px 0}.halo{position:absolute;width:min(70%,430px);aspect-ratio:1;border-radius:50%;background:#af3c49;box-shadow:0 0 110px #a3293220;transform:translateY(-5%)}#phone{position:relative;z-index:1;height:clamp(360px,57vh,690px);width:auto;max-width:90%;object-fit:contain;filter:drop-shadow(20px 25px 22px #0009)}.vertical-label{position:absolute;left:-15px;writing-mode:vertical-rl;transform:rotate(180deg);font-size:8px;letter-spacing:3px;color:#706e6b}#loading{position:absolute;z-index:2;bottom:25px;background:#111d;padding:10px;border-radius:3px}[hidden]{display:none!important}.preview-caption{position:relative;z-index:2;border-top:1px solid var(--line);padding-top:18px}.eyebrow{font-size:9px;letter-spacing:2px;color:var(--muted);font-weight:500}h2{font-weight:500}.preview-caption h2{font-size:24px;margin:7px 0 0}#designEnglish{font-size:14px;color:#c1bcb6;margin-top:4px}#comboLabel{position:absolute;right:0;top:28px;font-size:10px;color:var(--muted)}.preview-actions{display:flex;gap:20px;margin-top:15px}.primary,.secondary{padding:10px 0;font-size:11px;border-bottom:1px solid #9996}.primary{color:#e98c98;border-color:#d94a5b88}.fine{font-size:8px;color:#666461;margin:16px 0 0}.controls{background:var(--panel);padding:145px 11% 30px;display:flex;flex-direction:column;min-width:0}.chapter-intro h1{font-size:clamp(42px,4.5vw,78px);font-weight:400;line-height:1.04;letter-spacing:-3px;margin:23px 0 16px}.chapter-intro h1 em{font-style:normal;color:#bcb8b1}.sub{font-size:11px;color:var(--muted);line-height:1.8;margin-bottom:26px}.step-nav{display:flex;border-bottom:1px solid var(--line);gap:24px;margin:0 0 24px}.step-nav button{padding:14px 0;color:#777;font-size:10px;white-space:nowrap;border-bottom:2px solid transparent}.step-nav button span{margin-left:5px}.step-nav button.active{border-color:var(--accent);color:var(--ink)}.step-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px;gap:10px}.step-heading h2{font-size:12px;margin:0}.step-heading h2 span{display:none}.step-heading>span{font-size:9px;color:var(--muted)}.search{display:flex;align-items:center;border-bottom:1px solid var(--line);gap:10px;margin-bottom:15px;padding:0 0 10px;color:#aaa}.search input{background:none;border:0;color:var(--ink);width:100%;min-width:0;font-size:11px;outline:none}.search kbd{display:none}.design-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;max-height:273px;overflow:auto;padding:2px 5px 5px 2px;scrollbar-width:thin;scrollbar-color:#555 transparent}.design-card{position:relative;background:#ffffff04;border:1px solid transparent;min-width:0;padding:8px 4px 9px;transition:background .2s}.design-card:hover{background:#ffffff0c}.design-card.selected{border-color:var(--accent);background:#d94a5b0b}.design-card img{width:100%;height:76px;object-fit:contain}.design-card small{position:absolute;top:4px;left:5px;font-size:7px;color:#777}.design-card b{display:block;font-size:9px;font-weight:400;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card-english{display:block;font-size:7px;color:#8f8983;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.colors{display:grid;grid-template-columns:repeat(5,1fr);gap:20px 8px;padding:22px 0}.color-button{font-size:9px;color:var(--muted);padding:5px 0}.swatch{display:block;width:34px;height:34px;border-radius:50%;margin:0 auto 10px;border:5px solid var(--panel);outline:1px solid transparent}.color-button.selected{color:var(--ink)}.color-button.selected .swatch{outline-color:var(--accent)}.materials{display:grid;grid-template-columns:repeat(5,1fr);gap:13px 8px;margin-top:16px}.material{font-size:9px;color:var(--muted);padding:4px;border:1px solid transparent}.material img{width:100%;aspect-ratio:1;object-fit:cover;display:block;margin-bottom:7px}.material.selected{border-color:var(--accent);color:var(--ink)}.no-material{display:flex;align-items:center;gap:12px;text-align:left;width:100%;padding:12px;border:1px solid var(--line)}.no-material.selected{border-color:var(--accent)}.no-material b{font-size:10px;font-weight:400}.no-material small{display:block;font-size:8px;color:var(--muted);margin-top:4px}.clear-icon{font-size:22px}.check{margin-left:auto;visibility:hidden}.selected .check{visibility:visible}.layer-note{display:flex;gap:8px;color:#777;font-size:9px;line-height:1.6;margin-top:14px}.layer-note p{margin:0}.step-footer{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);margin-top:auto;padding-top:18px;gap:10px}.step-footer>span{font-size:8px;color:#777;letter-spacing:1px}.step{margin-bottom:24px;min-height:300px}.step.enter{animation:reveal .35s steps(5,end)}@keyframes reveal{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}footer{display:flex;justify-content:space-between;gap:20px;padding:25px 5%;font-size:8px;color:#696966;letter-spacing:1px;border-top:1px solid var(--line)}#savedPanel{padding:35px 5%;background:#202020}#savedList>div{display:flex;align-items:center;gap:20px;border-top:1px solid var(--line);padding:16px 0;font-size:11px}#savedList>div>div{flex:1}#savedList button{font-size:10px;color:#bbb}#toast{display:none;position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#eee;color:#222;padding:14px 22px;z-index:9;font-size:12px;max-width:90%}.empty{grid-column:1/-1;color:var(--muted);font-size:12px;line-height:1.8}@media(min-width:1500px){.design-grid{max-height:340px}.design-card img{height:110px}}@media(max-width:900px){header{height:84px;padding:8px 5%}.brand img{width:120px;height:65px}.edition{display:none}.studio{grid-template-columns:50% 50%}.preview{padding:105px 8% 25px}.controls{padding:115px 8% 25px}.chapter-intro h1{font-size:44px}.step-nav{gap:15px}.design-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.colors,.materials{grid-template-columns:repeat(5,minmax(0,1fr))}#comboLabel{position:static}.swatch{width:28px;height:28px}.canvas-wrap{min-height:330px}#phone{height:450px;max-width:100%}}@media(max-width:600px){header{position:relative;background:#080909}.studio{display:flex;flex-direction:column;min-height:0}.preview{padding:12px 7% 24px}.canvas-wrap{min-height:320px;padding:15px 0}#phone{height:365px}.halo{width:255px}.preview-caption h2{font-size:20px}.preview-caption{padding-top:12px}#comboLabel{position:absolute;top:23px;font-size:9px}.preview-actions{margin-top:10px}.fine{font-size:8px}.controls{padding:32px 7%}.chapter-intro h1{font-size:48px;margin:14px 0;letter-spacing:-2px}.chapter-intro h1 br{display:none}.chapter-intro h1 em{margin-left:8px}.sub{margin-bottom:16px}.step-nav{gap:32px}.design-grid{grid-template-columns:repeat(4,minmax(0,1fr));max-height:300px}.design-card img{height:95px}.materials{gap:15px}.step{min-height:260px}.step-footer{margin-top:0}footer{flex-wrap:wrap;line-height:1.8}footer span:nth-child(2){display:none}#savedList>div{gap:10px}.vertical-label{left:0}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important}}
@media(min-width:901px) and (max-height:820px){.controls{padding-top:112px;padding-bottom:22px}.chapter-intro h1{font-size:48px;margin:18px 0 12px}.sub{margin-bottom:15px}.step-nav{margin-bottom:18px}.step-nav button{padding:11px 0}.design-grid{max-height:195px}.design-card img{height:68px}.step{min-height:249px;margin-bottom:16px}.preview{padding-top:110px;padding-bottom:18px}#phone{height:49vh}.canvas-wrap{min-height:300px;padding:10px 0}.halo{width:min(65%,370px)}.step-footer{padding-top:10px}.fine{margin-top:12px}}
/* Continuous mixing controls, ordered color / illustration / material. */
header{position:relative;height:64px;background:#080909;padding:0 4%}.edition-mark{font-size:10px;letter-spacing:2px;color:#999}.studio{align-items:start;min-height:calc(100svh - 64px)}.preview{position:sticky;top:0;min-height:calc(100svh - 64px);padding:28px 7% 24px}.controls{padding:24px 9% 30px}.chapter-intro{text-align:center;margin:0 0 24px}.hero-logo{width:min(100%,340px);height:165px;object-fit:contain}.controls>.step{display:block;min-height:0;margin:0 0 24px;padding:0 0 24px;border-bottom:1px solid var(--line)}.controls>.step.last{border:0;margin-bottom:0}.step-heading h2 span{display:inline;margin-right:10px;color:#8b8580;font-size:10px}.colors{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 8px;padding:4px 0}.swatch{width:38px;height:38px;margin-bottom:7px}.color-button{font-size:10px}.design-grid{max-height:275px}.design-card img{height:85px}.canvas-wrap{min-height:360px}#phone{height:clamp(400px,62vh,760px);transition:opacity .18s}.halo{width:min(70%,430px)}#phone.mixing{opacity:.22}#loading{inset:0;bottom:auto;display:flex;align-items:center;justify-content:center;flex-direction:column;background:transparent;gap:20px;color:#f4d5d9;font-size:13px;letter-spacing:2px;pointer-events:none;text-shadow:0 2px 10px #000}.mix-animation{position:relative;width:110px;height:115px;display:block}.shaker{position:absolute;left:22px;top:0;width:32px;height:58px;border:2px solid #f3ccd3;border-radius:7px 7px 12px 12px;background:linear-gradient(90deg,#c55366,#eea0af,#a52c40);transform:rotate(-25deg);animation:shake .55s ease-in-out infinite}.shaker:before{content:'';position:absolute;width:18px;height:11px;border:2px solid #f3ccd3;top:-13px;left:5px;border-radius:4px 4px 0 0}.mix-glass{position:absolute;bottom:15px;right:14px;width:48px;height:35px;border:2px solid #f3ccd3;clip-path:polygon(0 0,100% 0,60% 100%,40% 100%);background:linear-gradient(0deg,#db6279 50%,transparent 50%);animation:fillglass 1.2s ease-in-out infinite}.mix-animation:after{content:'';position:absolute;bottom:0;right:36px;width:2px;height:18px;background:#f3ccd3;box-shadow:0 0 0 0 #f3ccd3}.mix-animation i{position:absolute;width:4px;height:4px;background:#ffccda;border-radius:50%;top:45px;left:65px;animation:pour .8s linear infinite}.mix-animation i:nth-of-type(2){animation-delay:.2s}.mix-animation i:nth-of-type(3){animation-delay:.4s}@keyframes shake{0%,100%{transform:rotate(-25deg) translate(0,0)}50%{transform:rotate(-40deg) translate(-7px,-6px)}}@keyframes pour{from{transform:translate(0,0);opacity:0}30%{opacity:1}to{transform:translate(10px,25px);opacity:0}}@keyframes fillglass{50%{background-position:0 8px;opacity:.7}}@media(max-width:900px){.preview{padding-top:24px}.controls{padding:20px 7%}.hero-logo{height:135px}.design-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.color-button{font-size:9px}.swatch{width:32px;height:32px}}@media(max-width:600px){header{height:52px}.preview{position:relative;min-height:0;padding:14px 7% 24px}.controls{padding:20px 7%}.hero-logo{height:150px}.canvas-wrap{min-height:330px}#phone{height:365px}.halo{width:255px}.design-grid{grid-template-columns:repeat(4,minmax(0,1fr));max-height:300px}.colors{gap:17px 10px}.swatch{width:44px;height:44px}.color-button{font-size:11px}.chapter-intro{margin-bottom:25px}}@media(prefers-reduced-motion:reduce){.mix-animation *{animation:none!important}}
/* Open catalogue with a viewport-sized sticky preview. */
.studio{align-items:start}.preview{position:sticky;top:0;height:100svh;min-height:0;padding:22px 7% 18px;overflow:hidden}.canvas-wrap{flex:1;min-height:0;padding:12px 0}#phone{height:100%;max-height:calc(100svh - 255px);max-width:100%;width:auto;object-fit:contain}.halo{max-height:80%;width:min(70%,430px)}.controls>.step.last{padding-bottom:0}.design-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-height:none;overflow:visible;gap:16px 10px;padding:2px}.design-card{padding:12px 7px}.design-card img{height:145px}.design-card b{font-size:11px}.card-english{font-size:9px;white-space:normal;min-height:24px;line-height:1.35}.materials{grid-template-columns:repeat(5,minmax(0,1fr));margin-top:12px}.no-material{margin-top:17px}.load-progress{width:150px;height:3px;background:#ffffff30;overflow:hidden;border-radius:2px}.load-progress>span{display:block;width:0;height:100%;background:#e991a0;transition:width .15s linear}#loading{gap:16px;font-size:13px;letter-spacing:2px}.footer-logo{width:200px;height:auto;object-fit:contain}footer{align-items:center;padding:24px 5%}footer span{display:block!important;font-size:10px;color:#aaa}@media(max-width:900px){.design-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.design-card img{height:145px}.preview{padding:20px 6%}.footer-logo{width:170px}}@media(max-width:600px){.preview{position:relative;height:auto;min-height:0;padding:14px 7% 24px}.canvas-wrap{height:390px;flex:none}#phone{height:365px;max-height:none}.design-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.design-card img{height:190px}.footer-logo{width:145px}footer{gap:20px;flex-wrap:wrap}footer span{font-size:8px}.materials{grid-template-columns:repeat(5,minmax(0,1fr))}}
.mobile-brand{display:none}.design-grid{--row:210px;grid-auto-rows:var(--row);row-gap:12px;max-height:calc(var(--row)*3 + 24px + 4px);overflow-y:auto;overscroll-behavior-y:contain;scrollbar-width:thin}.design-card{height:var(--row);padding:9px 6px}.design-card img{height:145px}.design-card b{margin-top:5px}.card-english{font-size:9px;line-height:1.2;min-height:0}#loading{inset:auto;top:50%;left:50%;transform:translate(-50%,-50%);width:160px;padding:16px 5px;background:#111b;border-radius:4px;z-index:3}#phone{object-fit:contain}@media(max-width:600px){.mobile-brand{display:flex;height:85px;align-items:center;justify-content:center;background:#080909}.mobile-brand img{width:155px;height:76px;object-fit:contain}header{height:34px;padding:0 6%}.edition{display:none}header .plain{font-size:10px;padding:4px}.studio{display:block}.preview{position:sticky;top:0;z-index:5;height:clamp(235px,38svh,330px);padding:7px 6% 9px;background:#080909;border-bottom:1px solid #ffffff26;display:grid;grid-template-columns:1fr auto;grid-template-rows:20px 1fr 20px;column-gap:12px;overflow:hidden}.stage-top{grid-column:1/-1;font-size:8px}.stage-top .plain{font-size:9px;padding:0}.canvas-wrap{grid-column:1;grid-row:2/4;height:auto;min-height:0;padding:3px;display:flex;align-items:center;justify-content:center}.vertical-label{display:none}#phone{height:100%;max-height:calc(clamp(235px,38svh,330px) - 42px);width:auto;max-width:100%}.halo{width:150px;max-height:80%;box-shadow:none}.preview-caption{grid-column:2;grid-row:2;border:0;padding:0;align-self:center;max-width:130px}.preview-caption h2{font-size:16px;line-height:1.4;margin:5px 0}#designEnglish{font-size:10px;line-height:1.4}#designNumber{font-size:8px}#comboLabel{position:static;font-size:9px;line-height:1.6;margin:7px 0}.preview-actions{grid-column:2;grid-row:3;margin:0;gap:9px;align-self:end}.preview-actions button{font-size:9px;padding:3px 0;white-space:nowrap}.fine{display:none}.controls{padding:20px 6%;overflow:visible}.chapter-intro{display:none}.controls>.step{margin-bottom:19px;padding-bottom:19px}.design-grid{--row:193px;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-height:calc(var(--row)*3 + 20px + 4px)}.design-card img{height:131px}.design-card b{font-size:10px}.card-english{font-size:8px}.design-card{padding:8px 4px}.materials{gap:12px 7px}.swatch{width:37px;height:37px}.colors{gap:12px 6px}.color-button{font-size:10px}.load-progress{width:110px}#loading{width:130px;font-size:11px;gap:10px}.footer-logo{width:140px}}

/* Mobile: generous centered preview, followed by two compact caption lines. */
@media(max-width:600px){
.preview{height:clamp(340px,53svh,460px);grid-template-columns:minmax(0,1fr);grid-template-rows:18px minmax(0,1fr) 38px 22px;gap:3px;padding:6px 5% 8px}
.stage-top{grid-column:1;grid-row:1}.canvas-wrap{grid-column:1;grid-row:2;padding:0;height:100%;min-height:0}
#phone{height:100%;max-height:calc(clamp(340px,53svh,460px) - 101px);max-width:100%}.halo{width:190px}
.preview-caption{grid-column:1;grid-row:3;align-self:center;text-align:center;max-width:none;width:100%;padding:0;overflow:hidden}
.preview-caption>div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:18px}
#designNumber{display:none}.preview-caption h2{display:inline;font-size:13px;line-height:18px;margin:0 7px 0 0}#designEnglish{display:inline;font-size:10px;line-height:18px;margin:0}
#comboLabel{display:block;position:static;line-height:18px;font-size:9px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.preview-actions{grid-column:1;grid-row:4;align-self:center;justify-content:center;gap:24px;margin:0}.preview-actions button{padding:2px 0;font-size:9px}
}