:root:root {
  color-scheme: light;
  --ground: #FFF7EC; --deck: #FFFFFF; --deck-2: #FFEFD9; --deck-3: #F7E4C9;
  --line: rgba(28, 26, 39, .14); --line-2: rgba(28, 26, 39, .38);
  --ink: #1C1A27; --ink-2: #3E3B4E; --mut: #5E5A70; --mint: #FF6B3D; --tool: #FF6B3D;
  --serif: 'Bricolage Grotesque', 'Figtree', system-ui, sans-serif;
  --sans: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
body { background: var(--ground); color: var(--ink); font-family: var(--sans); }
:focus-visible { outline: 3px solid #4C8DF6 !important; outline-offset: 2px; }
.mono { color: var(--mut); }
h1, h2, h3, .top h1 { font-family: var(--serif); font-weight: 800; letter-spacing: -.02em; }
h2 i, h1 i, h2 em { color: #D2511F; font-style: normal; }


.top { background: var(--ground); border-bottom: 2px solid var(--ink) !important; }
.rail { background: #fff; border-right: 2px solid var(--ink); }
.rail button[aria-current="true"], .rail button[aria-pressed="true"], .rail button.on, .rail .on { background: #FFF0B8 !important; color: var(--ink) !important; box-shadow: inset 0 0 0 2px var(--ink); border-radius: 16px; }
.drawer { background: var(--ground); border-right: 2px solid var(--ink); }
.stage { background: #FFEFD9; }
.strip { background: #fff; border-top: 2px solid var(--ink); }


.concept, .g-in small, .boss-mini small, .in-top .mono, .cm-head .mono, .mobile-boss b, .discover-nav button, #d-note a { color: #B8441B !important; }
.engine-formats button[aria-pressed="true"] { color: var(--ink) !important; background: #FFE1CF !important; border-color: var(--ink) !important; }
.reply .nine svg { color: var(--ink); }


.play { background: #FF6B3D; color: #1C1A27; border: 2.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }

.top button, .top a { border-radius: 999px; }
.primary, #keep, #tell button[type=submit] { background: #FF6B3D !important; color: #1C1A27 !important; border: 2.5px solid #1C1A27 !important; box-shadow: 3px 3px 0 #1C1A27; font-weight: 800; border-radius: 999px; }


.bubble, .jpanel, .cmenu, .cm-sub { background: rgba(255, 255, 255, .98) !important; color: var(--ink); border: 2px solid var(--ink) !important; box-shadow: 4px 4px 0 var(--ink) !important; }
.hint { background: #fff !important; color: var(--ink) !important; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); font-weight: 600; }
.wipe-l, .wipe-r { background: rgba(28, 26, 39, .75); color: #fff; }
.clip { color: #fff; }
.pin canvas, .in-thumb { background: #1C1A27; }


.drawer button, .insp button, .gels button { border-radius: 14px; }
.insp textarea, .drawer input[type=text], .drawer textarea, input[type=text], textarea { background: #fff; color: var(--ink); border: 2px solid var(--ink) !important; border-radius: 16px; }
.in-chips button, .in-fx button { border-radius: 999px; border: 2px solid var(--ink); background: #fff; color: var(--ink); }
.switch { border: 2px solid var(--ink); }
.switch[aria-checked="true"]::after { background: #fff; }


@media (max-width: 760px) {
  .rail { border-right: 0; border-top: 2px solid var(--ink); }
  .mobile-scrubber { accent-color: #FF6B3D !important; }
  .lanes { background: #fff !important; border: 2px solid var(--ink) !important; }
}


.va-chamber-hint { position: fixed; z-index: 60; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  width: min(460px, calc(100vw - 24px)); display: flex; align-items: flex-end; gap: 10px; animation: va-pop .35s cubic-bezier(.2, .9, .3, 1.3) both; }
.va-chamber-hint .va-guide-who { flex: none; width: 64px; height: 70px; display: grid; border-radius: 18px; background: #1C1A27; border: 2px solid #1C1A27; overflow: hidden; }
.va-chamber-hint .va-guide-who svg { width: 100%; height: 100%; display: block; }
.va-chamber-hint p { position: relative; flex: 1; margin: 0 0 6px; padding: 12px 44px 12px 14px; background: #fff; color: #1C1A27; border: 2.5px solid #1C1A27; border-radius: 18px 18px 18px 4px;
  box-shadow: 4px 4px 0 #1C1A27; font: 600 15px/1.35 'Figtree', system-ui, sans-serif; }
.va-chamber-hint p b { font-weight: 800; }
.va-chamber-hint button { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; border-radius: 50%; border: 2px solid #1C1A27; background: #FFF0B8; color: #1C1A27; font: 800 16px/1 'Figtree', sans-serif; cursor: pointer; }
@media (min-width: 761px) { .va-chamber-hint { left: auto; right: 24px; transform: none; bottom: 150px; } }
@keyframes va-pop { from { opacity: 0; transform: translate(-50%, 16px) scale(.96); } }
@media (min-width: 761px) { @keyframes va-pop { from { opacity: 0; transform: translateY(16px) scale(.96); } } }
@media (prefers-reduced-motion: reduce) { .va-chamber-hint { animation: none; } }
.mobile-touch-tip { background: #fff !important; border: 2px solid #1C1A27 !important; color: #1C1A27 !important; font-weight: 600; border-radius: 14px !important; }
.mobile-touch-tip button { color: #1C1A27 !important; }
.tell-toggle { background: #fff; color: #1C1A27; border: 2px solid #1C1A27 !important; border-radius: 999px; font-weight: 700; }


:root:root { --mono: 'Figtree', system-ui, sans-serif; --deck-3: #F7E4C9; }
.mono, .eyebrow, .take-chip, .chip { font-family: var(--sans); }
.screen, .gel canvas, .take canvas, .ep canvas, .reel .pic, .dev canvas, .dev .scr, .fxt canvas, .pin canvas, .in-thumb,
.frames canvas { background: #1C1A27 !important; }
.frames { background: #FFFFFF !important; }
.screen { box-shadow: 4px 4px 0 var(--ink) !important; }
.reel .pic::before, .reel .pic::after { background: repeating-linear-gradient(90deg, transparent 0 4px, rgba(28, 26, 39, .45) 4px 8px) !important; }
.part:hover, .part.on { box-shadow: 0 0 0 999px rgba(28, 26, 39, .12) !important; }
.wipe { box-shadow: 0 0 0 2px var(--ink) !important; }
.wipe span, .play, .ch button[aria-pressed="true"], .lock[aria-pressed="true"] .pad, .layer.words::before,
.fx.on .fx-head button, .fxt i, .in-chips button[aria-pressed="true"], .in-fx button[aria-pressed="true"],
.lines .sfx .sfx-b[aria-pressed="true"] { color: #1C1A27 !important; }
.wipe span { box-shadow: 3px 3px 0 var(--ink) !important; }
.says, .jcard, .toast, .insp, .role label, .in-cols label { box-shadow: 4px 4px 0 var(--ink) !important; }
.insp { box-shadow: 0 -2px 0 var(--ink) !important; }
.clip { background: color-mix(in srgb, var(--c) 70%, #1C1A27) !important; }
.clap .bar { background: repeating-linear-gradient(-45deg, #1C1A27 0 6px, #FFFFFF 6px 12px) !important; }
.knob { background: radial-gradient(circle at 50% 38%, #FFFFFF, #FFEFD9 70%) !important; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink) !important; }
.switch[aria-checked="true"]::after { background: #FFFFFF !important; }
.rail { background: #FFFFFF !important; }
.hint { background: #FFFFFF !important; }
.dev-laptop .scr, .dev-feed .scr, .dev-phone .scr, .dev-kiosk .scr { border-color: #1C1A27 !important; }
.dev-laptop::after, .dev-tv::after { background: #1C1A27 !important; }
.dev-kiosk::after { background: #1C1A27 !important; box-shadow: 0 40px 0 -2px #1C1A27 !important; }
.jpanel, .cmenu, .cm-sub { background: #FFFFFF !important; }
.app.timeline-open .strip .lanes, .gels { scrollbar-color: #1C1A27 #FFEFD9 !important; }
.lanes::-webkit-scrollbar-track { background: #FFEFD9 !important; }

.shared-note { color: var(--ink-2) !important; font-family: var(--sans) !important; }
.shared-note a { color: var(--ink) !important; }
.shared-note button, .shared-chat form button { background: #FF6B3D !important; color: #1C1A27 !important; border: 2px solid #1C1A27 !important; border-radius: 999px !important; font-weight: 700; }
.shared-chat { background: #FFFFFF !important; color: #1C1A27 !important; border: 2.5px solid #1C1A27 !important; box-shadow: 4px 4px 0 #1C1A27 !important; font-family: var(--sans) !important; }
.shared-chat h2 { font-family: var(--serif) !important; font-weight: 800; }
.shared-chat button { background: #FFFFFF !important; color: #1C1A27 !important; border: 2px solid #1C1A27 !important; border-radius: 999px !important; }
.shared-chat input, .shared-chat textarea { background: #FFFFFF !important; color: #1C1A27 !important; border: 2px solid #1C1A27 !important; }
.shared-chat li { border-bottom-color: #EADFCF !important; } .shared-chat li small, .shared-chat-status { color: var(--ink-2) !important; }
.shared-unavailable a { color: var(--ink) !important; text-decoration-color: #FF6B3D; }

.dev { background: #FFE1CF !important; border: 2px solid #1C1A27; }

#d-title em, #d-title i { color: var(--ink) !important; text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 6px; text-decoration-color: #FF6B3D; }


body.va-hint-on #hint, body.va-hint-on #touch-tip { display: none !important; }