/* Route Story mobile studio — black surfaces, red controls. Video palettes remain independent. */
:root{--bg:#111111;--panel:#1d1d1d;--line:#383838;--text:#f7f7f7;--muted:#b0b0b0;--accent:#ed2334;color-scheme:dark}
body{background:var(--bg);padding-bottom:calc(100px + env(safe-area-inset-bottom));-webkit-tap-highlight-color:transparent}header{height:64px;padding:0 22px;border-color:#2b2b2b;background:#161616}.brand{font-size:15px;letter-spacing:1.4px}.brand small{display:none}.mark{background:#ed2334;color:#ffffff;border-radius:12px;font-size:24px}header #help{background:transparent;border-color:#3e3e3e;color:#dedede;font-size:13px}
main{display:block;max-width:980px}.workspace{position:relative;top:auto;padding:20px 24px;background:transparent}.sectionhead{align-items:center;margin-bottom:12px}.sectionhead .eyebrow{font-size:11px;letter-spacing:1.8px;color:#aaaaaa}.sectionhead h1{font-size:23px;margin:5px 0;font-weight:650}.sectionhead .primary{max-width:none;min-height:44px;border-radius:14px;background:#ed2334;color:#ffffff;padding:10px 18px}
button,.button{border-radius:12px;background:#282828;border-color:#434343;color:#f5f5f5}button:hover,.button:hover{background:#363636;border-color:#ed2334}.primary{background:#ed2334;color:#ffffff}.primary:hover{background:#ff4654}.previewtools{margin:0 0 10px}.previewtools button{border-radius:50%;width:38px;min-height:38px;font-size:22px}.previewtools>span{font-size:12px}.stage{position:relative;background:#0c0c0c;background-image:none;border-color:#363636;border-radius:22px;padding:14px}.canvaswrap{width:min(100%,350px);min-width:0;border-radius:14px;overflow:hidden;box-shadow:0 14px 45px #0007}canvas{border-radius:14px}.stage #expandpreview{position:absolute;z-index:1;bottom:24px;right:24px;width:40px;min-height:40px;padding:0;background:#1a1a1ad9;color:white;border-color:#828282;font-size:23px;border-radius:12px}
.mediaquick{display:grid;grid-template-columns:1.3fr 1fr;gap:8px;margin:12px 0 8px}.mediaquick button{font-size:14px;min-height:46px}.quickbar{padding:6px 0}.quickbar span{color:#cacaca}.quickbar button{background:transparent;border-color:#3f3f3f}.transport{padding:5px 0;margin:0;gap:12px}.transport button{width:44px;min-height:44px;background:#ed2334;color:#ffffff;border-radius:50%}.transport span{font-size:12px}.replaymeta{color:var(--muted)}#status{font-size:13px;max-height:none;overflow:visible;line-height:1.5}.appdock{position:fixed;bottom:0;left:0;right:0;z-index:10;display:flex;justify-content:center;gap:4px;background:#1c1c1cf5;backdrop-filter:blur(20px);border-top:1px solid #3d3d3d;padding:10px 12px calc(10px + env(safe-area-inset-bottom))}.appdock button{flex:1;max-width:135px;flex-direction:column;gap:6px;font-size:12px;font-weight:500;background:transparent;border:0;min-height:59px;color:#b5b5b5;padding:6px 2px}.appdock button span{font-size:24px;line-height:1}.appdock button:hover,.appdock button[aria-pressed=true]{color:#ff5361;background:#2b171a}
#toolsheet{width:min(760px,100%);max-width:none;max-height:86dvh;height:auto;margin:auto auto 0;padding:0;border-radius:28px 28px 0 0;background:#1d1d1d;border:1px solid #494949;overflow:hidden;box-shadow:0 -16px 80px #0008}#toolsheet::backdrop{background:#08080899;backdrop-filter:blur(3px)}.sheetgrip{width:40px;height:5px;border-radius:4px;background:#656565;margin:10px auto 4px}.sheetheading{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid #393939;gap:12px}.sheetheading h2{font-size:22px;margin:4px 0}.sheetheading .eyebrow{font-size:11px;color:#a3a3a3}.sheetheading button{color:#ff5361;background:#2f2f2f;border-color:#555555;border-radius:20px;min-width:64px}#sheethost{overflow-y:auto;max-height:calc(86dvh - 112px);padding-bottom:env(safe-area-inset-bottom);overscroll-behavior:contain}#editorcontrols{border:0;padding:18px 22px 24px;scroll-margin:0}.startflow,#editorcontrols>.tabs{display:none}.panel{min-height:0}.panelhead h2,#panel-style>h2,#panel-activity>h2{display:none}.hint{font-size:14px;line-height:1.65;color:#b8b8b8}label{font-size:14px;color:#dfdfdf}input:not([type=range]):not([type=file]):not([type=checkbox]),select{background:#161616;border-color:#474747;border-radius:11px;padding:12px}.badge{background:#373737;color:#ff7580}.filters{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;gap:7px}.filters button{white-space:nowrap;min-height:40px;border-radius:11px;background:#2a2a2a;color:#c1c1c1;font-size:13px}.filters .active{background:#32191c;color:#ffffff;border-color:#878787}
.catalogue{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.detailcard{position:relative;align-items:stretch;padding:10px;border-radius:18px;background:#252525;border-color:#424242}.detailcard.added{background:#281719;border-color:#808080}.detailmain{flex-direction:column;align-items:flex-start;padding:5px 0;gap:10px;justify-content:flex-start}.detailicon{width:52px;height:52px;border-radius:14px;background:#404040;color:#ff7580;font-size:30px}.detailmain strong{font-size:14px;line-height:1.4;padding-right:22px}.detailmain small{font-size:12px;line-height:1.5;color:#b2b2b2}.addtoggle{position:absolute;right:9px;top:10px;width:36px;min-height:36px;font-size:22px}.added .addtoggle{background:#ed2334;color:#ffffff}.unavailable .detailicon{background:#303030;color:#9f9f9f}.templates{gap:12px;margin-top:0}.templates button{min-height:136px;border-radius:18px;background:#262626;font-size:15px;gap:16px}.templates span{font-size:35px;color:#eeeeee}.templates .selected{background:#2b171a;border-color:#ed2334}.templates .selected span{color:#ff7580}.palettes{gap:9px;padding:12px;background:#161616;border-radius:16px}.palettechip{min-height:56px;border-radius:10px}.palettechip span{height:32px;width:14px}.upload{background:#2c2c2c;border:1px dashed #7c7c7c;border-radius:16px;padding:22px}.activity{background:#2d2d2d;border-radius:14px;padding:16px}.modecontrol{background:#313131}.exportsettings{display:none}.exportsettings summary{font-size:16px}.exportsettings .two{margin-top:12px}#toolsheet[data-view=settings] .panel{display:none!important}#toolsheet[data-view=settings] .exportsettings{display:block;border:0;margin:0;padding:0}#toolsheet[data-view=settings] footer{display:block}#editorcontrols footer{display:none}#toolsheet[data-view=templates] #panel-style>label,#toolsheet[data-view=templates] #panel-style>.two,#toolsheet[data-view=templates] #palettes{display:none}#toolsheet[data-view=palette] .templates{display:none}
dialog{background:#1d1d1d;border-color:#494949}dialog .guideicon{background:#ed2334;color:#ffffff}.previewonly header,.previewonly .sectionhead,.previewonly .previewtools,.previewonly .quickbar,.previewonly .mediaquick,.previewonly .appdock,.previewonly #expandpreview,.previewonly #status,.previewonly .replaymeta{display:none}.previewonly .workspace{padding:12px}.previewonly .canvaswrap{width:min(calc((100dvh - 145px)*.5625),100%)}.previewonly #exitpreview{display:block;position:fixed;bottom:calc(15px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:20;white-space:nowrap;background:#ed2334;color:#ffffff}.previewonly{padding-bottom:85px}
@media(max-width:850px){header{height:56px;padding:0 16px}.workspace{position:relative;padding:12px 14px 8px;border:0}.sectionhead h1{font-size:20px;margin:3px 0}.sectionhead .eyebrow{font-size:10px}.sectionhead .primary{font-size:13px;padding:9px 14px}.stage{padding:9px;border-radius:19px}.canvaswrap{width:min(100%,calc((100svh - 340px)*.5625));min-width:180px}.quickbar{margin:4px 0;padding:0}.quickbar button{min-height:36px}.mediaquick{margin:9px 0 6px}.mediaquick button{font-size:13px;min-height:42px}.transport{margin-top:6px}.transport button{min-height:38px;width:38px}.replaymeta{display:none}.stage #expandpreview{bottom:17px;right:17px}.brand{font-size:13px}.sheetheading{padding:12px 18px}#editorcontrols{padding:16px}.appdock{gap:0}.sectionhead{margin-bottom:8px}#status{font-size:12px}#toolsheet{width:100%}}
@media(max-height:650px){.canvaswrap{width:210px}.workspace{position:relative}}@media(max-width:340px){.catalogue{grid-template-columns:1fr}.appdock button{font-size:11px}.mediaquick{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
#toolsheet[data-view=templates] #panel-style .hint~.hint{display:none}#toolsheet[data-view=palette] .templates+.hint{display:none}

/* Keep the actual canvas visible while the independent bottom panel scrolls. */
:root{--bg:#080808;--panel:#151515;--line:#333;--text:#fff;--muted:#aaa;--accent:#ed2334;--dock-height:calc(80px + env(safe-area-inset-bottom));--tool-height:clamp(220px,34dvh,320px)}
button:focus-visible,input:focus-visible,select:focus-visible{outline-color:var(--accent)}
header{background:#0c0c0c}.mark{background:var(--accent);color:white}.sectionhead .primary,.transport button,.primary{background:#db1729;color:white}.primary:hover{background:#ee2b3c}.appdock{background:#101010f5;border-color:#303030}.appdock button[aria-pressed=true]{color:#ff6571;background:#291316}.sheetheading .eyebrow{display:none}.sheetheading h2{font-size:16px;text-transform:uppercase;letter-spacing:1.5px}.sheetheading button{background:#db1729;color:white;border:0}.sheetgrip{display:none}
#toolsheet{position:fixed;inset:auto 0 var(--dock-height);margin:0 auto;width:min(980px,100%);height:var(--tool-height);max-height:none;border-radius:20px 20px 0 0;box-shadow:none;background:#111;border-color:#333;z-index:9}
#toolsheet[open]{display:flex;flex-direction:column}#toolsheet .sheetheading{flex:none;min-height:58px;padding:8px 18px}#sheethost{flex:1;min-height:0;max-height:none;scrollbar-width:thin;padding-bottom:0}#editorcontrols{padding:12px 18px 18px}
body.tools-open{padding-bottom:0;overflow:hidden}body.tools-open main{height:calc(100dvh - 64px - var(--dock-height) - var(--tool-height));min-height:0}body.tools-open .workspace{height:100%;display:flex;flex-direction:column;min-height:0;padding:10px 20px}body.tools-open .sectionhead,body.tools-open .previewtools,body.tools-open .transport{flex:none}body.tools-open .sectionhead .eyebrow{display:none}body.tools-open .sectionhead h1{font-size:18px}body.tools-open .stage{flex:1;min-height:0;overflow:hidden;padding:5px;background:#050505;border:0}body.tools-open .canvaswrap{height:100%;width:auto;max-width:100%;min-width:0;aspect-ratio:9/16;box-shadow:none}body.tools-open canvas{height:100%;width:100%;object-fit:contain}body.tools-open .mediaquick,body.tools-open .quickbar,body.tools-open .replaymeta{display:none}body.tools-open #status{position:fixed;top:70px;right:12px;max-width:310px;background:#222;z-index:25;padding:10px 14px;border-radius:12px;pointer-events:none;opacity:0}body.tools-open #status.notice{opacity:1}body.tools-open .previewtools{margin-bottom:4px}body.tools-open .transport{margin:6px 0 0}body.tools-open #expandpreview{bottom:10px;right:10px}
.templates{display:flex;overflow-x:auto;gap:12px;scroll-snap-type:x proximity;padding:2px 2px 10px}.templates button{position:relative;flex:0 0 135px;min-height:130px;scroll-snap-align:start;background:#191919;border:2px solid #333;border-radius:16px;font-size:14px}.templates span{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#242424;font-size:28px}.templates .selected{border-color:#ed2334;background:#271316}.templates .selected:after{content:'✓';position:absolute;right:8px;top:6px;color:#ff6571}.templates .selected span{color:#ff6571}.templates+.hint{font-size:12px;line-height:1.5;margin:4px 0 0}
#toolsheet[data-view=templates] #panel-style>.hint{display:none}#toolsheet[data-view=templates] #panel-style>label,#toolsheet[data-view=templates] #panel-style>.two,#toolsheet[data-view=templates] #palettes{display:none}#toolsheet[data-view=palette] .templates{display:none}#toolsheet[data-view=palette] #panel-style>label:first-of-type{margin-top:0}
.detailcard.added{border-color:#91404a;background:#231719}.detailicon{background:#282828;color:#ff7580}.added .addtoggle{background:#db1729;color:white}.filters .active{background:#32191c;border-color:#b9414d;color:white}.badge{background:#32191c;color:#ffabb2}.previewonly #exitpreview{background:#db1729;color:white}
@media(max-width:850px){body.tools-open main{height:calc(100dvh - 56px - var(--dock-height) - var(--tool-height))}body.tools-open .workspace{padding:6px 12px}body.tools-open .sectionhead{margin-bottom:4px}body.tools-open .previewtools button{min-height:32px;width:32px}body.tools-open .sectionhead .primary{min-height:36px;padding:7px 12px}.appdock button{font-size:12px}.previewtools>span{font-size:12px}#toolsheet .sheetheading{min-height:54px}#toolsheet .sheetheading button{min-height:38px}.templates button{flex-basis:125px;min-height:120px}}
@media(max-height:600px) and (min-width:600px){body.tools-open main{margin:0;width:52%;height:calc(100dvh - 64px - var(--dock-height))}#toolsheet{left:52%;right:0;top:64px;width:48%;height:auto;border-radius:16px 0 0 0}body.tools-open .sectionhead h1{display:none}}