/* PlayLab 1.0.30 — source-backed Aura, Oddgrid is the visual reference. */
.aura-page{--og-accent:#5558dc;--og-text:#111827;--og-muted:#6b7280;--og-border:#e0e5ee;--og-soft:#f7f8fb;--og-panel:#fff}
.aura-page [hidden]{display:none!important}
.aura-page .source-controls>.og-panel{margin:0;border-bottom:1px solid #edf0f4;border-radius:0}
.aura-page .source-controls>.og-panel:first-child{border-radius:16px 16px 0 0} .aura-page .source-controls>.og-panel:last-child{border-bottom:0;border-radius:0 0 16px 16px}
.aura-page details.og-panel>summary.og-panel-title{list-style:none;cursor:pointer;display:grid;grid-template-columns:28px 1fr 20px;align-items:center;width:100%;min-height:48px;padding:0 14px;background:#fff;color:#262d39}
.aura-page details.og-panel>summary::-webkit-details-marker{display:none} .aura-page details.og-panel[open]>summary{background:#fafbfe}
.aura-page details.og-panel>summary>span,.aura-page .source-toggle-panel>.og-panel-title>span{font:800 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#9aa1ad}
.aura-page details.og-panel>summary>strong,.aura-page .source-toggle-panel>.og-panel-title>strong{font-size:12px;font-weight:800;color:#262d39}
.aura-page details.og-panel>summary>i{font-style:normal;text-align:right;color:#8c93a0}
.aura-page details.og-panel .og-panel-body{display:none;padding:0 14px 15px} .aura-page details.og-panel[open] .og-panel-body{display:block}
.aura-page .source-toggle-panel>.og-panel-title{display:grid;grid-template-columns:28px 1fr 32px;align-items:center;width:100%;min-height:48px;padding:0 14px;border:0;background:#fff;color:#262d39;text-align:left}
.aura-page .source-toggle-panel>.og-panel-title .sw{position:relative;width:30px;height:17px;border:1px solid #707887;border-radius:999px;background:#fff} .aura-page .source-toggle-panel>.og-panel-title .sw:after{content:'';position:absolute;left:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#555d6d;transition:.15s}
.aura-page .source-toggle-panel>.og-panel-title[aria-pressed=true] .sw{background:#5558dc;border-color:#5558dc} .aura-page .source-toggle-panel>.og-panel-title[aria-pressed=true] .sw:after{transform:translateX(13px);background:#fff}
.aura-page .source-toggle-panel>.og-panel-body{padding:0 14px 15px}
.aura-page .pr{margin:0 0 12px} .aura-page .pr .top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:5px} .aura-page .k{color:#687181;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.05em} .aura-page .v{color:#8b92a0;font:800 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace}
.aura-page .track{position:relative;display:block;height:18px;--tw:10px} .aura-page .track:before{content:'';position:absolute;left:0;right:0;top:8px;height:1px;background:#e0e3e9;pointer-events:none} .aura-page .track:after{content:'';position:absolute;left:0;top:8px;height:2px;background:#5558dc;width:calc(var(--tw)/2 + (100% - var(--tw)) * var(--p,0)/100);pointer-events:none}
.aura-page .track input[type=range]{position:absolute;inset:0;width:100%;height:18px;margin:0;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer} .aura-page .track input[type=range]::-webkit-slider-runnable-track{height:18px;background:transparent} .aura-page .track input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;margin-top:4px;border:0;border-radius:50%;background:#5558dc} .aura-page .track input[type=range]::-moz-range-track{height:18px;background:transparent;border:0} .aura-page .track input[type=range]::-moz-range-thumb{width:10px;height:10px;border:0;border-radius:50%;background:#5558dc} .aura-page .notch{position:absolute;top:6px;width:1px;height:5px;background:#d9dde5}
.aura-page .misc{margin:0 0 12px} .aura-page .misc.stack{display:block} .aura-page .misc .mhead{display:block;margin-bottom:6px} .aura-page .misc .mval{display:block} .aura-page .chips{display:flex;flex-wrap:wrap;gap:5px}
.aura-page .lnk,.aura-page .chips button,.aura-page .myc-row button{display:inline-flex;align-items:center;justify-content:center;min-height:31px;padding:5px 8px;border:1px solid #dfe3eb;border-radius:8px;background:#fff;color:#5a6270;font-size:8px;font-weight:800} .aura-page .lnk:hover,.aura-page .lnk.on,.aura-page .lnk[aria-pressed=true],.aura-page .chips button.on,.aura-page .chips button[aria-pressed=true]{border-color:#bfc1ee;background:#f0f0ff;color:#4145b9} .aura-page .lnk:disabled{opacity:.4;cursor:not-allowed}
.aura-page .mycsw{display:inline-flex;align-items:center;gap:7px;margin-bottom:10px;border:0;background:none;color:#687181;font-size:9px;font-weight:800} .aura-page .mycsw .sw{position:relative;width:30px;height:17px;border:1px solid #707887;border-radius:999px;background:#fff} .aura-page .mycsw .sw:after{content:'';position:absolute;left:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#555d6d} .aura-page .mycsw[aria-pressed=true] .sw{background:#5558dc;border-color:#5558dc} .aura-page .mycsw[aria-pressed=true] .sw:after{transform:translateX(13px);background:#fff}
.aura-page .sw-grid{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .aura-page .sw-grid .sw,.aura-page .sw-grid .sw-add{position:relative;flex:0 0 32px;width:32px;height:32px;margin:0;padding:0;border-radius:8px;box-sizing:border-box} .aura-page .sw-grid .sw{display:block;border:1px solid #d7dbe4;background:#fff;overflow:visible;cursor:pointer} .aura-page .sw-grid .sw .fill{position:absolute;inset:4px;display:block;border-radius:5px;pointer-events:none} .aura-page .sw-grid .sw input[type=color]{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none} .aura-page .sw-grid .sw .x{position:absolute;right:-5px;top:-5px;display:none;width:14px;height:14px;border-radius:50%;background:#111827;color:#fff;font-size:9px;line-height:14px;text-align:center;z-index:3} .aura-page .sw-grid .sw:hover .x{display:block} .aura-page .sw-grid .sw-add{display:flex;align-items:center;justify-content:center;border:1px dashed #c8ced9;background:#fff;color:#687181;font-size:16px}
.aura-page .myc{margin-top:10px} .aura-page .myc-row{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px} .aura-page .myc-ta{display:block;width:100%;min-height:72px;margin-top:10px;padding:8px 9px;border:1px solid #dce1e9;border-radius:8px;background:#fff;color:#343b47;font:10px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace} .aura-page .myc-hint{margin:7px 0 0;color:#8a91a0;font-size:8px;line-height:1.45}
.aura-page .og-ratio-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px} .aura-page .ratio{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:44px;padding:4px;border:1px solid #dfe3eb;border-radius:8px;background:#fff} .aura-page .ratio .box{display:block;border:1px solid #8c93a0} .aura-page .ratio .t{font-size:8px;color:#7d8594} .aura-page .ratio[aria-pressed=true]{border-color:#bfc1ee;background:#f0f0ff} .aura-page .ratio[aria-pressed=true] .box{background:#5558dc;border-color:#5558dc}
.aura-page .oddgrid-stage{min-height:650px} .aura-page .oddgrid-stage #art{display:block;max-width:100%;max-height:78vh;width:auto;height:auto;background:#fff;box-shadow:0 10px 35px rgba(23,30,50,.12);cursor:pointer} .aura-page .holder{display:block;max-width:100%;max-height:100%;line-height:0} .aura-page .ring{display:none} .aura-page .oddgrid-stage.is-fullscreen{position:fixed;z-index:100200;inset:0;min-height:100vh;padding:30px;background:#151922;border:0;border-radius:0} .aura-page .oddgrid-stage.is-fullscreen #art{max-width:calc(100vw - 60px);max-height:calc(100vh - 60px)}
.aura-page .og-output-readout{display:flex;align-items:baseline;gap:8px} .aura-page .og-output-readout span{padding-left:8px;border-left:1px solid #e4e7ef;color:#8d95a2;font-size:8px} .aura-page .og-output-readout span:first-child{padding-left:0;border-left:0;color:#303744;font-size:10px;font-weight:800}
.aura-page .oddgrid-captures-body{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap} .aura-page .caps{display:flex;gap:7px;align-items:center} .aura-page .cap{width:11px;height:11px;border:1px solid #c7ccd6;border-radius:50%;background:#fff} .aura-page .cap[aria-current=true]{border-color:#5558dc;background:#5558dc} .aura-page .capnav{border:0;background:transparent;color:#6b7280} .aura-page .og-transport{display:flex;align-items:center;gap:9px} .aura-page .play{display:grid;place-items:center;width:30px;height:30px;border:1px solid #dfe3eb;border-radius:8px;background:#fff} .aura-page .play svg{fill:#4b52bf} .aura-page .scrubwrap{display:block;width:180px;height:18px;position:relative} .aura-page #scrub{width:100%}
.aura-page .oddgrid-file-export #exportBody{display:grid!important;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;margin-top:12px!important} .aura-page .oddgrid-file-export #exportBody>.pr{margin:0} .aura-page .oddgrid-file-export #exportBody>.misc{margin:0} .aura-page .oddgrid-file-export #exportBody .mval{display:flex;flex-wrap:wrap;gap:6px} .aura-page .oddgrid-file-export .vidhint{grid-column:1/-1;margin:0;color:#8a91a0;font-size:9px}
.aura-page #strip,.aura-page #glyph{display:none!important} .aura-page #toast,.aura-page .source-toast{position:fixed;z-index:100300;left:50%;bottom:26px;transform:translate(-50%,12px);opacity:0;pointer-events:none;max-width:min(520px,90vw);padding:10px 14px;border-radius:9px;background:#111827;color:#fff;font-size:10px;font-weight:800;box-shadow:0 14px 35px rgba(0,0,0,.24);transition:.18s} .aura-page #toast.show,.aura-page .source-toast.show{opacity:1;transform:translate(-50%,0)} .aura-page .source-toast.is-error{background:#7f1d1d}
.aura-page .og-variation-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;align-items:end} .aura-page .og-variation-row .og-field{margin:0;min-width:0} .aura-page .og-variation-row .og-text-input{display:block;width:100%;height:40px;min-height:40px;margin:0} .aura-page .og-variation-row .og-mini-action{display:inline-flex;align-items:center;justify-content:center;min-width:88px;height:40px;margin:0;padding:0 12px;white-space:nowrap}
.pick{position:relative;width:100%} .pick-btn{display:flex;align-items:center;justify-content:space-between;width:100%;height:36px;padding:0 9px;border:1px solid #dfe3eb;border-radius:8px;background:#fff;color:#555d6d;font-size:9px;font-weight:800} .pick-menu{position:fixed;z-index:100500;max-height:320px;overflow:auto;margin:0;padding:5px;list-style:none;border:1px solid #d8dde7;border-radius:9px;background:#fff;box-shadow:0 14px 36px rgba(20,23,34,.16)} .pick-menu li{padding:8px 9px;border-radius:6px;color:#535b6b;font-size:9px;font-weight:800;cursor:pointer} .pick-menu li:hover,.pick-menu li.hi,.pick-menu li[aria-selected=true]{background:#f0f0ff;color:#4145b9}
.cpick,.hexpop{position:fixed;z-index:100600;width:220px;padding:10px;border:1px solid #d8dde7;border-radius:10px;background:#fff;box-shadow:0 18px 44px rgba(20,23,34,.2)} .cpick .sv{position:relative;height:120px;border-radius:7px;overflow:hidden;cursor:crosshair} .cpick .sv .lay{position:absolute;inset:0} .cpick .dot{position:absolute;width:11px;height:11px;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #111827;transform:translate(-50%,-50%)} .cpick .hue{position:relative;height:12px;margin-top:9px;border-radius:999px;background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)} .cpick .hnd{position:absolute;top:-2px;width:5px;height:16px;border:1px solid #111827;background:#fff;transform:translateX(-50%)} .cpick .cprow{display:flex;gap:7px;align-items:center;margin-top:10px} .cpick .cpsw{width:22px;height:22px;border-radius:6px} .cpick .cphex,.hexpop .hexfield{flex:1;min-width:0;height:30px;border:1px solid #dce1e9;border-radius:7px;padding:0 7px;font-size:9px} .cpick .cpok,.hexpop .hexwheel{height:30px;padding:0 9px;border:0;border-radius:7px;background:#5558dc;color:#fff;font-size:8px;font-weight:800}
@media(max-width:820px){.aura-page .og-output-readout{display:none} .aura-page .oddgrid-captures-body{display:block} .aura-page .og-transport{margin-top:10px} .aura-page .oddgrid-file-export #exportBody{grid-template-columns:1fr}}
@media(max-width:560px){.aura-page .og-variation-row{grid-template-columns:1fr} .aura-page .og-variation-row .og-mini-action{width:100%} .aura-page .og-ratio-grid{grid-template-columns:repeat(2,1fr)}}