*{box-sizing:border-box}
html,body{min-width:280px}
.lattice-app{height:100dvh!important;grid-template-rows:58px minmax(0,1fr) 180px!important}
.lattice-header{grid-template-columns:auto minmax(0,1fr) auto!important}
.lattice-brand{padding:0 16px!important;gap:10px!important}
.demo-description{display:flex;align-items:center;padding:0 16px;color:#8fa6ad;font-size:11px;line-height:1.6}
.ocorp-back{display:flex;align-items:center;justify-content:center;padding:0 18px;border-left:1px solid rgba(25,230,208,.3);font-size:12px;white-space:nowrap;text-decoration:none}
.lattice-workspace{grid-template-columns:minmax(0,1fr) 296px!important}
.lattice-view{touch-action:none;outline-offset:-3px}
.lattice-view:focus-visible,.timeline:focus-visible{outline:2px solid #f2a93b;outline-offset:-3px}
.view-intro{max-width:calc(100% - 160px)}
.view-intro,.view-stats{padding:7px 9px;background:rgba(5,8,12,.86);border:1px solid rgba(25,230,208,.18);border-radius:3px}
.view-error{position:absolute;inset:0;display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;padding:32px;text-align:center;background:#05080c;z-index:4;line-height:1.7}
.view-error strong{color:#f2a93b;font-size:15px}
.view-error p{max-width:34em;margin:0;color:#d8e6ea}
.view-error a{padding:8px}
.timeline{touch-action:none;min-height:88px}
.timeline-toolbar{flex-wrap:wrap;align-items:center!important;overflow:auto}
.timeline-toolbar button{min-height:38px;padding:0 12px!important;white-space:nowrap}
.timeline-note{display:flex;align-items:center;padding:0 12px;color:#8fa6ad;font-size:10px;line-height:1.5}
.command-input:focus-visible{outline:2px solid #f2a93b!important;outline-offset:-3px}
button[aria-pressed=true]{box-shadow:inset 0 -2px #19e6d0}
button,a,input{min-height:32px}
.viewport-instructions{font-size:10px;line-height:1.6;color:#8fa6ad;position:absolute;left:28px;bottom:26px;pointer-events:none;max-width:calc(100% - 56px)}
.viewport-actions{position:absolute;right:26px;top:100px;display:flex;gap:4px}
.viewport-actions button{width:34px;height:34px;min-height:34px;border:1px solid rgba(25,230,208,.4);background:rgba(5,8,12,.8);color:#19e6d0;font:600 19px monospace;cursor:pointer}
.viewport-actions button:hover{color:#f2a93b;border-color:#f2a93b}
.lattice-footer{grid-template-columns:minmax(0,1fr) 380px!important}
.log-output{justify-content:flex-start!important}
.scene-graph{padding-bottom:10px}
@media(max-width:900px){
 .lattice-footer{grid-template-columns:minmax(0,1fr) 320px!important}
 .timeline-note{display:none}
 .demo-description{font-size:10px;padding:0 10px}
 .ocorp-back{padding:0 12px}
}
@media(max-width:760px){
 html,body{height:auto!important;overflow:auto!important}
 #dc-root,#dc-root>.sc-host{height:auto!important;min-height:100dvh}
 .lattice-app{height:auto!important;min-height:100dvh;display:flex!important;flex-direction:column}
 .lattice-header{display:flex!important;flex-wrap:wrap;overflow:visible!important;min-height:96px;white-space:normal!important}
 .lattice-brand{height:50px;flex:1;border-right:0!important}
 .ocorp-back{height:50px;font-size:11px}
 .demo-description{order:3;width:100%;border-top:1px solid rgba(25,230,208,.2);min-height:46px;padding:8px 16px;font-size:11px}
 .lattice-workspace{display:flex!important;flex-direction:column;overflow:visible!important}
 .lattice-view{width:100%;height:52svh;min-height:310px;flex:none}
 .lattice-inspector{border-left:0!important;border-top:1px solid rgba(25,230,208,.3);overflow:visible!important}
 .lattice-footer{display:flex!important;flex-direction:column;overflow:visible!important;min-height:320px}
 .timeline-panel{height:170px;min-height:170px;border-right:0!important}
 .console-panel{height:170px;min-height:170px;border-top:1px solid rgba(25,230,208,.3)}
 .timeline-toolbar{display:flex!important;flex-wrap:nowrap;overflow:visible;min-width:0}
 .timeline-toolbar button{font-size:11px!important;letter-spacing:.06em!important;min-width:0!important;padding:0 11px!important}
 .timeline-time{margin-left:auto;padding:0 8px!important;font-size:11px}
 .view-intro{left:20px!important;top:20px!important;font-size:10px!important}
 .view-stats{right:20px!important;top:20px!important;font-size:10px!important}
 .viewport-actions{right:20px;top:90px}
 .viewport-instructions{left:20px;bottom:20px;max-width:calc(100% - 40px);font-size:10px}
 .view-tooltip{display:none}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}