@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&display=swap");
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#050a08;color:#eef3ef;font-family:"DM Mono",monospace}body{display:grid;grid-template-rows:76px minmax(0,1fr) 108px}header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;padding:0 4vw;border-bottom:1px solid rgba(255,255,255,.14);font-size:10px;letter-spacing:.1em}header>div{display:grid;gap:5px;text-align:center}header strong{font-size:14px;letter-spacing:.13em}header>div span{color:#b8ff4a}header>a:last-child{text-align:right;color:#9faaa3}main{min-height:0}canvas{display:block;width:100%;height:100%}footer{display:grid;grid-template-columns:54px minmax(220px,1fr) minmax(180px,280px) minmax(150px,240px);align-items:center;gap:24px;padding:18px 4vw;border-top:1px solid rgba(255,255,255,.14);background:rgba(4,9,7,.98)}button{width:48px;height:48px;border:1px solid rgba(255,255,255,.45);border-radius:50%;background:transparent;color:white;font:16px inherit;cursor:pointer}.timeline input{width:100%;accent-color:#b8ff4a}.timeline>div{display:flex;justify-content:space-between;margin-top:7px;color:#8fa097;font-size:8px;letter-spacing:.08em}label{display:grid;gap:7px;color:#92a198;font-size:8px;letter-spacing:.12em}select{width:100%;padding:9px 10px;border:1px solid rgba(255,255,255,.24);background:#0b1511;color:#eef3ef;font:10px inherit}.source{color:#9caaa2;font-size:9px;line-height:1.5;letter-spacing:.09em}@media(max-width:760px){body{grid-template-rows:64px minmax(0,1fr) 160px}header{grid-template-columns:1fr auto;padding:0 18px}header>div{display:none}header>a:last-child{font-size:8px}footer{grid-template-columns:48px 1fr;gap:13px;padding:12px 18px}.timeline{min-width:0}label,.source{grid-column:1/-1}.source{display:none}}
html.preview body{display:block}html.preview header,html.preview footer{display:none}html.preview main{width:100%;height:100%}html.preview canvas{width:100%;height:100%}