@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=DM+Sans:wght@400;500;600&family=Noto+Serif+SC:wght@300;400&family=Noto+Serif+TC:wght@300;400&display=swap');
:root{color-scheme:dark;--ink:#e6e2e5;--muted:#8f8995;--line:#e6c3e016;--accent:#ddafb9;--serif:'Noto Serif SC','Songti SC',serif;--sans:'DM Sans','PingFang SC',sans-serif;font-family:var(--sans);font-synthesis:none}*{box-sizing:border-box}html{background:#05060b}body{margin:0;color:var(--ink)}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:1px solid #e2b4c0;outline-offset:6px}button:disabled{opacity:.5}#gallery{height:100svh;min-height:930px;position:relative;isolation:isolate;overflow:hidden;padding:0 4.2%}#art{position:absolute;width:100%;height:100%;inset:0;z-index:-3;touch-action:none;cursor:grab}#art:active{cursor:grabbing}.grain{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,#04050a44,transparent 30%,transparent 76%,#04050a44)}.topbar{height:109px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;gap:13px;align-items:center}.brand svg{width:34px;height:38px;fill:none;stroke:var(--accent);stroke-width:.8}.brand>span{font-size:23px;font-weight:400;letter-spacing:6px}.brand small{display:block;margin-top:7px;font-size:10px;letter-spacing:2.7px;color:#8c7b89}.header-edition{display:flex;align-items:center;gap:15px;font-size:11px;letter-spacing:3px;color:#8a7e8d}.line{width:25px;height:1px;background:#81727e}.header-actions{display:flex;align-items:center;gap:20px}.languages{display:flex;gap:3px}.languages button{font-size:12px;color:#726b77;padding:9px 8px;transition:color .3s}.languages button[aria-pressed=true]{color:#e0b7c4}.languages button:hover{color:#fff}.action-divider{height:15px;width:1px;background:var(--line)}.quiet-button{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:1px;padding:10px 0}.quiet-button svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.1}.quiet-button:hover{color:#eab9ce}.intro{position:absolute;top:23%;left:4.2%;width:27%;max-width:390px}.eyebrow{font-size:11px;letter-spacing:3px;color:#b798ac;display:flex;gap:12px;align-items:center}.eyebrow i{height:3px;width:3px;background:#d6a6bc;transform:rotate(45deg);box-shadow:0 0 12px #db78b8}.intro h1{font-family:var(--serif);font-size:clamp(34px,3.25vw,50px);font-weight:300;line-height:1.65;letter-spacing:2px;margin:24px 0 20px}.intro h1 em{font-style:normal;color:#e4bcc9}.intro p{font-size:13px;font-weight:400;line-height:2.2;letter-spacing:.6px;color:#958996;max-width:320px}.enter-scene{display:flex;align-items:center;gap:32px;margin-top:27px;padding:11px 0;font-size:12px;letter-spacing:2px;color:#dbb9c6}.enter-scene svg{width:33px;height:14px;fill:none;stroke:currentColor;stroke-width:.8;transition:transform .3s}.enter-scene:hover svg{transform:translateX(8px)}.piece-meta{display:flex;align-items:center;gap:17px;margin-top:38px}.piece-meta>span{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:37px;font-weight:300;line-height:1;color:#8b6c82;width:32px}.piece-meta>div{border-left:1px solid #ad859744;padding-left:17px}.piece-meta h2{font-family:var(--serif);font-size:16px;font-weight:300;letter-spacing:4px;margin:0 0 9px}.piece-meta div>span{font-size:9px;letter-spacing:2px;color:#837684}.scene-top{position:absolute;left:54%;top:15.2%;transform:translateX(-50%);display:flex;gap:10px;align-items:center;font-size:10px;letter-spacing:2.5px;color:#8b7689;pointer-events:none}.small-spark{font-size:18px;color:#cc9db6}.controls{position:absolute;right:4.2%;top:25%;width:186px;padding:20px 0 16px 23px;border-left:1px solid #e6bce01c;background:linear-gradient(90deg,#14101a22,transparent);backdrop-filter:blur(4px)}.panel-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:27px;font-family:var(--serif);font-size:14px;letter-spacing:3px;color:#d0b8c9}.panel-heading svg{width:19px;height:19px;stroke:#ba98b0;fill:none;stroke-width:.8}.control-group{margin-bottom:25px}.control-label{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:#9e8d9f;letter-spacing:1px}.control-label output{font-size:11px;color:#c1a8b9;letter-spacing:0}input[type=range]{appearance:none;width:100%;height:2px;margin:18px 0 0;display:block;background:linear-gradient(90deg,#ddafb9 12%,#3b2e40 12%);cursor:pointer}input[type=range]::-webkit-slider-thumb{appearance:none;width:7px;height:7px;border-radius:50%;background:#e2c2d2;box-shadow:0 0 8px #c389bd99}input[type=range]::-moz-range-thumb{height:7px;width:7px;border:0;background:#e2c2d2}.palette-label{display:flex;justify-content:space-between;font-size:12px;color:#9e8d9f;letter-spacing:1px}.palette-label span:last-child{font-size:10px;color:#8d788d}.palettes{display:flex;align-items:center;gap:23px;margin:21px 0 28px;padding-left:4px}.swatch{width:15px;height:15px;border-radius:50%;padding:0;background:var(--swatch);position:relative;box-shadow:0 0 14px color-mix(in srgb,var(--swatch),transparent 85%)}.swatch:before{content:'';position:absolute;inset:-9px}.swatch.selected:after{content:'';position:absolute;inset:-5px;border:1px solid #e6bce06b;border-radius:50%}.panel-footer{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:16px}.panel-footer button{display:flex;align-items:center;gap:7px;padding:0;color:#a493a5;font-size:11px}.panel-footer button:hover{color:#e9c7dd}.panel-footer svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1}.scene-bottom{position:absolute;top:73%;left:54%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:2px;color:#a08c9f;white-space:nowrap;pointer-events:none}.hint-dot{width:4px;height:4px;transform:rotate(45deg);border:1px solid #b694b2}.collection{position:absolute;bottom:71px;left:4.2%;right:4.2%}.collection-heading{display:flex;align-items:center;justify-content:space-between;color:#a48d9f;font-size:12px;letter-spacing:2px;margin-bottom:16px}.collection-count{font-family:'Cormorant Garamond',serif;font-size:14px;letter-spacing:3px;color:#6c5b70}.artworks{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.artwork{border:1px solid #e6bce015;border-radius:2px;background:linear-gradient(125deg,#27203025,#100d1522);height:114px;position:relative;display:flex;align-items:center;text-align:left;overflow:hidden;transition:background .4s,border-color .4s,transform .4s}.artwork:hover{border-color:#a47d9755;transform:translateY(-3px);background:#25172566}.artwork.active{border-color:#b687a35c;background:linear-gradient(110deg,#38233044,#18101d55)}.artwork.active:after{content:'';position:absolute;bottom:0;left:20%;right:20%;height:1px;background:linear-gradient(90deg,transparent,#deafd1,transparent);box-shadow:0 -5px 24px #ba7fb344}.thumb{width:39%;height:110px;object-fit:contain;flex-shrink:0;pointer-events:none}.card-text{display:flex;flex-direction:column;gap:9px}.card-text>small{font-size:8px;letter-spacing:1.6px;color:#7c687c}.card-text>strong{font-family:var(--serif);font-weight:400;font-size:15px;letter-spacing:3px;color:#cdbdcc}.card-text>span{font-size:10px;letter-spacing:.5px;color:#8c778e}.card-arrow{position:absolute;right:13px;top:11px;font-size:14px;font-weight:300;color:#9c7b95}footer{position:absolute;bottom:27px;left:4.2%;right:4.2%;display:flex;justify-content:space-between;font-size:10px;letter-spacing:2px;color:#6d6074}.footer-separator{margin:0 14px;color:#513f54}.immersive-top,.immersive-bottom{position:absolute;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .8s}.immersive-top{top:33px;left:40px;right:40px;display:flex;justify-content:space-between;align-items:center}.immersive-brand{font-size:15px;letter-spacing:4px;color:#bfaac1}.immersive-brand i{font-style:normal;color:#625168;margin:0 20px}.immersive-brand span{font-size:11px;letter-spacing:3px}.immersive-bottom{bottom:35px;left:50%;width:430px;max-width:90%;transform:translateX(-50%);display:flex;justify-content:space-between;align-items:center;text-align:center}.immersive-bottom div>span{font-size:10px;letter-spacing:3px;color:#9c7fa0}.immersive-bottom h2{font-family:var(--serif);font-weight:300;font-size:23px;letter-spacing:6px;margin:13px 0}.immersive-bottom p{font-size:11px;letter-spacing:1.5px;color:#9e89a2}.scene-arrow{font-size:25px;font-weight:300;padding:15px;color:#baa0c4}.scene-arrow:hover{color:#f5d6ed}kbd{font:9px var(--sans);border:1px solid #ad83aa44;border-radius:3px;padding:3px 5px;color:#a489ab}.topbar,.intro,.controls,.collection,footer,.scene-top,.scene-bottom{transition:opacity .75s,visibility .75s}.immersed .topbar,.immersed .intro,.immersed .controls,.immersed .collection,.immersed footer,.immersed .scene-top,.immersed .scene-bottom{opacity:0;visibility:hidden;pointer-events:none}.immersed .immersive-top,.immersed .immersive-bottom{opacity:1;visibility:visible;pointer-events:auto}.immersed{height:100svh!important;min-height:0!important}#hold-orbit{position:fixed;width:44px;height:44px;border:1px solid #e0afda55;border-radius:50%;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.5);transition:opacity .3s,transform .6s;box-shadow:0 0 30px #c297d633}#hold-orbit:after{content:'';position:absolute;inset:8px;border:1px dotted #f4d1ef88;border-radius:50%}.holding #hold-orbit{opacity:1;transform:translate(-50%,-50%) scale(1.7)}#error{position:absolute;top:35%;left:35%;max-width:350px;background:#19121e;border:1px solid #80617a;padding:25px;z-index:4}#error h2{font-family:var(--serif);font-size:20px;font-weight:300}#error p{font-size:14px;line-height:1.8;color:#b6a6b9}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
html[lang=en]{--serif:'Cormorant Garamond',Georgia,serif}html[lang=en] .intro h1{font-size:clamp(43px,4.8vw,72px);line-height:1.12;letter-spacing:-1px;margin:27px 0}html[lang=en] .intro h1 em{font-style:italic}html[lang=en] .intro p{line-height:1.9;letter-spacing:.2px}html[lang=en] .card-text strong{font-size:21px;letter-spacing:.4px}html[lang=en] .card-text>span{font-size:10px;letter-spacing:0}html[lang=en] .panel-heading{font-family:var(--sans);font-size:13px;letter-spacing:1px}html[lang=en] .piece-meta h2{font-size:24px;letter-spacing:.7px}html[lang=zh-Hant]{--serif:'Noto Serif TC','Songti TC',serif}
@media(max-width:1100px){#gallery{min-height:900px;padding:0 3%}.topbar{height:90px}.header-edition{display:none}.intro{left:3%;width:27%;top:21%}.intro h1{font-size:35px}.intro p{font-size:12px;letter-spacing:0}.controls{right:3%;width:157px;padding-left:16px;top:24%}.header-actions{gap:13px}.collection{left:3%;right:3%}.artworks{gap:9px}.artwork{height:108px}.thumb{width:34%;height:96px}.card-text strong{font-size:14px;letter-spacing:2px}.card-text>span{font-size:9px}.card-text>small{font-size:7px;letter-spacing:1px}html[lang=en] .card-text strong{font-size:17px}html[lang=en] .card-text>span{font-size:8px}.eyebrow{font-size:10px;letter-spacing:1px}.scene-top{top:14%}.scene-bottom{top:72%}}
@media(max-width:700px){#gallery{height:auto;min-height:1350px;padding:0 22px}.topbar{height:88px}.brand{gap:9px}.brand svg{width:25px;height:30px}.brand>span{font-size:19px;letter-spacing:4px}.brand small{font-size:8px;letter-spacing:1.6px}.header-actions{gap:7px}.action-divider{display:none}.languages{gap:0}.languages button{font-size:12px;padding:8px}.header-actions>.quiet-button{padding:9px 0 9px 4px}.header-actions>.quiet-button>span{display:none}.header-actions>.quiet-button svg{width:17px;height:17px}.intro{left:24px;top:124px;width:85%;max-width:none}.eyebrow{font-size:10px;letter-spacing:2px}.intro h1{font-size:33px;line-height:1.6;letter-spacing:3px;margin:21px 0 13px}.intro p{font-size:12px;line-height:2;max-width:270px}.enter-scene{margin-top:14px;font-size:11px;gap:22px}.piece-meta{position:absolute;top:445px;left:0;margin:0;gap:10px}.piece-meta>span{font-size:26px;width:23px}.piece-meta h2{font-size:13px;letter-spacing:3px;margin-bottom:7px}.piece-meta div>span{font-size:8px;letter-spacing:1px}.piece-meta>div{padding-left:12px}.scene-top{top:405px;left:auto;right:25px;transform:none;font-size:8px;gap:7px;letter-spacing:1px}.small-spark{font-size:15px}.scene-bottom{top:701px;left:50%;font-size:10px;letter-spacing:1px}.controls{top:754px;left:22px;right:22px;width:auto;padding:19px 18px;display:grid;grid-template-columns:1fr 1fr;column-gap:23px;border:1px solid #e6bce019;background:#21162844;backdrop-filter:blur(8px)}.panel-heading{grid-column:1/-1;margin-bottom:22px;font-size:14px}.control-group{margin-bottom:24px}.control-group:nth-of-type(4){grid-column:1}.control-label{font-size:12px}.control-label output{font-size:11px}.palette-label{grid-column:2;grid-row:3;font-size:12px;display:block;padding-top:1px}.palette-label span:last-child{display:none}.palettes{grid-column:2;grid-row:3;margin:32px 0 0;gap:25px;padding-left:4px;align-self:start}.swatch{width:12px;height:12px}.panel-footer{grid-column:1/-1;padding-top:16px}.panel-footer button{font-size:12px}.collection{left:22px;right:22px;bottom:65px}.collection-heading{font-size:11px;letter-spacing:1px;margin-bottom:13px}.artworks{grid-template-columns:repeat(2,1fr);gap:9px}.artwork{height:92px}.thumb{width:33%;height:90px}.card-text{gap:7px}.card-text>small{font-size:6px;letter-spacing:.5px}.card-text>strong{font-size:13px;letter-spacing:2px}.card-text>span{font-size:8px;letter-spacing:0}.card-arrow{font-size:11px;right:8px;top:8px}footer{left:22px;right:22px;bottom:26px;font-size:8px;letter-spacing:.7px}.footer-separator{margin:0 6px}.immersive-top{top:19px;left:20px;right:20px}.immersive-brand{font-size:13px;letter-spacing:3px}.immersive-brand i{margin:0 8px}.immersive-brand span{font-size:9px}.immersive-top .quiet-button{font-size:11px}.immersive-bottom{bottom:23px;width:92%}.immersive-bottom h2{font-size:21px;letter-spacing:4px}.immersive-bottom p{font-size:10px;letter-spacing:.2px;max-width:235px}.immersive-bottom div>span{font-size:9px}.scene-arrow{padding:10px;font-size:23px}#art{touch-action:pan-y}.immersed #art{touch-action:none}#error{left:22px;right:22px;max-width:none;top:435px}html[lang=en] .intro h1{font-size:48px;line-height:1.03;margin:24px 0 17px}html[lang=en] .intro p{font-size:12px}html[lang=en] .card-text strong{font-size:16px;letter-spacing:0}html[lang=en] .card-text>span{font-size:7px}html[lang=en] .piece-meta h2{font-size:20px}html[lang=en] .eyebrow{font-size:8px;letter-spacing:1.5px}}
@media(max-width:360px){.brand>span{font-size:17px}.brand small{font-size:7px}.languages button{padding:7px}.card-text>span{display:none}.controls{column-gap:17px}.header-actions{gap:2px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;scroll-behavior:auto!important}}

/* The artwork leads; its instruments appear only when requested. */
.controls{opacity:0;visibility:hidden;pointer-events:none;transform:translateX(14px);transition:opacity .35s,transform .35s,visibility .35s;z-index:5;background:#130e19e8;border:1px solid #d9b5d52b;border-radius:4px;padding:23px;width:215px;backdrop-filter:blur(20px)}
.settings-open:not(.immersed) .controls{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(0)}
#settings-toggle[aria-expanded=true]{color:#edbfd5}.intro{width:25%;top:24%}.intro p{color:#aaa0ac}.intro h1{font-size:clamp(34px,3vw,46px)}.scene-top{left:59%;top:14%}.scene-bottom{left:59%;top:75%}.artwork{height:98px}.thumb{height:96px}.collection{bottom:67px}.collection-heading{color:#b39daf}.header-edition{font-size:10px;letter-spacing:2px}.header-actions{gap:16px}
@media(min-width:1101px){html[lang=en] .intro h1{font-size:clamp(45px,4.4vw,67px)}.controls{top:150px}.piece-meta{margin-top:30px}}
@media(max-width:1100px) and (min-width:701px){.intro{width:27%}.controls{top:115px}.scene-bottom{top:72%}}
@media(max-width:700px){#gallery{min-height:1110px}.intro{width:85%;top:124px}.intro h1{font-size:33px}.controls{top:98px;left:22px;right:22px;width:auto;padding:20px}.header-actions{gap:5px}#settings-toggle{padding:9px 4px}#settings-toggle span{display:none}.scene-top{left:auto;top:405px}.scene-bottom{left:50%;top:727px}.collection{bottom:64px}.artwork{height:94px}.thumb{height:90px}.piece-meta{top:470px}.collection-heading{font-size:11px}.header-actions>.quiet-button>span{display:none}}

/* A quiet typographic system, warmed by ivory and rose quartz. */
:root{--ink:#eee5df;--muted:#a599a6;--accent:#e1b8b5}.brand>span{font-family:'Cormorant Garamond',Georgia,serif;font-size:27px;letter-spacing:5px}.brand small{font-family:var(--sans);font-size:9px;letter-spacing:2.1px;color:#a48c9c}.intro h1{letter-spacing:3px;line-height:1.7}.intro h1 em{color:#e9bdb9}.intro p{font-size:14px;line-height:2.1;letter-spacing:.25px}.eyebrow{font-size:10px;letter-spacing:2.6px;color:#c2a5b1}.enter-scene{color:#e7cbc0;font-size:13px;letter-spacing:1.3px}.card-text>strong{color:#dfcfd5}.card-text>span{color:#a995a5}.artwork.active{border-color:#c99b9566;background:linear-gradient(110deg,#35202750,#18101d45)}.piece-meta h2{color:#e8d6d9}.header-edition{color:#a28b9b}.control-label{color:#c2adbd}.panel-heading{color:#ebd8e3}.scene-bottom{color:#b59bad}.languages button[aria-pressed=true]{color:#f1d1bd}html[lang=en] .intro h1{letter-spacing:-.7px;line-height:1.08}html[lang=en] .intro p{font-size:13px;max-width:310px}html[lang=en] .card-text strong{font-size:22px}
@media(max-width:1100px){.intro p{font-size:12px}html[lang=en] .intro p{font-size:12px}html[lang=en] .card-text strong{font-size:18px}}
@media(max-width:700px){.brand>span{font-size:22px;letter-spacing:3.4px}.brand small{font-size:7px;letter-spacing:1px}.intro h1{line-height:1.6}.intro p{font-size:12px;max-width:290px;line-height:2}.enter-scene{font-size:12px}html[lang=en] .card-text strong{font-size:17px}.card-text>strong{font-size:14px}}
.settings-open:not(.immersed) .controls{background:rgba(19,14,25,.98);box-shadow:0 18px 65px #0009}