.clock-page{color:#384f4b;background:#f8f7f0;max-width:none;min-height:100vh;padding:0 max(28px,50vw - 620px);font-family:Arial,PingFang SC,Microsoft YaHei,sans-serif}.clock-page button{font:inherit}:is(.clock-page button:focus-visible,.clock-page a:focus-visible){outline-offset:3px;outline:3px solid #e28d72}.clock-header{color:#89938a;border-bottom:1px solid #e6e8db;justify-content:space-between;align-items:center;height:78px;font-size:13px;display:flex}.clock-header>a{color:#3c5550;align-items:center;gap:11px;font-size:19px;text-decoration:none;display:flex}.clock-header>a>svg{color:#8a9990}.clock-logo,.clock-panel-icon{color:#d19464;background:#f5e6d1;border-radius:12px;place-items:center;width:36px;height:36px;display:grid}.clock-sound{color:#6d8178;background:0 0;border:1px solid #e0e4d8;border-radius:50%;place-items:center;width:40px;height:40px;display:grid}.clock-intro{justify-content:space-between;align-items:end;padding:34px 0 25px;display:flex}.clock-intro>div>span,.clock-panel-title>div>span{letter-spacing:.15em;color:#b69b81;font:10px ui-monospace,monospace}.clock-intro h1{letter-spacing:-.04em;margin:9px 0;font-size:36px}.clock-intro h1 span{color:#df9c79}.clock-intro p{color:#8c9990;margin:0;font-size:14px}.clock-intro-note{color:#a5ad91;align-items:center;gap:8px;font-size:12px;display:flex}.clock-workspace{grid-template-columns:minmax(0,1fr) 330px;gap:20px;display:grid}.clock-stage{background:#e6f0e8;border:1px solid #dce8dc;border-radius:22px;flex-direction:column;align-items:center;min-height:660px;display:flex;position:relative;overflow:hidden}.clock-stage:before,.clock-stage:after{content:"";opacity:.44;background:#f4e4b9;border-radius:50%;position:absolute}.clock-stage:before{width:260px;height:260px;bottom:-145px;left:-115px}.clock-stage:after{width:260px;height:260px;top:-150px;right:-125px}.clock-stage-top{z-index:1;letter-spacing:.08em;color:#849c8f;justify-content:space-between;align-items:center;width:100%;padding:23px 25px;font:11px ui-monospace,monospace;display:flex;position:relative}.clock-stage-top b{color:#c1ccbd}.clock-stage-badge{letter-spacing:0;color:#8da18b;background:#ffffffa8;border-radius:8px;padding:8px 11px;font:11px Arial}.clock-stage-badge i{background:#9eb889;border-radius:50%;width:6px;height:6px;margin-right:5px;display:inline-block}.clock-target{z-index:2;color:#cb9272;background:#fff9e9;border-radius:20px;align-items:center;gap:8px;padding:10px 19px;font-size:13px;display:flex}.clock-target strong{color:#597a6c;font-size:17px}.clock-face-wrap{flex:1;justify-content:center;align-items:center;width:min(76%,480px);display:flex;position:relative}.clock-face{z-index:1;touch-action:none;filter:drop-shadow(0 15px 18px #536e4a1b);-webkit-user-select:none;user-select:none;width:100%;height:auto;position:relative}.clock-hand{cursor:grab;touch-action:none}.clock-hand:active{cursor:grabbing}.clock-cloud{background:#ffffff82;border-radius:30px;width:115px;height:35px;position:absolute}.clock-cloud:after{content:"";background:#ffffff82;border-radius:50%;width:55px;height:55px;position:absolute;top:-19px;left:20px}.clock-cloud.one{top:23%;left:-17%}.clock-cloud.two{bottom:22%;right:-15%;transform:scale(.7)}.clock-under{z-index:2;justify-content:space-between;align-items:end;width:100%;padding:0 26px 24px;display:flex}.clock-key{flex-wrap:wrap;gap:14px;display:flex}.clock-key span{color:#809389;align-items:center;gap:6px;font-size:11px;display:flex}.clock-key i{background:#628f83;border-radius:50%;width:9px;height:9px}.clock-key span+span i{background:#e88c71}.clock-under p{color:#9aab98;align-items:center;gap:6px;margin:0;font-size:11px;display:flex}.clock-panel{background:#fffef9;border:1px solid #e9e9df;border-radius:22px;padding:26px 23px}.clock-panel-title{justify-content:space-between;align-items:center;margin-bottom:23px;display:flex}.clock-panel-title h2{letter-spacing:-.03em;margin:8px 0 0;font-size:21px}.clock-modes{gap:7px;display:grid}.clock-modes button{text-align:left;color:#a8b2a0;background:#f7f8f0;border:1px solid #0000;border-radius:11px;align-items:center;gap:12px;min-height:60px;padding:10px 12px;display:flex}.clock-modes button.selected{color:#739279;background:#eaf2e4;border-color:#cddfc6}.clock-modes button span{gap:3px;display:grid}.clock-modes strong{color:#647e6e;font-size:13px}.clock-modes small{color:#a0ad9b;font-size:10px}.clock-readout{text-align:center;background:#faf1df;border-radius:13px;gap:4px;margin:20px 0 16px;padding:16px;display:grid}.clock-readout>span{color:#b9a38b;font-size:11px}.clock-readout strong{letter-spacing:-.06em;color:#637e70;font:700 42px ui-monospace,monospace}.clock-readout em{color:#a6b39b;letter-spacing:-.04em;font-size:20px;font-style:normal}.clock-readout b{color:#b39576;font-size:14px}.clock-level>span,.clock-adjust>span{color:#9caa99;margin-bottom:9px;font-size:11px;display:block}.clock-level>div{gap:5px;margin-bottom:16px;display:flex}.clock-level button{color:#85937e;background:#fff;border:1px solid #e5eadc;border-radius:7px;flex:1;padding:8px 3px;font-size:10px}.clock-level button.active{color:#66845b;background:#e9f1df;border-color:#ccdcbf}.clock-adjust>div{grid-template-columns:1fr 1fr;gap:8px;display:grid}.clock-adjust button{color:#7a9180;background:#fff;border:1px solid #dfe8d8;border-radius:9px;justify-content:center;align-items:center;gap:7px;min-height:43px;font-size:12px;display:flex}.clock-main{color:#fffdf4;background:#789984;border:0;border-radius:10px;justify-content:center;align-items:center;gap:9px;width:100%;min-height:49px;margin-top:15px;font-size:13px;font-weight:600;display:flex}.clock-hint{color:#a2ae9e;align-items:center;gap:8px;min-height:36px;margin:12px 0 0;font-size:11px;line-height:1.6;display:flex}.clock-hint.success{color:#72985f}.clock-footer{color:#adb5a8;justify-content:space-between;gap:10px;padding:23px 0;font-size:10px;display:flex}.clock-card-visual{background:linear-gradient(145deg,#e5f1e5,#f8dfbd)!important}.clock-card-visual .building-icon{color:#d68d6b}.clock-card .floor-badge{color:#819977;background:#fff9ef}@media (max-width:800px){.clock-page{padding:0 16px}.clock-header{height:64px}.clock-intro{padding:25px 0 20px}.clock-intro h1{font-size:29px}.clock-intro-note{display:none}.clock-workspace{grid-template-columns:1fr;gap:14px}.clock-stage{min-height:510px}.clock-panel{padding:22px}.clock-modes{grid-template-columns:repeat(3,1fr)}.clock-modes button{text-align:center;flex-direction:column;justify-content:center;gap:5px}.clock-modes small{display:none}.clock-face-wrap{width:min(75%,380px)}.clock-readout{margin:15px 0}.clock-footer{flex-wrap:wrap}}@media (max-width:480px){.clock-page{padding:0 12px}.clock-header>a{gap:7px;font-size:16px}.clock-intro h1{font-size:26px}.clock-intro p{font-size:12px}.clock-stage{border-radius:17px;min-height:440px}.clock-stage-top{padding:17px;font-size:9px}.clock-face-wrap{width:min(87%,350px)}.clock-under{padding:0 15px 18px}.clock-under p{font-size:10px}.clock-key{gap:8px}.clock-key span{font-size:10px}.clock-panel{border-radius:17px}.clock-panel-title h2{font-size:19px}.clock-modes button{padding:9px 3px}.clock-modes strong{font-size:12px}.clock-target{padding:7px 14px}.clock-target strong{font-size:15px}}