:root{font-family:Songti SC,STSong,"Noto Serif CJK SC",serif;color:#28241d;background:#eee9dd;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:320px;background-color:#eee9dd;background-image:radial-gradient(rgba(73,57,37,.08) .7px,transparent .8px);background-size:7px 7px}button,input{font:inherit}button{color:inherit}main{width:min(1180px,calc(100% - 40px));margin:auto;padding:38px 0 24px}header{display:grid;grid-template-columns:auto 1fr 1fr;gap:22px;align-items:center;padding-bottom:22px;border-bottom:1px solid #8b806c}.seal{width:54px;height:64px;border:2px solid #a93528;color:#a93528;display:grid;place-items:center;font-weight:700;line-height:1.05;font-size:20px;transform:rotate(-2deg)}.kicker{margin:0 0 8px;font-size:11px;letter-spacing:.25em;color:#766b59}h1{font-weight:500;font-size:clamp(44px,6vw,76px);letter-spacing:.15em;line-height:1;margin:0}.intro{justify-self:end;line-height:1.9;font-size:14px;color:#5d5548;margin:0}.stage{display:grid;grid-template-columns:minmax(450px,1.18fr) minmax(350px,.82fr);gap:70px;align-items:center;padding:50px 20px}.dial-wrap{text-align:center}.dial{position:relative;width:min(560px,100%);aspect-ratio:1;border-radius:50%;margin:auto;touch-action:none;cursor:crosshair;background:repeating-conic-gradient(from -15deg,transparent 0deg 29.65deg,rgba(45,39,31,.55) 29.65deg 30deg),radial-gradient(circle at center,transparent 0 23%,#d8cfbd 23.3% 24%,transparent 24.3% 66%,#a93528 66.3% 67%,transparent 67.3% 77%,#40392e 77.3% 78%,transparent 78.3%),#e8e0d0;border:1px solid #4c4437;box-shadow:0 20px 45px #41321f29,inset 0 0 40px #4f3c2417}.dial:before,.dial:after{content:"";position:absolute;top:5%;right:5%;bottom:5%;left:5%;border:1px solid #9c907c;border-radius:50%;pointer-events:none}.dial:after{top:12%;right:12%;bottom:12%;left:12%;border-color:#b8ad9a}.hour-lines{position:absolute;top:2%;right:2%;bottom:2%;left:2%;border-radius:50%;background:repeating-conic-gradient(from -7.5deg,transparent 0deg 14.7deg,#8d816d 14.7deg 15deg);mask:radial-gradient(circle,transparent 0 95%,#000 95%);opacity:.6}.sector-label{position:absolute;z-index:3;left:calc(50% - 24px);top:0%;width:48px;height:100%;transform-origin:50% 50%;border:0;background:none;font-size:25px;display:flex;flex-direction:column;align-items:center;gap:1px;padding:0;cursor:pointer;pointer-events:auto}.sector-label small{font-family:Arial,sans-serif;font-size:8px;letter-spacing:0;color:#726856}.sector-label.active{color:#a93528;font-weight:700}.sector-label.current:before{content:"·";position:absolute;top:-16px;color:#a93528}.hand{position:absolute;z-index:4;left:50%;top:8%;width:3px;height:42%;background:#a93528;transform-origin:50% 100%;box-shadow:0 0 0 1px #ffffff40;pointer-events:none}.hand:before{content:"";position:absolute;top:-3px;left:-5px;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:12px solid #a93528}.hand i{position:absolute;bottom:-8px;left:-6px;width:15px;height:15px;background:#a93528;border-radius:50%}.hub{position:absolute;z-index:5;top:36%;right:36%;bottom:36%;left:36%;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#28241d;color:#f0eadf;box-shadow:0 0 0 6px #e8e0d0,0 0 0 7px #28241d;pointer-events:none}.hub small{font-size:10px;letter-spacing:.3em;margin-left:.3em;color:#c8baa3}.hub strong{font-family:Georgia,serif;font-size:clamp(22px,4vw,38px);font-weight:400;line-height:1.15}.hub span{font-size:12px;color:#d37a69}.drag-hint{font-size:11px;letter-spacing:.12em;color:#776d5c;margin:18px 0 0}.dial.dragging{cursor:grabbing}aside{border-left:1px solid #8b806c;padding-left:42px}.reading{padding-bottom:30px;border-bottom:1px solid #8b806c}.reading h2{font-weight:500;font-size:clamp(35px,5vw,58px);margin:8px 0 24px;letter-spacing:.08em;color:#a93528}.reading>p:last-of-type{font-size:13px;line-height:1.8;color:#655c4d}.boundary{display:flex;align-items:center;gap:13px;font-size:12px}.boundary span{white-space:nowrap}.boundary b{font-family:Georgia,serif;font-size:17px;font-weight:400}.boundary i{height:1px;background:#8b806c;flex:1;position:relative}.boundary i:after{content:"";position:absolute;left:50%;top:-3px;width:7px;height:7px;border-radius:50%;background:#a93528}.now{border:1px solid #a93528;background:transparent;color:#a93528;padding:9px 14px;cursor:pointer;margin-top:8px}.now:hover{background:#a93528;color:#f5eee2}.selected{display:grid;grid-template-columns:68px 1fr;gap:20px;padding:30px 0}.big-branch{font-size:54px;line-height:1;border-right:1px solid #8b806c;color:#a93528}.selected h3{font-size:20px;font-weight:500;margin:0 0 10px}.selected h3 span{font:12px Arial,sans-serif;color:#766b59;margin-left:8px}.selected p:last-child{font-size:13px;line-height:1.8;margin:0;color:#5d5548}.keep{display:flex;gap:9px;align-items:center;font-size:12px}.keep input{accent-color:#a93528}footer{display:flex;justify-content:space-around;border-top:1px solid #8b806c;padding:18px 0 0;font-size:11px;letter-spacing:.16em;color:#776d5c}@media(max-width:850px){header{grid-template-columns:auto 1fr}.intro{grid-column:1/-1;justify-self:start}.stage{grid-template-columns:1fr;gap:35px;padding:34px 0}.dial{max-width:530px}aside{border-left:0;border-top:1px solid #8b806c;padding:30px 0 0}}@media(max-width:520px){main{width:calc(100% - 24px);padding-top:20px}h1{font-size:42px}.seal{width:45px;height:53px}.dial{width:100%}.sector-label{font-size:19px}.sector-label small{display:none}.hub strong{font-size:20px}.stage{padding-top:28px}.boundary{gap:7px}footer{flex-direction:column;gap:8px;text-align:center}.selected{grid-template-columns:54px 1fr}.big-branch{font-size:42px}}