/* Desktop layout (700px and up): sidebar navigation and wider grids. */
:root{--pad:36px;--cols:3;--lcols:2}
body{background:radial-gradient(circle at 50% 0,#0b0b0b,#000 60%)}
body[data-view=ob] #app,body[data-view=au] #app{width:460px;height:min(840px,94vh);margin-top:3vh;border:1px solid var(--b);border-radius:40px}
body[data-view=hm] #app,body[data-view=load] #app{width:min(1180px,100%);height:100%}
body[data-view=hm] #hm{display:grid;grid-template-columns:240px 1fr;grid-template-rows:auto 1fr}
#hm header{grid-column:1/-1;padding:24px var(--pad) 8px}
#nv{grid-row:2;display:flex;flex-direction:column;gap:6px;padding:16px 20px;align-self:start}
#nv button{flex-direction:row;gap:14px;padding:14px 18px;border-radius:20px;font-size:16px}
#hm .body{grid-row:2;grid-column:2;padding:0 var(--pad) 48px}
.ttl{font-size:44px}
.xh{height:420px}
.tile{flex-basis:220px;height:260px}
.sheet{align-items:center}.sheet>div{border-radius:32px}
.lrow:hover,.xc:hover,.tile:hover{border-color:#333}
nav button:not(.on):hover{background:var(--s2);color:var(--t)}
@media(min-width:1100px){:root{--cols:4}}