:root{color-scheme:dark;font-family:"PingFang SC","Microsoft YaHei",sans-serif;color:#e6ece6;background:#081512;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid #cee0cd;outline-offset:6px}
.study{height:100svh;min-height:560px;position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 52% 45%,#203d35 0,#10251f 35%,#081512 69%)}
.study:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;box-shadow:inset 0 0 160px #020b0866}
.header{position:absolute;inset:max(28px,env(safe-area-inset-top)) 4.2vw auto;display:flex;align-items:center;justify-content:space-between;z-index:3}
.wordmark{display:flex;align-items:center;gap:16px;text-decoration:none;color:#e3e8dc;font-family:"Songti SC","SimSun",serif;font-size:26px;letter-spacing:.2em}
.wordmark span{font-family:Arial,sans-serif;font-size:10px;letter-spacing:.24em;color:#9aaea3}
.reference-button{background:transparent;border:1px solid #829f8c4d;border-radius:99px;padding:10px 18px;font-size:12px;letter-spacing:.07em}
.reference-button span{margin-left:12px;color:#b4c6b7}
.reference-button:hover{border-color:#c1d2c2b3;background:#b4c6b70a}
.intro{position:absolute;left:8vw;top:35%;pointer-events:none;z-index:2}
.eyebrow{font-size:10px;letter-spacing:.24em;color:#91aa9c;margin:0 0 24px}
h1{font-family:"Songti SC","Noto Serif SC","SimSun",serif;font-size:clamp(30px,3.4vw,52px);letter-spacing:.08em;font-weight:400;margin:0;line-height:1.5}
.description{font-size:13px;letter-spacing:.12em;color:#acbbae;margin:20px 0 0}
.stage{position:absolute;inset:0;z-index:0}
canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}
canvas.dragging{cursor:grabbing}
.loading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#bfd0c2;font-size:13px;letter-spacing:.1em;text-align:center;max-width:80%}
.loading.error{z-index:5;width:320px;padding:22px;line-height:1.8;background:#0b1b16ed;border:1px solid #46604e}
.footer{position:absolute;left:4.2vw;right:4.2vw;bottom:max(28px,env(safe-area-inset-bottom));display:flex;justify-content:space-between;align-items:center;gap:18px;z-index:3}
.hint{font-size:12px;letter-spacing:.06em;color:#a0b3a6;margin:0}.drag-icon{font-size:20px;vertical-align:-2px;margin-right:8px;color:#c3d2c5}
.controls{display:flex;gap:20px}
.controls button{border:0;background:none;padding:10px 0;color:#b8c7bc;font-size:12px;letter-spacing:.04em}
.controls button:hover{color:#fff}
dialog{padding:0;width:min(1140px,94vw);max-height:92svh;border:1px solid #5c75664d;background:#07130f;color:#cedbd0;box-shadow:0 22px 120px #0009}
dialog::backdrop{background:#020907d9;backdrop-filter:blur(12px)}
.reference-header{display:flex;justify-content:space-between;align-items:center;padding:16px 22px;font-size:12px;letter-spacing:.08em}
.reference-header button{background:none;border:0;font-size:12px;padding:5px}
dialog{width:min(860px,94vw,calc((92svh - 68px) * 1.163))}
.reference-actions{display:flex;gap:15px;flex-shrink:0}
.reference-actions button:first-child{color:#a8bbab}
.reference-media{position:relative;width:100%;aspect-ratio:686/590;overflow:hidden}
.reference-media img{position:absolute;display:block;max-width:none;width:223.907%;height:auto;left:-123.907%;top:-20.339%}
dialog.show-full{width:min(1140px,94vw,calc((92svh - 68px) * 1.5))}
.show-full .reference-media{aspect-ratio:3/2}
.show-full .reference-media img{width:100%;left:0;top:0}
@media(max-width:700px){
  .study{min-height:540px}
  .header{inset:max(24px,env(safe-area-inset-top)) 24px auto}
  .wordmark{font-size:23px}.wordmark span{display:none}
  .reference-button{font-size:11px;padding:9px 13px}
  .intro{left:28px;top:115px}
  .eyebrow{font-size:9px;margin-bottom:12px}
  h1{font-size:30px}.description{margin-top:10px;font-size:11px}
  .footer{left:24px;right:24px;bottom:max(24px,env(safe-area-inset-bottom));align-items:center;flex-direction:column;gap:8px}
  .hint{font-size:10px;line-height:1.7}.drag-icon{font-size:17px;margin-right:4px}
  .controls{gap:16px}.controls button{font-size:11px}
}
@media(prefers-reduced-motion:reduce){dialog::backdrop{backdrop-filter:none}}