@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;600&display=swap');
:root{--bg:#ece9e1;--ink:#342f27;--muted:#817a6d;--line:#d7d1c5;--gold:#9b8150;--serif:'Noto Serif JP','Yu Mincho',serif;--sans:'Noto Sans JP','Yu Gothic',sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.035' filter='url(%23n)'/%3E%3C/svg%3E")}button,input,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #a98042;outline-offset:5px}button:disabled{cursor:wait;opacity:.6}button[hidden]{display:none}a{color:inherit;text-decoration:none}.header{height:100px;margin:0 5.3%;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.brand{font-family:var(--serif);font-size:19px;font-weight:600;letter-spacing:.13em;display:flex;align-items:center;gap:12px}.brand-mark{font-size:30px;font-weight:400;color:#8b7246}.header-note{font-family:var(--serif);font-size:12px;color:var(--muted);letter-spacing:.18em;margin-left:-90px}.text-button{border:0;background:transparent;font-size:12px;color:#615b4f}.text-button span{margin-left:18px;color:var(--gold)}main{max-width:1190px;margin:auto;padding:0 45px}.intro{text-align:center;padding:54px 0 39px}.eyebrow{font-size:10px;letter-spacing:.21em;color:#95815d;font-weight:500}.intro .eyebrow{display:flex;align-items:center;justify-content:center;gap:10px}.intro .eyebrow span{height:5px;width:5px;background:#a38959;transform:rotate(45deg)}h1{font-family:var(--serif);font-weight:500;font-size:45px;letter-spacing:.15em;margin:17px 0 14px}.mobile-break{display:none}.intro p{color:var(--muted);font-family:var(--serif);letter-spacing:.12em;font-size:12px}.experience{display:grid;grid-template-columns:1.12fr 1fr;gap:100px;align-items:center;padding:15px 46px 60px 10px}.clock-scene{position:relative;display:flex;flex-direction:column;align-items:center;padding-top:20px}.clock-case{position:relative;width:338px;height:566px;padding:29px 19px 23px;background:repeating-linear-gradient(91deg,#fff0 0px,#140b0640 2px,#fff0 4px,#ffffff08 6px),linear-gradient(90deg,#33231a,#71533b 7%,#483022 12%,#61442e 49%,#513523 84%,#291e17 94%,#684a33);border-radius:165px 165px 9px 9px;box-shadow:inset 3px 0 3px #b69b6b60,inset -6px 0 5px #140e0b99,11px 18px 30px #47301d26,1px 3px 4px #24170d40;border:1px solid #3b291c;z-index:1}.clock-case:before{content:'';position:absolute;inset:11px 9px 10px;border:1px solid #b4935c55;border-radius:150px 150px 4px 4px;pointer-events:none}.crown{position:absolute;top:-25px;left:calc(50% - 24px);width:48px;height:37px;z-index:-1;background:linear-gradient(90deg,#35241a,#7d5a39,#34231a);border-radius:40% 40% 5px 5px;box-shadow:inset 0 3px #a18457}.crown div{width:22px;height:13px;background:linear-gradient(90deg,#4b3120,#89633f,#3c291c);border-radius:50%;position:absolute;top:-7px;left:13px}.dial-frame{position:relative;width:298px;height:298px;padding:9px;border-radius:50%;background:linear-gradient(140deg,#ccb077,#6f512d 36%,#bb9452 54%,#70502b 80%,#b29359);box-shadow:0 6px 9px #0f0c0a80,inset 0 1px 1px #f3d998;border:2px solid #2e231a}.dial-frame svg{width:100%;display:block;border-radius:50%;box-shadow:0 0 2px 2px #3f2d1c}.dial-brand{font-family:Georgia,serif;font-size:11px;letter-spacing:3px;text-anchor:middle;fill:#756544}.dial-small{font-family:var(--serif);font-size:6px;letter-spacing:1px;text-anchor:middle;fill:#95815c}.hand{fill:#332e25}.pendulum-window{position:relative;height:184px;width:195px;margin:14px auto 0;border:7px solid #3e2a1e;border-radius:14px 14px 55px 55px;background:radial-gradient(ellipse at center,#5b4930,#201b15 80%);box-shadow:inset 0 0 0 2px #967b454a,0 1px 0 #ad855345;overflow:hidden}.window-reflection{position:absolute;inset:0;background:linear-gradient(110deg,transparent 25%,#f6eacb0c 25%,#f6eacb0c 48%,transparent 48%);z-index:2;pointer-events:none}.pendulum{height:174px;width:100%;position:absolute;top:-9px;transform-origin:50% 0%;animation:swing 2s ease-in-out infinite;animation-play-state:paused}.running .pendulum{animation-play-state:running}.rod{position:absolute;width:8px;height:110px;left:calc(50% - 4px);background:linear-gradient(90deg,#6f5529,#d7bf78,#6c4b23)}.bob{position:absolute;width:76px;height:76px;top:92px;left:calc(50% - 38px);border-radius:50%;background:radial-gradient(circle at 38% 28%,#e0c989,#b79548 50%,#76501f 89%);box-shadow:3px 4px 9px #0008,inset 0 0 0 3px #c9a960,inset 0 0 0 5px #806127}.bob span{display:block;position:absolute;inset:12px;border:1px solid #84673190;border-radius:50%}.case-bottom{position:absolute;bottom:7px;left:-11px;right:-11px;height:29px;background:linear-gradient(#78563a,#3c291c 22%,#60432d 50%,#2d2119 90%);border:1px solid #352419;border-radius:3px;box-shadow:0 5px 6px #3d2a2026;text-align:center;color:#a38654;font-size:15px;line-height:27px}.foot{position:absolute;width:36px;height:15px;background:linear-gradient(90deg,#302219,#67482e,#35261b);bottom:-14px;border-radius:0 0 5px 5px}.foot.left{left:24px}.foot.right{right:24px}.clock-shadow{position:absolute;bottom:53px;width:370px;height:35px;border-radius:50%;background:#40302126;filter:blur(14px)}.clock-caption{font-size:10px;letter-spacing:.04em;color:#817968;display:flex;align-items:center;gap:8px;margin-top:40px}.status-dot{width:5px;height:5px;background:#a59b88;border-radius:50%}.status-dot.active{background:#73836b}.control-area{padding:8px 0 0;max-width:374px;width:100%}.control-heading{display:flex;justify-content:space-between;align-items:center}.edition{font-family:Georgia,serif;font-size:11px;color:#a49a87;font-style:italic}.control-area h2{font-family:var(--serif);font-size:32px;letter-spacing:.11em;font-weight:500;margin:16px 0 18px}.description{font-size:12px;color:#7e776b;line-height:2.1;letter-spacing:.05em;margin-bottom:27px}.winding-panel{background:#f6f3ec9c;border:1px solid #d5ccbb;padding:22px 23px 13px;border-radius:3px;box-shadow:0 2px 3px #65523404}.panel-top{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#7c7364}.state-tag{font-size:9px;background:#ded9cf;color:#817765;border-radius:3px;padding:4px 9px;letter-spacing:.06em}.state-tag.active{background:#e1e6da;color:#667759}.remaining{margin:15px 0 17px;display:flex;align-items:baseline;gap:11px;white-space:nowrap}.remaining>span:first-child{font-family:Georgia,'Times New Roman',serif;font-size:36px;letter-spacing:.04em;font-variant-numeric:tabular-nums}.remaining .colon{color:#a79a80;padding:0 3px}.remaining .unit{font-size:10px;color:#978d7b}.power-track{height:4px;background:#ded8cb;border-radius:3px;overflow:hidden}.power-track>div{height:100%;width:0;background:linear-gradient(90deg,#8d7648,#c0a772);transition:width .5s}.scale{display:flex;justify-content:space-between;font-size:7px;color:#a59a88;letter-spacing:.15em;margin-top:7px}.wind-button{width:100%;height:54px;display:flex;align-items:center;justify-content:center;gap:15px;margin-top:20px;color:#f7efdf;background:#453b2e;border:1px solid #3a3024;box-shadow:inset 0 1px 0 #ffffff1c,0 3px 5px #3e312312;border-radius:3px;font-family:var(--serif);font-size:14px;letter-spacing:.12em;transition:background .2s,transform .2s}.wind-button:hover{background:#60503a;transform:translateY(-1px)}.wind-button:active{transform:translateY(1px)}.wind-button svg{width:34px;height:23px;stroke:#d8bd83;stroke-width:1.8;fill:none;flex-shrink:0}.wind-button.winding svg{animation:keyturn .6s ease-in-out 2}.wind-arrow{color:#c9b58c;font-size:24px;margin-left:auto}.wind-button>svg{margin-right:auto}.wind-hint{font-size:9px;text-align:center;color:#9b907e;margin:12px 0 0;min-height:16px}.sound-panel{padding:23px 0 18px;border-bottom:1px solid var(--line)}.sound-top,.sound-top>div{display:flex;align-items:center;justify-content:space-between}.sound-top>div{gap:11px}.sound-top label{font-size:12px}.sound-icon{color:#99835d;font-size:17px}.toggle{border:0;width:33px;height:19px;border-radius:20px;background:#a08c65;padding:3px;position:relative}.toggle span{width:13px;height:13px;background:#faf8f1;border-radius:50%;display:block;margin-left:14px;transition:margin .2s}.toggle[aria-checked=false]{background:#c5beb1}.toggle[aria-checked=false] span{margin-left:0}.volume-row{display:flex;align-items:center;gap:13px;margin:14px 0 10px;color:#9d9382;font-size:9px}.volume-row input{flex:1;accent-color:#9d875c;height:3px;cursor:pointer;min-width:0}.sound-panel p{color:#9a8e7c;font-size:9px;line-height:1.8;margin:10px 0 0}.bell-test,.audio-start{font-size:10px;color:#82704f;border:0;background:none;padding:6px 0;margin:3px 0 0}.bell-test span{margin-left:6px;border-bottom:1px solid #bdb099;padding-bottom:2px}.audio-start{display:block;text-decoration:underline}.next-chime{display:flex;gap:14px;align-items:center;padding:20px 0 10px}.next-icon{font-size:25px;color:#9b875e}.next-label{font-size:9px;color:#9a8b74}.next-chime p{font-family:var(--serif);font-size:12px;margin:5px 0 0;letter-spacing:.04em}.save-note{font-size:8px;color:#a19582;line-height:1.8;margin:6px 0}.save-note span{margin-right:5px}.rhythm{border-top:1px solid var(--line);padding:30px 0 34px;display:grid;grid-template-columns:1.15fr 1fr 1fr 1.1fr;gap:25px}.rhythm-title h2{font-family:var(--serif);font-size:15px;font-weight:500;margin:12px 0}.rhythm-title .eyebrow{font-size:7px}.rhythm-item{display:flex;gap:13px;padding-top:7px}.feature-number{font-family:Georgia,serif;font-size:11px;font-style:italic;color:#ad9972;padding-top:1px}.rhythm h3{font-family:var(--serif);font-size:12px;font-weight:500;margin:0 0 9px;white-space:nowrap}.rhythm-item p{font-size:9px;line-height:1.9;color:#958a78;margin:0}footer{margin:0 5.3%;border-top:1px solid var(--line);padding:22px 0 26px;display:flex;align-items:center;gap:30px;color:#958c7b}footer>span:first-child{font-family:var(--serif);font-size:11px;white-space:nowrap}footer p{font-size:8px;line-height:1.8;flex:1}.footer-sign{font-size:7px;letter-spacing:.15em;white-space:nowrap}.toast{position:fixed;bottom:28px;left:50%;transform:translate(-50%,20px);background:#3c352beb;color:#f3ead9;padding:14px 24px;border-radius:4px;opacity:0;pointer-events:none;transition:.3s;font-size:12px;z-index:20;max-width:90%;width:max-content}.toast.visible{opacity:1;transform:translate(-50%,0)}dialog{max-width:540px;width:calc(100% - 40px);background:#f3efe5;border:1px solid #d1c4ab;border-radius:6px;padding:38px;color:var(--ink);box-shadow:0 20px 80px #0003}dialog::backdrop{background:#30261b66;backdrop-filter:blur(4px)}.dialog-close{position:absolute;right:13px;top:8px;border:0;background:none;font-size:25px;color:#87765d}dialog h2{font-family:var(--serif);font-size:24px;font-weight:500;margin:15px 0 28px}dialog ol{padding-left:20px;font-size:13px}dialog li{padding-left:5px;margin-bottom:21px}dialog li p{font-size:12px;color:#837765;line-height:1.9;margin:8px 0}.dialog-note{font-size:10px;color:#9a8c77;line-height:1.9}.dialog-note:first-of-type{border-top:1px solid var(--line);padding-top:15px}@keyframes swing{0%,100%{transform:rotate(10deg)}50%{transform:rotate(-10deg)}}@keyframes keyturn{to{transform:rotate(360deg)}}@media(min-width:1450px){main{padding-top:10px}.intro{padding-top:65px;padding-bottom:45px}.experience{padding-bottom:80px}}@media(max-width:1050px){main{padding:0 35px}.experience{gap:55px;padding-right:10px;padding-left:0}.clock-case{transform:scale(.92);margin:-23px -13px}.rhythm{gap:18px;grid-template-columns:1fr 1fr 1fr}.rhythm-title{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between}.rhythm-title h2{margin:0}.header-note{margin:0}.remaining>span:first-child{font-size:33px}.winding-panel{padding-left:18px;padding-right:18px}}@media(max-width:760px){.header{height:77px;margin:0 6%}.brand{font-size:16px}.brand-mark{font-size:25px}.header-note{display:none}.text-button{font-size:11px}.intro{padding:37px 0 14px}.intro h1{font-size:34px}.intro p{font-size:10px}.intro .eyebrow{font-size:8px}main{padding:0 25px}.experience{grid-template-columns:1fr;gap:30px;padding:8px 0 38px}.clock-case{transform:scale(.88);margin:-34px -20px}.clock-caption{margin-top:35px;font-size:9px}.clock-shadow{bottom:45px;width:290px}.control-area{max-width:380px;margin:0 auto;padding-top:0}.control-area h2{font-size:28px}.description{margin-bottom:22px;font-size:11px}.rhythm{grid-template-columns:1fr;padding-top:25px;gap:22px}.rhythm-title{display:block}.rhythm-title h2{margin-top:10px}.rhythm-item{gap:20px}.rhythm-item p{font-size:10px}.rhythm h3{font-size:13px}.rhythm-title .eyebrow{font-size:8px}footer{flex-wrap:wrap;gap:10px;padding:20px 0}.footer-sign{margin-left:auto}footer p{order:3;flex-basis:100%;margin:5px 0;font-size:8px}.remaining>span:first-child{font-size:39px}.sound-panel p,.wind-hint{font-size:10px}.save-note{font-size:9px}.winding-panel{padding:24px}.clock-scene{overflow:visible}.header .text-button span{margin-left:6px}}@media(prefers-reduced-motion:reduce){.pendulum{animation:none}.wind-button.winding svg{animation:none}*{scroll-behavior:auto!important;transition:none!important}}