/* v2's quiet desktop: v1 rosewood menu and the approved walnut clock. */
html,body{width:100%;height:100%;overflow:hidden;background:#101b1d}
.viewer{height:100dvh;min-height:0;justify-content:center}
.picture-wrap{height:100dvh;min-height:0;padding:0;background:#101b1d}
#scene{width:min(100vw,177.777778dvh);max-height:100dvh;box-shadow:none}
#desk-clock{left:7.2%;top:87.8%;width:11%;aspect-ratio:1706/922;background:none;transform:none;user-select:none;-webkit-user-select:none}
.walnut-clock-shell{display:block;width:100%;height:100%;pointer-events:none;filter:brightness(var(--walnut-light,1)) saturate(var(--walnut-saturation,1))}
#desk-clock .clock-glass{position:absolute;left:37.5%;top:44%;width:37%;height:25%;display:flex;align-items:center;justify-content:center;pointer-events:none;transform:matrix(1,-.103,.16,1,0,0);transform-origin:top left}
#clock-time{position:static;display:flex;align-items:center;justify-content:center;width:100%;height:100%;gap:5%;filter:drop-shadow(0 0 .035cqw #f9deac28)}
#clock-time .digit{height:100%;width:auto;flex:0 1 auto}
#clock-time .digit:has(circle){width:auto}
#clock-time .on,#clock-time circle{fill:var(--walnut-digits,#e9d7aa)}
#clock-time .off{fill:transparent}
#scene[data-period="morning"]{--walnut-light:.98;--walnut-saturation:.9;--walnut-digits:#e0d4b5}
#scene[data-period="dusk"]{--walnut-light:.84;--walnut-saturation:1.02;--walnut-digits:#e6cdaa}
#scene[data-period="night"]{--walnut-light:.72;--walnut-saturation:.9;--walnut-digits:#dbc396}
#scene[data-period="late"]{--walnut-light:.62;--walnut-saturation:.85;--walnut-digits:#c5b28d}
#mood-boards{position:absolute;z-index:6;left:43%;right:5%;top:0;display:flex;justify-content:space-between;align-items:flex-start;transform:translateY(-125%);opacity:0;visibility:hidden;pointer-events:none;transition:transform .65s cubic-bezier(.22,.7,.25,1),opacity .45s,visibility 0s .65s}
#mood-boards[data-open=true]{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
.mood-tag{position:relative;margin-top:8%;padding:1.1cqw .75cqw;border:1px solid #a87b4b;border-radius:.38cqw .38cqw .6cqw .6cqw;background-image:linear-gradient(100deg,#ffddae24,transparent 18% 72%,#0f030a66),url('assets/interface-v1/rosewood.webp');background-size:100% 100%,220% 150%;background-position:center,12% 20%;font-family:'KaiTi','STKaiti',serif;font-size:1.45cqw;letter-spacing:.2em;writing-mode:vertical-rl;box-shadow:inset .12cqw .13cqw .15cqw #ffe1a34d,inset -.13cqw -.18cqw .15cqw #10050099,.18cqw .24cqw 0 #31190e,.28cqw .48cqw .6cqw #08101770;color:#e5bb66;text-shadow:0 1px 1px #221007,0 0 .24cqw #edb84842;transition:filter .2s,box-shadow .2s}
.mood-tag:nth-child(even){margin-top:11%}
.mood-tag:nth-child(2){background-position:center,78% 9%}.mood-tag:nth-child(3){background-position:center,38% 60%}.mood-tag:nth-child(4){background-position:center,88% 40%}.mood-tag:nth-child(5){background-position:center,24% 80%}.mood-tag:nth-child(6){background-position:center,66% 88%}.mood-tag:nth-child(7){background-position:center,4% 46%}
.mood-tag:before{content:'';position:absolute;width:.14cqw;height:7cqw;bottom:100%;left:50%;background:repeating-linear-gradient(28deg,#58472a 0 .1cqw,#c0a575 .11cqw .2cqw);box-shadow:.05cqw 0 .12cqw #0005}
.mood-tag:after{content:'';position:absolute;width:.47cqw;height:.47cqw;border:1px solid #bd945b;border-radius:50%;top:.27cqw;left:calc(50% - .235cqw);background:#261c12;box-shadow:inset 0 1px 2px #0009,0 1px 1px #f5ce753d}
.mood-tag:hover,.mood-tag:focus-visible,.mood-tag[aria-pressed=true],.gear-tag[aria-expanded=true]{filter:brightness(1.2);color:#ffe6a3;box-shadow:inset .12cqw .13cqw .15cqw #ffda8270,inset -.13cqw -.18cqw .15cqw #18080099,.18cqw .24cqw 0 #31190e,0 0 .8cqw #ffca6940}
.gear-tag{width:3.15cqw;height:5.9cqw;display:grid;place-items:center;writing-mode:horizontal-tb;padding:1cqw .65cqw}
.gear-tag svg{width:1.8cqw;height:1.8cqw;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
#wood-settings{position:absolute;right:5%;top:23%;z-index:7;width:31cqw;padding:1.35cqw 1.6cqw 1.15cqw;border:1px solid #b792596e;border-radius:.5cqw;background:linear-gradient(110deg,#bc945c18,#190e10b8),url('assets/interface-v1/rosewood.webp') center/cover;color:#f1dfb9;box-shadow:inset 0 1px 0 #f2d3a338,inset 0 0 2cqw #10090b66,.2cqw .3cqw 0 #2a1712,0 .8cqw 2cqw #080b1055;opacity:0;visibility:hidden;transform:translateY(-1cqw);pointer-events:none;transition:opacity .25s,transform .3s,visibility 0s .3s;font-size:.85cqw}
#wood-settings[data-open=true]{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s}
.wood-heading{display:flex;align-items:center;justify-content:space-between;font:1.25cqw 'KaiTi','STKaiti',serif;letter-spacing:.18em;margin-bottom:1.25cqw}
.wood-heading button{border:0;background:none;color:#c9b491;padding:0 .25cqw;font:1.5cqw/1 sans-serif}
.slider-heading{display:flex;align-items:center;gap:.55cqw}.slider-heading output{margin-left:auto;color:#f4dfb7;font-variant-numeric:tabular-nums}
#wood-settings #selected-time{font-size:1.3cqw}#wood-settings #period-label{font-size:.75cqw;color:#cbb48e}
#wood-settings .timeline-wrap{margin-top:.6cqw}
#wood-settings .timeline-band{top:.5cqw;height:.45cqw;box-shadow:inset 0 1px 3px #0009;filter:saturate(.9)}
#wood-settings #timeline{height:1.45cqw;touch-action:none}
#wood-settings input[type=range]{appearance:none;-webkit-appearance:none;display:block;width:100%;cursor:pointer;border:0;outline-offset:4px}
#wood-settings #timeline::-webkit-slider-runnable-track{height:.45cqw}
#wood-settings input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:1.1cqw;height:1.1cqw;border-radius:50%;border:.18cqw solid #997248;background:#f1d6a0;box-shadow:0 .1cqw .3cqw #0008;margin-top:-.325cqw}
#wood-settings input[type=range]::-moz-range-thumb{width:.75cqw;height:.75cqw;border-radius:50%;border:.18cqw solid #997248;background:#f1d6a0}
#wood-settings #motion-strength{margin:.85cqw 0 .6cqw;height:.45cqw;border-radius:1cqw;background:linear-gradient(90deg,#6c8070,#bcad77 55%,#bf8650);box-shadow:inset 0 1px 3px #0009}
#wood-settings #motion-strength::-webkit-slider-runnable-track{height:.45cqw}
#wood-settings .ticks{font-size:.65cqw;color:#bca987;margin-top:.25cqw}
#return-status{margin:.7cqw 0 0;color:#d3bc91;font-size:.73cqw;min-height:1.15cqw}
.wood-divider{height:1px;background:#d9b57630;margin:1cqw 0}
.wood-actions{display:flex;gap:.5cqw;margin-top:1.2cqw}
.wood-actions button{border:1px solid #c9a36544;background:#d9b27609;border-radius:.25cqw;padding:.35cqw .65cqw;font-size:.75cqw;color:#dfcba5}
.wood-actions button:hover{background:#d9b27620}
.wood-note{margin:.8cqw 0 0;font-size:.65cqw;color:#bca787}
#mood-bubbles{position:absolute;inset:0;pointer-events:none;z-index:3;transition:opacity .3s}
.mood-bubble{position:absolute;isolation:isolate;white-space:nowrap;padding:.44em .57em .48em;font:2.1cqw/1.3 'KaiTi','STKaiti',serif;letter-spacing:.08em;color:#fff2cf;transform:translate(-50%,-50%);animation:mood-drift var(--float-duration,12s) cubic-bezier(.4,0,.6,1) var(--float-delay,0s) infinite;will-change:transform}
.bubble-label{position:relative;z-index:2;text-shadow:0 1px 2px #192d3be6,0 0 .22cqw #193145b0;-webkit-text-stroke:.015cqw #4a535951}
.bubble-film{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:47% 53% 50% 50% / 50% 47% 53% 50%;background:radial-gradient(ellipse at center,#24475318 0 38%,#adceea28 75%,#e2f9fa38);box-shadow:inset 0 .08cqw .3cqw #f2ffff45,0 .15cqw .45cqw #12344319;animation:bubble-shape var(--shape-duration,10s) ease-in-out var(--film-delay,0s) infinite alternate}
.bubble-film:before{content:'';position:absolute;inset:-50%;background:radial-gradient(ellipse at 21% 25%,var(--film-0) 0,transparent 46%),radial-gradient(ellipse at 80% 66%,var(--film-1) 0,transparent 43%),radial-gradient(ellipse at 35% 91%,var(--film-2) 0,transparent 40%);background-size:110% 110%,125% 125%,115% 115%;opacity:.49;animation:bubble-colour-flow var(--film-duration,20s) ease-in-out var(--film-delay,0s) infinite alternate;animation-direction:var(--film-direction,normal);will-change:transform}
.bubble-film:after{content:'';position:absolute;inset:0;border-radius:inherit;padding:max(1px,.075cqw);background:conic-gradient(from var(--film-angle,0deg),#fff2c780,var(--film-0),#fbfcffab,var(--film-1),#fff3de66,var(--film-2),var(--film-0));background-size:160% 160%;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;animation:bubble-rim-flow var(--rim-duration,26s) ease-in-out var(--film-delay,0s) infinite alternate;opacity:.85}
.mood-bubble:after{content:'';position:absolute;z-index:1;pointer-events:none;inset:8% 10%;border-radius:50%;background:radial-gradient(ellipse at 25% 14%,#fffefa9c 0 2%,#fffefa40 5%,transparent 17%),radial-gradient(ellipse at 83% 86%,#c6efff50 0,transparent 23%)}
.mood-bubble.long{font-size:1.65cqw;padding:.48em .78em;letter-spacing:.06em}
@keyframes mood-drift{0%,100%{transform:translate(-50%,-50%) translate(var(--x0),var(--y0))}16.667%{transform:translate(-50%,-50%) translate(var(--x1),var(--y1))}33.333%{transform:translate(-50%,-50%) translate(var(--x2),var(--y2))}50%{transform:translate(-50%,-50%) translate(var(--x3),var(--y3))}66.667%{transform:translate(-50%,-50%) translate(var(--x4),var(--y4))}83.333%{transform:translate(-50%,-50%) translate(var(--x5),var(--y5))}}
@keyframes bubble-colour-flow{0%,100%{transform:translate(-5%,-3%) rotate(-18deg);background-position:0% 10%,90% 60%,35% 100%}33%{transform:translate(6%,4%) rotate(24deg);background-position:70% 25%,20% 95%,100% 20%}67%{transform:translate(-2%,7%) rotate(-6deg);background-position:100% 80%,50% 5%,0% 50%}}
@keyframes bubble-rim-flow{from{background-position:0% 30%;filter:hue-rotate(-10deg)}to{background-position:100% 80%;filter:hue-rotate(18deg)}}
@keyframes bubble-shape{from{border-radius:47% 53% 50% 50% / 50% 47% 53% 50%}to{border-radius:51% 49% 47% 53% / 47% 52% 48% 53%}}
.motion-off .mood-bubble,.motion-off .bubble-film,.motion-off .bubble-film:before,.motion-off .bubble-film:after,.ui-paused .mood-bubble,.ui-paused .bubble-film,.ui-paused .bubble-film:before,.ui-paused .bubble-film:after{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){#mood-boards,#wood-settings{transition:none}.mood-bubble,.bubble-film,.bubble-film:before,.bubble-film:after{animation:none}.mood-bubble{transform:translate(-50%,-50%)}}
@media(max-width:600px){#wood-settings{top:20%;right:4%;width:52cqw;padding:1.4cqw 2cqw;font-size:1.5cqw}.wood-heading{font-size:1.9cqw;margin-bottom:1cqw}.wood-heading button{font-size:2.5cqw}#wood-settings #selected-time{font-size:1.9cqw}#wood-settings #period-label,#wood-settings .ticks,#return-status,.wood-note{font-size:1.2cqw}.wood-actions button{font-size:1.3cqw}.wood-note{margin-top:.65cqw}}

/* The original image, clock and all motion retain their 2560x1440 coordinates.
   A separate frame reveals only the generated 80px bands on 16:10 screens. */
.scene-frame{position:relative;width:min(100vw,177.777778dvh);aspect-ratio:16/9;flex-shrink:0;display:flex;align-items:center;isolation:isolate;overflow:hidden}
.scene-frame #scene{width:100%;height:auto;max-height:none;flex-shrink:0}
#scene-extension{display:none;position:absolute;inset:0;width:100%;height:100%;pointer-events:none;user-select:none}
/* Allow the small ratio rounding of a maximized 2558x1599 window. */
@media (min-aspect-ratio:159/100) and (max-aspect-ratio:161/100){
 .picture-wrap{overflow:hidden}
 .scene-frame{width:max(100vw,160dvh);aspect-ratio:16/10}
 #scene-extension{display:block}
 /* Ropes pass through the extra 80px above the original painting. The outer
    frame clips them at the actual screen edge; cards keep their desk-relative
    positions and the closed menu retains its existing hidden state. */
 .scene-frame #scene{overflow:visible}
 .mood-tag:before{height:10.125cqw}
}