:root{font-family:system-ui,"Microsoft YaHei",sans-serif;color:#eef2fa;background:#111a29;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}button{font:inherit}#selection{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px max(24px,env(safe-area-inset-right));background:radial-gradient(ellipse at 20% 10%,#273c54 0,transparent 55%),radial-gradient(ellipse at 80% 95%,#38304a 0,transparent 55%),#111a29}.intro{text-align:center}.eyebrow{color:#adc0d4;font-size:13px;letter-spacing:.18em}h1{font-size:clamp(25px,4vw,38px);letter-spacing:.06em;margin:12px 0}p{color:#a9b8ca;font-size:14px}.choices{display:grid;grid-template-columns:repeat(2,minmax(220px,320px));gap:22px;margin:24px 0}.choice{border:1px solid #7d93af40;border-radius:22px;background:#26344c75;color:#fff;padding:0;text-align:left;overflow:hidden;cursor:pointer;transition:transform .18s,border-color .18s;box-shadow:0 18px 45px #0003}.choice:hover,.choice:focus-visible{transform:translateY(-4px);border-color:#9fbee9;outline:3px solid #a8cbed44;outline-offset:3px}.choice:disabled{opacity:.7;cursor:wait}.choice strong,.choice small,.enter{display:block;padding:0 24px}.choice strong{font-size:23px;margin-top:20px}.choice small{color:#b9c6d6;font-size:13px;margin-top:8px}.enter{margin:24px 0;font-size:14px;display:flex;justify-content:space-between;align-items:center}.enter b{font-size:20px}.swatch{height:120px;display:flex;gap:16px;align-items:flex-end;justify-content:center;padding-bottom:14px;position:relative;overflow:hidden}.realistic .swatch{background:linear-gradient(125deg,#42516a,#8c7770)}.cel .swatch{background:linear-gradient(125deg,#9fcae5,#e3b691)}.swatch:before{content:"";position:absolute;border:1px solid #fff2;border-radius:100%;width:220px;height:220px;top:10px}.swatch i{display:block;width:30px;height:62px;background:linear-gradient(#efd3b6 30%,#b2b6bd 30%);border-radius:40% 40% 20% 20%;box-shadow:5px 7px 12px #1521334d;z-index:1}.swatch i:first-child{height:76px;background:linear-gradient(#ecd1ac 28%,#d4bd70 28%,#d4bd70 62%,#bcb6ad 62%)}.swatch i:last-child{height:48px;background:linear-gradient(#c5ae91 38%,#e2d8bc 38%);width:35px}.cel .swatch i{box-shadow:3px 4px 0 #28344d55;outline:1px solid #33465c99}.cel{background:#41384b75}.cel small{color:#d4c9d7}#status{min-height:20px;margin:0}#viewer-host{position:fixed;inset:0;background:#111a29}#viewer-host iframe{display:block;border:0;width:100%;height:100%;background:#111a29}#viewer-host[hidden],#selection[hidden]{display:none!important}@media(max-height:520px) and (orientation:landscape){#selection{flex-direction:row;gap:35px}.intro{max-width:200px}.choices{margin:0;grid-template-columns:repeat(2,minmax(190px,260px));gap:16px}.swatch{height:80px}.choice strong{margin-top:12px;font-size:20px}.enter{margin:15px 0}#status{position:fixed;bottom:9px}}@media(max-width:500px) and (orientation:portrait){.choices{grid-template-columns:repeat(2,minmax(130px,1fr));width:100%;gap:12px}.choice strong,.choice small,.enter{padding:0 14px}.choice strong{font-size:19px}.choice small{line-height:1.7}.swatch{height:100px}.swatch i{width:25px}.swatch{gap:10px}}

/* Third style keeps the existing two cards and viewer sizing. */
.choices{grid-template-columns:repeat(3,minmax(220px,320px))}.handmade{background:#453c3375}.handmade .swatch{background:linear-gradient(125deg,#c3b096,#e4cbbb)}.handmade .swatch i{box-shadow:3px 5px 9px #493b2d55}.handmade small{color:#e4d8c4}@media(max-height:520px) and (orientation:landscape){#selection{gap:18px;padding:18px}.intro{max-width:155px}.choices{grid-template-columns:repeat(3,minmax(150px,230px));gap:12px}.choice strong,.choice small,.enter{padding-left:16px;padding-right:16px}}@media(max-width:760px) and (orientation:portrait){#selection{overflow:auto;justify-content:flex-start}.choices{grid-template-columns:1fr;width:min(420px,100%)}.choice{display:grid;grid-template-columns:110px 1fr;grid-template-rows:auto auto auto}.swatch{grid-column:1;grid-row:1/4;height:100%;min-height:126px}.choice strong{margin-top:16px}.choice small{margin-top:5px}.enter{margin:10px 0 14px}.intro{padding-top:12px}}