/* TryDataverse's original Flow-inspired creative workspace, responsive. */
:root{--bg:#090b11;--surface:#151923;--violet:#bea7ff;--ink:#f7f6fb;--line:#303441}
body{background:radial-gradient(ellipse 60% 44% at 65% -18%,#292038 0%,transparent 90%),#090b11}
.studio-sidebar{background:#0d0f16;border-right-color:#252934;width:252px}
.studio-sidebar nav a{border-radius:12px;letter-spacing:.01em}
.studio-sidebar nav a.selected{background:#282438;box-shadow:inset 3px 0 #d6baff}
.studio-logo .studio-glyph{box-shadow:0 0 32px #b591ff52}
.topbar{background:#0e1019f0;border-bottom-color:#282b37}
.topbar nav a.active{color:#f9e9ff}
.wrap{max-width:1540px}
.welcome.compact{min-height:180px;background:radial-gradient(ellipse at 85% 20%,#553b7b56,transparent 48%),linear-gradient(120deg,#202333,#11131d);border-color:#353448;padding:33px 40px;margin:25px 0 25px}
.welcome.compact:after{width:260px;height:260px;right:-50px;top:-130px;border-width:32px}
.welcome.compact h1{font-size:clamp(29px,3.5vw,47px);margin:10px 0 12px;letter-spacing:-1.6px}
.welcome.compact h1 em{background:linear-gradient(90deg,#e0adff,#97bbff);background-clip:text}
.hero-pills{display:flex;gap:9px;flex-wrap:wrap;margin-top:20px}
.hero-pills span{font-size:11px;padding:7px 12px;background:#3532488a;color:#e6def5;border:1px solid #5b4c72;border-radius:50px}
.creator-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(330px,.72fr);gap:18px;align-items:start;margin-bottom:24px}
.studio-composer{margin:0}
.studio-composer>h2{font-size:26px}
.compose-card{border-radius:23px;border-color:#414457;background:linear-gradient(160deg,#1a1d29,#12151e);box-shadow:0 18px 48px #0004;padding:24px}
.compose-title{letter-spacing:.005em}
.compose-card textarea{min-height:175px;font-size:15px;padding:14px 0}
.compose-card textarea::placeholder{color:#858a9d}
.idea-chips button{background:#2a2d3b;border-color:#494c62}
.idea-chips button:hover{background:#34374a}
.compose-settings{border-color:#34384c}
.compose-settings select{background:#272b3b;border-color:#4b5062}
.compose-action button{background:linear-gradient(105deg,#e6c4ff,#bdcbff);border-radius:14px;color:#1d2030;box-shadow:0 8px 30px #8b87fc2a}
.page-quick{gap:14px}
.page-quick a{background:linear-gradient(120deg,#191d2a,#181722);border-color:#323347;transition:transform .2s,border-color .2s}
.page-quick a:hover{border-color:#9685bc;transform:translateY(-2px)}
.framing-rail{border:1px solid #383b4b;border-radius:23px;padding:18px;background:linear-gradient(160deg,#222333,#13151f);position:sticky;top:94px;box-shadow:0 18px 50px #0004}
.rail-heading{display:flex;align-items:center;gap:9px;color:#e7e3f6;font-weight:800;font-size:11px;letter-spacing:1.45px;padding:3px 4px 15px}
.rail-heading small{margin-left:auto;font-weight:600;font-size:10px;color:#a9aabd;letter-spacing:0}
.rail-dot{background:#8ef1bc;width:8px;height:8px;border-radius:50%;box-shadow:0 0 0 4px #89f4bd1a}
.frame-stage{height:min(48vh,405px);min-height:280px;border:1px solid #4a485d;border-radius:19px;background:radial-gradient(ellipse at 50% 10%,#67617a88,transparent 55%),#101420;display:grid;place-items:center;overflow:hidden;padding:17px}
.frame-output{height:100%;max-height:374px;aspect-ratio:9/16;background:transparent;padding:0;border-radius:11px;box-shadow:0 0 0 1px #f3f3f5,0 17px 50px #0008;display:flex;align-items:stretch;justify-content:stretch}
.frame-scene{position:relative;flex:1;overflow:hidden;background:radial-gradient(circle at 65% 38%,#d0ade1 0,#7a74b4 32%,#283450 70%,#181e30 100%);border-radius:2px}
.frame-orbit{position:absolute;width:90%;height:40%;border:1px solid #ffffffb3;border-radius:50%;top:19%;left:6%;transform:rotate(-27deg)}
.frame-object{position:absolute;top:39%;left:22%;width:56%;aspect-ratio:1;background:linear-gradient(135deg,#f0b5da,#e7c0ff 45%,#ada9fd);display:grid;place-items:center;border-radius:28%;box-shadow:0 25px 35px #0005, inset -16px -14px 23px #7360a978;transform:rotate(-10deg)}
.frame-object span{font-size:clamp(26px,4vw,50px);color:#563569}
.frame-glow{position:absolute;inset:auto -18% -15%;height:40%;border-radius:50%;background:#e1a7e588;filter:blur(30px)}
.rail-info{padding:19px 4px 9px}
.rail-info strong{font-size:16px;letter-spacing:-.2px;color:#f6f1ff}
.rail-info p,.rail-timeline p{color:#acaabd;font-size:12px;line-height:1.6;margin:8px 0 13px}
.framing-tags{display:flex;flex-wrap:wrap;gap:8px}
.framing-tags span{font-size:9px;font-weight:800;letter-spacing:.8px;color:#e4d7ff;background:#302a41;border:1px solid #574a70;padding:7px 9px;border-radius:7px}
.rail-timeline{border-top:1px solid #37394a;margin-top:10px;padding:16px 4px 0}
.timeline-head{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.8px;color:#b9b6c7;font-weight:800}
.timeline-cells{display:flex;gap:5px;margin-top:12px}
.timeline-cells i{height:18px;flex:1;border-radius:5px;background:linear-gradient(110deg,#6d5687,#b6a3f4)}
.timeline-cells i:nth-child(2){background:linear-gradient(110deg,#5a5e90,#929fd8)}
.timeline-cells i:nth-child(3){background:linear-gradient(110deg,#865b89,#c18abb)}
@media(max-width:1120px){.studio-sidebar{width:210px}.creator-layout{grid-template-columns:minmax(0,1.15fr) minmax(275px,.7fr)}.frame-stage{height:330px;min-height:280px}}
@media(max-width:880px){.creator-layout{grid-template-columns:1fr}.framing-rail{position:static;display:grid;grid-template-columns:210px minmax(0,1fr);gap:0 18px;align-items:center}.rail-heading{grid-column:1/-1}.frame-stage{height:330px;min-height:0;grid-row:2/4}.rail-info{padding-top:0}.rail-timeline{margin:0}.frame-output{height:100%}}
@media(max-width:750px){.topbar{box-shadow:0 8px 40px #0003}.topbar .brand{display:flex;font-size:17px}.topbar .brand small{display:none}.topbar .brand .logo{width:29px;height:29px}.topbar nav{margin-left:auto}.welcome.compact{padding:28px 22px;min-height:160px}.welcome.compact h1{font-size:31px}.creator-layout{gap:18px}.framing-rail{grid-template-columns:1fr;padding:15px}.frame-stage{grid-row:auto;height:340px;min-height:280px}.rail-info{padding:15px 4px 5px}.rail-timeline{padding-top:15px}.mobile-tabs{border-top-color:#444159}}
@media(max-width:460px){.welcome.compact{padding:26px 18px;margin:16px 0 20px}.welcome.compact h1{font-size:28px}.hero-pills{gap:5px}.hero-pills span{font-size:9px;padding:6px 8px}.studio-composer>h2{font-size:24px}.compose-card{padding:18px;border-radius:17px}.compose-card textarea{min-height:155px}.framing-rail{border-radius:17px}.frame-stage{height:310px}.rail-heading{font-size:10px}.topbar .brand{font-size:15px}.topbar nav a.active{font-size:11px}.topbar nav a:not(.active){display:none}}
@media(prefers-reduced-motion:reduce){.page-quick a{transition:none}}

/* Percent padding is relative to ancestor width; inset is relative to the actual frame. */
.frame-output{position:relative;padding:0;display:block}
.frame-output .frame-scene{position:absolute;inset:0;width:auto;height:auto}

/* Edge-to-edge consumer preview; no source-only white safety margin. */
.frame-output{background:#151923;padding:0;overflow:hidden}
.frame-output .frame-scene{position:absolute;inset:0;width:auto;height:auto;border-radius:0}

/* Mobile-safe numeric duration entry for 5–300 second videos. */
.compose-settings input[type=number]{width:100%;min-width:0;max-width:100%;background:#171920;color:inherit;border:1px solid #34363f;border-radius:8px;padding:11px 12px;font:inherit}

/* Render the customer-selected Flow format, without source safety borders. */
.frame-output[data-aspect="16:9"]{width:100%;max-width:100%;height:auto;aspect-ratio:16/9}
.frame-output[data-aspect="9:16"]{height:100%;width:auto;aspect-ratio:9/16}