:root{color-scheme:dark}body{background:#161319;color:#faf6f8;padding:0}.studio{height:100vh;height:100dvh;display:flex;flex-direction:column;max-width:1100px;margin:auto}.bar{flex:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;border:none;padding:max(env(safe-area-inset-top),6px) 16px 6px;background:#161319;color:inherit}.bar a,.bar button{min-height:44px;display:inline-flex;align-items:center;width:fit-content}.bar h1{font-size:18px;font-weight:550;margin:0}.bar button,#wordmark{justify-self:end}#wordmark{font:italic 24px Georgia}
.viewer{flex:1;min-height:0;position:relative;background:#0c0b0e;isolation:isolate}.viewer img,.viewer canvas,.viewer video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}.viewer video,.viewer canvas{transform:scaleX(-1)}#mode,#light{position:absolute;right:12px;padding:4px 10px;border-radius:12px;font-size:12px}#mode{top:10px;background:#211b22c9}#light{bottom:8px;left:12px;background:#452f10;color:#ffedc5;text-align:center}
.tray{flex:none;background:#211c23;border-radius:16px 16px 0 0;padding:10px max(14px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom));max-height:54dvh;overflow:auto}.selection,.actions{display:flex;align-items:center;justify-content:space-between;gap:10px}.selection h2{font-size:19px;line-height:1.3}.selection span{display:block;font:12px/1.5 Georgia;text-align:right;color:#d8cbd2}
#compare{display:flex;align-items:center;gap:6px;min-height:44px;color:#fff}#plain{width:18px;height:18px;min-height:0;accent-color:#a66486}
.rail{display:flex;overflow-x:auto;gap:6px;padding:6px 2px;overscroll-behavior-x:contain;scrollbar-width:thin}.rail button{flex:0 0 92px;min-height:58px;display:grid;place-items:center;align-content:center;gap:4px;border:1px solid transparent;color:#f6f1f4;padding:2px;border-radius:9px;font-size:10px}.rail img{width:44px;height:28px;object-fit:cover;border-radius:7px}.rail button[aria-pressed=true]{border-color:#dfb0c8;background:#372935}
#hint,.tray details{font-size:12px;color:#dfd4da}#hint{margin:4px 0 8px}.actions button,.actions a{display:grid;place-items:center;flex:1;min-height:44px;border:1px solid #aa8f9e;border-radius:8px;font-size:14px}.primary,body.live #orderLink{background:#f7edf3;color:#38202e}.tray summary{cursor:pointer;padding:4px 0}.tray details p{padding:4px 0 8px}
@media(min-width:760px) and (min-height:501px){.tray{padding-inline:max(24px,calc((100% - 780px)/2))}.rail button{flex-basis:90px}}
@media(max-height:500px) and (orientation:landscape){.studio{display:grid;grid-template:48px minmax(0,1fr)/minmax(0,1fr) minmax(245px,35%)}.bar{grid-column:1/-1}.tray{max-height:none;border-radius:0;padding:8px}.viewer{height:100%}}

.bar-tools{display:flex;align-items:center;justify-content:flex-end}.bar #expand{min-width:44px;justify-content:center;font:24px Arial,sans-serif}.bar #stop{padding:0 6px;font-size:13px}