@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;600&display=swap');
:root{color-scheme:dark;--bg:#181c1b;--cream:#eee9dc;--gold:#c6b48b;--muted:#93978e;--line:#ffffff18}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--cream);font-family:"Noto Serif JP","Yu Mincho",serif;font-size:14px}button,input,a{-webkit-tap-highlight-color:transparent}button,a,input{touch-action:manipulation}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:5px}header{max-width:1440px;margin:auto;padding:30px 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.wordmark{font:11px Arial,sans-serif;letter-spacing:2.5px;color:var(--cream);text-decoration:none}.mark{color:var(--gold);font-size:27px;vertical-align:middle;margin-right:13px}.quiet{background:none;border:0;color:#bbbdb2;font-size:11px}main{max-width:1280px;margin:auto;display:grid;grid-template-columns:1.15fr 1fr;gap:9%;padding:38px 5% 55px;align-items:center}.exhibit{position:relative;min-width:0}.exhibit-label{font:9px Arial,sans-serif;letter-spacing:2px;color:#9c9e91;display:flex;justify-content:space-between}.exhibit-label span{color:var(--gold)}.clock-wrap{position:relative;max-width:465px;margin:22px auto 16px;filter:drop-shadow(0 22px 24px #0008);isolation:isolate}.clock-wrap svg{display:block;width:100%;position:relative;z-index:1}.halo{position:absolute;inset:8% -15%;background:radial-gradient(ellipse,#c3b48c12,transparent 65%);z-index:-1}.exhibit-caption{text-align:center;font-size:11px;color:#b1b4a6;letter-spacing:1px}.live-dot{display:inline-block;background:#acb692;width:5px;height:5px;border-radius:50%;margin-right:8px}.controls{padding-top:15px}.eyebrow{font:9px Arial,sans-serif;letter-spacing:2.1px;color:var(--gold);margin-bottom:24px}h1{font-weight:400;font-size:44px;letter-spacing:5px;margin:0 0 22px;line-height:1.5}h1 span{display:block;font-size:17px;letter-spacing:3px;margin-top:8px}.intro{font-size:12px;line-height:2.1;color:#a9ada1;margin:0}.time-panel{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:27px 0 24px;padding:20px 0;display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px}#date{font-size:10px;color:#a6aa9f;letter-spacing:1px}#digital{font:36px Georgia,serif;font-variant-numeric:tabular-nums;grid-row:1/3;grid-column:2;letter-spacing:1px}#digital span{font-size:21px;color:#a5a99b}#next{font:10px Arial,sans-serif;color:var(--gold)}.primary{width:100%;border:1px solid #d7c7a1;background:#cbb991;color:#222720;padding:18px 17px;display:flex;align-items:center;gap:13px;font-size:12px;letter-spacing:1px;transition:background .2s}.primary:hover{background:#e5d3ad}.play-icon{font:11px Arial}.duration{margin-left:auto;font:10px Arial;letter-spacing:1px;opacity:.65}.progress{height:2px;background:#ffffff0a}#progress{height:100%;width:0;background:#f3dfae}.status{font-family:Arial,sans-serif;font-size:10px;line-height:1.7;min-height:28px;color:#989e91;margin:11px 0 12px}.settings{border-top:1px solid var(--line)}.row{position:relative;display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--line);cursor:pointer;gap:10px}.row b{font-weight:400;font-size:12px}.row small{display:block;font-family:Arial,sans-serif;font-size:9px;color:#8f9589;margin-top:5px}.row input{position:absolute;right:0;opacity:0;width:42px;height:28px;cursor:pointer}.row i{width:34px;height:19px;border-radius:20px;background:#3d443d;position:relative;pointer-events:none;flex-shrink:0;transition:.2s}.row i:before{content:"";position:absolute;width:13px;height:13px;left:3px;top:3px;background:#a2a79c;border-radius:50%;transition:.2s}.row input:checked+i{background:#b6a37a}.row input:checked+i:before{transform:translateX(15px);background:#f8f0df}.row input:focus-visible+i{outline:2px solid white;outline-offset:3px}.volume{display:flex;gap:18px;align-items:center;font:10px Arial,sans-serif;color:#a3aa9c;padding:20px 0}input[type=range]{flex:1;min-width:40px;accent-color:var(--gold);height:3px}#volLabel{width:28px}.small-actions{display:flex;justify-content:space-between;gap:14px;padding:5px 0 19px}.small-actions button{background:none;color:#bebda8;border:0;padding:0;font-size:10px;text-align:left}details{border-top:1px solid var(--line);padding-top:15px;color:#888f82;font-family:Arial,sans-serif;font-size:10px;line-height:1.9}summary{cursor:pointer;color:#a7ad9f}details p{margin-bottom:0}footer{max-width:1280px;margin:auto;padding:22px 5%;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:#747c70;font-size:9px}footer span:last-child{font:8px Arial;letter-spacing:1.6px}dialog{background:#1d2420;border:1px solid #797459;color:var(--cream);width:min(500px,94vw);padding:18px;max-height:94dvh}dialog::backdrop{background:#000c;backdrop-filter:blur(8px)}.modal-head{display:flex;align-items:center;justify-content:space-between;font:10px Arial;letter-spacing:1px;margin-bottom:14px}.modal-head button{border:0;background:none;color:white;padding:9px}video{width:100%;max-height:72dvh}dialog p{font-size:10px;color:var(--muted)}.rosette{transform-box:fill-box;transform-origin:center}.playing .left{animation:spin 5s linear infinite}.playing .right{animation:spin 5s linear infinite reverse}.playing .jewel{animation:spin 7s linear infinite;transform-box:fill-box;transform-origin:center}.playing #pendulum{animation:sway 3.8s ease-in-out infinite;transform-origin:0 -40px}.playing .live-dot{background:#e3d3a2;box-shadow:0 0 10px #ddc888}.focus header,.focus .controls,.focus footer,.focus .exhibit-label,.focus .exhibit-caption{display:none}.focus main{display:block;padding:0}.focus .clock-wrap{height:94dvh;width:auto;max-width:none;margin:2dvh auto}.focus #clock{height:100%;width:auto;max-width:100%;margin:auto}#exitFocus{display:none;position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:4;border:1px solid #fff3;border-radius:30px;padding:11px 20px;background:#1c211ce8;color:#ddd5bf;font-size:11px}.focus #exitFocus{display:block}@keyframes spin{to{transform:rotate(360deg)}}@keyframes sway{0%,100%{transform:rotate(-13deg) scaleX(.65)}50%{transform:rotate(13deg) scaleX(1)}}@media(min-width:1400px){main{gap:12%}.clock-wrap{max-width:480px}}@media(max-width:760px){header{padding:16px 6%}.wordmark{font-size:8px;letter-spacing:1.6px}.mark{font-size:23px;margin-right:6px}.quiet{font-size:9px}main{grid-template-columns:1fr;padding:23px 7% 35px;gap:32px}.exhibit-label{font-size:8px}.clock-wrap{max-width:342px;margin:18px auto 16px}.controls{max-width:470px;width:100%;margin:auto;padding-top:0}.eyebrow{margin-bottom:15px;font-size:8px}h1{font-size:35px;margin-bottom:15px}h1 span{font-size:15px}.intro{font-size:11px}.time-panel{margin:22px 0 20px}.row b{font-size:12px}.row small{font-size:10px}.status{font-size:11px}details{font-size:11px}.small-actions button{font-size:11px}footer{padding:20px 7%;font-size:8px}footer span:last-child{font-size:6px;max-width:120px;text-align:right;line-height:1.7}}

/* The disk carries its jewels; they do not spin independently. */
.playing .jewel{animation:none}.playing #pendulum{animation:none}details a{color:#cbb991}#clockWrap{contain:layout style}

.music-box{border:1px solid var(--line);padding:15px 14px;margin:0 0 18px;background:#ffffff03}.music-top{display:flex;justify-content:space-between;font:9px Arial,sans-serif;letter-spacing:1.6px;color:var(--gold);margin-bottom:12px}.track-picker{display:flex;gap:5px;align-items:center}.track-picker button{color:#cbbb97;background:#ffffff05;border:1px solid var(--line);width:30px;height:36px;font:24px Georgia;flex-shrink:0}.track-picker select{min-width:0;flex:1;font-size:12px;padding:9px 7px}.music-box select{background:#222923;color:var(--cream);border:1px solid #ffffff20;border-radius:0;font-family:inherit}.music-box select:focus-visible{outline:2px solid var(--gold)}.music-mode{display:flex;justify-content:space-between;align-items:center;margin-top:12px;gap:10px;color:#aab09f;font-size:10px}.music-mode select{padding:5px;font-size:10px;max-width:70%}#upNext{font-size:10px;color:var(--gold);line-height:1.8;margin:11px 0 8px;overflow-wrap:anywhere}.sample-note{font-family:Arial,sans-serif;font-size:9px;color:#909889;line-height:1.8;margin:0}.controls{padding-top:0}main{align-items:start}.exhibit{position:sticky;top:24px}@media(max-width:760px){.exhibit{position:relative;top:0}.track-picker select{font-size:13px}.sample-note{font-size:10px}.music-box{padding:14px}.music-mode,.music-mode select,#upNext{font-size:11px}}

.rotor-mount{position:absolute;left:34.3%;top:73.4%;width:32.25%;height:16.7%;z-index:2;overflow:hidden;clip-path:polygon(23% 3%,77% 3%,91% 29%,95% 94%,5% 94%,9% 29%);pointer-events:none}.rotor-mount canvas{display:block;width:100%;height:100%}.rotor-ready #lowerAssembly{opacity:0}.inspect-rotor{display:block;margin:0 auto 15px;border:1px solid #b6a68155;background:#ffffff04;color:#cdbd9a;padding:8px 14px;border-radius:22px;font-size:10px;letter-spacing:.7px}.inspect-rotor:hover{background:#c6b48b18}#rotorDialog{width:min(1060px,95vw);padding:22px;overflow:auto}.rotor-comparison{display:grid;grid-template-columns:1.2fr 1fr;gap:20px;align-items:center}#rotorDetail{width:100%;height:390px;background:radial-gradient(ellipse,#4d4b3e,#1d2420 75%);border:1px solid #ffffff15;overflow:hidden}#rotorDetail canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}#rotorDetail canvas:active{cursor:grabbing}.rotor-comparison figure{margin:0}.rotor-comparison img{width:100%;display:block}.rotor-comparison figcaption,#rotorSupport{font:10px Arial,sans-serif;color:#a4ab9b;margin:10px 0}.rotor-actions{display:flex;gap:10px;margin:12px 0 18px}.rotor-actions button{padding:9px 14px;border:1px solid #b9a77b66;color:#d7c8a7;background:#ffffff05;font-size:11px}.rotor-analysis{border-top:1px solid #ffffff18;padding-top:8px}.rotor-analysis p{color:#aab19f;line-height:1.9;font-size:11px;margin:9px 0}.rotor-analysis b{color:#d5c9aa;font-weight:400}@media(max-width:760px){.rotor-comparison{grid-template-columns:1fr;gap:14px}#rotorDetail{height:320px}.rotor-comparison figure{max-width:280px;margin:auto}#rotorDialog{padding:16px}.rotor-analysis p{font-size:11px}.inspect-rotor{font-size:11px}}

.rotor-mount{clip-path:polygon(25% 9%,75% 9%,86% 25%,87% 91%,13% 91%,14% 25%)}

/* Relief uses a few reusable SVG paths and gradients; no extra 3D contexts. */
.focus-launch{display:flex;align-items:center;gap:12px;justify-content:center;min-width:265px;min-height:58px;padding:14px 24px;border:1px solid #eadab7;background:linear-gradient(135deg,#e1d3ae,#b7a172);color:#17221c;font-size:19px;font-weight:600;letter-spacing:1px;box-shadow:0 4px 16px #0004,inset 0 1px #fff7}.focus-launch>span{font:26px Arial}.focus-launch small{font-size:10px;font-weight:400;letter-spacing:0;opacity:.7}.focus-launch:hover{filter:brightness(1.08)}.random-play{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;margin:10px 0 0;border:1px solid #92b2bd66;background:linear-gradient(135deg,#2b3b3c,#202e30);color:#d0e6e9;padding:13px 15px;font-size:13px}.random-play>span{font:23px Arial}.random-play small{font:10px Arial;color:#98b3ba}.random-play:hover{background:#344e52}.focus .inspect-rotor{display:none}.focus .exhibit{position:relative;top:auto}.focus .clock-wrap{width:min(96vw,calc(94dvh * 1085 / 1527));height:auto;aspect-ratio:1085/1527;max-width:none;margin:2dvh auto}.focus #clock{width:100%;height:auto;max-width:none}.focus #exitFocus{font-size:13px;padding:12px 23px}.focus main{max-width:none}.rosette{will-change:transform}#hour,#minute,#second{will-change:transform}@media(max-width:760px){header{flex-wrap:wrap;gap:15px;padding:16px 6%}.focus-launch{width:100%;min-height:58px;font-size:20px}.focus-launch small{font-size:11px}.wordmark{font-size:9px}.random-play{font-size:14px;padding:14px}.random-play small{font-size:10px}}

.playing .left,.playing .right{animation-duration:5s}