:root{--dawn-paper:#f7f4ee;--dawn-paper-2:#efeae0;--ink:#2a2e33;--ink-soft:#5c636b;--pine:#2f6b5f;--pine-deep:#275b51;--line-ui:#8b857a;--orb-core:#bfd8cf;--orb-halo:#dce9e2;--color-bg:var(--dawn-paper);--color-bg-2:var(--dawn-paper-2);--color-fg:var(--ink);--color-fg-muted:var(--ink-soft);--color-accent:var(--pine);--color-accent-fill:var(--pine-deep);--color-accent-fg:var(--dawn-paper);--color-line-ui:var(--line-ui);--font-display:"Iansui","Noto Sans TC",sans-serif;--font-body:"Noto Sans TC",system-ui,sans-serif;--font-mono:"IBM Plex Mono",ui-monospace,monospace;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-6:1.5rem;--space-8:2rem;--space-12:3rem;--space-16:4rem;--text-sm:.875rem;--text-base:1rem;--text-lg:1.25rem;--text-xl:1.5625rem;--text-2xl:1.953rem;--display:clamp(1.9rem,3.4vw + .7rem,2.9rem);--ease-breath:cubic-bezier(.37,0,.27,1);--radius:14px;--sky-ink:#f4f1e9;--sky-soft:#c9d0d9;--sky-accent:#9fd8c9}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--color-bg);color:var(--color-fg);font-family:var(--font-body);font-size:var(--text-base);line-height:1.85}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.skip-link{left:var(--space-4);z-index:60;background:var(--color-accent-fill);color:var(--color-accent-fg);padding:var(--space-2) var(--space-4);border-radius:var(--radius);transition:top .25s var(--ease-breath);font-weight:700;text-decoration:none;position:absolute;top:-4rem}.skip-link:focus{top:var(--space-4)}:focus-visible{outline:2.5px solid var(--color-accent);outline-offset:4px;border-radius:6px}a{color:var(--color-accent)}.layout{grid-template-columns:minmax(330px,44%) 1fr;min-height:100dvh;display:grid}.stagecol{height:100dvh;padding:var(--space-8);text-align:center;color:var(--sky-ink);background-color:#1c2433;flex-direction:column;justify-content:center;align-items:center;display:flex;position:sticky;top:0;overflow:hidden}.stagecol>*{z-index:2;position:relative}body[data-sky="0"] .stagecol{background-color:#1c2433}body[data-sky="1"] .stagecol{background-color:#2a3a52}body[data-sky="2"] .stagecol{background-color:#3d5570}body[data-sky="3"] .stagecol{background-color:#56536e}body[data-sky="4"] .stagecol{background-color:#684d5a}.stagecol:after{content:"";z-index:0;pointer-events:none;background:linear-gradient(#080a1073,#0000 55%);position:absolute;inset:0}.stagecol:before{content:"";z-index:0;pointer-events:none;opacity:0;background:radial-gradient(60% 42% at 50% 104%,#f4b17d8c,#0000 70%);position:absolute;inset:0}body[data-sky="1"] .stagecol:before{opacity:.1}body[data-sky="2"] .stagecol:before{opacity:.22}body[data-sky="3"] .stagecol:before{opacity:.4}body[data-sky="4"] .stagecol:before{opacity:.7}.stars{z-index:1;pointer-events:none;opacity:1;background-image:radial-gradient(1.2px 1.2px at 12% 18%,#f4f1e9e6,#0000 60%),radial-gradient(1px 1px at 78% 12%,#f4f1e9bf,#0000 60%),radial-gradient(1.4px 1.4px at 55% 30%,#f4f1e9cc,#0000 60%),radial-gradient(1px 1px at 30% 42%,#f4f1e999,#0000 60%),radial-gradient(1.1px 1.1px at 88% 38%,#f4f1e9b3,#0000 60%),radial-gradient(1px 1px at 65% 8%,#f4f1e9a6,#0000 60%),radial-gradient(1.3px 1.3px at 42% 14%,#f4f1e9d9,#0000 60%);position:absolute;inset:0}body[data-sky="1"] .stars{opacity:.7}body[data-sky="2"] .stars{opacity:.4}body[data-sky="3"] .stars{opacity:.12}body[data-sky="4"] .stars{opacity:0}@media (prefers-reduced-motion:no-preference){.stagecol{transition:background-color 2.6s}.stagecol:before,.stars{transition:opacity 2.6s}}.skyline{font-size:var(--text-sm);color:var(--sky-soft);letter-spacing:.2em;margin-top:var(--space-3)}.content{padding:var(--space-16) clamp(1.2rem,5vw,4.5rem);max-width:46rem}.brandline{top:var(--space-6);justify-content:center;gap:var(--space-3);align-items:baseline;display:flex;position:absolute;left:0;right:0}.brandline .zi{font-family:var(--font-display);font-size:var(--text-xl);letter-spacing:.3em}.brandline .latin{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--sky-soft);letter-spacing:.22em}.skipline{top:var(--space-6);right:var(--space-6);position:absolute}.skipline a{font-size:var(--text-sm);color:var(--sky-soft);text-underline-offset:3px;align-items:center;min-height:44px;text-decoration-thickness:1px;display:inline-flex}.skipline a:hover{color:var(--sky-ink)}.stagecol :focus-visible{outline-color:var(--sky-accent)}.stage-intro{max-width:21rem;margin-bottom:var(--space-8);color:var(--sky-soft)}.stage-intro b{color:var(--sky-ink);font-weight:500}#orbBtn{cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;background:0 0;border:none;border-radius:50%;width:min(46vmin,250px);height:min(46vmin,250px);padding:0;position:relative}#orb{background:radial-gradient(circle at 38% 32%,var(--orb-halo),var(--orb-core) 58%,#a9cabe 100%);transform:scale(var(--s,1));will-change:transform;border-radius:50%;position:absolute;inset:12%}@media (prefers-reduced-motion:reduce){#orb{animation:none;transform:none!important}}#ring{position:absolute;inset:0;transform:rotate(-90deg)}#ring .track{fill:none;stroke:#f4f1e92e;stroke-width:4px}#ring .fill{fill:none;stroke:var(--sky-accent);stroke-width:4px;stroke-linecap:round;stroke-dasharray:289;stroke-dashoffset:289px}@media (prefers-reduced-motion:no-preference){#orb{animation:9s ease-in-out infinite orb-idle}@keyframes orb-idle{0%,to{border-radius:50%}33%{border-radius:52% 48% 51% 49%/49% 52% 48% 51%}66%{border-radius:48% 52% 49% 51%/51% 48% 52% 49%}}}.cue{font-family:var(--font-display);font-size:var(--display);margin-top:var(--space-8);min-height:2.6em;line-height:1.3}.phase-note{color:var(--sky-soft);min-height:1.9em;font-size:var(--text-sm)}.counter{font-family:var(--font-mono);color:var(--sky-soft);font-size:var(--text-sm);letter-spacing:.3em;margin-top:var(--space-4)}.counter .done{color:var(--sky-ink)}.empty-note{color:var(--color-fg-muted);font-family:var(--font-display);font-size:var(--text-lg);padding-top:30dvh}section{margin-bottom:var(--space-16)}@media (prefers-reduced-motion:no-preference){section{opacity:0;transition:opacity .9s var(--ease-breath),transform .9s var(--ease-breath);transform:translateY(26px)}section.in{opacity:1;transform:none}}section .no{font-family:var(--font-mono);color:var(--pine);letter-spacing:.2em;font-size:var(--text-sm)}section h2{font-family:var(--font-display);font-size:var(--text-2xl);margin:var(--space-2) 0 var(--space-4);line-height:1.4}section h2:focus{outline:none}section p{margin-bottom:var(--space-4)}section p b{color:var(--pine);font-weight:500}section .small{font-size:var(--text-sm);color:var(--color-fg-muted)}.cta-box{background:var(--color-bg-2);border-radius:var(--radius);padding:var(--space-8)}.cta-box .field{margin-bottom:var(--space-4)}.cta-box label{margin-bottom:var(--space-2);font-weight:500;display:block}.cta-box input{width:100%;padding:var(--space-3) var(--space-4);min-height:48px;font:inherit;background:var(--dawn-paper);color:var(--color-fg);border:1.5px solid var(--color-line-ui);border-radius:var(--radius)}.btn{background:var(--color-accent-fill);color:var(--color-accent-fg);font:inherit;cursor:pointer;padding:var(--space-3) var(--space-8);border:none;border-radius:999px;min-height:48px;font-weight:700;text-decoration:none;display:inline-block}.btn:hover{background:var(--pine)}.btn.ghost{color:var(--pine);border:1.5px solid var(--pine);background:0 0}.btn-row{gap:var(--space-4);margin-top:var(--space-4);flex-wrap:wrap;align-items:center;display:flex}.cta-done{color:var(--pine);display:none}.cta-done.show{display:block}footer{padding:var(--space-8) 0 var(--space-4);color:var(--color-fg-muted);font-size:var(--text-sm)}@media (max-width:880px){.layout{grid-template-columns:1fr}.stagecol{border-right:none;border-bottom:1px solid var(--color-bg-2);height:auto;min-height:72dvh;position:relative}.content,.empty-note{padding-top:var(--space-8)}}