:root{font-family:Inter,"Segoe UI","Microsoft YaHei",sans-serif;color:#183c40;background:#eef2eb;font-synthesis:none}*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}button,select,input{font:inherit}button,select{cursor:pointer}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #e9a467;outline-offset:3px}button:disabled{opacity:.4;cursor:wait}header{height:84px;margin:0 4vw;border-bottom:1px solid #cdd8cf;display:flex;align-items:center;gap:30px;font-size:14px}.brand{font-size:28px;display:flex;align-items:center;gap:12px}.brand span{font-size:16px;font-weight:750;letter-spacing:3px}.edition{color:#6b817d;flex:1}header>a:last-child{border-bottom:1px solid #8a9f98;padding-bottom:4px}main{display:grid;grid-template-columns:minmax(0,1fr) 274px;gap:36px;padding:34px 4vw 20px;max-width:1800px;margin:auto}.heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.eyebrow{font-size:11px;letter-spacing:2px;margin:0 0 10px;color:#71867e;font-weight:650}h1{font-size:36px;font-weight:500;letter-spacing:1px;margin:0}h2{font-size:20px;font-weight:500;margin:0 0 28px}.live{font-size:13px;display:flex;gap:8px;align-items:center}.live i{background:#64a991;width:7px;height:7px;border-radius:100%}.viewport{height:min(68vh,760px);min-height:440px;position:relative;background:#0b252d;border-radius:4px;overflow:hidden}canvas{width:100%;height:100%;display:block;touch-action:none}.canvas-label{position:absolute;top:26px;left:28px;display:flex;flex-direction:column;gap:8px;color:#dceae2;font-size:15px;pointer-events:none}.canvas-label small{font-size:12px;color:#809da0}.camera{position:absolute;right:24px;top:24px;color:#b6ccc4;background:#17343b;border:1px solid #315055;border-radius:4px;font-size:12px;padding:9px 12px}.stats{position:absolute;left:28px;right:28px;bottom:26px;display:flex;gap:40px;color:#e0e9e0;pointer-events:none}.stats>div{display:flex;flex-direction:column;gap:6px}.stats span{font-size:25px;letter-spacing:1px;font-variant-numeric:tabular-nums;font-weight:350}.stats small{font-size:11px;letter-spacing:1px;color:#86a2a0}.transport{display:flex;align-items:center;gap:10px;margin-top:18px}button{border:1px solid #bccfc3;border-radius:4px;background:transparent;color:inherit;padding:11px 20px;transition:background .15s}button:hover{background:#e2eade}button.primary{background:#1c504b;border-color:#1c504b;color:#edf6e9;min-width:90px}.hint{margin-left:auto;font-size:12px;color:#72867b}aside{border-left:1px solid #d0dacd;padding-left:28px;padding-top:8px}.field-label{display:block;font-size:13px;margin:25px 0 12px}.scenes{display:grid;gap:8px}.scenes button{display:flex;text-align:left;gap:18px;padding:14px 12px;border-color:transparent}.scenes b{font-size:11px;color:#82938a;font-weight:500;padding-top:3px}.scenes span{font-size:14px}.scenes small{display:block;font-size:11px;color:#8b9b90;margin-top:6px}.scenes .selected{background:#e0e8dc;border-color:#bdcdbd}.scenes .selected small{color:#5e8072}select{width:100%;background:#f5f7f0;border:1px solid #c3d0c0;border-radius:3px;color:#39564b;padding:10px;font-size:13px}input[type=range]{width:100%;accent-color:#286353}output{float:right;color:#688372;font-variant-numeric:tabular-nums}.range-caption{display:flex;justify-content:space-between;color:#819387;font-size:11px}.legend{display:flex;align-items:center;gap:7px;font-size:11px;margin-top:28px;color:#6e867b}.legend i{width:11px;height:11px;background:#c6e6d3;border-radius:50%}.legend i:nth-of-type(2){background:#3d8c78;margin-left:10px}.note,details p{font-size:12px;line-height:1.9;color:#7b8d80}.note{margin:14px 0 24px}details{border-top:1px solid #ced9ca;padding-top:18px}summary{cursor:pointer;font-size:12px;color:#557063}footer{margin:8px 4vw 20px;border-top:1px solid #cdd8cf;padding-top:17px;display:flex;justify-content:space-between;font-size:10px;letter-spacing:1.4px;color:#8b9b90}#error{position:absolute;inset:40% 12% auto;background:#eed7c5;padding:22px;color:#5e3528;border-radius:4px;font-size:14px;line-height:1.8}.testlog{white-space:pre-wrap;font:12px monospace}body.two main{grid-template-columns:minmax(0,1fr) 290px}code{font-size:12px}pre{overflow:auto;font-size:12px}.download{display:block;margin-top:16px;text-decoration:underline}@media(max-width:1050px){main{gap:20px;grid-template-columns:minmax(0,1fr) 235px}aside{padding-left:20px}.hint{display:none}.edition{font-size:12px}.viewport{min-height:400px}.stats{gap:25px}.stats span{font-size:21px}}@media(max-width:760px){header{height:68px;gap:15px}.edition{display:none}header>a:last-child{margin-left:auto;font-size:12px}main,body.two main{display:block;padding-top:24px}aside{border:0;padding:30px 0}.viewport{height:62svh;min-height:380px}h1{font-size:29px}.scenes{grid-template-columns:repeat(3,1fr)}.scenes button{padding:12px 8px;gap:8px}.scenes small{display:none}.transport button{padding:10px 16px}footer{font-size:9px;gap:10px}.stats{left:20px;gap:24px}.canvas-label{left:20px}details p{font-size:14px}}

.view-toolbar{display:flex;align-items:center;gap:18px;margin:-3px 0 16px;flex-wrap:wrap}.view-switch{display:flex;padding:3px;background:#dfe8de;border:1px solid #c8d7c7;border-radius:6px}.view-switch button{padding:8px 18px;font-size:13px;border:0}.view-switch button[aria-pressed=true]{color:#f4f7f0;background:#28564f;box-shadow:0 2px 5px #183c4014}#viewNote{font-size:12px;color:#72867b}.legend[hidden]{display:none}body[data-view=snow] .note{margin-top:25px}@media(max-width:760px){.view-toolbar{gap:9px}#viewNote{font-size:11px}}

.header-links{display:flex;align-items:center;gap:22px;margin-left:auto;white-space:nowrap}.header-links>a{border-bottom:1px solid #8a9f98;padding-bottom:4px}.header-links .language-link{font-size:12px;padding:6px 9px;border:1px solid #bccfc3;border-radius:4px}.header-links .language-link:hover{background:#e2eade}html[lang=en] .stats{gap:22px}html[lang=en] .stats small{letter-spacing:0}html[lang=en] .view-toolbar{gap:12px}html[lang=en] .scenes small{line-height:1.5}@media(max-width:760px){.header-links{gap:12px;font-size:12px}html[lang=en] h1{font-size:27px}html[lang=en] .scenes button{gap:5px}html[lang=en] .scenes span{font-size:12px}}

footer{flex-wrap:wrap;gap:12px 24px}footer>a{text-decoration:underline;text-underline-offset:4px}