@font-face{font-family:HuWenMingChaoTi;src:url("./fonts/HuWenMingChaoTi.woff2") format("woff2");font-weight:400 700;font-display:swap}
:root{--paper:#fffdf6;--ink:#1b1720;--iris:#a67eb7;--dark:#3a2a45;--mango:#fadc5e;--line:#cfc6c9;--muted:#6a6069;--serif:HuWenMingChaoTi,"Songti TC","Songti SC","Noto Serif CJK TC","PMingLiU",serif;--sans:-apple-system,BlinkMacSystemFont,"PingFang TC",sans-serif;color:var(--ink);background:var(--paper);font-family:var(--serif);font-synthesis:none}*{box-sizing:border-box}body{margin:0;background-image:radial-gradient(ellipse at 78% 28%,#a67eb70b,transparent 50%)}a{color:inherit}button{font:inherit;cursor:pointer;touch-action:manipulation;color:inherit}button:focus-visible,a:focus-visible{outline:3px solid var(--iris);outline-offset:5px}.skip{position:fixed;top:-80px;background:var(--mango);padding:12px;z-index:5}.skip:focus{top:8px}.page{max-width:1320px;padding:0 64px;margin:auto}header{height:118px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.wordmark{text-decoration:none;display:flex;gap:16px;align-items:center;font-family:var(--sans);font-size:15px;letter-spacing:.14em}.wordmark i{font-family:var(--serif);font-size:13px;font-style:normal;color:var(--muted);display:block;margin-top:7px;letter-spacing:.2em}.seal{display:grid;place-items:center;width:38px;height:51px;border:1px solid var(--dark);outline:1px solid var(--iris);outline-offset:3px;background:var(--dark);color:var(--paper);font-family:var(--serif);font-size:18px;line-height:1.1;letter-spacing:0}.date{display:flex;flex-direction:column;gap:8px;text-align:right;font-size:12px;letter-spacing:.12em;color:var(--muted)}#time{font-family:var(--sans);font-size:11px;font-variant-numeric:tabular-nums;letter-spacing:.2em}.composition{display:grid;grid-template-columns:1fr 1.15fr;align-items:center;gap:40px;min-height:630px;padding:54px 0 46px}.chapter{font-size:12px;letter-spacing:.35em;color:var(--muted);margin:0 0 28px}h1{font-size:clamp(42px,4.9vw,68px);font-weight:500;line-height:1.55;letter-spacing:.07em;margin:0;color:var(--dark)}h1 span{position:relative;white-space:nowrap}h1 span:after{content:"";position:absolute;left:0;right:4px;bottom:9px;border-bottom:7px solid var(--mango);z-index:-1;transform:rotate(-2deg)}.opening{font-size:15px;line-height:2.25;letter-spacing:.08em;color:var(--muted);margin:30px 0}.motto{display:flex;align-items:center;gap:15px;font-size:12px;letter-spacing:.18em;margin-top:37px}.rule{height:1px;width:62px;background:var(--iris)}.clock-column{min-width:0}.clock-wrap{position:relative;max-width:530px;margin:auto}.vertical-note{position:absolute;right:-25px;top:37%;writing-mode:vertical-rl;font-size:11px;letter-spacing:.24em;color:var(--muted)}#clock{width:100%;display:block;overflow:visible}.outer-circle{fill:none;stroke:var(--line);stroke-width:.8}.inner-circle{fill:none;stroke:#d8cce0;stroke-width:.7}#marks line{stroke:var(--iris);stroke-width:1}#marks line.major{stroke:var(--dark);stroke-width:1.5}#labels text{fill:var(--dark);font-size:15px;font-family:var(--serif)}#labels text.ring{font-family:var(--sans);font-size:7px;letter-spacing:1.7px;fill:#726277}.clock-center{fill:var(--dark);font-family:var(--serif);font-size:25px;letter-spacing:7px}.clock-sub{fill:var(--muted);font-family:var(--sans);font-size:8px;letter-spacing:4px}#hour-hand{fill:var(--dark)}#minute-hand{fill:#765787}#second-hand line{stroke:#b28a06;stroke-width:1.8}#second-hand circle{fill:var(--mango)}.pin{fill:var(--dark);stroke:var(--paper);stroke-width:2}.clock-caption{display:flex;align-items:center;justify-content:center;gap:13px;font-size:11px;letter-spacing:.15em;color:var(--muted);margin-top:24px}.clock-caption>span:last-child{font-family:var(--sans);font-size:9px;letter-spacing:.2em}.caption-rule{width:24px;height:1px;background:var(--iris)}.reflection{border-top:1px solid var(--ink);border-bottom:1px solid var(--line);display:grid;grid-template-columns:130px 1fr 90px;align-items:center;padding:31px 0;gap:28px;min-height:150px}.reflection-label{font-size:12px;letter-spacing:.2em;color:var(--muted)}#message{font-size:21px;font-weight:400;line-height:1.9;letter-spacing:.05em;margin:0;white-space:pre-line}.reflection button{border:0;background:none;display:flex;align-items:center;justify-content:space-between;font-size:12px;padding:12px 0;color:var(--dark)}.reflection button span{font-family:var(--sans);font-size:19px;color:var(--iris)}.controls{display:flex;align-items:center;gap:22px;padding:24px 0 45px}.modes{display:flex;align-items:center;gap:12px;font-size:13px}.modes>span{color:var(--line)}.modes button{background:none;border:0;padding:8px 2px;border-bottom:1px solid transparent;color:var(--muted)}.modes button[aria-pressed=true]{color:var(--dark);border-bottom-color:var(--dark)}#mode-note{font-size:11px;letter-spacing:.12em;color:var(--muted)}#freeze{margin-left:auto;background:none;border:1px solid var(--line);font-size:12px;padding:10px 16px;border-radius:2px}#freeze:hover{background:#ede6f0}footer{border-top:1px solid var(--line);padding:30px 0 36px;display:flex;justify-content:space-between;gap:24px;align-items:center;font-size:11px;letter-spacing:.1em;color:var(--muted)}footer p{margin:0;line-height:1.9}footer>div{display:flex;gap:24px;font-family:var(--sans);font-size:10px}footer a{text-underline-offset:5px}body.awake .reflection{border-top:3px solid var(--iris);background:linear-gradient(90deg,transparent,#fadc5e18,transparent)}body.awake .clock-center{fill:#765787}body.awake #mode-note{color:var(--dark)}body.frozen #clock{opacity:.68}@media(max-width:860px){.page{padding:0 30px}header{height:100px}.composition{gap:20px;min-height:540px}h1{font-size:44px}.opening{font-size:13px}.vertical-note{right:-16px}.reflection{grid-template-columns:95px 1fr 75px;gap:16px}#message{font-size:18px}}@media(max-width:600px){.page{padding:0 24px}header{height:90px}.date{font-size:10px}.wordmark{font-size:13px;gap:13px}.wordmark i{font-size:11px}.seal{width:30px;height:42px;font-size:16px}.composition{grid-template-columns:1fr;padding:36px 0 30px;gap:25px}.chapter{margin-bottom:18px;font-size:11px}h1{font-size:42px;line-height:1.4;letter-spacing:.08em}h1 br{display:none}h1 span{display:inline-block}.opening{margin:20px 0 0;font-size:13px;line-height:1.9}.motto{display:none}.clock-wrap{max-width:330px;width:94%}.vertical-note{right:-12px;font-size:9px}.clock-caption{margin-top:12px;font-size:10px}.reflection{grid-template-columns:1fr 65px;padding:22px 0;gap:12px}.reflection-label{grid-column:1/-1;font-size:10px}#message{font-size:16px;line-height:1.9}.reflection button{font-size:11px}.controls{gap:16px;flex-wrap:wrap;padding:20px 0 30px}#mode-note{order:3;width:100%;margin:0;font-size:10px}.modes{font-size:12px}#freeze{font-size:11px;padding:9px 12px}footer{align-items:flex-start;flex-direction:column;gap:20px;padding:25px 0}footer>div{width:100%;justify-content:space-between}footer p{font-size:11px}footer p span{white-space:nowrap}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}