/* REFRM v112 — UX-first layout system. Structural overrides only; app IDs and behavior stay intact. */
:root{--layout-gap:12px;--layout-timeline:clamp(190px,25vh,270px);--layout-rail:76px;--layout-left:clamp(268px,22vw,320px);--layout-right:clamp(250px,20vw,290px)}
/* Desktop editor: tools on the left, preview gets the visual priority, inspector stays compact, timeline has room to edit. */
#app{grid-template-rows:66px minmax(0,1fr) var(--layout-timeline);grid-template-columns:var(--layout-rail) var(--layout-left) minmax(360px,1fr) var(--layout-right);grid-template-areas:"top top top top" "rail left player right" "tl tl tl tl";gap:0;background:var(--bg)}
#top{padding-inline:20px;gap:10px;box-shadow:0 6px 26px rgba(0,0,0,.12)}
.brand{margin-right:12px;flex:none}.brand .logo{font-size:13px}
#pname{max-width:min(24vw,360px);margin-right:8px}
#top #export{min-height:40px;padding-inline:17px;border-radius:12px}
#rail{padding:12px 8px;gap:5px;background:linear-gradient(180deg,var(--panel),color-mix(in srgb,var(--panel) 92%,var(--acc) 8%));}
#rail button{min-height:62px;padding:10px 3px;font-size:10px;gap:6px}
#rail button svg{width:21px;height:21px}
#left{min-width:0;box-shadow:8px 0 30px rgba(0,0,0,.07);z-index:8}
.pane{padding:22px 18px 32px}.pane-head{padding-bottom:12px;border-bottom:1px solid var(--line-soft);margin-bottom:17px}.pane h3{font-size:16px;letter-spacing:-.035em}.lede{font-size:12px;line-height:1.65}
#player{border:0;min-width:0;position:relative;background:radial-gradient(ellipse at 50% 42%,rgba(45,62,79,.22),transparent 68%),var(--panel)}
.phead{height:49px;min-height:49px;padding:0 18px;border-bottom:1px solid var(--line-soft);background:rgba(255,255,255,.015)}
.ptitle{font-size:12px;font-weight:750;letter-spacing:.015em}
#stage{margin:0;min-height:0;background:radial-gradient(ellipse at 50% 45%,#1a2633 0%,#0a0e14 68%)}
#cvwrap{max-height:calc(100% - 30px);max-width:calc(100% - 44px);border-radius:15px;box-shadow:0 28px 80px rgba(0,0,0,.5),0 0 0 1px rgba(223,238,255,.09)}
.pbar{min-height:60px;padding:8px 16px;border-top:1px solid var(--line-soft);background:rgba(13,18,26,.94)}
#play{width:42px;height:42px;border-radius:50%;background:var(--acc);color:#131a0b;box-shadow:0 4px 18px rgba(255,255,255,.18)}
#right{min-width:0;box-shadow:-8px 0 30px rgba(0,0,0,.06)}
#right>.phead{padding-inline:17px}
#inspect{padding:12px 14px 28px}
.isec{border:1px solid var(--line-soft)!important;border-radius:13px!important;margin-bottom:8px;background:rgba(255,255,255,.015);overflow:hidden}
.isec summary{padding:13px 12px;font-size:12px;font-weight:700}.isec-body{padding:0 12px 14px}
#tl{min-height:0;border-top:1px solid var(--line);background:linear-gradient(180deg,#10151d,#0c1118);box-shadow:0 -12px 40px rgba(0,0,0,.13)}
#tlbar{min-height:48px;padding:6px 14px;gap:6px;border-bottom:1px solid var(--line-soft)}
#tlbar button{border-radius:10px;min-height:34px}#seqrow{min-height:38px}
#tlbody{min-height:0}#tlhead{background:rgba(255,255,255,.018)}#tlscroll{background-color:#0d131b}
#track{background-color:#111a24}#wtrack,#ctrack,#ttrack,#camtrack{border-color:rgba(205,222,242,.07)}
/* Homepage has a deliberate decision flow: promise -> visual proof -> import. Keep the controls visible without a scroll hunt. */
#landing{scrollbar-gutter:stable;background:#080b10}
.land-top{padding-inline:clamp(18px,5vw,80px);min-height:76px}
.land-main{width:min(100%,1500px);grid-template-columns:minmax(0,1.02fr) minmax(430px,.98fr);gap:clamp(30px,5vw,82px);padding:clamp(28px,4vh,58px) clamp(22px,5vw,76px) 42px}
.land-story h1{font-size:clamp(48px,5.3vw,82px);max-width:720px}
.land-sub{font-size:clamp(14px,1.15vw,16px);max-width:520px;line-height:1.8}
.land-showcase{margin-top:24px;transform:scale(.98);transform-origin:left top}
.land-workspace{padding:clamp(16px,1.6vw,24px);border-radius:25px}
.workspace-intro{font-size:10px;margin-bottom:16px}
.land-drop{padding:clamp(14px,1.4vw,20px)}
.land-workspace .set{max-height:min(42vh,480px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}
#landgen{min-height:56px;position:sticky;bottom:0;z-index:2}
#landmsg{border-radius:10px}
/* Responsive editor: maintain a large preview and a usable timeline; tools become sheets, never squeezed columns. */
@media(max-width:1250px) and (min-width:861px){
 :root{--layout-rail:66px;--layout-left:270px;--layout-right:250px;--layout-timeline:clamp(190px,27vh,260px)}
 #top{padding-inline:12px;gap:6px}.brand{margin-right:4px}#pname{max-width:190px}
 #rail button{font-size:9px;min-height:56px}
 .pane{padding:18px 14px 26px}#inspect{padding-inline:10px}
 .land-main{grid-template-columns:minmax(0,.92fr) minmax(390px,1.08fr);gap:28px;padding-inline:28px}
 .land-story h1{font-size:clamp(43px,5vw,64px)}.land-showcase{transform:scale(.86);transform-origin:left top;margin-bottom:-32px}
}
@media(max-height:760px) and (min-width:861px){:root{--layout-timeline:190px}#app{grid-template-rows:58px minmax(0,1fr) var(--layout-timeline)}.land-main{padding-top:24px;padding-bottom:26px}.land-showcase{height:220px;transform:scale(.82);transform-origin:left top;margin-bottom:-35px}.land-story h1{font-size:clamp(42px,4.8vw,68px)}}
@media(max-width:860px){
 :root{--layout-timeline:clamp(160px,27dvh,225px)}
 #app{grid-template-rows:auto minmax(0,1fr) var(--layout-timeline) calc(66px + env(safe-area-inset-bottom,0px));grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "player" "tl" "rail"}
 #top{min-height:54px;padding:5px 8px;gap:4px}#player{background:#090d13}.phead{height:42px;min-height:42px;padding-inline:12px}.pbar{min-height:52px;padding:5px 10px}
 #cvwrap{max-width:calc(100% - 20px);max-height:calc(100% - 12px);border-radius:11px}
 #tlbar{min-height:42px;padding:4px 7px;gap:3px}#tlbar button{min-height:34px;padding:6px 8px}#rail{padding:5px 4px calc(5px + env(safe-area-inset-bottom,0px));}
 #landing{overflow-y:auto}.land-main{grid-template-columns:minmax(0,1fr);gap:18px;padding:30px 20px calc(28px + env(safe-area-inset-bottom,0px));width:min(100%,680px)}
 .land-story{text-align:center}.land-eyebrow{justify-content:center;margin-bottom:17px}.land-story h1{text-align:center;font-size:clamp(43px,8vw,65px);margin-inline:auto}.land-sub{text-align:center;margin:14px auto 0}.land-benefits{justify-content:center}
 .land-showcase{margin:20px auto 0;transform:scale(.92);transform-origin:top center;height:230px}.land-workspace{margin:0 auto;width:100%;padding:15px}.land-workspace .set{max-height:none}
}
@media(max-width:540px){
 #top{gap:3px}#export{min-height:40px!important;min-width:42px!important;padding-inline:10px!important}#play{width:38px;height:38px}
 #tlbar .blabel{display:none}#tlbar button{min-width:34px;padding:6px}
 .land-top{min-height:62px;padding:10px 14px}.land-main{padding:23px 13px calc(22px + env(safe-area-inset-bottom,0px));gap:15px}
 .land-story h1{font-size:clamp(37px,10vw,49px)}.land-sub{font-size:13px;line-height:1.65}.land-benefits{gap:6px}.land-benefits span{font-size:9px;padding:7px 8px}.land-benefits span:last-child{display:none}
 .land-showcase{height:190px;width:100%;transform:scale(.82);transform-origin:top center;margin:13px auto -20px}.land-workspace{padding:10px;border-radius:18px}.workspace-intro{font-size:9px}
 .src-tabs button{min-height:44px}.land-workspace .priority-grid{grid-template-columns:1fr 1fr}.land-workspace .priority-choice{min-height:76px}
}
@media(prefers-reduced-motion:reduce){#landing::before,#landing::after,.land-story,.land-workspace,.showcase-window,.float-card,.pane{animation:none!important;transition:none!important}button{scroll-behavior:auto;transition:none!important}button:hover:not(:disabled){transform:none!important}}