/* Design Read: galeri kanvas untuk kreator motion Indonesia. ENERGY 2 / RHYTHM 2 / MOTION 3. Kertas, tinta, dan aksen terakota memberi karakter hangat; player tetap fokus utama, daftar menjadi pendamping. */
:root{
  --gallery-paper:#f3f0e8;
  --gallery-surface:#fbfaf6;
  --gallery-ink:#28332d;
  --gallery-text:#3d4941;
  --gallery-muted:#566158;
  --gallery-edge:#68746a;
  --gallery-soft:#e7ece6;
  --gallery-accent:#a14e32;
  --gallery-live:#486552;
}

body[data-current-screen="home"]{
  background:var(--gallery-paper);
  background-image:none;
  color:var(--gallery-ink);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
body[data-current-screen="home"] .shell{grid-template-columns:minmax(0,1fr)}
body[data-current-screen="home"] .sidebar{display:none}
body[data-current-screen="home"] .main{grid-column:1;max-width:1380px;padding:0 34px 28px}
body[data-current-screen="home"] .topbar{height:72px;margin-bottom:28px;border-color:#a8afa7}
body[data-current-screen="home"] .footer{border-color:#a8afa7;color:var(--gallery-muted);font-size:11px;line-height:1.5;align-items:center;flex-wrap:wrap;gap:8px 16px}
body[data-current-screen="home"] .footer strong{color:var(--gallery-ink)}
body .footer span.visitor-count{display:inline;white-space:nowrap}
body[data-current-screen="home"] .visitor-count strong{font-variant-numeric:tabular-nums}
body[data-current-screen="home"] .mobile-brand,
body[data-current-screen="home"] .crumb,
body[data-current-screen="home"] .saved{display:none}
body[data-current-screen="home"] .topbar .btn{min-height:44px}
body[data-current-screen="home"] .topbar .btn.primary,
body[data-current-screen="home"] .demo-bottom .btn.primary{min-height:44px;border:1px solid var(--gallery-ink);border-radius:5px;background:var(--gallery-ink);color:#fff;box-shadow:none}
body[data-current-screen="home"] .topbar .btn.primary:hover,
body[data-current-screen="home"] .demo-bottom .btn.primary:hover{background:#3b5144;border-color:#3b5144}
body[data-current-screen="home"] button:focus-visible,
body[data-current-screen="home"] input:focus-visible{outline:3px solid var(--gallery-accent);outline-offset:3px}
body[data-current-screen="home"] .screen.active{animation:none}

.demo-brand{display:flex;align-items:center;gap:10px;padding:0;color:var(--gallery-ink);font-size:15px;font-weight:750;letter-spacing:-.035em}
.demo-brand .brand-mark{width:31px;height:31px;border-radius:7px;background:var(--gallery-ink);box-shadow:none}
.demo-brand .brand-caption{display:block;margin-top:2px;color:var(--gallery-muted);font-size:9px;font-weight:550;letter-spacing:.08em;text-transform:uppercase}
body[data-current-screen="home"] .demo-brand span{color:inherit!important}
body:not([data-current-screen="home"]) .demo-brand{display:none}
body:not([data-current-screen="home"]) .sidebar .nav-btn[data-screen="editor"],
body:not([data-current-screen="home"]) .sidebar .nav-btn[data-screen="remotion"],
body:not([data-current-screen="home"]) .sidebar .nav-btn[data-screen="preview"],
body:not([data-current-screen="home"]) .sidebar .nav-btn[data-screen="export"]{display:none}

.demo-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:26px;margin:0 0 24px}
.demo-heading-copy{min-width:0}
.demo-kicker{margin:0 0 8px;color:var(--gallery-muted);font-size:12px;line-height:1.4}
.demo-heading h1{margin:0 0 11px;color:var(--gallery-ink);font-family:Georgia,"Times New Roman",serif;font-size:clamp(38px,4.2vw,54px);font-weight:600;letter-spacing:-.045em;line-height:1.04}
.demo-heading h1 em{color:var(--gallery-accent);font-style:italic}
.demo-heading p{max-width:600px;margin:0;color:var(--gallery-muted);font-size:14px;line-height:1.65}
.demo-stat{display:flex;align-items:center;gap:12px;flex:none;padding:7px 0 4px;color:var(--gallery-muted);font-size:12px;line-height:1.45}
.demo-stat strong{color:var(--gallery-ink);font-family:Georgia,"Times New Roman",serif;font-size:35px;font-weight:600;line-height:1}
.demo-stat span{max-width:118px}

.demo-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,350px);gap:24px;align-items:start}
.demo-player-column{min-width:0}
.demo-player-stage{position:relative;isolation:isolate;aspect-ratio:16/9;overflow:hidden;border:1px solid #29332d;border-radius:7px;background:#171d19;box-shadow:0 14px 34px rgba(40,51,45,.14)}
.demo-player-stage canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.demo-stage-chip{position:absolute;z-index:2;top:14px;left:14px;display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:4px;background:rgba(33,42,36,.94);color:#fff;font-size:12px;font-weight:600}
.demo-stage-chip .live-dot{width:7px;height:7px;background:#94c49f;box-shadow:none}
.demo-stage-chip.is-paused .live-dot{background:#c6b8a1}
.demo-stage-corner{position:absolute;z-index:2;top:14px;right:14px;padding:7px 9px;border-radius:4px;background:rgba(33,42,36,.94);color:#fff;font-size:12px;font-variant-numeric:tabular-nums}
.demo-stage-caption{position:absolute;z-index:2;left:14px;bottom:14px;padding:8px 11px;border-radius:4px;background:rgba(33,42,36,.94);color:#fff;font-size:13px;font-weight:600;letter-spacing:.01em}
.demo-player-error[hidden]{display:none}
.demo-player-error{position:absolute;z-index:3;inset:0;display:grid;place-items:center;padding:24px;background:rgba(33,42,36,.96);color:#fff;font-size:15px;line-height:1.5;text-align:center}

.demo-controls{display:flex;align-items:center;gap:10px;margin-top:10px;padding:8px 10px;border:1px solid var(--gallery-edge);border-radius:7px;background:var(--gallery-surface)}
.demo-control-btn{display:grid;place-items:center;flex:none;width:44px;height:44px;border:1px solid var(--gallery-ink);border-radius:50%;background:var(--gallery-ink);color:#fff;cursor:pointer;transition:background-color .15s,border-color .15s}
.demo-control-btn:hover{border-color:#3b5144;background:#3b5144}
.demo-control-btn:active{background:#1f2923}
.demo-control-btn svg{width:15px;height:15px;fill:currentColor}
.demo-time{flex:none;min-width:34px;color:var(--gallery-text);font-size:12px;font-variant-numeric:tabular-nums;text-align:center}
.demo-range{flex:1;min-width:48px;height:44px;margin:0;accent-color:var(--gallery-ink);cursor:pointer}
.demo-repeat{flex:none;color:var(--gallery-muted);font-size:12px}
.demo-current-info{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:15px 2px 0}
.demo-current-info strong{display:block;color:var(--gallery-ink);font-family:Georgia,"Times New Roman",serif;font-size:18px;font-weight:600}
.demo-current-info p{max-width:660px;margin:4px 0 0;color:var(--gallery-muted);font-size:13px;line-height:1.55}
.demo-current-tag{flex:none;color:var(--gallery-muted);font-size:11px}

.demo-list{min-width:0;padding:14px;border:1px solid var(--gallery-edge);border-radius:10px;background:var(--gallery-surface)}
.demo-list-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 10px;padding:0 2px}
.demo-list-kicker{display:block;margin-bottom:3px;color:var(--gallery-muted);font-size:11px}
.demo-list-head h2{margin:0;color:var(--gallery-ink);font-family:Georgia,"Times New Roman",serif;font-size:20px;font-weight:600;letter-spacing:-.02em}
.demo-list-count{flex:none;color:var(--gallery-muted);font-size:12px}
.demo-card-list{display:grid;gap:7px;max-height:516px;overflow:auto;padding:2px}
.demo-card{display:grid;grid-template-columns:108px minmax(0,1fr) 28px;gap:10px;align-items:center;width:100%;min-height:72px;padding:7px;border:1px solid var(--gallery-edge);border-radius:7px;background:#f5f4ee;color:var(--gallery-ink);text-align:left;cursor:pointer;transition:background-color .15s,border-color .15s}
.demo-card:hover{border-color:var(--gallery-ink);background:#f0f2ec}
.demo-card:active{background:#e6ebe4}
.demo-card[aria-pressed="true"]{border:2px solid var(--gallery-ink);padding:6px;background:var(--gallery-soft)}
.demo-thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:4px;background:#1b211c}
.demo-thumb canvas{display:block;width:100%;height:100%}
.demo-card-number{position:absolute;top:5px;left:5px;min-width:22px;padding:3px 4px;border-radius:3px;background:rgba(33,42,36,.94);color:#fff;font-size:10px;font-variant-numeric:tabular-nums;text-align:center}
.demo-card-info{min-width:0}
.demo-card-info strong{display:block;overflow:hidden;color:var(--gallery-ink);font-size:13px;font-weight:650;text-overflow:ellipsis;white-space:nowrap}
.demo-card-info small{display:block;margin-top:4px;color:var(--gallery-muted);font-size:11px;line-height:1.35}
.demo-card-play{display:grid;place-items:center;width:26px;height:26px;border:1px solid var(--gallery-edge);border-radius:50%;color:var(--gallery-ink)}
.demo-card-play svg{display:block;width:10px;height:10px;margin-left:1px;fill:currentColor}
.demo-card[aria-pressed="true"] .demo-card-play{border-color:var(--gallery-ink);background:var(--gallery-ink);color:#fff}
.demo-list-foot{margin:12px 2px 0;padding-top:10px;border-top:1px solid #89938a;color:var(--gallery-muted);font-size:12px;line-height:1.5}
.demo-list-foot-hint{display:none}

.demo-bottom{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:28px;padding:17px 0 0;border-top:1px solid #89938a}
.demo-bottom-copy strong{color:var(--gallery-ink);font-size:15px;font-weight:650}
.demo-bottom-copy p{max-width:720px;margin:5px 0 0;color:var(--gallery-muted);font-size:13px;line-height:1.55}
.demo-bottom .btn{flex:none}

@media(max-width:1080px){
  body[data-current-screen="home"] .main{padding-right:26px;padding-left:26px}
  .demo-layout{grid-template-columns:minmax(0,1fr)}
  .demo-card-list{grid-template-columns:repeat(2,minmax(0,1fr));max-height:none}
  .demo-card{grid-template-columns:104px minmax(0,1fr) 28px}
}
@media(max-width:680px){
  body[data-current-screen="home"] .main{padding:0 18px 24px}
  body[data-current-screen="home"] .topbar{height:62px;margin-bottom:20px}
  body[data-current-screen="home"] .topbar .btn{padding:8px 12px;font-size:12px}
  .demo-heading{grid-template-columns:minmax(0,1fr) auto;gap:14px;margin-bottom:18px}
  .demo-heading h1{font-size:clamp(32px,7vw,43px)}
  .demo-heading p{font-size:13px;line-height:1.55}
  .demo-stat{gap:8px;padding:0;font-size:11px}
  .demo-stat strong{font-size:29px}
  .demo-stat span{max-width:86px}
  .demo-layout{gap:14px}
  .demo-player-stage{border-radius:5px}
  .demo-stage-chip{top:8px;left:8px;padding:6px 7px;font-size:11px}
  .demo-stage-corner{top:8px;right:8px;padding:6px 7px;font-size:11px}
  .demo-stage-caption{left:8px;bottom:8px;padding:6px 8px;font-size:11px}
  .demo-controls{gap:6px;padding:6px}
  .demo-time{min-width:30px;font-size:11px}
  .demo-range{min-width:34px}
  .demo-repeat{font-size:11px}
  .demo-current-info{align-items:flex-start;gap:8px;padding-top:11px}
  .demo-current-info strong{font-size:16px}
  .demo-current-info p{font-size:12px}
  .demo-current-tag{font-size:10px}
  .demo-list{padding:11px 9px 9px;border-radius:8px}
  .demo-list-head{margin-bottom:8px}
  .demo-list-head h2{font-size:18px}
  .demo-card-list{display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;padding:2px 2px 8px;scroll-snap-type:x proximity;scrollbar-width:thin}
  .demo-card{flex:0 0 248px;min-height:70px;grid-template-columns:91px minmax(0,1fr) 28px;padding:6px;scroll-snap-align:start}
  .demo-card[aria-pressed="true"]{padding:5px}
  .demo-list-foot{display:flex;justify-content:space-between;gap:12px;margin-top:8px;font-size:11px}
  .demo-list-foot-hint{display:block;flex:none;text-align:right}
  .demo-bottom{align-items:stretch;flex-direction:column;gap:14px;margin-top:20px;padding-top:14px}
  .demo-bottom-copy strong{font-size:14px}
  .demo-bottom-copy p{font-size:12px}
  .demo-bottom .btn{width:100%;min-height:44px}
  .demo-brand{font-size:13px}
  .demo-brand .brand-mark{width:28px;height:28px}
}
@media(max-width:420px){
  body[data-current-screen="home"] .main{padding-right:14px;padding-left:14px}
  .demo-heading{grid-template-columns:minmax(0,1fr)}
  .demo-stat{display:none}
  .demo-heading h1{font-size:34px}
  .demo-controls{gap:4px;padding:5px}
  .demo-time{min-width:27px;font-size:10px}
  .demo-repeat{font-size:10px}
  .demo-card{flex-basis:238px}
  .demo-list-foot{font-size:10px}
  .demo-list-foot-hint{max-width:106px}
}
/* The app shell hides its sidebar under 620px; give the remaining screen its own full-width grid track. */
@media(max-width:620px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .main{grid-column:1;min-width:0;width:100%}
}
@media(max-width:1100px){.sidebar .nav-btn,.topbar .btn{min-height:44px}}
@media(prefers-reduced-motion:reduce){
  .screen{animation:none!important}
  .track-bar:after{animation:none!important}
  .btn,.toast,.demo-card,.demo-control-btn{transition:none!important}
}
/* Keep dark-screen metadata readable and the public visitor count clear in its loading state. */
body:not([data-current-screen="home"]) .footer{color:#8991a7;font-size:10px;line-height:1.5}
.footer #visitorCount{color:#f3f5fb!important}
.footer .visitor-count{font-size:10px}
@media(max-width:1100px){body:not([data-current-screen="home"]) .sidebar .nav{gap:8px}}
.footer #visitorCount{display:inline-block;min-width:15ch;text-align:left;font-variant-numeric:tabular-nums}
.mobile-bottom-nav{display:none}
.mobile-nav-btn{min-height:48px;border:1px solid #344255;border-radius:6px;background:#111722;color:#e9eef5;font:inherit;font-size:13px;font-weight:650;cursor:pointer}
.mobile-nav-btn:hover{background:#1d2b3a}
.mobile-nav-btn:active{background:#2a3b4d}
.mobile-nav-btn[aria-current="page"]{border-color:#8cc4d4;background:#203244;color:#f7fbff}
.mobile-nav-btn:focus-visible{outline:3px solid #b7d9e8;outline-offset:2px}
body[data-current-screen="home"] .mobile-bottom-nav{border-top-color:var(--gallery-edge);background:var(--gallery-paper)}
body[data-current-screen="home"] .mobile-nav-btn{border-color:var(--gallery-edge);background:var(--gallery-surface);color:var(--gallery-ink)}
body[data-current-screen="home"] .mobile-nav-btn:hover{background:#e7ece6}
body[data-current-screen="home"] .mobile-nav-btn:active{background:#dce5dc}
body[data-current-screen="home"] .mobile-nav-btn[aria-current="page"]{border-color:var(--gallery-ink);background:var(--gallery-soft);color:var(--gallery-ink)}
body[data-current-screen="home"] .mobile-nav-btn:focus-visible{outline-color:var(--gallery-accent)}
@media(max-width:620px){
  .mobile-bottom-nav{position:fixed;z-index:20;right:0;bottom:0;left:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:8px 14px calc(8px + env(safe-area-inset-bottom,0px));border-top:1px solid #344255;background:#090f19}
  .main{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}
  body[data-current-screen="home"] .main{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}
}

@media(max-width:220px){
  .demo-controls{flex-wrap:wrap}
  .demo-repeat{margin-left:auto}
  .footer .visitor-count{flex-basis:100%;white-space:normal}
}

@media(max-width:220px){
  body[data-current-screen] .footer .visitor-count{white-space:normal}
}

@media(max-width:220px){
  body[data-current-screen] .topbar .top-actions{transform:translateX(-8px)}
}