:root{--paper:#f2ede0;--ink:#1c1c1c;--ink-soft:#4a4a42;--bamboo:#4f7a5c;--bamboo-dark:#375240;--jade:#9ccbb0;--line:#d8d0ba;--tassel:#b08d4f;--tassel-dark:#8a6a35}body{color:var(--ink);background:var(--paper);margin:0;padding:2rem;font-family:Songti SC,Noto Serif SC,Georgia,serif;line-height:1.6}.ink-scene{z-index:-1;pointer-events:none;width:100%;height:100%;position:fixed;inset:0}header,main{position:relative}main{max-width:40rem;margin:0 auto;padding:1.5rem 2rem 2.5rem}main:before{content:"";z-index:-1;filter:blur(30px);background:#f2ede0db;position:absolute;inset:-1.5rem -1rem}h1,a{color:var(--bamboo-dark)}.instrument{margin-top:2rem}.instrument__controls{flex-wrap:wrap;align-items:center;gap:.75rem;margin-bottom:.5rem;display:flex}.instrument__waveform,.instrument__mic{font:inherit;border:1px solid var(--ink-soft);background:var(--paper);color:var(--ink);border-radius:.25rem;padding:.35rem .75rem}.instrument__mic{cursor:pointer;background:var(--bamboo);border-color:var(--bamboo-dark);color:var(--paper)}.instrument__mic:disabled{cursor:default;opacity:.7}.instrument__demo{font:inherit;border:1px solid var(--tassel-dark);cursor:pointer;background:var(--tassel);color:var(--ink);border-radius:.25rem;padding:.35rem .75rem}.instrument__demo:disabled{cursor:default;opacity:.7}.instrument__hint{color:var(--ink-soft);margin:0 0 1.5rem;font-size:.9rem}.instrument__body{flex-direction:column;align-items:center;gap:1rem;width:min(94vw,60rem);padding-bottom:5rem;display:flex;position:relative;left:50%;transform:translate(-50%)}.instrument__meter-track{border:1px solid var(--line);background:#1c1c1c0a;border-radius:999px;width:min(88vw,34rem);height:1rem;overflow:hidden}.instrument__meter{transform-origin:0;background:linear-gradient(90deg, var(--jade), var(--bamboo) 80%);width:100%;height:100%;transform:scaleX(0);box-shadow:0 0 12px 2px #9ccbb099}.instrument__flute{filter:drop-shadow(0 7px 14px #1c1c1c47);touch-action:none;background-position:50%;background-repeat:no-repeat;background-size:100% 100%;border-radius:2rem/50%;width:100%;height:4.3rem;position:relative}.instrument__holes{box-sizing:border-box;touch-action:none;user-select:none;flex-direction:row;width:100%;height:100%;padding:0 2rem 0 2.4rem;display:flex;position:relative}.instrument__hole{box-sizing:border-box;color:#faf2e0d9;height:40%;font:inherit;cursor:pointer;touch-action:none;background:0 0;border:none;justify-content:center;align-items:center;margin:1.5rem 0 auto;padding:0;display:flex;position:relative}.instrument__hole:before{content:"";position:absolute;inset:-.9rem 0}.instrument__hole:after{content:"";aspect-ratio:1;background:radial-gradient(at 50% 32%,#241907 0%,#43300f 58%,#6f5426 100%);border-radius:50%;height:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:inset 0 -1px 2px #ffecbe80,inset 0 2px 4px #0009}.instrument__hole-label{z-index:1;text-transform:uppercase;font-size:.72rem;position:relative}.instrument__hole--small{z-index:2;height:27%;margin:0;font-size:.62rem;position:absolute;top:7%}.instrument__hole--active:after{background:radial-gradient(ellipse at 50% 32%, var(--jade) 0%, var(--bamboo) 72%);box-shadow:0 0 13px 3px #9ccbb0cc,inset 0 1px 3px #00000052}@keyframes instrument-invite{0%,to{transform:scale(1);box-shadow:0 0 #4f7a5c00}50%{transform:scale(1.06);box-shadow:0 0 16px #4f7a5c8c}}.instrument__hole--invite{animation:1.4s ease-in-out infinite instrument-invite}@keyframes tassel-sway{0%,to{transform:rotate(-7deg)}50%{transform:rotate(6deg)}}@keyframes tassel-sway-skirt{0%,to{transform:translate(-50%)rotate(5deg)}50%{transform:translate(-50%)rotate(-6deg)}}.instrument__tassel{background:linear-gradient(var(--tassel-dark), var(--tassel));transform-origin:top;pointer-events:none;border-radius:999px;width:.3rem;height:2.3rem;animation:3.4s ease-in-out infinite tassel-sway;position:absolute;top:72%;right:.9rem}.instrument__tassel:after{content:"";background:repeating-linear-gradient(90deg, var(--tassel) 0 1.5px, var(--tassel-dark) 1.5px 3px);transform-origin:top;border-radius:45% 45% 30% 30%;width:1.35rem;height:3.2rem;animation:3.4s ease-in-out infinite tassel-sway-skirt;position:absolute;top:96%;left:50%;box-shadow:inset 0 -.5rem .6rem #3c2a1073}.instrument__tassel:before{content:"";background:var(--tassel-dark);z-index:2;border-radius:40%;width:.5rem;height:.42rem;position:absolute;top:88%;left:50%;transform:translate(-50%)}@media (prefers-reduced-motion:reduce){.instrument__tassel,.instrument__tassel:after{animation:none}}@media (width<=480px){body{padding:1rem}main{padding:.5rem .75rem 1.5rem}h1{margin:.4rem 0 .6rem;font-size:1.6rem}.instrument{margin-top:1.25rem}.instrument__hint{margin-bottom:1rem}.instrument__flute{height:4rem}.instrument__holes{padding:0 1.8rem 0 2.2rem}}.credit{color:var(--ink-soft);margin-top:2.5rem;font-size:.78rem;line-height:1.5}@media (orientation:landscape) and (height<=560px){body{padding:.4rem .9rem}main{max-width:52rem;padding:.3rem .9rem .6rem}h1{margin:.2rem 0 .4rem;font-size:1.2rem}[data-testid=intro]{margin:0 0 .6rem;font-size:.78rem;line-height:1.45}.instrument{margin-top:.6rem}.instrument__controls{gap:.5rem;margin-bottom:.35rem}.instrument__waveform,.instrument__mic,.instrument__demo{padding:.2rem .5rem;font-size:.8rem}.instrument__hint{margin-bottom:.5rem;font-size:.72rem}.instrument__body{gap:.5rem;padding-bottom:3.2rem}.instrument__meter-track{height:.7rem}.instrument__flute{height:3.5rem}.instrument__hole:before{inset:-.6rem 0}.credit{margin-top:.7rem;font-size:.62rem;line-height:1.4}}