:root { --paper:#f4f1eb; --ink:#304044; --muted:#6e7a7a; --sage:#78988b; --sage-deep:#56786d; --mist:#e6ece7; --line:#d4ddd8; --coral:#c98272; --cream:#fffdf8; --shadow:0 12px 30px rgba(52,67,66,.08); }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; background:var(--paper); color:var(--ink); font-family:'Trebuchet MS','Noto Sans TC','PingFang TC','Microsoft JhengHei',sans-serif; }
body { font-size:18px; line-height:1.6; }
button, input { font:inherit; }
button { cursor:pointer; }
.app-shell { width:min(100%, 760px); min-height:100vh; margin:auto; padding:24px 18px 34px; }
.topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:34px; }
.brand { color:var(--sage-deep); font-weight:700; font-size:19px; letter-spacing:.02em; }
.eyebrow { color:var(--sage-deep); font-size:15px; font-weight:700; letter-spacing:.08em; margin:0 0 8px; }
h1,h2,h3,p { margin-top:0; } h1 { font-size:clamp(30px, 8vw, 46px); line-height:1.2; letter-spacing:0; margin-bottom:14px; } h2 { font-size:28px; line-height:1.25; } h3 { font-size:20px; }
.lede { color:var(--muted); max-width:34em; margin-bottom:28px; }
.screen-intro { margin-bottom:25px; }
.practice-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.practice-card { text-align:left; background:var(--cream); color:var(--ink); border:1px solid var(--line); border-radius:12px; padding:19px 16px; min-height:130px; box-shadow:var(--shadow); transition:background .2s, border-color .2s, transform .2s; }
.practice-card:hover, .practice-card:focus-visible { background:#f8fbf6; border-color:var(--sage); transform:translateY(-2px); outline:none; }
.practice-icon { color:var(--sage-deep); font-size:25px; display:block; margin-bottom:8px; }
.practice-card strong { display:block; font-size:20px; margin-bottom:3px; } .practice-card small { color:var(--muted); }
.notice { background:var(--mist); border-left:3px solid var(--sage); padding:12px 14px; border-radius:6px; color:#506560; font-size:16px; margin-top:26px; }
.panel { background:var(--cream); border:1px solid var(--line); border-radius:12px; padding:22px 18px; box-shadow:var(--shadow); }
.assessment-list { display:grid; gap:25px; margin:24px 0; } .range-row { display:grid; gap:9px; } .range-label { display:flex; justify-content:space-between; font-weight:700; } .range-value { color:var(--sage-deep); font-size:24px; }
input[type=range] { width:100%; accent-color:var(--sage-deep); height:32px; }
.actions { display:flex; gap:12px; margin-top:25px; } .button { min-height:50px; border:0; border-radius:8px; padding:10px 18px; font-weight:700; color:var(--cream); background:var(--sage-deep); } .button.secondary { color:var(--sage-deep); background:transparent; border:1px solid var(--sage); } .button.ghost { color:var(--muted); background:transparent; padding-left:0; } .button:focus-visible { outline:3px solid #b5d1c4; outline-offset:2px; }
.mode-row { display:flex; gap:8px; flex-wrap:wrap; margin:14px 0 4px; } .mode-button { color:var(--ink); background:transparent; border:1px solid var(--line); border-radius:24px; padding:8px 14px; } .mode-button.active { color:var(--sage-deep); border-color:var(--sage-deep); background:var(--mist); font-weight:700; }
.session-shell { min-height:calc(100vh - 58px); display:flex; flex-direction:column; } .session-header { display:flex; align-items:center; justify-content:space-between; gap:12px; } .session-header h2 { margin:0; font-size:22px; } .time { color:var(--muted); font-variant-numeric:tabular-nums; }
.progress { width:100%; height:6px; background:#dde4df; border-radius:8px; overflow:hidden; margin:20px 0 35px; } .progress-bar { width:0; height:100%; background:var(--sage); transition:width .4s linear; }
.session-content { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:10px 0 20px; } .session-content h1 { font-size:clamp(29px,8vw,42px); margin-bottom:12px; } .subtitle { color:var(--muted); max-width:32em; min-height:58px; }
.visual { height:230px; width:100%; display:grid; place-items:center; margin-bottom:13px; } .balloon { width:130px; height:155px; border-radius:50% 50% 47% 47%; background:#91ad8c; box-shadow:inset -15px -12px 0 rgba(57,103,81,.12), 0 14px 25px rgba(74,110,88,.12); transform:scale(.78); transition:transform .12s linear; position:relative; } .balloon:after { content:''; position:absolute; left:50%; bottom:-17px; width:2px; height:25px; background:#78988b; } .candle { position:relative; width:70px; height:130px; border-radius:7px 7px 3px 3px; background:#ddd5bd; box-shadow:inset 10px 0 rgba(255,255,255,.3); } .flame { position:absolute; left:20px; top:-74px; width:31px; height:65px; background:#e4a36f; border-radius:50% 50% 50% 10%; transform:rotate(45deg) scale(.9); box-shadow:0 0 20px rgba(224,161,92,.38); transition:transform .18s, opacity .2s; } .flame:after { content:''; position:absolute; inset:9px 10px 13px; background:#f5d08a; border-radius:50% 50% 50% 15%; } .flame.off { opacity:.12; transform:rotate(45deg) scale(.28); }
.body-figure { width:140px; height:225px; position:relative; color:#9cb8aa; } .body-figure .head { width:43px; height:43px; border:4px solid currentColor; border-radius:50%; position:absolute; left:49px; top:3px; } .body-figure .torso { position:absolute; left:43px; top:52px; width:55px; height:102px; border:4px solid currentColor; border-radius:35px 35px 24px 24px; } .body-figure .arm, .body-figure .leg { position:absolute; background:currentColor; border-radius:5px; transform-origin:top; } .body-figure .arm { width:7px; height:96px; top:62px; } .body-figure .arm.left { left:35px; transform:rotate(16deg); } .body-figure .arm.right { right:35px; transform:rotate(-16deg); } .body-figure .leg { width:8px; height:75px; top:147px; } .body-figure .leg.left { left:57px; transform:rotate(6deg); } .body-figure .leg.right { right:57px; transform:rotate(-6deg); } .body-figure .highlight { position:absolute; border-radius:50%; background:rgba(201,130,114,.72); box-shadow:0 0 0 9px rgba(201,130,114,.12); transition:all .5s ease; } .highlight.head { width:22px; height:22px; left:60px; top:14px; } .highlight.jaw { width:17px; height:10px; left:63px; top:42px; } .highlight.neck { width:19px; height:12px; left:61px; top:53px; } .highlight.shoulder { width:45px; height:16px; left:47px; top:62px; } .highlight.breath { width:29px; height:38px; left:56px; top:90px; } .highlight.full { width:92px; height:170px; left:24px; top:20px; background:rgba(201,130,114,.22); box-shadow:0 0 0 10px rgba(201,130,114,.08); }
.session-footer { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; padding-top:18px; } .session-footer .button { min-width:124px; } .mic-status { color:var(--muted); font-size:15px; margin:5px 0 0; min-height:24px; }
.result-mark { color:var(--sage-deep); font-size:42px; margin-bottom:4px; } .result-table { display:grid; gap:12px; margin-top:22px; } .result-item { display:flex; justify-content:space-between; border-bottom:1px solid var(--line); padding-bottom:10px; gap:10px; } .result-item span { color:var(--muted); } .result-number { color:var(--sage-deep); font-weight:700; }
@media (max-width:480px) { .app-shell { padding:18px 15px 28px; } .practice-grid { grid-template-columns:1fr; } .practice-card { min-height:94px; padding:15px; } .actions { flex-direction:column; } .actions .button { width:100%; } .session-footer { justify-content:stretch; } .session-footer .button { flex:1; min-width:0; } }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } .practice-card:hover { transform:none; } }