/* patchof.space — page styles. From the reference <style>, plus the house tokens (handoff §5). */

/* ---- tokens ---- */
:root{
  --bg:rgb(3,7,5);          /* sky black, sampled from IMG_3524 (SPACE_SKY.bg) */
  --ink:#e9e6df;
  --surf:#C4D4BA; --surf-hi:#dde7d4; --pool:#709491;
  --kuroi:#131521; --kuroi-deep:#0c0d16; --astral:#342E4E; --champlain:#435570;
  --star-label:#eef2ff; --line:rgba(196,214,255,.55);
  --mono:'Space Mono',ui-monospace,monospace;
}
a{color:var(--surf)} a:hover{color:var(--pool)}

/* ---- page: nothing scrolls, every input becomes sphere rotation ---- */
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--mono);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- sky layers ---- */
#defs{position:absolute;width:0;height:0}
#sky,#lines{position:fixed;inset:0;width:100%;height:100%;display:block;pointer-events:none}
#sky{z-index:1}
#lines{z-index:2;overflow:visible}
#lines line{stroke:var(--line);stroke-width:1;stroke-linecap:round;fill:none}
#starName{position:fixed;left:0;top:0;z-index:4;pointer-events:none;font-size:12px;letter-spacing:.06em;color:var(--star-label);white-space:nowrap;padding:3px 8px;border:1px solid rgba(196,214,255,.35);background:rgba(3,7,5,.72);border-radius:2px;opacity:0;transition:opacity .18s}
#starName.on{opacity:1}

/* ---- header + logo ---- */
header{position:fixed;top:0;left:0;right:0;height:64px;display:flex;align-items:center;padding:0 10px;z-index:20;pointer-events:none}
#logo{pointer-events:auto;display:flex;align-items:center;gap:6px;background:none;border:0;padding:4px 6px;min-height:44px;color:inherit;text-decoration:none;font-family:inherit;will-change:transform}
#logo:focus{outline:none}
#logo:focus-visible #logoWm{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
#logoIcon{width:52px;height:52px;display:block;transition:opacity .15s}
#logoIcon svg,#logoIcon img{width:100%;height:100%;display:block}
#logoWm{font-weight:700;font-size:17px;letter-spacing:-.01em;color:var(--surf)}
#logoWm b{color:var(--pool);font-weight:700}

/* ---- menu marble ---- */
#zoom{position:fixed;inset:0;z-index:30}
.zBack{position:absolute;inset:0;background:rgba(3,7,5,.6);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);opacity:0;transition:opacity .45s}
#zoom.on .zBack{opacity:1}
.zArt{position:absolute;touch-action:none;cursor:grab}
.zArt:active{cursor:grabbing}
.zArt>svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.nm{cursor:pointer}
.nm text{font-family:var(--mono);font-size:7.2px;letter-spacing:.04em;fill:#bcd2ff}
.nm text.core{fill:#f6f9ff}
.nm .ul{stroke:var(--surf);stroke-width:1;vector-effect:non-scaling-stroke;opacity:0}
.nm.kf .ul{opacity:1}
.nm.kf text.glow{opacity:1;fill:#dfeaff}
.zClose{position:fixed;width:40px;height:40px;border-radius:50%;border:1px solid rgba(196,212,186,.45);background:rgba(3,7,5,.7);color:var(--surf);font:22px/1 var(--mono);padding:0;display:grid;place-items:center;cursor:pointer;z-index:2;opacity:0;transition:opacity .3s .2s}
.zClose:focus-visible{outline:1px solid var(--surf);outline-offset:2px}
#zoom.on .zClose{opacity:1}

/* ---- toast ---- */
#toast{position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:40;font-size:12px;letter-spacing:.05em;padding:8px 14px;background:rgba(3,7,5,.85);border:1px solid rgba(196,212,186,.35);color:var(--ink);opacity:0;transition:opacity .2s;pointer-events:none;white-space:nowrap}
#toast.on{opacity:1}

/* ---- ring mark ---- */
#ring{position:fixed;z-index:20;left:6px;bottom:calc(6px + env(safe-area-inset-bottom));width:44px;height:44px;display:grid;place-items:center;opacity:.55;transition:opacity .2s}
#ring:hover,#ring:focus-visible{opacity:1}
#ring:focus{outline:none}
#ring:focus-visible svg{outline:1px solid var(--surf);outline-offset:3px;border-radius:50%}
#ring svg{display:block;overflow:visible}
.menu-open #ring,.scene-on #ring{visibility:hidden}
.scene-on #starName{display:none}

/* ---- scenes: one canvas over the sky, below the label and the header ---- */
#voyage{position:fixed;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:3}

/* ---- sound button: thumb-sized, mirrors the ring's corner spacing ---- */
#jazz{position:fixed;z-index:20;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));min-width:48px;min-height:48px;padding:0 12px;font:12px/1 var(--mono);letter-spacing:.06em;color:var(--surf);background:rgba(3,7,5,.72);border:1px solid rgba(196,212,186,.45);border-radius:2px;cursor:pointer;opacity:.55;transition:opacity .2s}
#jazz[hidden]{display:none}
#jazz.on{opacity:1;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
#jazz:hover{opacity:.85}
#jazz.on:hover{opacity:1}
#jazz:focus{outline:none}
#jazz:focus-visible{outline:1px solid var(--surf);outline-offset:2px}

/* ---- no-JS fallback ---- */
.nojs{position:fixed;inset:0;display:grid;place-items:center;text-align:center;font-size:12px;letter-spacing:.05em;z-index:5}
.nojs img{width:160px;height:160px;display:block;margin:0 auto 12px}

/* ---- og capture mode ---- */
.og header,.og #ring{display:none}
#ogCard{position:fixed;inset:0;z-index:10;display:none;align-items:center;gap:28px;padding-left:150px}
.og #ogCard{display:flex}
#ogCard .ogIcon{width:220px;height:220px;filter:drop-shadow(0 0 22px rgba(112,148,145,.55))}
#ogCard .ogIcon svg{width:100%;height:100%;display:block}
#ogCard .ogWm{font-weight:700;font-size:56px;letter-spacing:-.01em;color:var(--surf)}
#ogCard .ogWm b{color:var(--pool)}

@media (prefers-reduced-motion: reduce){
  #starName,#toast,.zBack,.zClose,#ring,#logoIcon{transition:none}
}