/* AKSARA Studio Edition — original cinema-inspired design system */
:root{
  --bg:#0a0a0d;--panel:#111116;--panel2:#18181e;--panel3:#202027;
  --ink:#f7f7f9;--ink-muted:#aba9b5;--ink-faint:#73727f;--line:#24232c;--line2:#31313c;
  --accent:#bbaaff;--accent-text:#100d19;--glow:rgba(145,104,253,.16);
  --studio-glass:rgba(16,16,21,.84);
}
:root[data-theme=light]{
  --bg:#f5f5f7;--panel:#fff;--panel2:#f7f7fa;--panel3:#ebebf1;
  --ink:#1d1d24;--ink-muted:#61616e;--ink-faint:#8d8d9a;--line:#e6e5ed;--line2:#dcdbe8;
  --accent:#6553ac;--accent-text:#fff;--glow:rgba(93,73,179,.12);
  --studio-glass:rgba(255,255,255,.9);
}
html,body{font-family:'DM Sans','Noto Sans Sinhala',sans-serif;letter-spacing:-.08px}
button,a,input,select{transition:border-color .18s ease,background-color .18s ease,color .18s ease,box-shadow .18s ease}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #a794ff;outline-offset:2px}
.btn{border-radius:12px;letter-spacing:-.14px;font-size:12px;font-weight:700}
.btn-primary{background:#c7b8ff;color:#181322;border-color:#c7b8ff;box-shadow:0 2px 16px #9d8cff17}
.btn-primary:hover{background:#e0d7ff;border-color:#e0d7ff;box-shadow:0 6px 24px #9d8cff30}
.brand-mark{color:#0d0b13;font-family:Georgia,serif;font-size:26px;font-weight:400;background:linear-gradient(145deg,#f4edff 0%,#bc9eff 72%,#987cef);box-shadow:inset 0 0 0 1px #ffffff70}
.wordmark{font-family:Manrope,sans-serif;font-weight:800;letter-spacing:2px;font-size:14px}
.wordmark .byline{font-family:'DM Sans',sans-serif;font-weight:700;font-size:7px;letter-spacing:2.1px;line-height:1.9}
.landing{background:radial-gradient(ellipse 40% 45% at 79% 28%,rgba(117,74,203,.11),transparent 75%),radial-gradient(ellipse 48% 24% at 9% 84%,rgba(37,42,96,.07),transparent),var(--bg)}
.landing-nav{border-bottom:1px solid var(--line);height:77px}
.landing-nav-links{font-size:12px;font-weight:600}
.intro{padding-top:86px;padding-bottom:100px;min-height:680px}
.mini-pill{background:rgba(183,158,255,.055);border-color:rgba(196,177,255,.25);font-size:10px;letter-spacing:1.4px;text-transform:uppercase;padding:10px 15px;margin-bottom:31px;color:#cfc2ff}
.intro h1{font-family:Manrope,'Noto Sans Sinhala',sans-serif;font-weight:800;letter-spacing:-5.7px;line-height:1.11}
.intro h1 em{font-weight:400;color:#c2acff}
.intro p{font-size:15px;line-height:1.85;max-width:440px;color:var(--ink-muted)}
.intro-actions .btn{min-height:48px}
.under-intro{margin-top:30px}
.hero-stage{background:#111217;border:1px solid #34303f;box-shadow:0 40px 110px #0009,0 0 0 7px #191820}
.hero-back-glow{background:radial-gradient(ellipse at 57% 46%,rgba(152,110,255,.2),transparent 66%);filter:blur(25px)}
.stage-view{background:linear-gradient(155deg,#251c3e,#191721 66%,#0e1118)}
.features-section{border-top-color:var(--line)}
.feature-card{background:linear-gradient(144deg,var(--panel2),var(--panel));border-color:var(--line2);border-radius:20px}
.feature-card:hover{border-color:#736b84}
/* Navigation: quietly professional */
.app-shell{grid-template-columns:72px minmax(0,1fr)}
.rail{background:var(--panel);border-right:1px solid var(--line);padding:18px 12px}
.rail .brand-mark{margin-bottom:44px}
.rail-button{border-radius:13px;width:46px;height:44px}
.rail-button.active{background:rgba(178,151,255,.11);color:#ccbaff}
.rail-button.active:before{background:#bdacff}
.app-topbar{height:71px;background:var(--studio-glass);backdrop-filter:blur(16px);padding-inline:30px}
.crumbs{font-size:12px}
.studio-live-pill{display:inline-flex;align-items:center;gap:8px;font-size:9px;font-weight:800;letter-spacing:1.3px;color:var(--ink-faint);margin-right:7px}
.studio-live-pill span{width:6px;height:6px;border-radius:50%;background:#a3e0b4;box-shadow:0 0 12px #a3e0b47d}
/* Dashboard */
.dashboard{padding-top:58px}
.dashboard-head h1{font-weight:800;letter-spacing:-2.6px}
.project-card,.quick-new{border-radius:20px;overflow:hidden}
.project-card{border-color:var(--line2)}
.quick-new{background:radial-gradient(circle at 95% -25%,#332342 0,transparent 44%),var(--panel2);border-color:var(--line2)}
/* Main editing arrangement */
.studio-main{height:calc(100vh - 71px);min-height:660px;grid-template-columns:minmax(0,1fr) 405px;grid-template-rows:minmax(325px,1fr) 320px;background:var(--bg)}
.canvas-zone{padding:22px 27px 12px;background:var(--bg)}
.canvas-top{margin-bottom:17px}
.canvas-kicker{display:flex;align-items:center;gap:14px;min-width:0}
.canvas-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line2);background:var(--panel2);padding:7px 11px;border-radius:8px;color:var(--ink);font-weight:800;letter-spacing:.9px;font-size:9px;white-space:nowrap}
.canvas-chip .icon{color:var(--accent)}
.canvas-file{color:var(--ink-faint);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:330px}
.canvas-frame{border-radius:16px;border:1px solid #282630;background:radial-gradient(ellipse at 50% 45%,#1d1a27,#0c0b10 70%);box-shadow:0 14px 36px #0004,inset 0 0 0 1px #ffffff04}
.video-wrap{background:#070609}
.video-wrap video{object-fit:contain}
.canvas-bot{height:65px}
.player-clock strong{font-weight:800;font-variant-numeric:tabular-nums}
.timeline-zone{background:var(--panel);border-top:1px solid var(--line)}
.timeline-bar{height:73px;padding:0 25px}
.timeline-bar h3{font-size:13px;font-weight:800}
.timeline-bar p{color:var(--ink-faint)}
.caption-track{border-radius:9px;background:#1c1b24;border:1px solid #373244}
.track-item{background:#8a73ce;border-color:#9c82e2;color:#fff}
.track-item.active{background:#b9a5ff;color:#1b1628}
.caption-row{border-radius:9px;background:var(--panel2);border-color:var(--line)}
.caption-row.active{border-color:#8b73df;background:#281e393b}
.caption-text{font-family:'Noto Sans Sinhala','DM Sans',sans-serif}
/* Responsive studio inspector, with grid previews and display modes */
.inspector{background:var(--panel);border-left:1px solid var(--line);overflow:hidden;min-width:0}
.inspector-head{padding:23px 23px 21px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.side-kicker{font-size:9px;color:#a69abf;letter-spacing:1.7px;font-weight:800;display:block;margin-bottom:11px}
.inspector-head h3{font:800 20px/1.3 Manrope,'Noto Sans Sinhala',sans-serif;letter-spacing:-.7px}
.inspector-head h3 .side-star{font-family:Georgia,serif;font-size:18px;color:#b9a4ff;margin-left:9px}
.inspector-head p{font-size:11px;color:var(--ink-faint);margin-top:5px;line-height:1.5}
.inspector-body{display:flex;padding:0;gap:0;overflow:hidden;flex:1;min-height:0;flex-direction:column}
.inspector-tabs{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:16px 22px 11px;padding:5px;border-radius:12px;background:#0c0b10;border:1px solid #27232f;flex:none}
.inspector-tab{padding:11px 7px;display:flex;gap:7px;justify-content:center;align-items:center;background:transparent;color:#8d8a9a;border:1px solid transparent;border-radius:9px;font-size:12px;font-weight:750;cursor:pointer}
.inspector-tab .icon{width:15px;height:15px}
.inspector-tab.active{background:#242032;border-color:#423751;color:#e3d8ff;box-shadow:0 3px 14px #0005}
.inspector-scroll{overflow-y:auto;overflow-x:hidden;padding:10px 21px 28px;scrollbar-color:#494454 transparent;scrollbar-width:thin;flex:1}
.inspector-panel[hidden]{display:none!important}
.inspector-section-title{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:9px;letter-spacing:1.55px;font-weight:850;color:var(--ink-faint);padding:8px 1px 13px}
.inspector-section-title span:last-child{font-weight:650;letter-spacing:0;text-transform:none;font-size:10px;color:#9992a5}
.style-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.style-tile{padding:7px;background:var(--panel2);border:1px solid #2d2b38;border-radius:12px;min-width:0;color:var(--ink);text-align:left;cursor:pointer;position:relative;box-shadow:inset 0 1px #ffffff03;overflow:hidden}
.style-tile:hover{border-color:#7a6a9c;background:#211e29;transform:translateY(-1px)}
.style-tile.active{border-color:#a38cff;background:#231e32;box-shadow:0 0 0 1px #6b52b85a,0 0 23px #9776ff13}
.style-tile-preview{border-radius:8px;height:100px;background:#0d0d12;border:1px solid #26232f;display:flex;align-items:center;justify-content:center;padding:8px;overflow:hidden}
.style-tile-footer{height:31px;padding:4px 4px 0;display:flex;align-items:center;justify-content:center;position:relative}
.style-tile-footer strong{font-size:11px;letter-spacing:-.14px;font-weight:800;text-align:center}
.style-check{position:absolute;right:0;color:#cdbdff;opacity:0;top:4px;display:grid;place-items:center}
.style-tile.active .style-check{opacity:1}
.sample-caption{font-family:'Noto Sans Sinhala','DM Sans',sans-serif;white-space:nowrap;line-height:1.5;font-weight:900;font-size:11.2px;color:#fafaff;text-align:center;letter-spacing:-.25px;text-shadow:0 2px 3px #000c}
.sample-word,.caption-word{display:inline;position:relative;white-space:normal}
.sample-caption .word-active,.caption-preview .word-active{color:var(--sample-accent,#d5b7ff)}
.sample-caption .word-past,.caption-preview .word-past{color:var(--sample-accent,#d5b7ff)}
.sample-caption.preset-none{color:#f8f8fa;font-weight:700;text-shadow:none;--sample-accent:#bbaaff}
.sample-caption.preset-red-orange{color:#fff8f5;--sample-accent:#ff792f;text-shadow:0 0 3px #fff5,0 0 9px #ff6f2485,0 2px 4px #000}
.sample-caption.preset-red-orange .word-active{background:linear-gradient(92deg,#ffdfad,#ff8544,#ff3355);background-clip:text;-webkit-background-clip:text;color:transparent}
.sample-caption.preset-super-green{--sample-accent:#38efa1;font-weight:1000;text-transform:uppercase;letter-spacing:-.5px;text-shadow:0 1px 0 #000,1px 1px 0 #000}
.sample-caption.preset-orange-block{--sample-accent:#171013}
.sample-caption.preset-orange-block .word-active{background:#ffbc29;padding:3px 4px;color:#1a1211;box-decoration-break:clone;-webkit-box-decoration-break:clone;text-shadow:none}
.sample-caption.preset-gold-i{--sample-accent:#ffd86b;color:#e8bc51;font-weight:900;text-shadow:0 0 9px #f6a32c80,0 2px 5px #000}
.sample-caption.preset-gold-i .word-active{background:linear-gradient(#fff3b6,#eeaf38 70%,#b97816);background-clip:text;-webkit-background-clip:text;color:transparent;filter:drop-shadow(0 0 5px #e8ae5a70)}
.sample-caption.preset-gold-red-pop{--sample-accent:#ff4f57;color:#edbf54;text-shadow:0 0 8px #ca9f308c,0 2px 4px #000}
.sample-caption.preset-gold-red-pop .word-active{background:linear-gradient(#ffb28a,#e72e4a);background-clip:text;-webkit-background-clip:text;color:transparent;font-size:1.17em}
.sample-caption.preset-silver-red{--sample-accent:#ff515f;color:#e6ebf4;text-shadow:0 2px 3px #000e,0 -1px 1px #fff5}
.sample-caption.preset-silver-red .word-active{color:#ff5058}
.sample-caption.preset-block-i{--sample-accent:#ffe526;color:#fff;font-weight:1000}
.sample-caption.preset-block-i .word-active{background:#ffe526;color:#0d1012;padding:1px 3px;text-shadow:none}
.sample-caption.preset-one-clean{font-weight:800;color:#fefeff;--sample-accent:#fff}
.sample-caption.preset-cursive-i{font-family:'Noto Serif Sinhala','Noto Sans Sinhala',serif;font-weight:800;color:#fff;font-style:italic;--sample-accent:#96ff46;text-shadow:0 2px 2px #000}
.sample-caption.preset-green-high{color:#fff;--sample-accent:#39fa6d;font-weight:900;text-shadow:0 2px 4px #000}
.sample-caption.preset-luxe-ivory{font-family:'Noto Serif Sinhala','Noto Sans Sinhala',serif;color:#fff5e2;--sample-accent:#d2a365;font-weight:800;letter-spacing:.05px;text-shadow:0 2px 4px #000}
.sample-caption.preset-violet-pop{--sample-accent:#b399ff;color:#f9f6ff;text-shadow:0 0 12px #ae8dff55,0 2px 3px #000}
.sample-caption.preset-cinema-glow{color:#ffffff;--sample-accent:#79ddff;text-shadow:0 0 8px #7ce7ff90,0 2px 5px #000c}
/* Active captions over the actual media */
.caption-preview{font-family:'Noto Sans Sinhala','DM Sans',sans-serif;color:var(--caption-base,#fff);font-weight:900;max-width:94%;left:3%;right:3%;line-height:1.5;letter-spacing:-.018em;text-shadow:0 2px 3px #000d,0 2px 8px #000d;overflow-wrap:normal;overflow:visible}
.caption-preview .caption-words{display:inline;white-space:normal;padding:0 7px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.caption-preview .word-active,.caption-preview .word-past{color:var(--caption-accent,#ff565a)}
.caption-preview.mode-compact .word-active,.caption-preview.mode-compact .word-past{color:inherit}
.caption-preview.preset-none{font-weight:700;text-shadow:0 1px 2px #000e}
.caption-preview.preset-red-orange{text-shadow:0 0 9px #ff75388b,0 3px 6px #000e}
.caption-preview.preset-super-green,.caption-preview.preset-block-i{font-weight:1000;text-transform:uppercase;-webkit-text-stroke:.25px #07090b}
.caption-preview.preset-orange-block .word-active,.caption-preview.preset-block-i .word-active{padding:0 5px;background:var(--caption-accent);color:#111;box-decoration-break:clone;-webkit-box-decoration-break:clone;text-shadow:none;border-radius:1px}
.caption-preview.preset-orange-block.mode-compact .caption-words{background:rgba(0,0,0,var(--caption-opacity,.1));padding:5px 10px}
.caption-preview.preset-gold-i{color:#f5c867;text-shadow:0 0 10px #ffab3077,0 3px 5px #000e}
.caption-preview.preset-gold-red-pop{color:#f3c56a;text-shadow:0 0 9px #ffa73255,0 3px 3px #000e}
.caption-preview.preset-silver-red{color:var(--caption-base,#e8ecf4);text-shadow:0 -1px 1px #fff3,0 2px 4px #000e,0 3px 9px #000a}
.caption-preview.preset-one-clean{font-weight:800;letter-spacing:0}
.caption-preview.preset-cursive-i{font-family:'Noto Serif Sinhala','Noto Sans Sinhala',serif;font-style:italic}
.caption-preview.preset-green-high .word-active{filter:drop-shadow(0 0 7px #38ff6b50)}
.caption-preview.preset-luxe-ivory{font-family:'Noto Serif Sinhala','Noto Sans Sinhala',serif;color:#fff5df}
.caption-preview.preset-violet-pop{text-shadow:0 0 12px #b59aff70,0 3px 8px #000e}
.caption-preview.preset-cinema-glow{text-shadow:0 0 15px #74cfff8c,0 3px 9px #000e}
.caption-preview.mode-word .caption-words{font-weight:950;letter-spacing:-.025em}
/* Display tab */
.display-grid{display:flex;flex-direction:column;gap:10px}
.display-tile{display:flex;flex-direction:column;text-align:left;gap:10px;border-radius:12px;border:1px solid #34303c;background:var(--panel2);color:var(--ink);padding:14px;cursor:pointer}
.display-tile:hover{border-color:#756591}
.display-tile.active{background:rgba(127,92,229,.16);border-color:#a18aff;box-shadow:inset 0 0 0 1px #654abf20}
.display-tile-top{display:flex;justify-content:space-between;align-items:center;gap:5px}
.display-tile-top strong{font-size:13px;font-weight:800}
.display-tile-top small{font-size:8px;font-weight:800;letter-spacing:.7px;color:#cdbbff;display:none;align-items:center;gap:2px}
.display-tile.active .display-tile-top small{display:inline-flex}
.display-tile-example{height:62px;display:flex;align-items:center;justify-content:center;border-radius:7px;background:#0a0a0e;overflow:hidden;padding:4px}
.display-tile-example .sample-caption{font-size:24px}
.display-tile-desc{font-size:10px;color:var(--ink-faint);line-height:1.5}
.mode-tip{display:flex;align-items:flex-start;gap:9px;font-size:11px;color:var(--ink-muted);padding:14px 3px;line-height:1.65}
.mode-tip .icon{flex:none;color:var(--accent)}
.inspector-divider{height:1px;margin:19px 0 12px;background:var(--line)}
.design-controls{display:flex;flex-direction:column;gap:21px}
.design-controls .field-title{font-size:11px;color:var(--ink-muted);letter-spacing:.12px}
.design-controls .field-title small{font-family:monospace;font-size:11px;color:var(--ink)}
.design-colors{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.design-colors .field-group{min-width:0}
.color-input{background:var(--panel2);border:1px solid var(--line2);border-radius:9px;padding:7px 9px;display:flex;align-items:center;gap:9px;cursor:pointer}
.color-input input{width:30px;height:30px;border:0;padding:0;background:transparent;cursor:pointer;flex:none}
.color-input span{font-family:monospace;color:var(--ink-muted);font-size:10px;overflow:hidden;text-overflow:ellipsis}
.pos-control{background:var(--panel2);border-radius:10px;padding:4px;gap:4px}
.pos-btn{background:transparent;border-color:transparent}
.pos-btn.active{background:#30283f;border-color:#584a74;color:#e9dcff}
.inspect-note{border:1px solid #36313f;background:rgba(142,120,200,.055);color:var(--ink-muted);font-size:10px;line-height:1.7;border-radius:12px;padding:13px;display:flex;align-items:flex-start;gap:9px;margin-top:25px}
.inspect-note .icon{color:#9ce8ba;flex:none}
.close-inspector,.mobile-design-btn,.sheet-handle,.inspector-scrim{display:none!important}
/* Modal / API setup */
.modal{max-width:550px;border-radius:19px;background:var(--panel);border:1px solid #494253;box-shadow:0 40px 110px #000b;padding:25px}
.modal-top h2{font-family:Manrope,sans-serif;letter-spacing:-.6px;font-weight:800;font-size:20px}
.modal-desc{line-height:1.8}
.provider-setup{display:flex;flex-direction:column;gap:8px;margin:20px 0}
.provider-setup>div{display:grid;grid-template-columns:20px 1fr;gap:7px 10px;align-items:center;background:var(--panel2);border:1px solid var(--line2);padding:13px;border-radius:10px}
.provider-setup code{grid-column:2;color:var(--accent);font-size:11px}
.hint{font-size:11px;color:var(--ink-muted);line-height:1.8}
.ai-provider-mark{display:inline-flex;align-items:center;gap:7px;letter-spacing:1.1px;color:#c7b4ff;font-weight:800;font-size:9px;padding:10px 0 17px}
.modal .input-label{font-size:11px;font-weight:800;color:var(--ink-muted)}
.setup-code{background:#08080b;color:#bba6ed;padding:17px;border-radius:10px;font:11px/1.9 ui-monospace,monospace;margin:16px 0 12px;word-break:break-all}
.setting-card{border-radius:18px;border-color:var(--line2)}
.setting-detail{gap:13px}
.setting-detail span small{display:block;margin-top:5px;font-size:10px;color:var(--ink-faint);font-weight:450}
.connect-badge{font-size:10px;color:var(--ink-faint);white-space:nowrap;border-radius:16px;padding:6px 9px;background:var(--panel2);border:1px solid var(--line2)}
.connect-badge.is-connected{color:#a5e9b8;background:#5ca67112;border-color:#47795b52}
.title-dot{color:var(--accent)}
.settings-page .setting-card h3{display:flex;align-items:center;gap:9px}
.settings-page .setting-card h3 .icon{color:var(--accent)}
@media (max-width:1260px){
  .studio-main{grid-template-columns:minmax(0,1fr) 360px}
  .inspector-scroll{padding-left:16px;padding-right:16px}
  .inspector-tabs{margin-inline:16px}
  .style-tile-preview{height:87px}
  .sample-caption{font-size:10px}
}
@media (max-width:960px){
  .studio-main{grid-template-columns:minmax(0,1fr) 325px}
  .canvas-zone{padding:16px}
  .style-tile-preview{height:81px}
}
@media (max-width:720px){
  .app-shell{grid-template-columns:1fr}
  .rail{height:65px;top:auto;bottom:0;left:0;right:0;position:fixed;z-index:35;flex-direction:row;border:0;border-top:1px solid var(--line);justify-content:space-around;padding:7px 14px}
  .app-topbar{height:64px;padding-inline:12px}
  .studio-live-pill{display:none}
  .canvas-zone{height:min(54vh,435px);min-height:286px;padding:11px 11px 8px}
  .canvas-top{margin-bottom:9px}
  .canvas-chip{padding:7px 8px;font-size:8px}
  .canvas-file{max-width:125px;font-size:9px}
  .canvas-controls #save-status{display:none}
  .mobile-design-btn{display:inline-flex!important;min-height:33px;padding:7px 9px;font-size:11px;background:#282132;border-color:#4b3c62;color:#decaff}
  .canvas-frame{border-radius:11px}
  .canvas-bot{height:48px}
  .studio-main{height:auto;min-height:0;display:flex;flex-direction:column;overflow:visible}
  .timeline-zone{order:2;height:365px;flex:none}
  .inspector-scrim{display:block!important;position:fixed;inset:0;background:#0009;backdrop-filter:blur(5px);z-index:64;opacity:0;pointer-events:none;transition:opacity .22s}
  .inspector-scrim.show{opacity:1;pointer-events:auto}
  .inspector{display:flex;order:initial;position:fixed;z-index:65;left:0;right:0;bottom:0;height:min(82vh,820px);max-height:none;width:100%;border:1px solid #484056;border-bottom:0;border-radius:22px 22px 0 0;box-shadow:0 -35px 80px #000a;transform:translateY(105%);transition:transform .24s cubic-bezier(.2,.8,.2,1);overflow:hidden;background:#151419}
  .inspector.sheet-open{transform:translateY(0)}
  .inspector-head{padding:20px 17px 15px}
  .inspector-head h3{font-size:19px}
  .side-kicker{font-size:8px}
  .sheet-handle{display:block!important;background:#4a4752;width:42px;height:5px;border-radius:100px;margin:8px auto 0;flex:none}
  .close-inspector{display:grid!important;width:36px;height:36px;background:#292630}
  .inspector-body{display:flex;flex-direction:column;padding:0;gap:0;overflow:hidden;min-height:0}
  .inspector-scroll{padding:8px 16px 35px;overflow-y:auto}
  .inspector-tabs{margin:6px 15px 6px}
  .style-grid{gap:10px}
  .style-tile-preview{height:94px}
  .sample-caption{font-size:11.5px}
  .timeline-bar h3{font-size:12px}
  .inspector-is-open{overflow:hidden}
}
@media (max-width:420px){
  .canvas-file{max-width:80px}
  .inspector{height:min(86vh,800px)}
  .style-tile-preview{height:82px}
  .sample-caption{font-size:10.5px}
  .modal{padding:16px}
  .modal-actions{flex-wrap:wrap}
  .modal-actions .btn{font-size:11px}
}
@media(prefers-reduced-motion:reduce){.inspector,.inspector-scrim,.style-tile{transition:none!important}}
/* AKSARA multilingual font choices, selected separately for Sinhala and English. */
.font-language-controls{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:4px 0 16px}
.font-language-controls .field-group{min-width:0;display:flex;flex-direction:column;gap:7px}
.font-language-controls .select{width:100%;min-width:0}
.font-language-controls .font-hint{font-size:10px;line-height:1.4;color:var(--ink-muted)}
.caption-preview .caption-words .caption-word[lang="si"]{font-family:var(--aksara-font-si,"Noto Sans Sinhala",sans-serif)!important;font-weight:var(--aksara-weight-si,900)!important}
.caption-preview .caption-words .caption-word[lang="en"]{font-family:var(--aksara-font-en,"Manrope",sans-serif)!important;font-weight:var(--aksara-weight-en,900)!important}
.caption-preview .caption-words .caption-word{unicode-bidi:isolate}
.retention-history{margin-top:24px;padding:20px 0;border-top:1px solid var(--line)}
.retention-history-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:13px;flex-wrap:wrap}
.retention-history-head h2{margin:0;font-size:17px;letter-spacing:-.3px}
.retention-history-head>span,.retention-history-empty{color:var(--ink-muted);font-size:12px}
.expired-history-item{display:flex;align-items:center;gap:12px;min-width:0;padding:12px 10px;border:1px solid var(--line);border-radius:12px;background:var(--panel);margin-bottom:8px}
.expired-history-symbol{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:10px;background:var(--panel2);color:var(--ink-muted)}
.expired-history-item>div{flex:1;min-width:0}
.expired-history-item strong,.expired-history-item small{display:block}
.expired-history-item strong{font-size:12px;font-weight:650}
.expired-history-item small{font-size:11px;margin-top:3px;color:var(--ink-muted)}
.expired-history-label{font-size:10px;color:var(--ink-muted);border:1px solid var(--line);border-radius:99px;padding:4px 8px}
@media(max-width:480px){.font-language-controls{grid-template-columns:1fr}.retention-history-head>span{font-size:10px}.expired-history-item{gap:8px;padding:10px 7px}.expired-history-label{display:none}}

/* On-demand font samples show the actual selected typeface before exporting. */
.font-sample{min-height:36px;display:flex;align-items:center;justify-content:center;padding:6px 9px;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--ink);text-align:center;font-size:16px;line-height:1.65;overflow-wrap:anywhere;letter-spacing:normal}
.font-sample-si{font-size:17px;line-height:1.8}
.font-sample-en{font-size:16px}
@media(max-width:440px){.font-language-controls{grid-template-columns:1fr}}