/* Tab prototype · shell around the screen: scene picker, controls, embed mode. */
html, body { height: 100%; margin: 0; }
body {
  display: flex; overflow: hidden; background: #e9e9ee; color: #1d1d1f;
  font: 13px/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", sans-serif;
  -webkit-font-smoothing: antialiased;
}
body svg.ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }

/* picker */
.pk { display: flex; flex-direction: column; width: 268px; flex: none; margin: 10px 0 10px 10px; border-radius: 18px; background: rgba(255, 255, 255, .72); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .06), 0 8px 30px -12px rgba(0, 0, 0, .18); overflow: hidden; transition: margin .35s cubic-bezier(.2, .8, .2, 1), opacity .25s; }
.pk-off .pk { margin-left: -268px; opacity: 0; }
.pk-hd { display: flex; align-items: center; gap: 10px; padding: 18px 18px 10px; }
.pk-hd b { display: block; font-size: 14px; }
.pk-hd span { display: block; font-size: 11.5px; color: rgba(60, 60, 67, .6); }
.pk-list { flex: 1; overflow: auto; padding: 4px 10px 10px; }
.pk-g { margin-bottom: 8px; }
.pk-gt { padding: 8px 8px 4px; font-size: 11px; font-weight: 600; color: rgba(60, 60, 67, .5); }
.pk-i { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border-radius: 9px; text-align: left; }
.pk-i:hover { background: rgba(118, 118, 128, .08); }
.pk-i.on { background: #007aff; color: #fff; }
.pk-n { display: flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: rgba(118, 118, 128, .12); font-size: 11px; font-weight: 700; color: rgba(60, 60, 67, .7); }
.pk-i.on .pk-n { background: rgba(255, 255, 255, .25); color: #fff; }
.pk-t { font-size: 13px; font-weight: 500; }
.pk-t small { display: block; font: 11px "SF Mono", ui-monospace, Menlo, monospace; color: rgba(60, 60, 67, .5); }
.pk-i.on .pk-t small { color: rgba(255, 255, 255, .75); }
.pk-ft { padding: 12px 18px 16px; font-size: 11.5px; line-height: 1.6; color: rgba(60, 60, 67, .62); box-shadow: inset 0 1px 0 rgba(0, 0, 0, .05); }
.pk-ft p { margin: 0; }
.pk-ft kbd { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 5px; background: rgba(118, 118, 128, .14); font: 500 11px/18px -apple-system, sans-serif; text-align: center; }

/* stage */
.main { display: flex; flex: 1; flex-direction: column; min-width: 0; padding: 10px; gap: 10px; }
.stage { display: flex; flex: 1; align-items: center; justify-content: center; min-height: 0; }
.frame { position: relative; overflow: hidden; border-radius: 14px; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .12), 0 30px 80px -24px rgba(20, 30, 60, .45); background: #d9e2f5; }

/* controls */
.ctl { display: flex; align-items: center; gap: 8px; height: 52px; flex: none; padding: 0 12px; border-radius: 16px; background: rgba(255, 255, 255, .72); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .06); }
.ctl-b { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 17px; color: rgba(0, 0, 0, .7); }
.ctl-b:hover { background: rgba(118, 118, 128, .1); }
.ctl-b.pri { background: #007aff; color: #fff; }
.ctl-b.pri svg.ic { width: 15px; height: 15px; }
.ctl-b svg.ic path[fill] { stroke: none; }
.ctl-mid { flex: 1; min-width: 0; padding: 0 8px; }
.ctl-top { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; font-size: 12.5px; }
.ctl-label { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 500; }
.ctl-manual { display: none; height: 18px; padding: 0 7px; border-radius: 9px; background: rgba(255, 149, 0, .14); font-size: 11px; font-weight: 600; line-height: 18px; color: #b25f00; }
.ctl.manual .ctl-manual { display: inline-block; }
.ctl-time { margin-left: auto; font: 11.5px "SF Mono", ui-monospace, monospace; color: rgba(60, 60, 67, .55); }
.ctl-bar { position: relative; height: 6px; border-radius: 3px; background: rgba(118, 118, 128, .16); cursor: pointer; touch-action: none; }
.ctl-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: #007aff; }
.ctl-marks i { position: absolute; top: -2px; width: 2px; height: 10px; margin-left: -1px; border-radius: 1px; background: rgba(0, 0, 0, .22); }
.ctl-t { height: 28px; padding: 0 11px; border-radius: 14px; background: rgba(118, 118, 128, .1); font-size: 12px; font-weight: 500; color: rgba(60, 60, 67, .7); }
.ctl-t.on { background: rgba(0, 122, 255, .14); color: #007aff; }

/* embed: only the screen, transparent outside it, contain-fit */
body.embed { background: transparent; }
body.embed .pk, body.embed .ctl { display: none; }
body.embed .main { padding: 0; }
body.embed .frame { border-radius: 0; box-shadow: none; background: transparent; }