@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@400;500;600&family=Noto+Sans+TC:wght@300;400;500&display=swap');
:root{color-scheme:dark;--gold:#e7c88e;--ivory:#f5f0e6}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:'Noto Sans TC',sans-serif;background:#0d1a20;color:var(--ivory)}body{overflow-x:hidden}#scene{position:fixed;inset:0;z-index:0}#scene canvas{display:block;width:100%;height:100%;touch-action:pan-y}.veil{position:fixed;inset:0;background:linear-gradient(90deg,rgba(4,13,18,.8),rgba(5,15,20,.18) 80%),linear-gradient(0deg,rgba(4,12,18,.8),transparent 25%,transparent 80%,rgba(5,12,16,.4));pointer-events:none}header,main,footer{position:relative;z-index:2}header{display:flex;align-items:center;justify-content:space-between;padding:27px clamp(20px,5vw,75px)}.brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;font-family:'Noto Serif TC';font-size:21px;letter-spacing:3px}.brand small{display:block;font:10px 'Noto Sans TC';letter-spacing:2px;color:#d2b98c;margin-top:5px}.sigil{font-size:39px;color:var(--gold)}button{cursor:pointer;font-family:inherit}.iconbtn{background:#142b33b8;color:#e6d7bd;border:1px solid #c6a96b5a;border-radius:30px;padding:10px 16px}main{min-height:calc(100dvh - 158px);display:flex;align-items:center;padding:35px clamp(20px,9vw,150px)}.intro,.panel{max-width:570px;animation:rise .8s both}.eyebrow{color:var(--gold);font-size:11px;letter-spacing:4px;font-weight:500}.intro h1{font:500 clamp(43px,5.8vw,83px)/1.42 'Noto Serif TC';letter-spacing:6px;margin:20px 0}.intro h1 em{font-style:normal;color:#e9ca8c;text-shadow:0 0 35px #e5b15b55}.intro p,.panel p,.modal p{font-size:15px;line-height:2.15;color:#ddd9cf}.primary{background:linear-gradient(120deg,#f3dcae,#bd9658);border:0;color:#2a251e;font-size:15px;letter-spacing:2px;font-weight:600;padding:16px 28px;margin-top:18px;border-radius:3px;box-shadow:0 7px 30px #0005}.primary span{margin-left:25px}.primary:hover{filter:brightness(1.1)}.hint{font-size:11px;letter-spacing:1px;color:#d3c7ae99;margin-top:30px}.panel{padding:25px 0}.panel h2,.modal h2{font:500 clamp(28px,3.5vw,43px) 'Noto Serif TC';letter-spacing:3px}.actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin:28px 0}.actions button{background:#0d2831dd;border:1px solid #e7c88e55;color:#e7c88e;border-radius:7px;text-align:left;padding:17px;display:flex;flex-direction:column;gap:7px;font-size:24px;transition:.25s}.actions button:hover{background:#29434a;transform:translateY(-3px)}.actions strong{font-size:16px;color:#fff;font-weight:500}.actions small{font-size:11px;color:#c9c2b7}.textbtn{background:none;border:0;color:var(--gold);padding:15px 0}.hidden{display:none!important}#feedback{min-height:24px;color:#f6dca6;font-size:14px}footer{display:flex;justify-content:space-between;align-items:center;padding:20px clamp(20px,5vw,75px);font-size:11px;letter-spacing:1px;color:#d6c5a7a8;gap:10px}footer a{color:inherit;text-decoration:none}.modal{position:fixed;z-index:5;inset:0;background:#020a0bd9;display:grid;place-items:center;padding:18px;overflow-y:auto}.modalbox{position:relative;width:min(100%,510px);padding:34px;background:linear-gradient(150deg,#193139,#101d26);border:1px solid #dfbe8255;box-shadow:0 20px 80px #000a;border-radius:12px}.modalbox h2{font-size:30px;margin:14px 0}.close{position:absolute;right:18px;top:12px;background:none;border:0;color:#fff;font-size:30px}.modal label{display:block;color:#e7d5b6;font-size:13px;margin:13px 0}.modal input:not([type=checkbox]),.modal select,.modal textarea{width:100%;margin-top:7px;padding:12px;background:#07151c;color:white;border:1px solid #bd9b665e;border-radius:5px;font:inherit}.modal .check{display:flex;align-items:center;gap:8px}.status{min-height:20px}.center{text-align:center}.breath-orb{height:205px;width:205px;border-radius:50%;margin:25px auto;display:grid;place-items:center;background:radial-gradient(circle,#f3e1b5 0%,#a58b5b 24%,#2d5b65 58%,#1a343d 70%);box-shadow:0 0 65px #d4a65d55;transition:transform 1s linear}.breath-orb span{color:#fff;text-shadow:0 1px 6px #000;font-size:17px}.breath-orb.inhale{transform:scale(1.25)}.breath-orb.exhale{transform:scale(.8)}@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media(max-width:650px){header{padding:18px}.brand{font-size:16px}.brand small{font-size:8px}.sigil{font-size:29px}main{align-items:flex-end;padding:40px 22px 55px;min-height:calc(100dvh - 135px)}.intro h1{font-size:43px}.intro p{font-size:13px}.panel{width:100%}.actions{gap:9px}.actions button{padding:13px}.actions strong{font-size:14px}footer{padding:12px 18px;flex-wrap:wrap;font-size:9px}.modalbox{padding:25px 20px}.hint{display:none}}
