/* Orbit dashboard demo (fixed 1240x720 canvas, scaled to fit) */
.ou{position:relative;width:100%;aspect-ratio:1240/720;--s:1;container-type:inline-size}
.ou-in{position:absolute;left:0;top:0;width:1240px;height:720px;transform-origin:0 0;transform:scale(var(--s))}
.ui{display:grid;grid-template-columns:220px 1fr;width:1240px;height:720px;background:#141415;color:#f4f3f0;border-radius:18px;font:400 14px/1.4 'Inter Display','Inter','Noto Sans Thai',system-ui,sans-serif;overflow:hidden;letter-spacing:0;text-align:left}
.us{padding:22px 16px;display:flex;flex-direction:column;gap:4px;border-right:1px solid #f4f3f01a}
.ulogo{display:flex;align-items:center;gap:10px;padding:0 10px 22px;font-size:17px;font-weight:600;letter-spacing:-.03em}.ulogo img{border-radius:50%;background:#f4f3f0;padding:2px}
.uon{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;color:#c9c8c4;cursor:default;transition:background .3s,color .3s}
.ou-int .uon{cursor:pointer}.ou-int .uon:hover{background:#1d1d1e66}
.uon.is-active{background:#1d1d1e;color:#f4f3f0}
.uoi{width:16px;height:16px;border:1px solid #f4f3f0;border-radius:5px;flex:none;opacity:.85}
.uteam{margin-top:auto;display:flex;align-items:center;gap:10px;padding:0 10px;color:#c9c8c4}
.uav{width:26px;height:26px;border-radius:99px;background:#0b0b0c;border:1px solid #f4f3f0;display:grid;place-items:center;font-size:10px;font-weight:600;color:#f4f3f0}
.um{padding:22px 26px;display:flex;flex-direction:column;gap:18px;min-width:0}
.ut{display:flex;justify-content:space-between;align-items:flex-start}
.uh{font-size:22px;letter-spacing:-.02em;line-height:1.5}.usub{font-size:13px;color:#6b6b6c}
.urow{display:flex;align-items:center;gap:12px}
.usearch{width:240px;height:36px;border-radius:999px;background:#1d1d1e;color:#6b6b6c;font-size:13px;padding:0 14px;display:flex;align-items:center;white-space:nowrap;overflow:hidden}
.upill{height:26px;padding:0 10px;border-radius:999px;background:#f4f3f0;color:#0b0b0c;font-size:12px;font-weight:600;display:inline-flex;align-items:center;white-space:nowrap}
.ukp{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.oc2{background:#1d1d1e;border-radius:14px;padding:16px 18px;min-width:0}
.ol{font-size:12px;color:#6b6b6c}.obig{font-size:30px;letter-spacing:-.04em;line-height:1.55;font-variant-numeric:tabular-nums}.uod{font-size:12px;color:#a0a0a0}
.ulow{display:grid;grid-template-columns:1.55fr 1fr;gap:14px;flex:1;min-height:0}
.ucols{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;min-height:0}
.uoc{background:#f4f3f006;border:1px solid #f4f3f01a;border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:8px;min-width:0}
.och{display:flex;justify-content:space-between;font-size:12px;color:#a0a0a0;padding:2px 4px 4px}
.oj{background:#1d1d1e;border-radius:10px;padding:11px 12px;font-size:13px;display:flex;flex-direction:column;gap:6px;will-change:transform}
.oj>span{font-weight:400;line-height:1.3}
.oj.hot{background:#f4f3f0;color:#0b0b0c;box-shadow:0 14px 30px -14px #000}.oj.hot>span{font-weight:600}
.ob{height:4px;border-radius:99px;background:#f4f3f014;overflow:hidden}.ob i{display:block;height:100%;border-radius:99px;background:#a0a0a0;transition:width .9s cubic-bezier(.2,.7,.2,1)}.oj.hot .ob{background:#0b0b0c1a}.oj.hot .ob i{background:#0b0b0c}
.om{display:flex;justify-content:space-between;font-size:11px;color:#6b6b6c}.oj.hot .om{color:#6b6b6c}
.oj.enter{animation:ojIn .8s cubic-bezier(.2,.7,.2,1) both}.oj.leave{animation:ojOut .6s cubic-bezier(.2,.7,.2,1) both}
@keyframes ojIn{from{opacity:0;transform:translateY(-14px) scale(.96)}}@keyframes ojOut{to{opacity:0;transform:scale(.94)}}
.uch{display:flex;flex-direction:column;min-height:0}
.ubars{flex:1;display:flex;align-items:flex-end;gap:8px;margin-top:6px;min-height:0}
.ubars i{flex:1;height:var(--h);border-radius:6px;background:#f4f3f024;transform-origin:bottom;transform:scaleY(0);transition:transform 1.1s cubic-bezier(.2,.7,.2,1),height .9s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--k,0)*55ms),0s}
.ubars i:last-child{background:#f4f3f0}
.ou.in .ubars i{transform:none}
.ou.static .ubars i{transform:none;transition:none}
@media(prefers-reduced-motion:reduce){.oj.enter,.oj.leave{animation:none}}
/* hero frame (Curate-style tilt) */
.od-frame{position:relative;width:min(1240px,92%);margin:0 auto;padding:18px;border-radius:28px;background:#0b0b0c;box-shadow:0 60px 120px -50px #000a,0 0 0 1px #ffffff12;transform-origin:50% 0;transform:perspective(1600px) rotateX(calc(13deg*(1 - var(--t,0)))) scale(calc(.89 + .11*var(--t,0)));will-change:transform}
.od-frame .ui{border-radius:18px}