/* AKSARA Flow UI — surfaces, layout and motion, v4 */
:root{--bg:#090909;--panel:#111;--panel2:#1b1b1b;--panel3:#252525;--ink:#f4f4f4;--ink-muted:#aaa;--ink-faint:#858585;--line:#262626;--line2:#383838;--accent:#f5f5f5;--accent-text:#111;--glow:#ffffff0b;--studio-glass:#090909f2;--flow-ease:cubic-bezier(.2,.8,.2,1)}
:root[data-theme=light]{--bg:#f7f7f7;--panel:#fff;--panel2:#eee;--panel3:#e4e4e4;--ink:#171717;--ink-muted:#5d5d5d;--ink-faint:#747474;--line:#dedede;--line2:#c9c9c9;--accent:#1b1b1b;--accent-text:#fff;--glow:#00000006;--studio-glass:#f7f7f7f2}
html{scroll-behavior:smooth;scroll-padding-top:90px}body{font-family:'DM Sans','Noto Sans Sinhala',sans-serif;letter-spacing:0}button{touch-action:manipulation}button,a,input,select,textarea{transition:background .2s,border-color .2s,color .2s,box-shadow .2s,transform .2s var(--flow-ease)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--ink);outline-offset:4px}::selection{background:#8886}.btn{border-radius:999px;font-weight:500;min-height:42px;padding:10px 19px;font-size:13px;box-shadow:none}.btn:hover:not(:disabled){transform:translateY(-1px);border-color:var(--ink-faint)}.btn-primary{background:var(--accent);color:var(--accent-text)}.btn-primary:hover:not(:disabled){background:#ddd;color:#111;border-color:transparent;box-shadow:0 3px 22px #ffffff12}[data-theme=light] .btn-primary:hover:not(:disabled){background:#333;color:#fff}.btn:active:not(:disabled){transform:scale(.97)}.btn-icon{padding:0;width:40px;height:40px;min-height:40px}.btn-small{min-height:34px;padding:7px 13px;font-size:12px}.brand{font-size:22px;letter-spacing:-1px;font-weight:500}.brand-mark{display:none}.wordmark{font-weight:500;letter-spacing:-1.2px}.byline{display:none}.flow-section-label{font-size:11px;letter-spacing:1.4px;color:var(--ink-faint);font-weight:500}.eyebrow{color:var(--ink-muted);font-weight:500;letter-spacing:1.2px}.serif{font:inherit}.title-dot{color:var(--ink-muted)}
/* Public introduction. */
.flow-landing{background:var(--bg)}.flow-landing .landing-nav{height:82px;max-width:none;padding:0 38px;border:0;position:absolute;inset:0 0 auto;z-index:5}.landing-nav-links{gap:29px;font-size:13px}.landing-nav-right{gap:10px}.flow-hero{min-height:900px;height:100svh;position:relative;overflow:hidden;text-align:center;display:flex;flex-direction:column;align-items:center;padding:122px 24px 54px;isolation:isolate}.flow-hero-title{position:relative;z-index:2;animation:flow-rise .8s var(--flow-ease) both}.flow-hero-title>span{font-size:clamp(23px,3vw,42px);font-weight:400;letter-spacing:-1.6px}.flow-hero h1{font-size:clamp(76px,12.7vw,188px);font-weight:400;letter-spacing:-.075em;line-height:1;margin:10px 0 0}.flow-scene{position:relative;width:min(860px,86vw);flex:1;min-height:230px;display:grid;place-items:center;margin:10px 0;perspective:900px}.flow-scene:before{content:'';position:absolute;inset:10% -10%;background:radial-gradient(ellipse at 50% 65%,#809b5020,transparent 65%);filter:blur(30px)}.flow-orbit{position:absolute;border:1px solid #ffffff0b;border-radius:50%;width:90%;height:50%;transform:rotate(-17deg);animation:flow-orbit 16s ease-in-out infinite alternate}.orbit-two{width:65%;height:85%;transform:rotate(32deg);animation-delay:-8s}.flow-sample{position:relative;padding:40px;animation:flow-float 8s ease-in-out infinite;display:flex;align-items:center;flex-direction:column;gap:13px}.flow-sample>span{font-size:clamp(23px,3vw,39px);font-weight:600;color:var(--ink-muted)}.flow-sample strong{font-size:clamp(30px,4.5vw,58px);font-weight:500;letter-spacing:-2.5px}.flow-sample em{font-style:normal;background:#d7ff93;color:#202713;padding:0 10px;border-radius:8px}.flow-sample-timeline{display:flex;gap:5px;width:78%;margin:17px auto 0;position:relative;opacity:.55}.flow-sample-timeline i{height:7px;background:var(--ink-faint);flex:1;border-radius:3px}.flow-sample-timeline:after{content:'';position:absolute;top:-6px;bottom:-6px;width:2px;background:var(--ink);animation:flow-scrub 8s linear infinite}.flow-hero-bottom{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:19px;animation:flow-rise .8s .15s var(--flow-ease) both}.flow-hero-bottom p{font-size:22px;line-height:1.3;margin:0;font-weight:400;letter-spacing:-.5px}.flow-cta{min-width:270px;min-height:57px;font-size:15px;gap:22px}.flow-hero-bottom>span{font-size:11px;color:var(--ink-faint)}.flow-overview,.flow-workflow,.flow-tools{padding:115px 7%;max-width:1560px;margin:auto}.flow-overview{text-align:center;border-top:1px solid var(--line)}.flow-overview h2,.flow-workflow h2,.flow-tools h2{font-size:clamp(38px,5.3vw,75px);line-height:1.07;letter-spacing:-.055em;font-weight:400;margin:25px 0 60px}.flow-feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:left}.flow-feature-grid article{border-radius:22px;background:var(--panel);border:1px solid var(--line);padding:30px;min-height:290px;transition:transform .4s var(--flow-ease),border-color .3s}.flow-feature-grid article:hover{transform:translateY(-6px);border-color:var(--line2)}.flow-feature-grid article>span{font-size:10px;letter-spacing:1.4px;color:var(--ink-faint);display:block}.flow-feature-grid article>.icon{width:34px;height:34px;margin:36px 0 15px}.flow-feature-grid h3,.flow-tools h3{font-size:21px;font-weight:400;letter-spacing:-.6px;margin:0 0 12px}.flow-feature-grid p,.flow-tools p{font-size:14px;line-height:1.7;color:var(--ink-muted);margin:0}.flow-workflow{display:grid;grid-template-columns:1fr 1fr;gap:80px;border-top:1px solid var(--line)}.flow-workflow h2{margin-bottom:35px}.flow-workflow ol{margin:0;padding:0;list-style:none}.flow-workflow li{display:flex;gap:25px;padding:35px 0;border-bottom:1px solid var(--line)}.flow-workflow li>b{color:var(--ink-faint);font-size:13px;font-weight:400}.flow-workflow h3{font-size:23px;font-weight:400;margin:0 0 10px;letter-spacing:-.6px}.flow-workflow p{color:var(--ink-muted);font-size:14px;line-height:1.7;margin:0}.flow-tools{border-top:1px solid var(--line)}.flow-tool-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.flow-tool-card{text-align:left;border:1px solid var(--line);color:var(--ink);border-radius:20px;background:var(--panel);padding:30px;min-height:250px;position:relative}.flow-tool-card:hover{background:var(--panel2);transform:translateY(-4px)}.flow-tool-card>.icon{width:26px;height:26px;margin-bottom:35px}.flow-tool-card>span{display:grid;place-items:center;position:absolute;top:24px;right:24px;width:35px;height:35px;border:1px solid var(--line2);border-radius:50%}.footer{padding:35px 7%;max-width:1560px}
/* App navigation and library. */
.app-shell{grid-template-columns:80px minmax(0,1fr)}.rail{padding:23px 9px 17px;background:var(--bg);border-right:1px solid var(--line);gap:24px}.rail-brand{color:var(--ink);border:0;background:transparent;font-size:34px;font-weight:500;letter-spacing:-3px;height:40px;line-height:1;display:block}.rail-brand>span{display:none}.rail-links{display:flex;flex-direction:column;gap:13px}.rail-button{display:flex;flex-direction:column;justify-content:center;gap:6px;width:60px;height:60px;border-radius:15px;color:var(--ink-faint)}.rail-label{font-size:9px;font-weight:400}.rail-button .icon{width:19px;height:19px}.rail-button.active{background:var(--panel2);color:var(--ink)}.rail-button.active:before{display:none}.rail-button:hover{background:var(--panel2);color:var(--ink)}.rail-bottom{align-items:center}.rail-bottom #theme-toggle{color:var(--ink-muted)}.app-topbar{height:74px;border:0;padding:0 32px;background:var(--bg)}.crumbs{font-size:12px;gap:14px}.crumbs>span{font-weight:500;letter-spacing:-.3px;color:var(--ink)}.crumbs>svg{width:12px;color:var(--ink-faint)}.crumbs strong{font-weight:400;color:var(--ink-muted);max-width:230px}.flow-back{background:transparent;border:0;color:var(--ink-muted);display:grid;place-items:center;width:30px;height:30px;border-radius:50%;margin-left:-10px}.flow-back:hover{background:var(--panel2);color:var(--ink)}[data-page=home] .flow-back{display:none}.credit-chip{background:var(--panel2);border:1px solid var(--line);color:var(--ink-muted);padding:8px 13px;font-size:11px}.credit-chip b{font-weight:500;color:var(--ink);font-size:12px}.top-profile{width:34px;height:34px;padding:0;border:1px solid var(--line2);display:grid;place-items:center;color:var(--ink);background:var(--panel3);font-size:13px}.dashboard{max-width:1500px;margin:auto;padding:54px 48px 28px}.dashboard-head{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:42px}.dashboard-head h1{font-size:clamp(31px,3.4vw,49px);font-weight:400;letter-spacing:-2px;margin:13px 0}.dashboard-head p{font-size:13px;color:var(--ink-faint);margin:0}.dashboard-head .btn{min-width:146px}.flow-dashboard-tabs{border-bottom:1px solid var(--line);display:flex;gap:30px;margin-bottom:34px}.flow-dashboard-tabs button{border:0;border-bottom:2px solid transparent;color:var(--ink-faint);background:transparent;padding:0 0 18px;font-size:13px;display:flex;align-items:center;gap:9px}.flow-dashboard-tabs button.active{color:var(--ink);border-bottom-color:var(--ink)}.flow-dashboard-tabs button:hover{color:var(--ink)}.flow-dashboard-tabs button span{background:var(--panel3);font-size:10px;padding:2px 6px;border-radius:5px}.flow-dashboard-tabs button .icon{width:12px}.subheading{gap:14px;margin-bottom:22px;align-items:center}.flow-library-title{display:flex;flex-direction:column;gap:6px}.flow-library-title h2{font-size:15px;font-weight:500;letter-spacing:0}.flow-library-title>span{color:var(--ink-faint);font-size:10px}.flow-library-controls{display:flex;align-items:center;gap:10px}.search-input{border-radius:999px;background:transparent;border-color:var(--line);min-width:0;width:180px;height:35px;font-size:11px}.flow-sort{width:116px;padding:7px 10px;border-radius:999px;font-size:11px;height:35px;background:transparent;border-color:var(--line)}.flow-view-toggle{display:flex;gap:3px;border:1px solid var(--line);border-radius:999px;padding:3px}.flow-view-toggle button{display:grid;place-items:center;border:0;background:transparent;color:var(--ink-faint);width:28px;height:27px;border-radius:50%}.flow-view-toggle button[aria-pressed=true]{background:var(--panel3);color:var(--ink)}.flow-view-toggle .icon{width:14px;height:14px}.project-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;min-height:250px}.project-card{border:0;background:transparent;border-radius:14px;overflow:visible;animation:flow-rise .5s calc(var(--card-index,0)*40ms) var(--flow-ease) both}.project-card:hover{box-shadow:none;transform:none}.project-preview{height:auto;aspect-ratio:16/10;background:var(--panel2);border:1px solid var(--line);border-radius:15px;transition:border-color .2s,transform .4s var(--flow-ease)}.project-preview img{transition:transform .65s var(--flow-ease)}.project-card:hover .project-preview{border-color:var(--ink-faint)}.project-card:hover img{transform:scale(1.035)}.flow-card-play{opacity:0;position:absolute;inset:0;display:grid;place-items:center;z-index:2;background:#0002;transition:opacity .2s}.flow-card-play .icon{color:white!important;width:40px!important;height:40px!important;stroke-width:1}.project-card:hover .flow-card-play,.project-card:focus-visible .flow-card-play{opacity:1}.project-info{padding:15px 3px}.project-info h3{font-size:13px;font-weight:500}.project-info p{font-size:10px}.video-duration{border:0;background:#111c;border-radius:5px;font-size:9px;font-weight:400}.project-preview>.icon{color:var(--ink-faint)}.project-empty{border:0;padding:33px 20px 44px;display:flex;align-items:center;justify-content:center;flex-direction:column;min-height:300px;background:transparent}.flow-empty-art{width:78px;height:78px;border:1px solid var(--line2);border-radius:23px;display:grid;place-items:center;transform:rotate(-8deg);background:var(--panel);box-shadow:8px 8px 0 var(--panel2);margin-bottom:13px}.flow-empty-art .icon{width:27px;height:27px;color:var(--ink-muted);transform:rotate(8deg)}.project-empty h3{font-size:20px;font-weight:400;letter-spacing:-.6px}.project-empty p{max-width:330px;font-size:12px;color:var(--ink-faint);margin:8px auto 20px}.project-empty .btn .icon{width:16px;height:16px;color:inherit}.project-grid.is-list{display:flex;flex-direction:column;gap:0;min-height:250px}.project-grid.is-list .project-card{display:flex;gap:20px;align-items:center;border-bottom:1px solid var(--line);padding:14px 0}.project-grid.is-list .project-preview{width:125px;flex-shrink:0;border-radius:9px}.project-grid.is-list .project-info{flex:1;min-width:0}.project-grid.is-list .project-empty{flex:1}.flow-composer{max-width:730px;margin:42px auto 0;background:var(--panel2);border:1px solid var(--line2);border-radius:25px;padding:17px;display:flex;align-items:center;gap:13px;box-shadow:0 12px 40px #0002;animation:flow-rise .6s .1s var(--flow-ease) both}.flow-upload-icon,.flow-composer-go{width:42px;height:42px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line2);background:transparent;color:var(--ink-muted)}.flow-composer-main{background:transparent;color:var(--ink);border:0;flex:1;text-align:left;padding:4px 0;min-width:0}.flow-composer-main strong{font-size:13px;font-weight:400;display:block;margin-bottom:7px}.flow-composer-main span{color:var(--ink-faint);font-size:11px;display:block}.flow-composer-go{background:var(--accent);color:var(--accent-text);border:0}.flow-composer-go:hover{transform:translateX(2px)}.flow-upload-icon:hover{background:var(--panel3);color:var(--ink)}.flow-local-note{font-size:10px;text-align:center;margin:13px 0;color:var(--ink-faint);line-height:1.7}
/* Account entry. */
.auth-layout{background:var(--bg);grid-template-columns:1fr 1fr;min-height:100svh}.auth-aside{padding:38px 48px;border-color:var(--line);background:var(--panel);position:relative;overflow:hidden}.auth-aside:before{content:'';position:absolute;width:650px;height:650px;border:1px solid var(--line);border-radius:50%;top:22%;left:-20%;pointer-events:none}.auth-aside:after{content:'';position:absolute;width:480px;height:480px;border:1px solid var(--line);border-radius:50%;bottom:-230px;right:-160px;pointer-events:none}.auth-aside-content{position:relative;z-index:1}.auth-aside-content .mini-pill{border:0;border-radius:0;background:transparent;color:var(--ink-faint);padding:0;font-size:10px;font-weight:400;letter-spacing:1.5px}.auth-aside-content h1{font:400 clamp(42px,5.1vw,76px)/1.08 'DM Sans',sans-serif;letter-spacing:-.065em}.auth-aside-content h1 em{font:inherit;color:var(--ink)}.auth-aside-content>p{color:var(--ink-faint);font-size:14px;max-width:310px;line-height:1.8}.auth-showcase{background:var(--bg);border:1px solid var(--line2);border-radius:18px;box-shadow:none;max-width:420px;padding:30px 20px;animation:flow-float 9s ease-in-out infinite}.auth-sample{color:var(--ink);font-size:24px}.auth-sample span{background:#d7ff93;color:#202713;border-radius:5px;padding:1px 8px}.auth-sample-sub{color:var(--ink-faint);font-size:10px;letter-spacing:.5px}.auth-credit-note{color:var(--ink-faint);font-size:10px}.auth-right{padding:30px 44px;background:var(--bg)}.auth-toplink{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.auth-toplink #auth-home{margin-right:auto;display:flex;align-items:center;gap:5px}.auth-toplink>span{font-size:11px;color:var(--ink-faint)}.text-link{color:var(--ink);font-weight:500;font-size:12px}.auth-badge{border:0;background:transparent;color:var(--ink-faint);letter-spacing:1.8px;font-size:10px;padding:0;margin-bottom:24px}.auth-form-wrap{animation:flow-rise .45s var(--flow-ease) both;max-width:370px}.auth-form-wrap h2{font-size:34px;font-weight:400;letter-spacing:-1.5px}.auth-form-wrap>p{font-size:13px;color:var(--ink-muted);line-height:1.8}.number-input,.select{border-color:var(--line2);background:var(--panel);border-radius:10px;color:var(--ink);font-weight:400}.auth-form-wrap .number-input{min-height:48px;border-radius:10px}.input-label{font-weight:400;font-size:12px;color:var(--ink-muted)}.auth-submit{height:49px;margin-top:25px}.auth-bottom{font-size:12px!important}.auth-privacy{font-size:10px;color:var(--ink-faint);border-top:1px solid var(--line);margin-top:27px;padding-top:18px;line-height:1.8}.human-box{border-color:var(--line2);background:var(--panel);border-radius:13px}.human-header{color:var(--ink)}.human-choices label span{border-color:var(--line2);background:var(--panel2);color:var(--ink-muted)}.human-choices input:checked+span{border-color:var(--ink);background:var(--panel3);color:var(--ink)}
/* Editor. */
.studio-main{height:calc(100dvh - 74px);min-height:630px;grid-template-columns:minmax(0,1fr) 340px;grid-template-rows:minmax(300px,1fr) 280px;gap:0}.canvas-zone{padding:12px 25px 0;background:var(--bg)}.canvas-top{margin-bottom:13px;gap:10px}.canvas-chip{color:var(--ink-muted);background:var(--panel2);border-color:var(--line);font-size:9px;font-weight:400;letter-spacing:1px}.canvas-file{font-size:10px;color:var(--ink-faint)}.canvas-frame{border:1px solid var(--line);background:#050505;border-radius:13px}.canvas-bot{height:57px}.player-clock{font-size:11px}.player-clock strong{font-weight:500}.timeline-zone{background:var(--bg);border-color:var(--line)}.timeline-bar{height:59px;padding:0 22px}.timeline-bar h3{font-size:12px;font-weight:500}.timeline-bar p{font-size:9px;color:var(--ink-faint)}.caption-track{background:var(--panel);border-color:var(--line2)}.track-item{background:#55594b;color:#f0f2e9;border-color:#767e65;border-radius:4px}.track-item.active{background:#7e8c64;border-color:#d7ff93}.caption-row.active{background:var(--panel2);border-color:var(--line2)}.caption-row:hover{background:var(--panel)}.caption-time{background:var(--panel);color:var(--ink-muted)}.caption-text:focus{background:var(--panel2)}.inspector{background:var(--panel);border-color:var(--line)}.inspector-head{padding:20px;border-color:var(--line)}.side-kicker{color:var(--ink-faint);font-size:9px;font-weight:400;letter-spacing:1.2px}.inspector-head h3{font:500 18px/1.5 'DM Sans',sans-serif;letter-spacing:-.6px}.inspector-head p{font-size:11px;color:var(--ink-faint)}.inspector-tabs{background:var(--bg);border-color:var(--line);margin:15px 15px 10px;grid-template-columns:repeat(3,minmax(0,1fr));border-radius:999px;padding:4px}.inspector-tab{font-size:10px;font-weight:400;border-radius:999px;padding:9px 4px;color:var(--ink-faint);gap:4px}.inspector-tab.active{background:var(--panel3);color:var(--ink);border-color:var(--line2);box-shadow:none}.inspector-scroll{padding:10px 17px 26px;scrollbar-color:var(--line2) transparent}.inspector-section-title{color:var(--ink-faint);font-size:8px;font-weight:500;letter-spacing:1px}.inspector-section-title span:last-child{color:var(--ink-faint);font-weight:400}.style-tile{background:var(--panel2);border-color:var(--line);border-radius:12px}.style-tile:hover{border-color:var(--ink-faint);transform:translateY(-2px)}.style-tile.active,.style-tile[aria-pressed=true]{border-color:var(--ink);background:var(--panel2);box-shadow:0 0 0 1px var(--ink)}.style-tile-footer{background:var(--panel);border-color:var(--line);color:var(--ink-muted)}.style-tile-footer strong{font-size:10px;font-weight:400}.style-check{background:var(--accent);color:var(--accent-text)}.display-tile{background:var(--panel2);border-color:var(--line);border-radius:13px}.display-tile.active,.display-tile[aria-pressed=true]{background:var(--panel2);border-color:var(--ink);box-shadow:none}.display-tile-top strong{font-weight:500;color:var(--ink)}.display-tile-top small{color:var(--ink-muted)}.display-tile-desc,.mode-tip{color:var(--ink-faint)}.pos-btn{background:var(--panel2);color:var(--ink-muted);border-color:var(--line)}.pos-btn.active{background:var(--panel3);border-color:var(--ink-faint);color:var(--ink)}.field-title{font-weight:400;color:var(--ink-muted)}.design-controls{color:var(--ink-muted)}.motion-headline,.motion-section-title{color:var(--ink);font-weight:500}.motion-section,.motion-shot{background:var(--panel2);border-color:var(--line)}.motion-empty,.motion-copy,.motion-shot span{color:var(--ink-faint)}.color-input{border-color:var(--line2);background:var(--panel2)}.color-input>span{color:var(--ink-muted)}.info-page h1{font-size:42px;font-weight:400;letter-spacing:-2px}.info-page .setting-card{background:var(--panel);border-radius:17px}.setting-card h3{font-weight:500}.connect-badge{background:var(--panel3);border-color:var(--line2);color:var(--ink-muted)}.setup-code{background:var(--panel2);border-color:var(--line2);color:var(--ink-muted)}
/* Dialogs and feedback. */
.modal-backdrop{background:#000a;backdrop-filter:blur(12px);animation:flow-fade .18s ease}.modal{background:var(--panel);border:1px solid var(--line2);border-radius:25px;padding:27px;max-height:90dvh;overflow:auto;animation:flow-rise .28s var(--flow-ease) both;box-shadow:0 25px 100px #0006}.modal-top h2{font:400 23px 'DM Sans',sans-serif;letter-spacing:-.7px}.modal-desc{font-size:12px;line-height:1.8;color:var(--ink-muted)}.modal-actions{flex-wrap:wrap;gap:8px;margin-top:24px}.warning-note{border-color:var(--line);background:var(--panel2);color:var(--ink-muted)}.flow-credit-total{font-size:54px;font-weight:400;letter-spacing:-2px;margin:20px 0 28px}.flow-credit-total span{display:block;font-size:12px;letter-spacing:0;color:var(--ink-faint);margin-top:8px}.flow-upload-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:var(--panel2);border:1px dashed var(--ink-faint);border-radius:18px;min-height:230px;width:100%;color:var(--ink)}.flow-upload-drop:hover{background:var(--panel3);border-color:var(--ink)}.flow-upload-drop>.icon{width:30px;height:30px;margin-bottom:5px}.flow-upload-drop strong{font-size:16px;font-weight:500}.flow-upload-drop>span{font-size:12px;color:var(--ink-muted)}.flow-upload-drop small{font-size:10px;color:var(--ink-faint);margin-top:13px}.flow-upload-steps{display:flex;justify-content:center;align-items:center;gap:12px;font-size:10px;color:var(--ink-muted);margin:25px 0 17px}.flow-upload-steps>.icon{color:var(--ink-faint);width:11px}.upload-stepper{border:1px solid var(--line);border-radius:12px;background:var(--panel2);gap:8px}.upload-stepper .current{background:var(--accent);color:var(--accent-text)}.file-review,.credit-review{border-color:var(--line);background:var(--panel2)}.review-icon{background:var(--panel3);color:var(--ink)}.toast{background:var(--panel3);border-color:var(--line2);color:var(--ink);border-radius:14px}.toast .icon{color:var(--ink)}.toast.error .icon{color:#ff8c8c}.drop-overlay{background:#000c;backdrop-filter:blur(12px)}.drop-overlay .drop-panel{background:var(--panel);border-color:var(--ink-faint);color:var(--ink)}.drop-panel p{color:var(--ink-muted)}.progressbar div{background:linear-gradient(90deg,#aaa,#e4f9ba,#fff);background-size:200% 100%;animation:flow-shimmer 2s linear infinite}.hint{color:var(--ink-faint);font-size:11px;line-height:1.8}
@keyframes flow-rise{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}@keyframes flow-fade{from{opacity:0}to{opacity:1}}@keyframes flow-float{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-9px) rotate(-1deg)}}@keyframes flow-orbit{to{transform:rotate(12deg) scale(1.08)}}@keyframes flow-scrub{from{left:0}to{left:100%}}@keyframes flow-shimmer{to{background-position:-200% 0}}
@media(min-width:1600px){.project-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:1100px){.dashboard{padding:40px 28px 25px}.studio-main{grid-template-columns:minmax(0,1fr) 300px}.flow-feature-grid article{padding:23px}.flow-workflow{gap:40px}.auth-aside{padding:32px}.auth-right{padding:30px}.flow-composer{margin-top:30px}.flow-library-title>span{display:none}}
@media(max-width:900px){.auth-layout{grid-template-columns:.9fr 1.1fr}.auth-showcase{padding:25px 15px}.auth-sample{font-size:19px}.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.flow-hero{min-height:800px}.flow-feature-grid,.flow-tool-row{gap:12px}.flow-feature-grid h3,.flow-tool-card h3{font-size:19px}.flow-tool-card{padding:24px}.flow-library-controls{gap:6px}.search-input{width:145px}.auth-aside-content h1{font-size:49px}}
@media(max-width:720px){.flow-landing .landing-nav{padding:0 20px;height:73px}.landing-nav-links{display:none}.flow-hero{padding:125px 20px 50px;min-height:760px;height:100svh}.flow-hero h1{font-size:clamp(61px,13vw,95px)}.flow-hero-title>span{font-size:26px}.flow-hero-bottom p{font-size:19px}.flow-hero-bottom .flow-cta{min-height:52px;min-width:240px}.flow-scene{width:95%;min-height:220px}.flow-sample{padding:20px}.flow-sample strong{font-size:clamp(29px,6.8vw,42px);letter-spacing:-1.4px}.flow-sample>span{font-size:22px}.flow-overview,.flow-workflow,.flow-tools{padding:70px 22px}.flow-overview h2,.flow-workflow h2,.flow-tools h2{font-size:43px;margin-bottom:35px}.flow-feature-grid,.flow-tool-row{grid-template-columns:1fr;gap:15px}.flow-feature-grid article{min-height:230px;padding:26px}.flow-feature-grid article>.icon{margin:25px 0 16px}.flow-workflow{grid-template-columns:1fr;gap:25px}.flow-tool-card{min-height:220px}.footer{padding:27px 22px}.app-shell{grid-template-columns:1fr}.rail{position:fixed;top:auto;bottom:0;height:66px;width:100%;padding:4px 10px;gap:8px;border-top:1px solid var(--line);border-right:0;background:var(--studio-glass);backdrop-filter:blur(15px);display:flex;flex-direction:row;justify-content:space-evenly}.rail-brand{display:none}.rail-links{flex-direction:row;gap:12px}.rail-button{width:51px;height:51px;gap:4px;border-radius:12px}.rail-label{font-size:8px}.rail-spacer{display:none}.rail-bottom{flex-direction:row;gap:9px}.rail-bottom #theme-toggle{width:30px}.workspace{padding-bottom:66px}.app-topbar{height:64px;padding:0 17px;gap:8px}.crumbs{gap:7px;font-size:10px}.crumbs strong{max-width:115px}.top-actions{gap:6px}.top-actions .btn{padding:8px 10px;min-height:32px}.top-profile{width:29px;height:29px;font-size:11px}.credit-chip{padding:7px 9px;font-size:10px}.credit-chip>span{display:none}.dashboard{padding:30px 18px 25px}.dashboard-head{gap:10px;align-items:flex-start;flex-direction:column;margin-bottom:28px}.dashboard-head h1{font-size:35px;letter-spacing:-1.5px}.dashboard-head>div>p{font-size:12px}.dashboard-head>.btn{margin-top:8px;min-height:38px;font-size:12px}.flow-section-label{font-size:9px}.flow-dashboard-tabs{margin-bottom:22px;gap:23px}.flow-dashboard-tabs button{font-size:12px;padding-bottom:13px}.subheading{display:flex;align-items:flex-start;flex-direction:column;gap:15px}.flow-library-controls{width:100%;gap:7px}.search-input{flex:1;width:0;min-width:0;height:35px}.flow-sort{width:105px}.project-grid{gap:14px}.project-preview{height:auto;aspect-ratio:4/3}.project-info{padding:12px 0}.project-info h3{font-size:12px}.project-info p{font-size:9px;line-height:1.5}.project-empty{min-height:290px;padding:24px 12px}.project-empty h3{font-size:20px}.project-grid.is-list .project-preview{width:98px;aspect-ratio:16/10}.flow-composer{padding:12px;gap:9px;border-radius:21px;margin-top:30px}.flow-upload-icon,.flow-composer-go{width:33px;height:33px}.flow-composer-main strong{font-size:12px;margin-bottom:5px}.flow-composer-main span{font-size:10px;line-height:1.5}.flow-composer>#open-srt-help{display:none}.flow-local-note{font-size:9px;margin:10px auto 0;max-width:280px}.studio-main{height:auto;min-height:0;display:flex;flex-direction:column}.canvas-zone{height:min(58dvh,540px);min-height:320px;padding:11px 12px 0}.canvas-file{max-width:100px}.canvas-controls #save-status{font-size:8px}.canvas-bot{height:49px}.timeline-zone{height:370px;order:2}.timeline-bar{height:94px;min-height:94px;padding:9px 12px}.inspector{position:fixed;background:var(--panel);border-color:var(--line2);height:min(84dvh,820px);border-radius:24px 24px 0 0}.inspector-head{padding:20px 18px 14px}.inspector-head h3{font-size:19px}.inspector-tabs{margin:8px 15px}.inspector-tab{font-size:11px;padding:10px 5px}.inspector-scroll{padding:10px 17px 30px}.close-inspector{background:var(--panel3);color:var(--ink)}.sheet-handle{background:var(--line2)}.auth-layout{display:flex;flex-direction:column}.auth-aside{display:none}.auth-right{min-height:100svh;padding:24px 24px 40px;display:flex;flex-direction:column}.auth-toplink{font-size:10px;margin-bottom:45px;gap:7px}.auth-toplink .text-link{font-size:11px}.auth-form-wrap{width:100%;max-width:390px;margin:auto;padding:0}.auth-form-wrap h2{font-size:34px}.auth-badge{margin-bottom:20px}.modal-backdrop{padding:15px}.modal{padding:23px;max-height:90dvh;border-radius:21px}.modal-top h2{font-size:21px}.modal-actions .btn{font-size:11px;padding:9px 13px}.upload-stepper{flex-wrap:wrap;justify-content:center}.flow-upload-steps{gap:7px}.flow-upload-drop{min-height:210px}.info-page h1{font-size:35px}.toast-region{left:15px;right:15px;bottom:80px}.toast{max-width:none;font-size:12px}}
@media(max-width:390px){.project-grid{grid-template-columns:1fr}.project-preview{aspect-ratio:16/10}.dashboard-head h1{font-size:31px}.flow-view-toggle button{width:25px}.flow-sort{width:99px;font-size:10px}.flow-library-controls{gap:5px}.auth-right{padding-inline:20px}.auth-toplink{gap:5px}.auth-toplink>span{font-size:10px}.flow-hero h1{font-size:57px}.flow-composer-main span{font-size:9px}.crumbs strong{max-width:82px}.rail-links{gap:7px}.rail-bottom{gap:3px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

/* Compact mobile tool button follows the shared neutral palette. */
.mobile-design-btn{background:var(--panel2)!important;color:var(--ink)!important;border-color:var(--line2)!important}