.hobby__hero{isolation:isolate;padding-block:var(--space-4xl) var(--space-3xl);position:relative;overflow:hidden}.edits,.credits{isolation:isolate;position:relative;overflow:hidden}#piano{--tone:var(--color-accent-2)}#edits{--tone:var(--color-live)}#copyright{--tone:var(--color-accent)}.hobby__hero:before{content:"";z-index:-1;background-image:linear-gradient(var(--rule-blueprint) 1px, transparent 1px), linear-gradient(90deg, var(--rule-blueprint) 1px, transparent 1px);-webkit-mask-image:radial-gradient(ellipse 60% 70% at 75% 45%, var(--color-ink) 15%, transparent 70%);-webkit-mask-image:radial-gradient(ellipse 60% 70% at 75% 45%, var(--color-ink) 15%, transparent 70%);mask-image:radial-gradient(ellipse 60% 70% at 75% 45%, var(--color-ink) 15%, transparent 70%);pointer-events:none;background-size:48px 48px;position:absolute;inset:0}.hobby__head{text-wrap:balance;max-width:12ch;font-size:var(--text-display);overflow-wrap:break-word;min-width:0;line-height:.96}.hobby .lead{color:var(--color-ink-2)}.stage{column-gap:var(--gap-columns);row-gap:var(--space-2xl);grid-template-rows:auto 1fr;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-areas:"head head head head head head.player player player player player""list list list list list list.player player player player player";align-items:start;display:grid}.stage__text{gap:var(--space-lg);grid-area:head;display:grid}.tracks{margin:0 0 calc(var(--space-sm) + 1.55 * var(--text-sm));border-bottom:var(--rule-hair) solid var(--color-rule);grid-area:list;align-self:end;padding:0;list-style:none}.tracks li{border-top:var(--rule-hair) solid var(--color-rule)}.tracks__row{align-items:baseline;gap:var(--space-md);width:100%;min-height:52px;padding:var(--space-sm);border-radius:var(--radius-inner);color:var(--color-ink);text-align:left;cursor:pointer;transition:background-color var(--dur-short) var(--ease-out);background:0 0;border:0;grid-template-columns:3ch minmax(0,1fr) auto 5ch;display:grid}.tracks__row:hover{background:var(--color-paper-2)}.tracks__row:active{background:var(--color-paper-3)}.tracks__row:focus-visible{outline:2px solid var(--color-focus);outline-offset:-2px}.tracks__row[aria-current=true] .tracks__title{color:var(--color-accent)}.tracks__no{font:500 var(--text-sm)/1 var(--font-outlier);color:var(--color-muted)}.tracks__title{align-items:baseline;gap:var(--space-xs);font:500 var(--text-lg)/1.2 var(--font-display);letter-spacing:-.02em;flex-wrap:wrap;min-width:0;display:flex}.tracks__note{font:400 var(--text-sm)/1 var(--font-body);letter-spacing:0;color:var(--color-muted)}.tracks__state{font:400 var(--text-xs)/1 var(--font-outlier);color:var(--color-live)}.tracks__len{font:400 var(--text-sm)/1 var(--font-outlier);color:var(--color-ink-2);text-align:right}.stage__player{top:var(--space-4xl);gap:var(--space-sm);width:min(100%, calc((100svh - var(--space-4xl) - var(--space-3xl) - var(--space-xl)) * 9 / 16));grid-area:player;justify-self:end;margin:0;display:grid;position:sticky}.stage__caption,.edits__caption{justify-content:space-between;align-items:baseline;gap:var(--space-sm) var(--space-lg);font-size:var(--text-sm);color:var(--color-ink-2);flex-wrap:wrap;display:flex}.clip{border:var(--rule-hair) solid var(--color-rule);border-radius:var(--radius-card);background:var(--color-paper-2);box-shadow:var(--shadow-card);position:relative;overflow:hidden}.clip--tall{aspect-ratio:9/16}.clip video{object-fit:cover;background:var(--color-haze-shadow);width:100%;height:100%;position:absolute;inset:0}.clip[data-started=true] video{object-fit:contain}.clip__start{z-index:1;padding:var(--space-md);color:var(--color-ink);cursor:pointer;background:0 0;border:0;place-items:end start;display:grid;position:absolute;inset:0}.clip__start img{object-fit:cover}.clip__start:focus-visible{outline:2px solid var(--color-focus);outline-offset:-4px;border-radius:var(--radius-card)}.clip__play{z-index:1;align-items:center;gap:var(--space-xs);min-height:48px;padding:0 var(--space-lg) 0 var(--space-md);border-radius:var(--radius-pill);background:var(--color-accent);color:var(--color-accent-ink);font:500 var(--text-md)/1 var(--font-body);transition:background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);display:inline-flex;position:relative}.clip__play svg{fill:currentColor;width:1.25rem;height:1.25rem}.clip__start:hover .clip__play{background:var(--color-ink)}.clip__start:active .clip__play{transform:translateY(1px)}.clip__start:disabled{cursor:not-allowed;opacity:.55}.edits{padding-block:var(--section-gap-s) var(--section-gap);border-top:var(--rule-hair) solid var(--color-rule)}.edits__grid{column-gap:var(--gap-columns);row-gap:var(--space-2xl);grid-template-columns:repeat(12,minmax(0,1fr));align-items:start;display:grid}.edits__head{grid-column:1/-1}.edits__head h2:before,.credits h2:before{content:"";width:40px;height:4px;margin-bottom:var(--space-lg);background:var(--tone);border-radius:2px;display:block}.edits__head h2{font-size:var(--text-section);line-height:1}.edits__item{gap:var(--space-md);grid-column:span 6;margin:0;display:grid}.edits__title{font:600 var(--text-lg)/1.2 var(--font-display);letter-spacing:-.02em;color:var(--color-ink)}.spec{gap:var(--space-lg);flex-wrap:wrap;margin:0;display:flex}.spec dt{font-size:var(--text-xs);color:var(--color-muted)}.spec dd{margin:var(--space-3xs) 0 0}.readout{font:400 var(--text-xs)/1.5 var(--font-outlier);color:var(--color-ink-2)}.credits__grid{column-gap:var(--gap-columns);row-gap:var(--space-lg);grid-template-columns:repeat(12,minmax(0,1fr));align-items:start;display:grid}.credits h2{font-size:var(--text-section);text-wrap:balance;grid-column:1/span 5;line-height:1}.credits__body{gap:var(--space-md);max-width:62ch;color:var(--color-ink-2);grid-column:6/-1;display:grid}@media (prefers-reduced-motion:reduce){.clip__play,.tracks__row{transition:none}}@media (max-width:60rem){.stage{row-gap:var(--space-xl);grid-template-columns:minmax(0,1fr);grid-template-areas:"head""player""list"}.stage__text{padding-top:0}.tracks{margin-bottom:0}.stage__player{justify-self:center;width:min(100%,26rem);position:static}.credits h2,.credits__body,.edits__head,.edits__item{grid-column:1/-1}}@media (max-width:40rem){.hobby__hero{padding-block:calc(var(--space-3xl) + var(--space-md)) var(--space-2xl)}.hobby__head{font-size:var(--text-display-s)}.tracks__row{grid-template-columns:3ch minmax(0,1fr) auto}.tracks__state{display:none}}