#works * {box-sizing:border-box}
#works {margin:0;color:#183454;background:#f8fbff;font:15px/1.75 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif}
#works button, #works a, #works summary {font:inherit}
#works button {cursor:pointer}
#works a {color:inherit;text-decoration:none}
#works button {border:0;background:none;color:inherit}
#works h1, #works h2, #works h3, #works p {margin:0}
#works h1, #works h2, #works h3 {font-family:"Songti SC","Noto Serif CJK SC",serif;color:#102c50;font-weight:600;line-height:1.4}
#works h1 {font-size:42px}
#works h2 {font-size:38px}
#works h3 {font-size:23px}
#works small, #works .muted {color:#6b83a3}
#works .shell {max-width:1160px;margin:auto;padding:0 40px}
#works .browse {position:relative;padding-top:44px;background:radial-gradient(ellipse at 17% 0%,#fff 5%,transparent 65%),linear-gradient(155deg,#f6fbff,#deedfc 80%,#edf5fd);overflow:hidden}
#works .section-head {display:flex;justify-content:space-between;align-items:center}
#works .section-head p {font-size:17px;color:#6480a5;margin-top:8px}
#works .navtools {display:flex;gap:12px;align-items:center;font-size:13px}
#works .arrow {width:38px;height:38px;border-radius:50%;background:#fff9;border:1px solid #c8dbed;display:grid;place-items:center;font-size:22px}
#works .separator {height:1px;background:linear-gradient(90deg,transparent,#b8d4ee,transparent)}
#works .detail {padding-top:16px;padding-bottom:55px;background:radial-gradient(ellipse at 12% 6%,#dfedfc70,transparent 42%),#fafdff}
#works .toolbar {text-align:right;font-size:12px;color:#6c85a2}
#works .work-player-layout {display:grid;grid-template-columns:410px 1fr;gap:46px;align-items:center;padding:18px 0 34px}
#works .vinyl-art {position:relative;width:398px;height:285px;isolation:isolate}
#works .vinyl-art:after {position:absolute;content:"";width:360px;height:30px;left:10px;bottom:-10px;background:radial-gradient(ellipse,#20375455,transparent 70%);filter:blur(10px);z-index:-1}
#works .disc {position:absolute;left:134px;top:6px;width:267px;height:267px;border-radius:50%;background:repeating-radial-gradient(circle at center,#171a1e 0px,#171a1e 1px,#34383b 1.4px,#11161b 2.5px);box-shadow:4px 6px 14px #14203235;display:grid;place-items:center}
#works .disc:after {content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 15deg,transparent,#ffffff28 18deg,transparent 65deg,transparent 160deg,#ffffff16 195deg,transparent 250deg)}
#works .disc-label {width:85px;height:85px;position:relative;background-size:cover;border-radius:50%;z-index:1;box-shadow:0 0 0 8px #151b25}
#works .disc-label:after {content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:#f4f9ff;left:calc(50% - 4px);top:calc(50% - 4px)}
#works .front-cover {position:absolute;left:0;top:0;width:280px;height:280px;object-fit:contain;background:white;box-shadow:2px 1px 0 #8d9da9,8px 10px 18px #1b3c5838;z-index:2}
#works .kind {font-size:12px;letter-spacing:1px;color:#6280a0;margin:7px 0 18px}
#works .featured {font-size:13px;color:#5e7693;line-height:1.9}
#works .player {display:flex;gap:16px;align-items:center;margin-top:22px}
#works .play {height:48px;width:48px;flex-shrink:0;border-radius:50%;background:#2777df;box-shadow:0 6px 15px #1b70ce20;color:white;display:grid;place-items:center;font-size:17px;padding-left:3px}
#works .timeline {flex:1;min-width:0}
#works .wave {height:44px;width:100%;display:block}
#works .time {display:flex;justify-content:space-between;font-size:10px;color:#6c86a6}
#works .sectionlinks {display:flex;gap:28px;padding:12px 0;border-top:1px solid #d9e6f3;border-bottom:1px solid #d9e6f3;font-size:13px;color:#567493}
#works .sectionlinks a:first-child {color:#246dd0}
#works .body-grid {display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);gap:62px;padding-top:28px}
#works .reading p {font-size:14px;color:#56718f;line-height:1.95;margin-top:14px;white-space:pre-line}
#works .video-tabs {display:flex;gap:22px;margin:9px 0 12px;font-size:13px;color:#7e90a5}
#works .video-tabs .active {color:#276fd4;border-bottom:2px solid #276fd4;padding-bottom:5px}
#works .video-poster {aspect-ratio:16/9;background:radial-gradient(ellipse at top right,#294365,#0c192b);display:flex;justify-content:center;align-items:center;position:relative;overflow:hidden;border-radius:3px}
#works .video-poster img {height:100%;width:auto;max-width:100%;object-fit:contain;filter:brightness(.78)}
#works .video-play {position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:54px;height:54px;border:1px solid #fff9;background:#ffffff20;color:white;border-radius:50%;display:grid;place-items:center;font-size:20px;padding-left:3px}
#works .external {display:inline-block;font-size:11px;color:#2b70c2;margin-top:8px}
#works .about {margin-top:27px}
#works .no-video .about {margin-top:0}
#works .lyrics {border-left:1px solid #dce7f3;padding-left:36px}
#works .lyrics p {white-space:pre-line;line-height:2.1}
#works .lyrics small {display:block;font-size:11px;margin-top:5px}
#works .more {margin-top:13px;color:#2d71c0;font-size:12px}
#works .more summary {cursor:pointer;list-style:none}
#works .more summary:after {content:"⌄";margin-left:8px}
#works .more p {color:#56718f}
#works .credits {padding-top:25px;margin-top:28px;border-top:1px solid #dce7f3}
#works .credits h3 {font-size:20px}
#works .credits-grid {display:grid;grid-template-columns:1fr 1fr;gap:6px 28px;margin:12px 0 0}
#works .credit {font-size:12px;display:flex;gap:15px;color:#526d8b}
#works .credit dt {color:#899bb0;min-width:75px}
#works .credit dd {margin:0}
#works .foot {margin-top:30px;padding-top:18px;border-top:1px solid #dce7f3;display:flex;justify-content:space-between;font-size:12px;color:#6985a6}
@media(max-width:600px){
#works {font-size:14px}
#works .shell {padding:0 23px}
#works .browse {padding-top:24px}
#works h1 {font-size:30px}
#works h2 {font-size:28px}
#works h3 {font-size:21px}
#works .section-head p {font-size:13px;margin-top:5px}
#works .navtools {gap:7px}
#works .navtools>span {display:none}
#works .arrow {width:30px;height:30px;font-size:18px}
#works .detail {padding-top:12px;padding-bottom:28px}
#works .toolbar {font-size:11px}
#works .work-player-layout {display:flex;flex-direction:column;gap:25px;padding-top:20px;padding-bottom:24px;align-items:stretch}
#works .vinyl-art {width:295px;height:208px;align-self:center}
#works .front-cover {width:207px;height:207px}
#works .disc {left:100px;top:5px;width:194px;height:194px}
#works .disc-label {width:64px;height:64px;box-shadow:0 0 0 5px #151b25}
#works .vinyl-art:after {width:275px;bottom:-10px;left:6px;height:26px}
#works .kind {margin:5px 0 12px;font-size:11px}
#works .featured {font-size:12px}
#works .player {margin-top:17px;gap:12px}
#works .play {width:43px;height:43px}
#works .wave {height:38px}
#works .sectionlinks {gap:26px;font-size:12px;padding:11px 0}
#works .body-grid {grid-template-columns:1fr;gap:25px;padding-top:23px}
#works .lyrics {border-left:0;border-top:1px solid #dce7f3;padding:22px 0 0}
#works .reading p {font-size:13px;line-height:1.9;margin-top:11px}
#works .lyrics p {line-height:2}
#works .about {margin-top:23px}
#works .video-tabs {font-size:12px;margin:8px 0 10px}
#works .credits {margin-top:22px;padding-top:20px}
#works .credits-grid {grid-template-columns:1fr;gap:5px}
#works .credit {font-size:12px}
#works .foot {font-size:11px;margin-top:25px}
#works .video-play {width:46px;height:46px}
#works .external {font-size:11px}
}
#works {--jacket:208px;--step:85px;--angle:-1.5deg;--counter:1.5deg;--lift:-26px;--spread:46px}
#works .browse {min-height:580px}
#works .record-stage {height:390px;position:relative;overflow:hidden;isolation:isolate;touch-action:pan-y;user-select:none;cursor:grab;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
#works .record-stage:active {cursor:grabbing}
#works .record-stage:after {content:"";position:absolute;inset:auto 0 25px;height:95px;background:radial-gradient(ellipse,#325b8626,transparent 67%);filter:blur(17px);z-index:-1;pointer-events:none}
#works .rail-angle {position:absolute;left:-20%;top:50%;width:140%;height:320px;transform:translateY(-50%) rotate(var(--angle));transform-origin:center;pointer-events:none}
#works .track-center {position:absolute;top:50%;transform:translateY(-50%)}
#works .moving-track {display:flex;width:max-content;will-change:transform}
#works .record-slot {width:var(--step);height:var(--jacket);flex:none;position:relative;transition:transform .45s cubic-bezier(.2,.7,.2,1);pointer-events:none}
#works .record-button {width:var(--jacket);height:var(--jacket);position:relative;display:block;padding:0;border:0;background:none;cursor:pointer;pointer-events:auto;transform:rotate(var(--counter));transition:transform .45s cubic-bezier(.2,.7,.2,1);outline-offset:7px}
#works .jacket {position:absolute;inset:0;transform:perspective(1050px) rotateY(-38deg) rotateX(3deg);transform-origin:left center;transition:transform .45s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d}
#works .jacket:before {content:"";position:absolute;inset:0;background:#a2afbd;transform:translateZ(-16px);box-shadow:7px 13px 20px #20385230;border-radius:2px}
#works .record-spine {position:absolute;left:100%;top:0;width:16px;height:100%;transform:rotateY(90deg);transform-origin:left center;background:linear-gradient(90deg,#d5e1ec,#f0f5f9 35%,#c0cfdd);border-top:1px solid #f8fbff;border-bottom:1px solid #a5b8ca;box-shadow:inset 1px 0 #fff9,inset -1px 0 #798fa64d;color:#34506b;backface-visibility:hidden;pointer-events:none}
#works .spine-title {position:absolute;left:50%;top:9px;bottom:33px;transform:translateX(-50%);writing-mode:vertical-rl;text-orientation:mixed;font:9px/12px -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;letter-spacing:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#works .spine-brand {position:absolute;bottom:6px;left:2px;right:2px;padding-top:5px;border-top:1px solid #839cb366;font:600 7px/1 sans-serif;letter-spacing:.3px;text-align:center}
#works .jacket img {position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#e7eff8;border-radius:2px;box-shadow:inset 0 0 0 1px #fff;backface-visibility:hidden;-webkit-user-drag:none}
#works .jacket:after {content:"";position:absolute;inset:0;background:linear-gradient(105deg,#fff3,transparent 16%,transparent 84%,#14243a20);box-shadow:inset 1px 1px #fff9,inset -2px 0 #1a2b4030;border-radius:2px;pointer-events:none}
#works .record-slot.spread-left {transform:translateX(calc(-1 * var(--spread)))}
#works .record-slot.spread-right {transform:translateX(var(--spread))}
#works .record-slot.is-lifted {z-index:200!important}
#works .record-slot.is-lifted .record-button {transform:rotate(var(--counter)) translateY(var(--lift)) scale(1.04)}
#works .record-slot.is-lifted .jacket {transform:perspective(1050px) rotateY(-19deg) rotateX(0)}
#works .record-button:focus-visible {outline:2px solid #276fd4;border-radius:3px}
#works .record-slot.is-selected .jacket:after {box-shadow:inset 0 0 0 2px #8dc0ff;}
#works #motionToggle {font-size:12px;color:#5a779c}
#works .toolbar button {font-size:12px}
#works .detail[hidden] {display:none}
#works .detail .vinyl-art {overflow:visible}
#works .detail .disc {animation:work-roll-out .75s cubic-bezier(.2,.7,.2,1) both}
#works .disc-label {animation:work-disc-spin 16s linear infinite;animation-play-state:paused}
#works .detail.is-playing .disc-label {animation-play-state:running}
@keyframes work-roll-out{from{transform:translateX(-105px) rotate(-100deg)}to{transform:translateX(0) rotate(0)}}
@keyframes work-disc-spin{to{transform:rotate(360deg)}}
#works .timeline {position:relative}
#works .seek {position:absolute;inset:0 0 15px;width:100%;height:44px;opacity:0;cursor:pointer;margin:0}
#works .seek:focus-visible {opacity:.35}
#works .wave-progress {position:absolute;top:0;left:0;width:0;height:44px;overflow:hidden;pointer-events:none}
#works .wave-progress .wave {width:var(--wave-width,500px)}
#works .media-error {font-size:12px;color:#8f483d;margin-top:8px}
#works .video-tabs button {padding:0 0 5px;font-size:13px}
#works .video-poster {width:100%;border:0;padding:0;cursor:pointer}
#works .video-poster img {pointer-events:none}
#works .video-play {pointer-events:none}
#works .video-frame {aspect-ratio:16/9;position:relative}
#works .video-frame iframe {border:0;width:100%;height:100%}
#works .video-close {display:block;margin:7px 0;font-size:12px;color:#597da6}
#works .foot button {font-size:12px;padding:0;color:#6985a6}
#works .welcome {margin:42px 0;text-align:center;color:#66809f;font-size:13px}
@media(max-width:600px){
#works {--jacket:146px;--step:57px;--lift:-18px;--spread:24px;--angle:-1deg;--counter:1deg}
#works .browse {min-height:396px}
#works .record-stage {height:260px;mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
#works .rail-angle {height:240px}
#works .navtools {gap:6px}
#works #motionToggle {font-size:11px;padding:0 4px}
#works .work-player-layout {gap:24px}
#works .seek {height:38px}
#works .wave-progress {height:38px}
#works .sectionlinks {gap:20px}
#works .featured {overflow-wrap:anywhere}
#works .video-tabs button {font-size:12px}
}
@media(prefers-reduced-motion:reduce){
#works .record-slot, #works .record-button, #works .jacket {transition:none}
#works .detail .disc, #works .disc-label {animation:none}
}
#works [hidden] {display:none!important}
/* Homepage typography and responsive composition. */
#works {scroll-margin-top:72px; color:var(--ink); font-family:inherit; overflow:clip;}
#works .browse {padding-top:64px;}
#works .section-head h2 {font-family:inherit; font-size:var(--oy-section-title,42px); font-weight:650; line-height:1.25; letter-spacing:-.025em;}
#works h2, #works h3 {font-family:inherit;}
#works .detail h3 {font-size:24px;}
#works .detail .detail-title {font-size:38px; line-height:1.3; margin:0;}
#works .shell {max-width:1240px; padding-inline:40px;}
#works .detail {scroll-margin-top:88px;}
#works .detail [id] {scroll-margin-top:100px;}
#works button {font:inherit;}
#works .arrow {font-size:24px; width:44px; height:44px;}
#works .detail .play {font-size:18px;}
#works .sectionlinks {flex-wrap:wrap;}
#works .work-player-layout > * {min-width:0;}
#works .more summary {min-height:32px; padding-block:5px;}
#works .more[open] summary:after {content:'⌃';}
#works .record-stage {outline:none;}
#works .record-button:focus-visible, #works button:focus-visible, #works a:focus-visible, #works summary:focus-visible {outline:2px solid #276fd4; outline-offset:4px;}
#works .detail-title:focus {outline:none;}
#works .vinyl-art {max-width:100%;}
#works .video-tabs {flex-wrap:wrap;}
#works .video-tabs button {min-height:40px;}
#works .video-external {display:block; font-size:12px; color:#2b70c2; margin-top:8px;}
#works .playback-status {font-size:12px; color:#56718f; min-height:1.5em; margin-top:6px;}
#works .disc-label {animation-play-state:paused;}
#works .detail.is-playing:not(.motion-paused) .disc-label {animation-play-state:running;}
@media (max-width:900px) {
 #works .work-player-layout {grid-template-columns:320px minmax(0,1fr);gap:28px;}
 #works .vinyl-art {width:310px;height:225px;}
 #works .front-cover {width:220px;height:220px;}
 #works .disc {width:210px;height:210px;left:100px;}
 #works .vinyl-art:after {width:290px;}
 #works .body-grid {gap:32px;}
 #works .detail .detail-title {font-size:30px;}
}
@media (max-width:600px) {
 #works .browse {padding-top:36px;}
 #works .shell {padding-inline:22px;}
 #works .section-head {align-items:flex-start;gap:16px;}
 #works .section-head h2 {font-size:30px;white-space:nowrap;}
 #works .navtools {gap:4px;flex-wrap:wrap;justify-content:flex-end;}
 #works .arrow {width:36px;height:36px;font-size:20px;}
 #works #motionToggle {min-height:36px;font-size:11px;}
 #works .work-player-layout {display:flex;gap:24px;}
 #works .vinyl-art {width:276px;height:204px;}
 #works .front-cover {width:200px;height:200px;}
 #works .disc {width:188px;height:188px;left:88px;}
 #works .vinyl-art:after {width:260px;}
 #works .detail .detail-title {font-size:28px;}
 #works .body-grid {gap:25px;}
 #works .credits-grid {grid-template-columns:minmax(0,1fr);}
}
#works .is-dragging, #works .is-dragging .record-button {cursor:grabbing}
#works .is-dragging .record-slot {transition:none}