newer-app{display:flex;flex-direction:column;min-block-size:100dvh}app-bar{display:flex;align-items:center;gap:var(--space-md);padding-inline:var(--space-md);block-size:var(--topbar-height);border-block-end:1px solid var(--rule);background:var(--paper-raised);position:sticky;inset-block-start:0;z-index:1}app-title{font-family:var(--voice-machine);font-size:var(--type-mono);font-weight:600;letter-spacing:var(--track-label);color:var(--ink)}app-nav{display:flex;gap:var(--space-2xs);flex:1;overflow-x:auto}nav-item{display:inline-flex;align-items:center;gap:var(--space-xs);padding-inline:var(--space-sm) var(--space-md);block-size:2.25rem;border-radius:var(--shape-full);color:var(--ink-faint);cursor:pointer;user-select:none;white-space:nowrap;transition:background var(--motion-fast) var(--ease-standard),color var(--motion-fast) var(--ease-standard)}nav-item:hover{background:var(--paper-sunken);color:var(--ink)}nav-item[state=active]{background:var(--accent-soft);color:var(--accent)}nav-item[state=active] m-symbol{font-variation-settings:"FILL" 1,"wght" 500,"GRAD" 0,"opsz" 24}nav-item m-symbol{font-size:20px}nav-label{font-family:var(--voice-machine);font-size:var(--type-mono-sm);font-weight:500}bar-actions{display:flex;gap:var(--space-2xs)}app-body{display:block;flex:1;inline-size:100%;max-inline-size:var(--measure);margin-inline:auto;padding:var(--space-lg) var(--space-md) var(--space-2xl)}app-body>app-notice{margin-block-end:var(--space-md)}app-body>[state=hidden]{display:none}view-placeholder{display:flex;flex-direction:column;align-items:center;gap:var(--space-xs);padding:var(--space-2xl) var(--space-md);text-align:center;color:var(--ink-faint)}view-placeholder m-symbol{font-size:40px}placeholder-title{font-size:var(--type-display);font-weight:600;color:var(--ink-soft)}placeholder-text{max-inline-size:30rem}@media(max-width:44rem){nav-label{display:none}nav-item{padding-inline:var(--space-sm)}}