#views-open{position:absolute;top:80px;left:24px;z-index:2}
.views-screen{padding:76px max(16px,calc((100vw - 1440px)/2)) calc(var(--dock-height,90px) + max(16px,env(safe-area-inset-bottom)) + 12px);display:grid;grid-template-rows:48px minmax(100px,1fr) auto 100px 48px;gap:12px}
.views-header,.views-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.views-header h1{font-size:24px}
.views-header .btn,.views-footer .btn{padding:9px 14px}
.views-footer .style-toggle{position:static;width:48px;height:48px}
#views-stage{display:grid;grid-template-columns:minmax(0,1fr);min-height:0;gap:12px}
#views-stage.comparing{grid-template-columns:repeat(2,minmax(0,1fr))}
#views-stage figure{margin:0;min-width:0;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) 24px;border:1px solid var(--line);border-radius:var(--radius);background:#0b122280;overflow:hidden}
#views-stage figure[hidden]{display:none}
#views-stage canvas{width:100%;height:100%;min-height:0;display:block}
#views-stage figcaption{text-align:center;font-size:13px;color:var(--muted)}
#views-word{text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:24px/1.3 Georgia,serif;color:var(--accent)}
#views-options{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;min-width:0}
#views-options .view-option{display:grid;grid-template-rows:minmax(0,1fr) 22px;min-width:0;padding:4px;font-size:12px}
.view-option canvas{display:block;width:100%;height:100%;min-height:0}
.view-option[aria-pressed=true],#views-compare[aria-pressed=true],#views-motion[aria-pressed=true]{border-color:var(--accent);background:#bdd6fa22}
@media(max-width:600px){.views-screen{grid-template-rows:48px minmax(100px,1fr) auto 152px 48px;gap:8px}#views-options{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}.views-header h1{font-size:20px}#views-stage{gap:6px}}
@media(max-height:500px) and (orientation:landscape){.views-screen{padding-top:66px;grid-template-columns:minmax(0,1fr) 260px;grid-template-rows:48px minmax(0,1fr) 48px;gap:8px}.views-header{grid-column:1/-1}#views-stage{grid-column:1;grid-row:2/4}#views-word{display:none}#views-options{grid-column:2;grid-row:2;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}.views-footer{grid-column:2;grid-row:3}.view-option canvas{display:none}#views-options .view-option{display:flex}.views-footer .btn{padding:7px 10px}}

#views-stage figure{position:relative;grid-template-rows:48px minmax(0,1fr) 24px}
#views-stage .view-side{margin:4px;min-height:40px;padding:4px 12px;justify-self:start}
#views-stage:not(.comparing) figure{grid-template-rows:minmax(0,1fr) 24px}
#views-stage:not(.comparing) .view-side{display:none}
#views-stage.comparing .active-side{border-color:var(--accent)}
#views-stage.comparing .view-side{min-height:48px;margin:0;border-radius:var(--radius) 0 14px 0}
/* Reserve enough room for Stop, the palette and Apply in either language. */
@media(max-height:500px) and (orientation:landscape){.views-screen{grid-template-columns:minmax(0,1fr) 320px}}