/* Generated raster scenes; gameplay changes the real product layers. */
.a .start-bg{background-image:url('assets/a-desk-plate-v2.webp');opacity:.37}
.b .start-bg{background-image:url('assets/b-flower-v2.webp');opacity:.2}
.desk-scene{position:relative;width:100%;max-width:960px;aspect-ratio:16/9;margin:auto;overflow:hidden;isolation:isolate;background:#edf3f8;--screen-top:18.5%;--screen-hue:84deg;--screen-saturation:.44;--screen-light:.52}
.desk-plate{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.monitor-panel{position:absolute;left:30%;top:var(--screen-top);width:40%;aspect-ratio:1.715;overflow:hidden;z-index:3;touch-action:none;cursor:grab;transform:translate(-82%,40%) rotate(-12deg) scale(.72);transition:transform .75s,top .35s,filter .65s;filter:hue-rotate(var(--screen-hue)) saturate(var(--screen-saturation)) brightness(var(--screen-light));border-radius:3px}
.monitor-panel img{position:absolute;width:105.05%;max-width:none;left:-2.52%;top:-14.77%;pointer-events:none}
.monitor-base{position:absolute;left:41%;top:53%;width:18%;aspect-ratio:1.493;overflow:hidden;z-index:2;touch-action:none;cursor:grab;transform:translate(190%,-55%) rotate(12deg);transition:transform .75s;filter:drop-shadow(0 4px 3px #26354216)}
.monitor-base img{position:absolute;width:232.56%;max-width:none;left:-66.3%;top:-227%;pointer-events:none}
.monitor-base.placed,.monitor-panel.placed{transform:none}
.monitor-panel.dragging,.monitor-base.dragging{transition:none;cursor:grabbing;z-index:6}
.desk-scene[data-step="3"] .monitor-panel{transition:filter .65s}
.assembly-target{position:absolute;left:30%;top:18.5%;width:40%;aspect-ratio:1.715;border:2px dashed #8d80ab80;border-radius:5px;display:grid;place-items:center;background:#ffffff32;color:#6e6284;font-size:13px}
.base-target{position:absolute;left:41%;top:65%;width:18%;height:9%;border:2px dashed #8d80ab80;display:grid;place-items:center;color:#6e6284;font-size:12px;background:#ffffff32}
.desk-scene:not([data-step="0"]) .assembly-target,.desk-scene:not([data-step="0"]) .base-target{display:none}
.desk-scene:has(.monitor-panel.placed) .assembly-target,.desk-scene:has(.monitor-base.placed) .base-target{opacity:0}
.eye-guide{display:none;position:absolute;left:24%;right:14%;top:10.2%;height:2.6%;background:#658f8726;border-top:1px dashed #507e73;border-bottom:1px dashed #507e73;pointer-events:none;z-index:4}
.eye-guide span{position:absolute;right:0;bottom:calc(100% + 7px);font-size:11px;color:#466c64;background:#ffffffcf;border-radius:20px;padding:4px 8px}
.desk-scene[data-step="3"] .eye-guide{display:block}
.desk-scene.height-matched .eye-guide{background:#80b69a40;border-color:#478766}
.color-reference{position:absolute;left:5%;bottom:14%;width:18%;margin:0;padding:6px 6px 4px;background:#fff;border-radius:5px;box-shadow:0 6px 15px #20334819;display:none;z-index:4}
.desk-scene[data-step="1"] .color-reference,.desk-scene[data-step="2"] .color-reference{display:block}
.reference-photo{width:100%;aspect-ratio:1.83;background:url('assets/a-monitor-v2.webp') 50% 18.4%/107.5% auto;filter:brightness(var(--screen-light))}
.color-reference figcaption{text-align:center;font-size:10px;color:#6d6680;margin:5px 0 0}
.scene-notice{position:absolute;bottom:3%;left:50%;transform:translateX(-50%) translateY(10px);width:max-content;max-width:90%;padding:12px 22px;border:1px solid #ffffffe6;border-radius:30px;background:#fffffff2;box-shadow:0 8px 24px #5f4e6e0e;color:#5a3b80;font-size:15px;opacity:0;transition:opacity .35s,transform .35s;z-index:8;text-align:center}
.improved .scene-notice{opacity:1;transform:translateX(-50%) translateY(0)}
.v2-controls{min-height:109px;padding-top:22px;padding-bottom:22px}
.v2-controls input[type="range"]{width:210px;accent-color:#7855a9;cursor:pointer;min-height:36px}
.v2-controls label,.v2-controls #brightness-label{font-size:14px;color:#554b65}
.range-caption{font-size:11px;color:#938899}
.mood-options{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:10px 30px 0}
.mood-choice{padding:0;text-align:left;border:1px solid #e6dfd6;background:#fffaf5;overflow:hidden;border-radius:10px;color:#423d38;transition:opacity .4s,transform .4s,box-shadow .4s}
.mood-choice img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;transition:transform .65s}
.mood-choice>span{padding:18px 20px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.mood-choice b{font-size:16px;font-weight:550}
.mood-choice em{font-size:12px;color:#877262;white-space:nowrap}
.mood-choice:hover img{transform:scale(1.025)}
.mood-choice:disabled{opacity:1}
.has-choice .mood-choice[aria-pressed="false"]{opacity:.35;transform:scale(.97)}
.has-choice .mood-choice[aria-pressed="true"]{box-shadow:0 0 0 3px #a1886c;transform:scale(1.015)}
.has-choice .mood-choice[aria-pressed="true"] em{font-size:0}
.has-choice .mood-choice[aria-pressed="true"] em:after{content:'已收藏 ✓';font-size:12px}
.mood-feedback{text-align:center;font-size:13px;margin:20px 20px 16px;min-height:24px}
.mood-collection{display:flex;gap:13px;justify-content:center;padding:0 20px 24px}
.mood-stamp{display:flex;flex-direction:column;justify-content:center;align-items:center;min-width:0;width:105px;height:79px;border:1px dashed #ddd0c3;border-radius:4px;position:relative;overflow:hidden;background:#faf8f4;color:#ab9b8e}
.mood-stamp b{font-size:20px;font-weight:400}
.mood-stamp span{font-size:10px;margin-top:5px}
.mood-stamp img{width:100%;height:100%;object-fit:cover}
.mood-stamp.collected span{position:absolute;bottom:0;left:0;right:0;padding:4px;text-align:center;background:#ffffffdf;color:#615345}
.c .hero{text-align:left;background:#f5effa;min-height:600px}
.c .hero-copy{width:48%;padding:40px 0 40px 6%}
.c .hero-copy p{margin-inline:0;max-width:350px}
.c .hero h1 br{display:block}
.c .hero-art{display:block;padding:0;inset:0}
.c .product-hero-image{width:100%;height:100%;object-fit:cover;object-position:center}
@media(max-width:640px){
 .c .hero{min-height:660px}
 .c .hero-copy{width:100%;padding:35px 24px 325px;text-align:left}
 .c .hero-art .product-hero-image{position:absolute;bottom:0;height:340px;object-fit:cover;object-position:80% center}
 .c .hero-art{background:#f9f2fa}
 .mood-options{gap:12px;padding:8px 14px 0;grid-template-columns:1fr}
 .mood-choice{display:grid;grid-template-columns:58% 42%;border-radius:8px}
 .mood-choice>span{padding:12px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
 .mood-choice b{font-size:14px;line-height:1.6}
 .mood-choice em{font-size:11px}
 .mood-feedback{font-size:12px;margin:15px 10px}
 .mood-collection{gap:7px;padding:0 14px 20px}
 .mood-stamp{height:61px;width:80px}
 .mood-stamp span{font-size:8px}
 .v2-controls input[type="range"]{width:145px}
 .v2-controls label,.v2-controls #brightness-label{font-size:12px}
 .v2-controls .primary{font-size:12px;min-height:44px}
 .assembly-target,.base-target{font-size:9px;border-width:1px}
 .color-reference{padding:3px;left:3%;width:22%;bottom:11%}
 .color-reference figcaption{font-size:7px;margin-top:2px}
 .eye-guide span{font-size:8px;padding:2px 5px;bottom:calc(100% + 4px)}
 .scene-notice{font-size:10px;padding:7px 10px}
}