@charset "UTF-8";
:root{color-scheme:light;--paper:#faf8f3;--ink:#463125;--soft:#83776a;--line:#e2dcd1;--gold:#b5935c;--blue:#596596;--serif:"Noto Serif CJK SC","Songti SC","SimSun",serif;--sans:"Microsoft YaHei","PingFang SC",system-ui,sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:13px;-webkit-font-smoothing:antialiased}button,input,a{-webkit-tap-highlight-color:transparent}button,a{color:inherit}button{font:inherit;cursor:pointer;border:0;background:none}a{text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,#stage:focus-visible{outline:2px solid var(--blue);outline-offset:5px}button:disabled{cursor:wait;opacity:.5}button:hover,a:hover{color:var(--blue)}.masthead{height:96px;margin:0 4.5%;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:13px;font-size:20px;font-family:var(--serif);font-weight:600;letter-spacing:3px}.brand-mark{font:47px/1 Georgia,serif;color:var(--gold)}.brand small{display:block;font:8px var(--sans);letter-spacing:2.05px;margin-top:5px}.masthead nav{display:flex;gap:33px;align-items:center;height:100%;font-size:12px}.masthead nav button{padding:14px 0}.masthead nav button span{margin-left:7px;color:var(--gold)}.nav-active{height:100%;display:flex;align-items:center;border-bottom:2px solid var(--ink);padding-top:2px}.edition-head{font-size:9px;letter-spacing:1.8px;color:var(--soft)}.edition-head b{font-size:14px;color:var(--ink);font-weight:500;margin-left:12px;letter-spacing:1px}
.exhibition{max-width:1600px;min-height:calc(100svh - 160px);margin:auto;padding:32px 5.5% 27px;display:grid;grid-template-columns:minmax(190px,.83fr) minmax(370px,1.8fr) minmax(230px,.82fr);align-items:center;column-gap:3.5%}.introduction{padding-bottom:10px}.eyebrow{font-size:9px;letter-spacing:1.35px;font-weight:400;color:var(--soft);margin:0 0 30px;white-space:nowrap;display:flex;align-items:center;gap:8px}.eyebrow>span{width:5px;height:5px;background:var(--gold);transform:rotate(45deg)}h1{font-family:var(--serif);font-size:clamp(45px,4.5vw,69px);font-weight:600;letter-spacing:5px;line-height:1.28;margin:0 0 22px;white-space:nowrap}h1>span{display:block;font:19px Georgia,serif;letter-spacing:7px;margin:15px 0 0 4px}.species{font-size:12px;display:flex;align-items:center;gap:8px;white-space:nowrap}.species i{font-style:normal;color:var(--soft);font-size:8px;letter-spacing:.4px;margin-left:1px}.species-line{width:18px;height:1px;background:var(--gold)}.poem{font-family:var(--serif);font-size:26px;line-height:1.8;letter-spacing:3px;margin:45px 0 15px}.description{font-size:11px;line-height:2.15;color:var(--soft);margin:0}.signature{margin-top:42px;padding-top:22px;border-top:1px solid var(--line);width:85%;display:flex;flex-direction:column;gap:9px}.signature span{font-size:10px;letter-spacing:2px;color:var(--soft)}.signature strong{font:22px Georgia,serif;letter-spacing:1px}.palette{display:flex;gap:7px;align-items:center;margin-top:22px}.palette i{height:11px;width:11px;background:var(--ink)}.palette i:nth-child(2){background:var(--gold)}.palette i:nth-child(3){background:var(--blue)}.palette span{font-size:9px;margin-left:5px;color:var(--soft)}
.card-exhibit{min-width:0;align-self:center;position:relative}.exhibit-caption{display:flex;justify-content:space-between;align-items:center;font-size:8px;letter-spacing:1.7px;color:#a19481;padding:0 12px}.exhibit-caption>span:last-child{font-size:9px;letter-spacing:1px;color:var(--blue)}#stage{position:relative;width:100%;height:clamp(510px,calc(100svh - 240px),760px);touch-action:none;cursor:grab;outline-offset:-3px;isolation:isolate}#stage.dragging{cursor:grabbing}#stage canvas{position:relative;display:block;z-index:1;width:100%;height:100%}.card-shadow{position:absolute;left:21%;right:21%;height:4%;bottom:4%;background:radial-gradient(ellipse,rgba(80,49,26,.16),transparent 70%);filter:blur(9px);z-index:-1;pointer-events:none}#loading{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;color:var(--gold);z-index:5;letter-spacing:3px;background:var(--paper)}.loading-diamond{font:56px Georgia,serif;animation:turn 2s ease-in-out infinite}#loading p{font-size:11px}.gesture{display:flex;justify-content:center;align-items:center;gap:10px;font-size:10px;letter-spacing:.6px;color:var(--soft);padding-top:9px;white-space:nowrap}.gesture svg{color:var(--gold);margin-right:3px}.gesture-dot{color:#b9ab97}.static-fallback{position:absolute;inset:4% 10%;width:80%;height:88%;object-fit:contain}
.controls{align-self:center;max-width:294px;width:100%;justify-self:end}.control-heading{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:20px;border-bottom:1px solid var(--line)}.control-heading h2{font-family:var(--serif);font-size:23px;font-weight:500;letter-spacing:2px;margin:0}.control-heading>span{font-size:8px;letter-spacing:2px;color:var(--soft)}.state-selector{display:grid;grid-template-columns:1fr 1fr;margin:22px 0 28px;border:1px solid #d9cfbf;border-radius:5px;padding:4px;gap:4px}.state-selector button{display:flex;align-items:center;justify-content:center;gap:7px;padding:12px 2px;border-radius:3px;color:var(--soft);transition:background .22s,color .22s}.state-selector button>span:first-child{font:17px Georgia,serif}.state-selector button>span:last-child{font-size:10px;white-space:nowrap}.state-selector button[aria-pressed=true]{background:var(--ink);color:#f3e8d6}.angle-control,.control-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:14px 0}.angle-control label,.control-row label{font-size:11px}.angle-control output{font:22px Georgia,serif;font-variant-numeric:tabular-nums;color:var(--ink)}input[type=range]{grid-column:1/-1;width:100%;height:16px;margin:0;appearance:none;background:transparent;cursor:pointer;--progress:50%}input[type=range]::-webkit-slider-runnable-track{height:2px;background:linear-gradient(to right,var(--gold) var(--progress),var(--line) var(--progress))}input[type=range]::-webkit-slider-thumb{appearance:none;width:11px;height:11px;margin-top:-4.5px;border-radius:50%;background:var(--ink);border:2px solid var(--paper);outline:1px solid var(--gold)}input[type=range]::-moz-range-track{height:2px;background:var(--line)}input[type=range]::-moz-range-progress{height:2px;background:var(--gold)}input[type=range]::-moz-range-thumb{width:8px;height:8px;border-radius:50%;background:var(--ink);border:2px solid var(--paper)}.range-labels{grid-column:1/-1;display:flex;justify-content:space-between;font-size:8px;color:#a29482;margin-top:-6px}.optical-controls{border-top:1px solid var(--line);margin-top:25px;padding-top:24px;display:grid;gap:16px}.control-row{gap:9px 0}.control-row output{font-size:9px;color:var(--soft);font-variant-numeric:tabular-nums}.auto-control{display:flex;align-items:center;justify-content:space-between;text-align:left;width:100%;padding:25px 0 21px;font-size:11px;margin-top:5px}.auto-control small{display:block;font-size:9px;color:var(--soft);padding-top:5px}.switch{width:30px;height:17px;border-radius:12px;background:#ddd6ca;padding:3px;transition:background .2s}.switch i{display:block;width:11px;height:11px;background:var(--paper);border-radius:50%;transition:transform .2s}.auto-control[aria-pressed=true] .switch{background:var(--blue)}.auto-control[aria-pressed=true] .switch i{transform:translateX(13px)}.minor-controls{display:flex;justify-content:space-between;gap:14px;border-top:1px solid var(--line);padding:18px 0 22px}.minor-controls button{font-size:11px;padding:0}.minor-controls button span{margin-right:6px;color:var(--gold);font-size:17px}.save-button{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;background:var(--ink);color:#f3e8d6;padding:15px 14px;border-radius:3px;font-size:12px;transition:background .2s}.save-button:hover{background:#644834;color:#fff}.save-button>span{margin-left:auto;font-size:8px;letter-spacing:1px;opacity:.6}.save-button>svg{margin-right:auto}.replay-button{display:block;margin:17px auto 0;color:var(--soft);font-size:10px;letter-spacing:1px}.replay-button>span{margin-left:5px;color:var(--gold)}.save-status{font-size:9px;color:var(--blue);text-align:center;min-height:12px;margin:8px 0 0}.colophon{margin:0 4.5%;min-height:64px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:15px;color:var(--soft);font-size:9px;letter-spacing:.4px}.colophon b{font-weight:400;padding:0 9px;color:#c4b8a5}.colophon i{display:inline-block;width:5px;height:5px;border:1px solid var(--gold);transform:rotate(45deg);margin-right:10px}
dialog{border:1px solid #d9cfbf;background:var(--paper);color:var(--ink);padding:25px;border-radius:8px;max-width:calc(100vw - 28px);max-height:92svh;box-shadow:0 20px 90px #2e211a33}dialog::backdrop{background:#30241fa8;backdrop-filter:blur(8px)}.dialog-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:21px;gap:20px}.dialog-heading .eyebrow{margin-bottom:8px;font-size:8px}.dialog-heading h2{font:23px var(--serif);margin:0;letter-spacing:2px}.dialog-heading button{font-size:28px;line-height:1;padding:4px 8px;color:var(--soft)}.art-dialog{width:490px}.art-dialog>img{display:block;max-width:100%;max-height:65svh;margin:auto;object-fit:contain}.dialog-footer{display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:10px;margin-top:18px}.dialog-footer span{color:var(--soft)}.dialog-footer a,.pair a{color:var(--blue)}.comparison-dialog{width:840px}.pair{display:grid;grid-template-columns:1fr 1fr;gap:25px}.pair figure{margin:0;min-width:0}.pair img{display:block;width:100%;max-height:68svh;object-fit:contain;border-radius:5px}.pair figcaption{display:flex;justify-content:space-between;gap:5px;font-size:10px;margin-top:14px}
@keyframes turn{0%,100%{transform:rotate(-20deg);opacity:.45}50%{transform:rotate(160deg);opacity:1}}
@media(min-width:1650px){.exhibition{column-gap:65px}.introduction .description{font-size:12px}.controls{max-width:285px}}
@media(max-width:1120px){.masthead{margin:0 4%;height:80px}.masthead nav{gap:20px}.edition-head{display:none}.exhibition{grid-template-columns:minmax(160px,.8fr) minmax(320px,1.65fr) minmax(205px,.95fr);column-gap:2.5%;padding-left:4%;padding-right:4%}h1{font-size:46px;letter-spacing:3px}.eyebrow{font-size:8px;letter-spacing:.4px}.species{gap:6px}.species i{font-size:7px}.poem{font-size:23px}.description{font-size:10px}.colophon{margin:0 4%;font-size:8px}.colophon b{padding:0 5px}#stage{height:clamp(470px,calc(100svh - 224px),680px)}}
@media(max-width:900px){.exhibition{grid-template-columns:minmax(340px,1fr) minmax(230px,.7fr);gap:30px 6%;padding:33px 7%}.introduction{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;column-gap:30px;align-items:center;padding:0}.introduction .eyebrow{grid-column:1/-1;margin-bottom:15px}h1{grid-row:2/5;font-size:49px;margin:0}.species{grid-column:2;grid-row:2}.poem{grid-column:2;font-size:20px;line-height:1.5;margin:8px 0}.poem br{display:none}.description{grid-column:2;margin:0}.signature,.palette{display:none}.card-exhibit{align-self:start}.exhibit-caption{padding:0}.controls{max-width:280px}#stage{height:550px}.colophon>span:nth-child(2){display:none}}
@media(max-width:760px){.masthead{height:78px;margin:0 6%;gap:8px}.brand{font-size:17px;gap:8px;letter-spacing:2px}.brand-mark{font-size:35px}.brand small{font-size:6px;letter-spacing:1px}.masthead nav{gap:17px;font-size:10px}.masthead nav button{font-size:10px}.nav-active,.masthead nav button>span{display:none}.exhibition{display:flex;flex-direction:column;gap:25px;padding:28px 6% 26px}.introduction{display:block;align-self:start;width:100%;position:relative}.introduction .eyebrow{font-size:8px;letter-spacing:.8px;margin-bottom:15px}h1{font-size:43px;letter-spacing:3px;line-height:1.15}h1>span{font-size:12px;letter-spacing:5px;margin-top:10px}.species{margin:16px 0 0;font-size:11px}.species i{font-size:8px}.poem{position:absolute;right:0;top:38px;line-height:1.8;font-size:20px;letter-spacing:2px;margin:0}.poem br{display:block}.description{display:none}.card-exhibit{width:100%;align-self:center}#stage{height:clamp(410px,135vw,610px)}.exhibit-caption{font-size:7px;letter-spacing:1.2px}.exhibit-caption>span:last-child{font-size:8px}.gesture{font-size:9px;gap:7px;padding-top:2px}.gesture svg{width:26px}.controls{align-self:center;justify-self:auto;max-width:440px}.control-heading{padding-bottom:17px}.control-heading h2{font-size:22px}.state-selector{margin:20px 0 23px}.state-selector button{padding:14px 5px}.state-selector button>span:last-child{font-size:12px}.optical-controls{display:grid;grid-template-columns:1fr 1fr;gap:25px}.auto-control{padding-top:23px}.colophon{margin:0 6%;font-size:8px;min-height:62px}.colophon>span:last-child{max-width:145px;text-align:right;line-height:1.8}.colophon b{padding:0 3px}.pair{gap:12px}.pair figcaption{font-size:8px}.comparison-dialog{padding:18px}.dialog-footer{font-size:9px;gap:10px}.dialog-heading h2{font-size:21px}.save-status{min-height:0;margin-top:10px}}
@media(min-width:901px) and (max-height:800px){.masthead{height:76px}.exhibition{min-height:calc(100svh - 126px);padding-top:18px;padding-bottom:18px}.colophon{min-height:50px}.poem{margin-top:30px}.signature{margin-top:30px}.control-heading{padding-bottom:14px}.state-selector{margin:16px 0 20px}.state-selector button{padding-top:10px;padding-bottom:10px}.optical-controls{margin-top:20px;padding-top:18px;gap:10px}.auto-control{padding-top:17px;padding-bottom:17px}.minor-controls{padding-top:13px;padding-bottom:17px}.save-button{padding-top:13px;padding-bottom:13px}.replay-button{margin-top:13px}#stage{height:clamp(440px,calc(100svh - 206px),590px)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}