@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--ink:#eef5fa;--muted:#9ba8ba;--accent:#baffec}*{box-sizing:border-box}body{margin:0;background:#060911;color:var(--ink);font-family:'Space Grotesk','Noto Sans SC',sans-serif;overflow:hidden}button,a,input{-webkit-tap-highlight-color:transparent}button,a{color:inherit}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:6px}#scene{position:fixed;inset:0;background:radial-gradient(ellipse at 63% 55%,#122638 0%,#0a1120 35%,#05070d 75%)}canvas{display:block;width:100%;height:100%;touch-action:none}.grain{position:fixed;inset:0;pointer-events:none;opacity:.04;z-index:2;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 150 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.6' filter='url(%23n)'/%3E%3C/svg%3E")}.vignette{position:fixed;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(3,6,13,.7),transparent 60%),linear-gradient(0deg,#060911aa,transparent 22%)}header{position:fixed;z-index:4;top:0;width:100%;padding:32px 4%;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ffffff12}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-size:25px;letter-spacing:5px;font-weight:600}.brand-symbol{font-size:35px;color:#d7fff2}.brand-sub{font-size:10px;letter-spacing:2px;font-weight:400;max-width:75px;line-height:1.6;margin-left:16px;color:#9ba8ba}.header-right{display:flex;gap:36px;align-items:center}.edition{font-size:12px;letter-spacing:2px;color:var(--muted)}.outline{border:1px solid #ffffff35;background:#ffffff06;padding:12px 20px;border-radius:30px;font-size:13px}.outline span{margin-left:20px}.intro{position:absolute;left:8%;top:24%;z-index:3;pointer-events:none}.intro button{pointer-events:auto}.eyebrow{font-size:11px;letter-spacing:3px;color:#b8d0db;display:flex;gap:12px;align-items:center}.eyebrow span{height:1px;width:26px;background:var(--accent)}h1{font-size:clamp(55px,6.5vw,105px);line-height:1.18;font-weight:400;letter-spacing:-5px;margin:28px 0 20px;text-shadow:0 0 45px #a8d7fa20}.english{font-size:19px;color:#a8c3d1;letter-spacing:1px;margin:0 0 28px}.description{font-size:14px;line-height:2;color:#8e9bab;letter-spacing:1px}.primary{margin-top:22px;padding:15px 23px;background:linear-gradient(110deg,#d4fff0,#adf0eb);border:0;color:#132b2a;border-radius:3px;font-size:14px;box-shadow:0 0 30px #bcffdf19}.primary span{padding-left:40px}.primary:hover{box-shadow:0 0 40px #bcffdf55;transform:translateY(-2px)}.index{display:flex;align-items:center;gap:13px;margin-top:36px;color:#748696;font-size:12px}.index>span:first-child{color:white;font-size:18px}.index i{width:60px;height:1px;background:#ffffff35}.index>span:last-child{margin-left:20px;letter-spacing:1px}.art-label{position:absolute;top:17%;left:57%;display:flex;gap:20px;color:#8197a9;font-size:10px;letter-spacing:2px}.art-label b{font-weight:400;color:#c7dbdf}.coordinate{margin-left:20px}.controls{position:absolute;bottom:13%;right:4%;z-index:4;width:285px;padding:22px 23px 16px;background:linear-gradient(135deg,#b6eaff12,#ffffff04);border:1px solid #d0eaff26;box-shadow:0 12px 60px #0004,inset 0 1px 0 #ffffff0d;border-radius:12px;backdrop-filter:blur(22px)}.panel-top{display:flex;justify-content:space-between;font-size:14px}.live{font-size:9px;letter-spacing:1.5px;color:#9abebd;padding-top:4px}.palette{display:flex;align-items:center;gap:11px;margin:23px 0}.swatch{width:22px;height:22px;flex-shrink:0;border-radius:50%;border:0;background:var(--swatch)}.swatch.active{outline:1px solid #d1f6f0;outline-offset:4px}.palette>span{font-size:11px;color:#b5c0ca;margin-left:8px}.slider-label{display:flex;justify-content:space-between;font-size:12px;color:#b5c0ca}input[type=range]{width:100%;margin:16px 0 20px;accent-color:#caffee;height:3px;cursor:pointer}.panel-bottom{border-top:1px solid #ffffff13;padding-top:13px;display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#8f9eaf}.panel-bottom button{border:1px solid #ffffff30;width:29px;height:29px;border-radius:50%;background:transparent}footer{position:absolute;bottom:0;width:100%;padding:25px 4%;display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:2px;color:#7c8b9c;z-index:4}footer button{border:0;background:none;font-size:12px;color:#a9b6c3}footer button span{margin-left:12px}#status{position:absolute;z-index:6;top:50%;left:60%;font-size:14px;background:#0b1520dd;border:1px solid #ffffff30;padding:16px;border-radius:8px;max-width:300px}#exit{position:fixed;right:24px;top:24px;z-index:9;border:1px solid #ffffff40;background:#0c1724bb;border-radius:24px;padding:12px 20px}.immersed header,.immersed main,.immersed footer{opacity:0;pointer-events:none}.immersed main button,.immersed input{pointer-events:none}header,main,footer{transition:opacity .5s}button{transition:box-shadow .25s,transform .25s,background .25s}button:hover{filter:brightness(1.15)}
@media(min-width:1600px){.intro{top:25%}.controls{right:6%;bottom:16%}}@media(max-height:760px) and (min-width:761px){.intro{top:21%}h1{font-size:70px;margin:20px 0 12px}.english{margin-bottom:14px}.primary{margin-top:10px}.index{margin-top:22px}.controls{bottom:14%}}@media(max-width:760px){header{padding:20px 6%}.brand{font-size:21px}.brand-sub,.edition,.coordinate{display:none}.outline{padding:10px 13px;font-size:12px}.outline span{margin-left:10px}.intro{left:7%;top:15%}h1{font-size:56px;letter-spacing:-3px;margin:20px 0 12px}.eyebrow{font-size:9px;letter-spacing:2px}.english{font-size:14px;margin-bottom:16px}.description{font-size:12px}.primary{margin-top:8px;padding:12px 17px}.index{margin-top:20px}.index>span:last-child{margin-left:2px;font-size:10px}.art-label{top:53%;left:7%;font-size:8px;gap:10px}.controls{bottom:9%;right:6%;width:240px;padding:17px 19px 12px}.palette{margin:18px 0}.panel-top{font-size:13px}footer{padding:20px 6%;font-size:9px;letter-spacing:1px}.footer-center{display:none}#status{left:10%;top:54%;right:10%;max-width:none}.index i{width:30px}}@media(max-height:650px) and (max-width:760px){body{min-height:740px;overflow-y:auto}header,main,footer{position:absolute}main{inset:0;height:740px}.intro{top:100px}footer{top:700px;bottom:auto}.controls{bottom:60px}}
.performance{position:fixed;z-index:8;top:125px;right:4%;width:285px;border:1px solid #cceaff30;border-radius:12px;background:#09121bd9;backdrop-filter:blur(22px);color:#c2d4df;font-size:12px;font-variant-numeric:tabular-nums}.performance summary{padding:13px 16px;cursor:pointer;display:flex;justify-content:space-between;list-style:none;font-size:14px}.performance summary::-webkit-details-marker{display:none}.performance summary:before{content:'−';margin-right:8px}.performance:not([open]) summary:before{content:'+'}.performance summary span{margin-left:auto;color:#baffec}.perf-body{padding:0 16px 14px}.perf-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px 10px;border-top:1px solid #ffffff18;padding-top:14px}.perf-grid label{color:#a0afbc;font-size:12px}.perf-grid strong{display:block;color:#edfaff;font-weight:500;font-size:16px;margin-top:4px}.performance svg{display:block;width:100%;height:42px;margin:13px 0 8px}.perf-resolution{font-size:12px;color:#baffec}.performance p{font-size:12px;line-height:1.6;color:#a0afbc;margin:9px 0 0}.performance summary:focus-visible{outline:2px solid #baffec;outline-offset:3px}@media(max-height:850px) and (min-width:761px){.performance{right:calc(4% + 305px);top:auto;bottom:13%;width:260px}}@media(max-width:760px){.performance{top:88px;right:6%;width:min(285px,88vw)}.performance:not([open]){width:175px}.perf-grid{gap:9px}.perf-grid strong{font-size:14px}}

/* Performance replaces the former light-field panel. */
.performance{top:auto;bottom:13%;right:4%;width:285px;max-height:calc(100dvh - 150px);overflow:auto}.immersed .performance{opacity:0;pointer-events:none}@media(min-width:1600px){.performance{right:6%;bottom:16%}}@media(max-height:760px) and (min-width:761px){.performance{bottom:14%}}@media(max-width:760px){.performance{top:auto;bottom:9%;right:6%;width:240px}.performance:not([open]){width:240px}}