:root{--zc-background:#eeeede;--zc-surface:#f8f5e9;--zc-ink:#294a40;--zc-muted:#697b69;--zc-accent:#486b54;--zc-accent-ink:#fffbed;--zc-border:#c6ceba;--zc-soft:#e0e5d3;--zc-wood:#354b3d;--zc-wood-light:#617052;--zc-string:#d8c99b;--zc-string-active:#fff0bc}*{box-sizing:border-box}body{margin:0;background:var(--zc-background);color:var(--zc-ink);font:14px/1.65 system-ui,sans-serif}main{max-width:1240px;margin:auto;padding:25px 34px;display:grid;grid-template-columns:1.05fr 1fr;gap:25px 36px}header{grid-column:1/-1;display:flex;justify-content:space-between;gap:12px;font-size:9px;color:var(--zc-muted)}.eyebrow{font-size:9px;letter-spacing:.18em}.intro{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:20px}h1,h2,.intro p,.water-heading p{font-family:Georgia,serif;font-weight:400}h1{font-size:clamp(32px,4vw,49px);line-height:1.12;margin:12px 0 0}.intro p{font-size:15px;line-height:1.8;font-style:italic;color:var(--zc-muted)}.water-panel{position:relative;min-height:415px;border-radius:45% 45% 4px 4px;overflow:hidden;background:var(--zc-soft);isolation:isolate}canvas{position:absolute;inset:0;width:100%;height:100%}.water-heading{position:absolute;top:34px;left:20px;right:20px;text-align:center;pointer-events:none}.water-heading p{font-size:21px;margin:12px 0}.water-footer{position:absolute;bottom:22px;left:0;right:0;text-align:center;letter-spacing:.2em;font-size:9px;color:var(--zc-ink)}.instrument{align-self:stretch;background:repeating-linear-gradient(0deg,transparent,transparent 16px,color-mix(in srgb,var(--zc-wood-light) 20%,transparent) 17px),linear-gradient(105deg,var(--zc-wood),var(--zc-wood-light) 55%,var(--zc-wood));border-radius:22% 7% 18% 6%;padding:32px 25px 22px;box-shadow:inset 0 0 0 1px var(--zc-wood-light)}.instrument-top{display:flex;justify-content:space-between;gap:8px;font-size:8px;letter-spacing:.12em;color:var(--zc-string);margin:0 15px 15px}.string{border:0;background:transparent;padding:0;display:flex;align-items:center;gap:12px;width:100%;min-height:44px;color:var(--zc-string);border-radius:4px;touch-action:manipulation;cursor:pointer}.number{font-family:Georgia,serif;font-size:16px;display:grid;place-items:center;min-width:24px}.pitch{font-size:9px;min-width:22px}.line{height:1px;background:var(--zc-string);flex:1;position:relative;box-shadow:0 2px 2px var(--zc-wood)}.string:nth-child(-n+3) .line{height:2px}.string.next{color:var(--zc-string-active);background:color-mix(in srgb,var(--zc-string) 12%,transparent)}.string.next .number{outline:1px solid var(--zc-string-active);border-radius:50%}.string.next .line{background:var(--zc-string-active)}.string:active .line{transform:translateY(2px)}.string:focus-visible{outline:2px solid var(--zc-string-active);outline-offset:3px}.instrument-bottom{display:block;text-align:center;font-size:8px;letter-spacing:.22em;color:var(--zc-string);margin-top:15px}.lesson{grid-column:1/-1;border-top:1px solid var(--zc-border);padding-top:23px;display:grid;grid-template-columns:1fr 1.3fr;gap:14px 35px}h2{font-size:26px;line-height:1.25;margin:9px 0}.lesson p{font-size:12px;color:var(--zc-muted);margin:8px 0}.lesson-options{display:flex;flex-wrap:wrap;gap:8px;align-content:center}.lesson-options label{font-size:10px;color:var(--zc-muted);flex:1 1 100%}.lesson-options select{display:block;width:100%;margin-top:5px}button:not(.string),select{font:inherit;min-height:44px;padding:8px 13px;border:1px solid var(--zc-border);border-radius:4px;background:var(--zc-surface);color:var(--zc-ink)}button:not(.string){cursor:pointer;font-size:12px;touch-action:manipulation}button.primary{background:var(--zc-accent);color:var(--zc-accent-ink)}button:disabled{opacity:.5;cursor:default}button:focus-visible,select:focus-visible{outline:3px solid var(--zc-accent);outline-offset:4px}#score{display:flex;gap:8px;flex-wrap:wrap;align-items:center;grid-column:1/-1}#score span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--zc-border);font-size:11px;color:var(--zc-muted)}#score span.done{background:var(--zc-soft);color:var(--zc-ink)}#score span.current{background:var(--zc-accent);color:var(--zc-accent-ink)}.lesson-foot{grid-column:1/-1;display:flex;justify-content:space-between;gap:10px;font-size:10px;color:var(--zc-muted)}#status{grid-column:1/-1;min-height:20px}footer{grid-column:1/-1;font-size:9px;color:var(--zc-muted);text-align:center}@media(max-width:650px){main{padding:20px;display:flex;flex-direction:column;gap:20px}header{font-size:8px}.intro{display:block}h1{font-size:36px}.intro p{font-size:14px;margin:12px 0 0}.water-panel{min-height:230px;border-radius:42% 42% 4px 4px}.water-heading{top:24px}.water-heading p{font-size:18px;margin:7px 0}.water-footer{bottom:17px;font-size:8px}.instrument{padding:25px 18px 20px}.instrument-top{font-size:7px;margin:0 7px 10px}.instrument-bottom{font-size:7px}.string{min-height:44px}.lesson{display:block;padding-top:18px}.lesson-options{margin:17px 0}.lesson-options button{flex:1}#score{margin:16px 0}.lesson-foot{font-size:9px}#status{font-size:11px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* An instrument beside a quiet pool, with the score kept on the lower margin. */
body{background:radial-gradient(circle at 18% 3%,var(--zc-surface),transparent 44%),var(--zc-background)}
header{padding-bottom:13px;border-bottom:1px solid var(--zc-border);text-transform:uppercase}
.intro{align-items:end;margin:6px 0 5px}
.intro p{border-left:1px solid var(--zc-border);padding-left:20px;max-width:240px}
.water-panel{min-height:460px;border:10px solid var(--zc-surface);border-radius:46% 46% 4px 4px / 28% 28% 4px 4px;outline:1px solid var(--zc-border);box-shadow:0 22px 45px color-mix(in srgb,var(--zc-ink) 14%,transparent)}
.water-panel::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 54%,transparent 35%,color-mix(in srgb,var(--zc-ink) 16%,transparent))}
.water-heading{z-index:1;top:39px}.water-heading p{font-size:clamp(22px,2.7vw,32px)}
.water-footer{z-index:1;letter-spacing:.26em}
.instrument{position:relative;overflow:hidden;border:7px solid color-mix(in srgb,var(--zc-wood) 80%,var(--zc-border));border-radius:43% 12% 34% 8% / 13% 7% 11% 6%;padding:47px 32px 35px;box-shadow:0 22px 40px color-mix(in srgb,var(--zc-ink) 21%,transparent),inset 0 0 0 1px var(--zc-string)}
.instrument::before{content:"";position:absolute;inset:16px 18px;border:1px solid color-mix(in srgb,var(--zc-string) 32%,transparent);border-radius:inherit;pointer-events:none}
.instrument-top,.instrument-bottom{position:relative}
.string{position:relative;min-height:49px;transition:background .16s}
.string .line{height:2px;background:linear-gradient(90deg,color-mix(in srgb,var(--zc-string) 52%,transparent),var(--zc-string),color-mix(in srgb,var(--zc-string) 48%,transparent));transform-origin:50% 50%}
.string.sounding{background:color-mix(in srgb,var(--zc-string-active) 14%,transparent);color:var(--zc-string-active)}
.string.sounding .line{animation:string-vibrate .58s ease-out}
@keyframes string-vibrate{0%,100%{transform:translateY(0)}18%,52%{transform:translateY(-3px)}36%,72%{transform:translateY(2px)}}
.lesson{position:relative;margin-top:10px;padding-top:29px}
.lesson::before{content:"A SCORE FOR THE MOMENT";position:absolute;top:-18px;left:0;padding-right:12px;background:var(--zc-background);font-size:9px;letter-spacing:.18em;color:var(--zc-muted)}
#score span{width:35px;height:35px}
@media(max-width:650px){main{padding:18px 17px 26px;gap:18px}.intro p{padding:0;border:0}.water-panel{min-height:280px;border-width:6px}.water-heading{top:29px}.water-heading p{font-size:21px}.instrument{padding:28px 22px 24px;border-width:5px}.instrument::before{inset:10px}.string{min-height:46px}.lesson{margin-top:9px;padding-top:21px}}
@media(prefers-reduced-motion:reduce){.string{transition:none!important}.string.sounding .line{animation:none!important}}
@media(max-width:650px){main{padding:12px 14px 22px;gap:11px}header{order:0;padding-bottom:5px}.intro{order:1;margin:0}.intro h1{font-size:31px;line-height:1.04;margin:4px 0}.intro p{font-size:12px;line-height:1.3;margin:5px 0 0}.instrument{order:2;padding:19px 17px 14px}.instrument-top{margin-bottom:4px}.instrument-bottom{margin-top:6px}.string{min-height:44px}.water-panel{order:3;min-height:230px}.lesson{order:4}footer{order:5}}
:root{--zc-water-ink:#294a40}
.water-heading,.water-footer{color:var(--zc-water-ink)}
[data-motion=reduced] .string{transition:none!important}
[data-motion=reduced] .string.sounding .line{animation:none!important}

/* Round two: a lacquered instrument crossing a pale ink-water table. */
:root{--zc-qin-paper:#e9e5d7;--zc-qin-lacquer:#3d302c;--zc-qin-lacquer-light:#64483e;--zc-qin-metal:#d2b88a;--zc-qin-ink:#273d39}
body{background:radial-gradient(circle at 64% -8%,var(--zc-surface),transparent 55%),var(--zc-qin-paper)}
main{max-width:1310px;display:grid;grid-template-columns:1fr;gap:0;padding:17px 27px 27px}
header{grid-column:1;grid-row:1;padding:5px 0 10px}
.intro{grid-column:1;grid-row:2;margin:13px 0 14px;align-items:end}
.intro h1{font-size:clamp(38px,4.2vw,57px);max-width:16ch;line-height:1.05}
.intro p{font-size:13px;color:var(--zc-qin-ink);border-color:var(--zc-border)}
.water-panel{grid-column:1;grid-row:3;height:475px;min-height:0;border:0;outline:0;border-radius:0;box-shadow:none;background:var(--zc-soft)}
.water-panel::after{background:linear-gradient(180deg,color-mix(in srgb,var(--zc-qin-paper) 43%,transparent),transparent 38%,color-mix(in srgb,var(--zc-qin-paper) 25%,transparent))}
.water-heading{top:28px;left:35px;right:auto;text-align:left;color:var(--zc-qin-ink)}
.water-heading p{font-size:clamp(21px,2.5vw,33px);margin:3px 0}
.water-footer{bottom:17px;color:var(--zc-qin-ink)}
.instrument{grid-column:1;grid-row:3;z-index:2;justify-self:center;align-self:end;width:83%;height:299px;margin-bottom:40px;padding:29px 52px 16px;background:repeating-linear-gradient(3deg,transparent 0 8px,color-mix(in srgb,var(--zc-qin-metal) 7%,transparent) 9px 10px),linear-gradient(90deg,var(--zc-qin-lacquer),var(--zc-qin-lacquer-light) 28%,var(--zc-qin-lacquer) 74%,var(--zc-qin-lacquer-light));border:3px solid var(--zc-qin-lacquer);border-radius:43% 19% 25% 11% / 22% 11% 22% 12%;box-shadow:0 19px 25px color-mix(in srgb,var(--zc-qin-lacquer) 45%,transparent),inset 0 2px 3px color-mix(in srgb,var(--zc-qin-metal) 29%,transparent)}
.instrument::before{inset:11px 22px;border-color:color-mix(in srgb,var(--zc-qin-metal) 27%,transparent)}
.instrument::after{content:"";position:absolute;top:22%;bottom:20%;left:31%;width:38%;pointer-events:none;background:radial-gradient(circle at 0% 50%,var(--zc-qin-metal) 0 2px,transparent 3px),radial-gradient(circle at 28% 50%,var(--zc-qin-metal) 0 2px,transparent 3px),radial-gradient(circle at 63% 50%,var(--zc-qin-metal) 0 2px,transparent 3px),radial-gradient(circle at 100% 50%,var(--zc-qin-metal) 0 2px,transparent 3px);opacity:.62}
.instrument-top{margin:0 18px 4px;color:var(--zc-qin-metal)}
.string{min-height:30px;color:var(--zc-qin-metal)}
.string .line{background:linear-gradient(90deg,color-mix(in srgb,var(--zc-qin-metal) 65%,transparent),var(--zc-qin-metal),color-mix(in srgb,var(--zc-qin-metal) 60%,transparent));box-shadow:0 2px 3px var(--zc-qin-lacquer)}
.instrument-bottom{margin-top:8px;color:var(--zc-qin-metal)}
.lesson{grid-column:1;grid-row:4;grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin-top:29px;border-color:var(--zc-border)}
.lesson::before{background:var(--zc-qin-paper)}
@media(max-width:650px){main{display:flex;flex-direction:column;gap:0;padding:10px 13px 22px}.intro{order:1;margin:9px 0 10px}.intro h1{font-size:30px}.intro p{font-size:11px;margin:5px 0}.instrument{order:2;width:100%;height:auto;min-height:305px;margin:0;padding:24px 25px 17px;border-width:2px}.instrument::before{inset:8px}.instrument::after{display:none}.instrument-top{margin:0 7px 5px}.string{min-height:37px}.instrument-bottom{margin-top:5px}.water-panel{order:3;height:195px;min-height:195px;margin-top:10px}.water-heading{top:14px;left:18px}.water-heading p{font-size:19px}.water-footer{bottom:10px}.lesson{order:4;margin-top:17px;display:block}.lesson::before{background:var(--zc-qin-paper)}footer{order:5}}
body,header,.intro h1,.lesson,.lesson h2,.lesson p,.lesson .eyebrow,.lesson-foot,#status,footer{color:var(--zc-qin-ink)}
.lesson button:not(.string),.lesson select{background:var(--zc-qin-paper);color:var(--zc-qin-ink);border-color:var(--zc-border)}
.lesson button.primary{background:var(--zc-qin-ink);color:var(--zc-qin-paper)}

/* Seven strings remain visible; melody instructions scroll below the instrument. */
html,body{height:100%;overflow:hidden}
main{height:100dvh;max-height:100dvh;grid-template-rows:auto auto minmax(0,1fr) minmax(110px,150px) auto;overflow:hidden;padding-bottom:7px}
.water-panel{height:100%;min-height:0}
.instrument{max-height:100%}
.lesson{min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;margin-top:6px;padding-top:8px}
.lesson:focus-visible{outline:2px solid var(--zc-qin-ink);outline-offset:-2px}
footer{margin:2px 0}
@media(max-width:650px){main{display:flex;flex-direction:column;padding:6px 10px 5px}.intro{flex:none;margin:3px 0 5px}.intro h1{font-size:clamp(25px,7vw,29px)}.intro p{margin:2px 0;line-height:1.2}.instrument{flex:none;height:min(305px,42dvh);min-height:0;padding:15px 20px 9px}.instrument-top{margin-bottom:2px}.string{min-height:clamp(28px,4.5dvh,36px)}.instrument-bottom{margin-top:3px}.water-panel{flex:1 1 0;height:auto;min-height:0;margin-top:5px}.lesson{flex:0 1 152px;min-height:66px;margin-top:5px;padding-top:6px}.lesson h2{font-size:20px;margin:2px 0}.lesson-options{margin:4px 0}.lesson-options button{min-height:38px}footer{flex:none}}
@media(max-width:650px){.lesson{display:flex;flex-direction:column}.lesson-options{order:-1;flex:none}.lesson>div:first-child{flex:none}}
@media(min-width:651px) and (max-height:760px){.intro h1{font-size:clamp(36px,4vw,50px);line-height:1.02}.instrument{padding:15px 42px 8px;margin-bottom:10px}.instrument-top{margin:0 12px 2px}.string{min-height:26px}.instrument-bottom{margin-top:2px}}