:root{--abyss:#0c1518;--deep:#13252a;--tide:#2a4a51;--lantern:#e9a24c;--glow:#f3ce94;--parchment:#e7dcc6;--ink:#1a1714;--mist:#cbd3ce;--moss:#7e8c76;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-10:40px;--space-16:64px;--space-24:96px;--dur-micro:.2s;--dur-base:.4s;--dur-slow:.8s;--dur-enter:1.3s;--ease-tide:cubic-bezier(.25, .1, .25, 1);--ease-settle:cubic-bezier(.2, 0, 0, 1);--ease-breath:cubic-bezier(.37, 0, .63, 1);--font-body:"Newsreader", "Noto Serif TC", "Georgia", "Songti TC", serif;--font-ui:"Inter", "IBM Plex Sans", system-ui, sans-serif;--text-base:18px;--leading:1.75;--grain:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%3E%3Cfilter%20id='g'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.8'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type='discrete'%20tableValues='1%201'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23g)'/%3E%3C/svg%3E")}*,:before,:after{box-sizing:border-box;margin:0}html{font-size:var(--text-base)}body{min-height:100dvh;font-family:var(--font-body);line-height:var(--leading);color:var(--mist);background:var(--abyss);-webkit-font-smoothing:antialiased;overflow:hidden}:focus-visible{outline:2px solid var(--lantern);outline-offset:3px}.stage{pointer-events:none;position:fixed;inset:0}.stage--active{pointer-events:auto}.threshold{isolation:isolate;place-content:center;justify-items:center;gap:var(--space-6);min-height:100dvh;padding:var(--space-10);text-align:center;background:radial-gradient(120% 90% at 50% 40%, var(--deep) 0%, var(--abyss) 70%);transition:opacity var(--dur-slow) var(--ease-tide), filter var(--dur-slow) var(--ease-tide), transform var(--dur-slow) var(--ease-tide);display:grid;position:relative;overflow:hidden}.threshold:before{content:"";z-index:-1;--tide-amp:9%;background: linear-gradient(to top, transparent 43%, color-mix(in srgb, var(--glow) 60%, transparent) 46%, color-mix(in srgb, var(--mist) 45%, transparent) 47%, transparent 50%),  linear-gradient(to top, color-mix(in srgb, var(--tide) 56%, var(--mist)) 0%, color-mix(in srgb, var(--tide) 66%, var(--mist)) 26%, color-mix(in srgb, var(--tide) 72%, transparent) 43%, transparent 49%);pointer-events:none;will-change:transform;animation:32s ease-in-out infinite tide-swell;position:absolute;inset:0}.threshold:after{content:"";z-index:-1;background:radial-gradient(circle, color-mix(in srgb, var(--lantern) 20%, transparent) 0%, color-mix(in srgb, var(--lantern) 8%, transparent) 32%, transparent 62%);pointer-events:none;width:min(78vw,28rem);height:min(78vw,28rem);animation:threshold-glow 7s var(--ease-tide) infinite;position:absolute;top:37%;left:50%;transform:translate(-50%,-50%)}@keyframes tide-swell{0%,to{transform:translateY(0)}50%{transform:translateY(var(--tide-amp,8%))}}@keyframes threshold-glow{0%,to{opacity:.72;transform:translate(-50%,-50%)scale(1)}50%{opacity:1;transform:translate(-50%,-50%)scale(1.04)}}.threshold--leaving{opacity:0;filter:blur(7px);pointer-events:none;transform:scale(.97)}.threshold--leaving:before,.threshold--leaving:after{animation-play-state:paused}.threshold__title{letter-spacing:.12em;color:var(--glow);text-shadow:0 0 1.5rem color-mix(in srgb, var(--lantern) 26%, transparent);font-size:clamp(2.4rem,8vw,4.5rem);font-weight:300}.threshold__tagline{max-width:32ch;color:var(--mist);opacity:.85;font-style:italic}.enter{min-height:44px;font-family:var(--font-ui);letter-spacing:.18em;color:var(--abyss);background:var(--lantern);padding:var(--space-3) var(--space-10);cursor:pointer;transition:filter var(--dur-base) var(--ease-tide), transform var(--dur-base) var(--ease-tide);border:none;border-radius:999px;justify-content:center;align-items:center;font-size:.95rem;display:inline-flex}.enter:hover{filter:brightness(1.08)}.enter:active{transform:translateY(1px)}.enter--ghost{color:var(--moss);letter-spacing:.1em;padding:var(--space-2) var(--space-4);background:0 0;font-size:.78rem}.enter--ghost:hover{filter:none;color:var(--mist)}.threshold__colophon{justify-items:center;gap:var(--space-2);max-width:46ch;margin-top:var(--space-2);display:grid}.threshold__note{font-family:var(--font-ui);color:var(--moss);opacity:.85;font-size:.74rem;line-height:1.7}.threshold__source{font-family:var(--font-ui);letter-spacing:.08em;color:var(--moss);text-decoration-line:underline;-webkit-text-decoration-color:color-mix(in srgb, var(--moss) 45%, transparent);text-decoration-color:color-mix(in srgb, var(--moss) 45%, transparent);text-underline-offset:3px;transition:color var(--dur-base) var(--ease-tide);font-size:.74rem}.threshold__source:hover{color:var(--glow);-webkit-text-decoration-color:color-mix(in srgb, var(--lantern) 55%, transparent);text-decoration-color:color-mix(in srgb, var(--lantern) 55%, transparent)}.colophon{display:none}.stage--active~.colophon{display:block}.colophon__toggle{top:var(--space-3);left:var(--space-3);z-index:40;min-height:28px;font-family:var(--font-ui);letter-spacing:.1em;color:var(--moss);background:color-mix(in srgb, var(--abyss) 55%, transparent);border:1px solid color-mix(in srgb, var(--moss) 34%, transparent);padding:var(--space-1) var(--space-3);cursor:pointer;transition:color var(--dur-base) var(--ease-tide), border-color var(--dur-base) var(--ease-tide);border-radius:999px;font-size:.72rem;position:fixed}.colophon__toggle:hover{color:var(--glow);border-color:color-mix(in srgb, var(--lantern) 55%, transparent)}.colophon__toggle:after{content:"";width:max(100%,44px);height:44px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#stage:has(.space--library)~.colophon .colophon__toggle{top:auto;bottom:var(--space-3)}.colophon__panel{z-index:100;padding:var(--space-6);background:color-mix(in srgb, var(--abyss) 72%, transparent);place-content:center;justify-items:center;display:none;position:fixed;inset:0}.colophon--open .colophon__panel{display:grid}.colophon__card{justify-items:center;gap:var(--space-4);max-width:40ch;padding:var(--space-10);text-align:center;background:color-mix(in srgb, var(--deep) 92%, var(--abyss));border:1px solid color-mix(in srgb, var(--tide) 50%, transparent);border-radius:16px;display:grid}.colophon__note{font-family:var(--font-ui);color:var(--mist);font-size:.82rem;line-height:1.7}.colophon__source{font-family:var(--font-ui);letter-spacing:.08em;color:var(--moss);text-decoration-line:underline;-webkit-text-decoration-color:color-mix(in srgb, var(--moss) 45%, transparent);text-decoration-color:color-mix(in srgb, var(--moss) 45%, transparent);text-underline-offset:3px;transition:color var(--dur-base) var(--ease-tide);font-size:.78rem}.colophon__source:hover{color:var(--glow)}.colophon__close{min-height:36px;font-family:var(--font-ui);letter-spacing:.12em;color:var(--moss);border:1px solid color-mix(in srgb, var(--moss) 34%, transparent);padding:var(--space-2) var(--space-6);cursor:pointer;transition:color var(--dur-base) var(--ease-tide), border-color var(--dur-base) var(--ease-tide);background:0 0;border-radius:999px;font-size:.74rem}.colophon__close:hover{color:var(--mist);border-color:color-mix(in srgb, var(--mist) 40%, transparent)}.controls{top:var(--space-3);right:var(--space-3);z-index:50;align-items:center;gap:var(--space-3);display:flex;position:fixed}.lang-toggle,.motion-toggle,.version-badge__chip{font-family:var(--font-ui);letter-spacing:.14em;color:var(--moss);background:color-mix(in srgb, var(--abyss) 55%, transparent);border:1px solid color-mix(in srgb, var(--moss) 34%, transparent);padding:var(--space-1) var(--space-3);cursor:pointer;transition:color var(--dur-base) var(--ease-tide), border-color var(--dur-base) var(--ease-tide), background var(--dur-base) var(--ease-tide);border-radius:999px;font-size:.72rem;position:relative}.lang-toggle:hover,.motion-toggle:hover,.version-badge__chip:hover{color:var(--glow);border-color:color-mix(in srgb, var(--lantern) 55%, transparent)}.motion-toggle[aria-pressed=true]{color:var(--glow);border-color:color-mix(in srgb, var(--lantern) 60%, transparent);background:color-mix(in srgb, var(--lantern) 18%, var(--abyss) 55%)}.lang-toggle:after,.motion-toggle:after,.version-badge__chip:after{content:"";width:max(100%,44px);height:44px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.version-badge{display:flex;position:relative}.version-badge__panel{top:calc(100% + var(--space-2));z-index:60;gap:var(--space-3);min-width:12rem;padding:var(--space-4);font-family:var(--font-ui);background:color-mix(in srgb, var(--deep) 92%, var(--abyss));border:1px solid color-mix(in srgb, var(--tide) 50%, transparent);border-radius:12px;display:grid;position:absolute;right:0}.version-badge__panel[hidden]{display:none}.version-badge__commit{color:var(--mist);font-size:.74rem;line-height:1.6}.version-badge__commit-label{color:var(--moss);letter-spacing:.08em}.version-badge__sha{color:var(--glow);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}a.version-badge__sha{text-decoration-line:underline;-webkit-text-decoration-color:color-mix(in srgb, var(--glow) 45%, transparent);text-decoration-color:color-mix(in srgb, var(--glow) 45%, transparent);text-underline-offset:3px;transition:color var(--dur-base) var(--ease-tide)}a.version-badge__sha:hover{color:var(--lantern)}.version-badge__notes{letter-spacing:.1em;min-height:32px;color:var(--moss);border:1px solid color-mix(in srgb, var(--moss) 34%, transparent);padding:var(--space-1) var(--space-4);transition:color var(--dur-base) var(--ease-tide), border-color var(--dur-base) var(--ease-tide);background:0 0;border-radius:999px;justify-content:center;align-items:center;font-size:.74rem;text-decoration:none;display:inline-flex}.version-badge__notes:hover{color:var(--glow);border-color:color-mix(in srgb, var(--lantern) 55%, transparent)}@media (prefers-reduced-motion:reduce){html:where(:not([data-motion=full])) *,html:where(:not([data-motion=full])) :before,html:where(:not([data-motion=full])) :after{transition-duration:var(--dur-base)!important;animation-duration:.001ms!important;animation-iteration-count:1!important}html:where(:not([data-motion=full])) .threshold:before{animation:32s ease-in-out infinite tide-swell!important}html:where(:not([data-motion=full])) .threshold:after{animation:threshold-glow 7s var(--ease-tide) infinite!important}}:where(html[data-motion=reduced]) *,:where(html[data-motion=reduced]) :before,:where(html[data-motion=reduced]) :after{transition-duration:var(--dur-base)!important;animation-duration:.001ms!important;animation-iteration-count:1!important}html[data-motion=reduced] .threshold:before{animation:32s ease-in-out infinite tide-swell!important}html[data-motion=reduced] .threshold:after{animation:threshold-glow 7s var(--ease-tide) infinite!important}.tunnel{background:radial-gradient(circle at 50% 47%, var(--deep) 0%, var(--abyss) 62%);opacity:0;z-index:10;transition:opacity .5s var(--ease-tide);place-items:center;display:grid;position:fixed;inset:0}.tunnel--visible{opacity:1}.tunnel__light{background:radial-gradient(circle, var(--glow) 0%, var(--lantern) 36%, transparent 70%);opacity:.42;transform-origin:50%;will-change:transform, opacity;border-radius:50%;width:54vmin;height:54vmin;margin:-27vmin 0 0 -27vmin;position:absolute;top:47%;left:50%;transform:scale(.16)}.tunnel__light--waiting{animation:tunnel-wait-breath 1.8s var(--ease-tide) infinite}@keyframes tunnel-wait-breath{0%,to{opacity:1}50%{opacity:.72}}@media (prefers-reduced-motion:reduce){.tunnel__light{opacity:1;transform:scale(2.4)}}.boat{z-index:11;width:104px;color:var(--lantern);opacity:0;pointer-events:none;transition:opacity .7s var(--ease-tide);filter:drop-shadow(0 0 12px color-mix(in srgb, var(--lantern) 24%, transparent));margin-left:-52px;position:fixed;top:60%;left:50%}.boat svg{width:100%;height:auto;display:block}.boat__sail{transition:transform 2.6s var(--ease-tide);transform:translateY(20px)scale(.92)}.boat--afloat .boat__sail{transform:translateY(-54px)scale(.66)}.boat--docking .boat__sail{transform:translateY(-108px)scale(.4)}.boat--afloat{opacity:1}.boat--docking{opacity:0}.boat--afloat .boat__bob{animation:4.2s ease-in-out infinite boat-bob}.boat__paper{fill:color-mix(in srgb, var(--parchment) 90%, transparent)}.boat__deck{fill:color-mix(in srgb, var(--parchment) 58%, var(--deep))}.boat__edge{fill:none;stroke:var(--lantern);stroke-width:2px;stroke-linejoin:round;stroke-linecap:round}.boat__wake{fill:none;stroke:color-mix(in srgb, var(--glow) 36%, transparent);stroke-width:1.5px;stroke-linecap:round}@keyframes boat-bob{0%,to{transform:translateY(0)rotate(-2deg)}50%{transform:translateY(-5px)rotate(2deg)}}@media (prefers-reduced-motion:reduce){.boat__sail,.boat--afloat .boat__sail,.boat--docking .boat__sail{transition:none;transform:translateY(-18px)scale(.78)}.boat--afloat .boat__bob{animation:none}}
