:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:#e9f4ef;font-synthesis:none;--ink:#e9f4ef;--muted:#9bb5ad;--pool:#0a2025;--cyan:#79e1d0;--gold:#f1cb83;--line:#b5e2d72e;background:#071417;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;background:#071417}body{background:radial-gradient(circle at 8% 10%,#23666433,#0000 34rem),#071417;min-width:320px;margin:0;overflow-x:hidden}button,a,[tabindex]{-webkit-tap-highlight-color:transparent}a{color:inherit}.skip-link{z-index:50;color:#071417;background:var(--cyan);border-radius:999px;padding:.65rem .9rem;font-weight:700;position:fixed;top:.75rem;left:.75rem;transform:translateY(-180%)}.skip-link:focus{transform:translateY(0)}.site-header{width:min(100% - 2rem,92rem);margin:0 auto}nav{justify-content:space-between;align-items:center;gap:1rem;min-height:4.5rem;display:flex}.wordmark,.about-link{text-decoration:none}.wordmark{letter-spacing:.02em;align-items:center;gap:.65rem;font-family:Georgia,Times New Roman,serif;font-size:1.04rem;display:inline-flex}.wordmark-mark{aspect-ratio:1;border:1px solid var(--cyan);border-radius:50% 50% 50% 0;width:.76rem;transform:rotate(-45deg);box-shadow:0 0 1.2rem #79e1d059}.about-link{border-bottom:1px solid var(--line);color:var(--muted);letter-spacing:.1em;text-transform:uppercase;padding:.45rem 0;font-size:.78rem}.about-link:hover,.about-link:focus-visible{border-color:var(--cyan);color:var(--ink)}main{width:min(100% - 2rem,92rem);margin:0 auto}.instrument-shell{position:relative}.title-block{z-index:4;pointer-events:none;max-width:min(32rem,64vw);position:absolute;top:clamp(1.6rem,5vw,4.25rem);left:clamp(1.3rem,5vw,5rem)}.eyebrow{color:var(--cyan);letter-spacing:.16em;text-transform:uppercase;margin:0 0 .75rem;font-size:.72rem;font-weight:700}h1,h2,p{margin-top:0}h1,h2{font-family:Georgia,Times New Roman,serif;font-weight:400}h1{letter-spacing:-.06em;text-wrap:balance;max-width:10ch;margin-bottom:.15rem;font-size:clamp(3rem,8vw,7.8rem);line-height:.86}.title-translation{color:var(--gold);letter-spacing:.25em;margin:1.1rem 0 0;font-family:Georgia,Songti SC,serif;font-size:clamp(.85rem,1.4vw,1.15rem)}.play-surface{isolation:isolate;border:1px solid var(--line);background:linear-gradient(180deg, #56beb014, transparent 26%), repeating-radial-gradient(ellipse at 62% 54%, transparent 0 5.4rem, #8ddbcf0a 5.5rem, transparent 5.65rem), var(--pool);cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none;border-radius:clamp(1.2rem,2vw,2.25rem);outline:none;min-height:clamp(35rem,100dvh - 6rem,54rem);position:relative;overflow:hidden;box-shadow:inset 0 0 9rem #0000008c,0 2.5rem 8rem #00000047}.play-surface:before{z-index:-1;content:"";background-image:linear-gradient(#9ae0d50a 1px,#0000 1px),linear-gradient(90deg,#9ae0d50a 1px,#0000 1px);background-size:5.25rem 5.25rem;position:absolute;inset:0;-webkit-mask-image:radial-gradient(circle at 62% 55%,#000,#0000 74%);mask-image:radial-gradient(circle at 62% 55%,#000,#0000 74%)}.play-surface:focus-visible{border-color:#79e1d0bf;box-shadow:0 0 0 3px #79e1d038,inset 0 0 9rem #0000008c,0 2.5rem 8rem #00000047}.play-surface.is-awake .first-invitation{opacity:.16;transform:translate(-50%,-50%)scale(.72)}.play-surface.is-awake .gesture-hint{opacity:0}.water-light{z-index:-1;filter:blur(1px);opacity:.45;border-radius:50%;position:absolute}.water-light-one{aspect-ratio:1;background:radial-gradient(circle,#2c8b844d,#0000 68%);width:58%;bottom:-28%;right:-8%}.water-light-two{aspect-ratio:1;background:radial-gradient(circle,#cca4661c,#0000 70%);width:32%;top:8%;left:46%}.first-invitation{z-index:2;width:9rem;height:9rem;transition:opacity .7s,transform .7s;position:absolute;top:56%;left:62%;transform:translate(-50%,-50%)}.drop{aspect-ratio:1;background:var(--cyan);border-radius:50% 50% 50% 0;width:1.15rem;animation:2.8s ease-in-out infinite float;position:absolute;top:50%;left:50%;transform:translate(-50%,-65%)rotate(-45deg);box-shadow:0 0 2rem #79e1d0cc}.invitation-ring{border:1px solid #79e1d061;border-radius:50%;animation:2.8s ease-out infinite breathe;position:absolute;inset:0}.gesture-hint{z-index:3;color:#c8ddd7;letter-spacing:.04em;white-space:nowrap;margin:0;font-family:Georgia,Times New Roman,serif;font-size:.95rem;font-style:italic;transition:opacity .5s;position:absolute;top:calc(56% + 5.8rem);left:62%;transform:translate(-50%)}.keyboard-hint{z-index:3;color:#d3e8e2a8;letter-spacing:.08em;text-transform:uppercase;gap:1rem;margin:0;font-size:.69rem;display:flex;position:absolute;bottom:1.1rem;right:1.25rem}kbd{text-align:center;border:1px solid #c6e5dc40;border-bottom-color:#c6e5dc73;border-radius:.25rem;min-width:1.4em;padding:.12rem .3rem;font-family:inherit;font-size:.92em}.depth-scale{z-index:3;color:#cce5de70;letter-spacing:.12em;text-transform:uppercase;writing-mode:vertical-rl;border-right:1px solid #cce5de29;flex-direction:column;justify-content:space-between;align-items:flex-end;width:2rem;font-size:.58rem;display:flex;position:absolute;top:1.25rem;bottom:4.2rem;right:1.25rem}.ripple-layer{z-index:1;pointer-events:none;position:absolute;inset:0;overflow:hidden}.ripple{width:var(--ripple-size,2.5rem);aspect-ratio:1;border:1.5px solid hsl(var(--ripple-hue,168deg) 68% 72% / 82%);box-shadow:0 0 1.5rem hsl(var(--ripple-hue,168deg) 70% 65% / 25%), inset 0 0 1.2rem hsl(var(--ripple-hue,168deg) 70% 65% / 15%);animation:ripple-out var(--ripple-duration,1.4s) cubic-bezier(.16, .67, .35, 1) forwards;border-radius:50%;position:absolute;transform:translate(-50%,-50%)scale(.18)}.about{border-bottom:1px solid var(--line);grid-template-columns:minmax(0,1.2fr) minmax(14rem,.8fr);gap:clamp(2rem,8vw,8rem);padding:clamp(4rem,9vw,8rem) clamp(.25rem,4vw,4rem);display:grid}.about h2{letter-spacing:-.045em;max-width:13ch;margin:0;font-size:clamp(2.25rem,5vw,4.8rem);line-height:.98}.about-notes{align-self:end}.about-notes p{border-bottom:1px solid var(--line);color:var(--muted);justify-content:space-between;gap:2rem;margin:0;padding:.85rem 0;display:flex}.about-notes strong{color:var(--ink);font-weight:600}.no-rules{color:var(--gold);font-family:Georgia,Times New Roman,serif;font-size:1.1rem;font-style:italic}footer{color:#9bb5ada3;letter-spacing:.05em;width:min(100% - 2rem,92rem);margin:0 auto;padding:1.5rem 0 2.5rem;font-size:.7rem}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@keyframes breathe{0%{opacity:0;transform:scale(.2)}45%{opacity:.65}to{opacity:0;transform:scale(1)}}@keyframes float{0%,to{transform:translate(-50%,-65%)rotate(-45deg)translateY(-.25rem)}50%{transform:translate(-50%,-65%)rotate(-45deg)translate(-.25rem,.25rem)}}@keyframes ripple-out{0%{opacity:.9;transform:translate(-50%,-50%)scale(.18)}70%{opacity:.32}to{opacity:0;transform:translate(-50%,-50%)scale(9)}}@media (width<=720px){.site-header,main,footer{width:min(100% - 1rem,92rem)}nav{min-height:3.7rem;padding-inline:.25rem}.about-link{font-size:.65rem}.play-surface{border-radius:1.25rem;min-height:calc(100dvh - 4.2rem)}.title-block{max-width:calc(100% - 3rem);top:2rem;left:1.35rem}h1{max-width:8ch;font-size:clamp(3.4rem,17vw,5.8rem)}.first-invitation,.gesture-hint{left:54%}.first-invitation{top:58%}.gesture-hint{top:calc(58% + 5.8rem)}.keyboard-hint{flex-direction:column;gap:.4rem;bottom:1.1rem;left:1.15rem;right:auto}.depth-scale{top:1rem;bottom:1rem;right:.75rem}.about{grid-template-columns:1fr;gap:3rem;padding-inline:1rem}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{scroll-behavior:auto!important;transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important}}
