:root{color-scheme:dark;--bg: #090909;--well: #08090a;--metal-light: #eef0f1;--metal-mid: #aeb2b5;--metal-dark: #64696d;--wood-light: #e3a35d;--wood-mid: #b96b27;--wood-dark: #5c2c10;--rod-light: #d69a54;--rod-dark: #6a3515;--text: #ded9d1;--muted: #8d8983;--bead-travel-duration: .46s;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body{min-height:100%}body{min-height:100vh;margin:0;display:grid;place-items:center;padding:44px 28px 64px;color:var(--text);background:radial-gradient(circle at 50% 10%,rgb(255 255 255 / 4%),transparent 32%),var(--bg)}.clock{width:min(1180px,100%)}.title-row{display:flex;align-items:end;justify-content:space-between;gap:24px;margin:0 8px 18px}h1{margin:0;font-size:clamp(1rem,1.8vw,1.35rem);font-weight:560;letter-spacing:.18em;text-transform:uppercase}.title-meta{display:flex;align-items:center;gap:14px}.date{color:var(--muted);font-size:.76rem;letter-spacing:.12em;text-align:right;text-transform:uppercase}.sound-toggle{padding:6px 9px;border:1px solid #414346;border-radius:999px;color:var(--muted);background:#111214;font:inherit;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}.sound-toggle:hover,.sound-toggle[aria-pressed=true]{border-color:#b87938;color:#e3a35d}.sound-toggle:focus-visible{outline:2px solid #e3a35d;outline-offset:3px}.frame{position:relative;padding:22px;border-radius:30px;background:linear-gradient(145deg,#44474a,#17181a 18%,#0d0e0f 55%,#292b2e);box-shadow:inset 0 0 0 2px #ffffff12,inset 0 0 0 8px #0000008c,0 26px 70px #0000008c}.frame:after{content:"";position:absolute;inset:10px;border:1px solid rgb(255 255 255 / 8%);border-radius:21px;pointer-events:none}.soroban,.readout{display:grid;grid-template-columns:repeat(2,minmax(82px,1fr)) 26px repeat(2,minmax(82px,1fr)) 26px repeat(2,minmax(82px,1fr));gap:14px}.soroban{position:relative;height:430px;overflow:hidden;padding:20px 18px 18px;border-radius:18px;background:linear-gradient(90deg,rgb(255 255 255 / 2%) 1px,transparent 1px),radial-gradient(circle at 50% -10%,rgb(255 255 255 / 4%),transparent 48%),var(--well);background-size:12.5% 100%,auto,auto;box-shadow:inset 0 0 0 2px #000000e5,inset 0 12px 28px #000000a6}.divider{position:absolute;z-index:8;top:127px;right:18px;left:18px;height:16px;border:1px solid #505559;border-radius:1px;background:linear-gradient(180deg,var(--metal-light) 0%,#d9dcde 20%,var(--metal-mid) 52%,var(--metal-dark) 80%,#c7cacc 100%);box-shadow:0 2px 4px #000000b8,inset 0 1px #fffffff5}.divider:after{content:"";position:absolute;inset:2px 0 auto;height:1px;background:#ffffff7f}.column{position:relative;z-index:2;display:grid;height:392px;min-width:0;grid-template-rows:124px 16px 1fr;justify-items:center}.rod{position:absolute;z-index:0;top:-20px;bottom:-18px;left:50%;width:12px;transform:translate(-50%);border-radius:5px;background:linear-gradient(90deg,var(--rod-dark),var(--rod-light) 40%,#edb773 52%,#8b4a1e 100%);box-shadow:inset 1px 0 1px #ffffff47,inset -2px 0 2px #00000052,0 0 0 1px #0000008c}.upper-zone,.lower-zone{position:relative;z-index:4;width:100%}.beam-space{height:16px}.bead{position:absolute;left:50%;width:min(96px,88%);height:48px;transform:translate(-50%);clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);background:linear-gradient(180deg,#c97b33 0%,var(--wood-light) 42%,#d88a3d 48%,#8c451b 53%,var(--wood-mid) 58%,var(--wood-dark) 100%);filter:drop-shadow(0 6px 5px rgb(0 0 0 / 34%));transition:top var(--bead-travel-duration) cubic-bezier(.22,.9,.24,1),filter .24s ease}.bead:before{content:"";position:absolute;inset:0;clip-path:inherit;background:linear-gradient(90deg,rgb(54 20 4 / 42%),transparent 20%,rgb(255 225 178 / 26%) 49%,transparent 75%,rgb(47 17 3 / 35%))}.bead:after{content:"";position:absolute;top:49%;right:9%;left:9%;height:2px;background:linear-gradient(90deg,transparent,rgb(255 222 173 / 75%) 14%,rgb(255 233 198 / 90%) 50%,rgb(67 25 5 / 55%) 92%,transparent);box-shadow:0 1px #5621067f,0 -1px #ffffff1f}.bead.inactive{filter:saturate(.72) brightness(.55) drop-shadow(0 5px 5px rgb(0 0 0 / 26%))}.upper-zone .bead{top:12px}.upper-zone .bead.active{top:68px}.lower-zone .bead:nth-child(1){top:60px}.lower-zone .bead:nth-child(2){top:108px}.lower-zone .bead:nth-child(3){top:156px}.lower-zone .bead:nth-child(4){top:204px}.lower-zone .bead.active:nth-child(1){top:-17px}.lower-zone .bead.active:nth-child(2){top:31px}.lower-zone .bead.active:nth-child(3){top:79px}.lower-zone .bead.active:nth-child(4){top:127px}.readout{align-items:start;margin:24px 22px 0}.readout-cell{min-width:0;text-align:center}.digit{display:block;color:#e2ddd5;font-size:clamp(2.15rem,4vw,3.35rem);font-weight:330;font-variant-numeric:tabular-nums;letter-spacing:.02em;line-height:1;text-shadow:0 4px 18px rgb(0 0 0 / 30%)}.label{display:block;margin-top:9px;color:var(--muted);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase}.readout-separator{color:#aaa59e;font-size:2.4rem;font-weight:300;line-height:1;text-align:center;animation:blink 1s steps(1) infinite}@keyframes blink{0%,48%{opacity:1}49%,to{opacity:.28}}@media(max-width:850px){body{padding:24px 14px 42px}.frame{padding:13px;border-radius:22px}.soroban,.readout{grid-template-columns:repeat(2,minmax(48px,1fr)) 12px repeat(2,minmax(48px,1fr)) 12px repeat(2,minmax(48px,1fr));gap:6px}.soroban{height:350px;padding:14px 8px 12px}.divider{top:107px;right:8px;left:8px;height:13px}.column{height:322px;grid-template-rows:100px 13px 1fr}.rod{top:-14px;bottom:-12px;width:8px}.bead{width:94%;height:37px}.upper-zone .bead{top:10px}.upper-zone .bead.active{top:55px}.lower-zone .bead:nth-child(1){top:63px}.lower-zone .bead:nth-child(2){top:100px}.lower-zone .bead:nth-child(3){top:137px}.lower-zone .bead:nth-child(4){top:174px}.lower-zone .bead.active:nth-child(1){top:-7px}.lower-zone .bead.active:nth-child(2){top:30px}.lower-zone .bead.active:nth-child(3){top:67px}.lower-zone .bead.active:nth-child(4){top:104px}.readout{margin:20px 12px 0}.digit{font-size:1.9rem}.label{font-size:.52rem}.readout-separator{font-size:1.7rem}}@media(max-width:560px){.title-row{display:block}.title-meta{justify-content:space-between;margin-top:8px}.date{text-align:left}.soroban{height:318px}.divider{top:96px}.column{height:290px;grid-template-rows:89px 13px 1fr}.rod{bottom:-14px}.bead{height:32px}.upper-zone .bead.active{top:48px}.lower-zone .bead:nth-child(1){top:62px}.lower-zone .bead:nth-child(2){top:94px}.lower-zone .bead:nth-child(3){top:126px}.lower-zone .bead:nth-child(4){top:158px}.lower-zone .bead.active:nth-child(1){top:-7px}.lower-zone .bead.active:nth-child(2){top:25px}.lower-zone .bead.active:nth-child(3){top:57px}.lower-zone .bead.active:nth-child(4){top:89px}.readout{margin-top:18px}.digit{font-size:1.55rem}.readout-separator{font-size:1.4rem}}