@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Serif+Display&display=swap');
:root{color-scheme:dark;--bg:#101f1c;--panel:#172b26;--line:#2c443a;--ink:#e4eae0;--muted:#9bada1;--accent:#f5a16d}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px 'DM Sans',system-ui,sans-serif}a{color:inherit}header{display:flex;align-items:center;justify-content:space-between;padding:23px 4vw;border-bottom:1px solid var(--line);gap:16px}header>a:first-child{font-size:22px;font-weight:700;text-decoration:none}header>a:first-child span{font-weight:400;color:var(--muted)}header>span,.eyebrow{font-size:10px;letter-spacing:2px;color:var(--muted)}header>a:last-child{font-size:12px;text-decoration:none}main{max-width:1600px;margin:auto;padding:36px 4vw}.intro{display:flex;justify-content:space-between;align-items:center}.intro h1{font:44px 'DM Serif Display',Georgia,serif;margin:12px 0}.intro p{color:var(--muted);line-height:1.6}.prototype{font-size:10px;border:1px solid var(--line);padding:10px;letter-spacing:1px;color:var(--accent)}.filters{display:grid;grid-template-columns:1fr 2fr .7fr 1fr;gap:16px;border-block:1px solid var(--line);padding:20px 0;margin-top:26px}label{display:flex;flex-direction:column;gap:8px;font-size:10px;letter-spacing:1px;color:var(--muted)}select{width:100%;min-width:0;background:var(--panel);border:1px solid var(--line);color:var(--ink);padding:11px;font:13px inherit;border-radius:3px}button{font:inherit;color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:3px;padding:8px 10px;cursor:pointer}button:hover,button:focus-visible{border-color:var(--accent)}button:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}#status{color:var(--muted);font-size:12px;min-height:20px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:22px}.field-panel{border:1px solid var(--line);background:var(--panel);min-width:0}.view-head{padding:18px;display:flex;align-items:center;justify-content:space-between;gap:12px}.view-head small{display:block;color:var(--muted);font-size:11px;margin-top:6px}.camera{display:flex;gap:6px}.camera button{font-size:11px}#viewport{height:470px;position:relative;touch-action:none;background:#10211d}#viewport canvas{display:block;width:100%;height:100%}.controls-help{padding:12px 18px;color:var(--muted);font-size:11px;line-height:1.5}.legend{display:flex;gap:15px;flex-wrap:wrap;padding:4px 18px 14px;font-size:11px}.legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}.caution{border-top:1px solid var(--line);padding:18px;color:var(--muted)}.caution strong{font-size:10px;letter-spacing:1px;color:var(--accent)}.caution p{font-size:12px;line-height:1.6;margin-bottom:0}aside{min-width:0}.list-head{display:flex;justify-content:space-between;align-items:center;gap:10px}.list-head h2{font-size:15px;font-weight:500}.list-head button{font-size:11px}.small{font-size:11px;line-height:1.5;color:var(--muted)}#plays{max-height:670px;overflow-y:auto;scrollbar-color:var(--line) transparent}.play{display:flex;border-bottom:1px solid var(--line);padding:12px 0;gap:10px;align-items:flex-start}.play input{accent-color:var(--accent);margin-top:5px;min-width:16px;min-height:16px}.play button{text-align:left;padding:0;border:0;flex:1;font-size:12px;line-height:1.5}.play button.active{color:var(--accent)}.play small{display:block;color:var(--muted);font-size:10px;margin-top:4px}.detail{display:grid;grid-template-columns:2fr 1fr;gap:36px;border-block:1px solid var(--line);margin-top:32px;padding:24px 0}.detail h2{font:25px 'DM Serif Display',Georgia,serif}.detail p{line-height:1.6;color:var(--muted)}#detail-facts{display:flex;gap:10px;flex-wrap:wrap}#detail-facts span{padding:7px 9px;background:var(--panel);font-size:11px}#detail-source{font-size:12px;line-height:1.8;padding-top:30px;overflow-wrap:anywhere}.badge{border:1px solid var(--line);padding:2px 5px;font-size:10px;color:var(--accent)}.method{padding:24px 0;color:var(--muted);font-size:12px;line-height:1.7}.method summary{cursor:pointer;color:var(--ink)}.method pre{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--panel);padding:16px}.hidden{display:none!important}#field-tip{position:absolute;z-index:3;pointer-events:none;left:16px;top:12px;max-width:280px;background:#08110feF;color:var(--ink);padding:12px;font-size:12px;line-height:1.5;border:1px solid var(--line);border-radius:3px}.empty{padding:24px 12px;line-height:1.6;color:var(--muted);font-size:12px}@media(max-width:1000px){.workspace{grid-template-columns:minmax(0,1fr) 260px}#viewport{height:380px}.view-head{align-items:flex-start;flex-direction:column}.camera{width:100%;justify-content:flex-end}}@media(max-width:700px){main{padding:24px 18px}header{padding:18px}header>span{display:none}.intro h1{font-size:34px}.prototype{display:none}.filters{grid-template-columns:1fr 1fr;gap:14px}.filters label:nth-child(2){grid-row:1;grid-column:1/-1}.workspace{grid-template-columns:1fr}#viewport{height:340px}.view-head{flex-direction:row}.view-head strong{font-size:12px}.camera{width:auto;flex-wrap:wrap;max-width:180px}.camera button{padding:7px}.detail{grid-template-columns:1fr;gap:0}#detail-source{padding-top:10px}#plays{max-height:380px}.intro p{font-size:12px}}