/* SYLORA Living Horizon — canonical design system layer.
   This file owns tokens, materials, shell, controls and responsive primitives.
   Route files may compose these primitives but must not redefine the token model. */
:root{
  --sy-bg:#f1f4f2;
  --sy-bg-warm:#f6f1e8;
  --sy-ink:#171a1c;
  --sy-graphite:#262b2d;
  --sy-muted:#6d7678;
  --sy-subtle:#92999a;
  --sy-pearl:#fffefd;
  --sy-pearl-soft:rgba(255,255,255,.90);
  --sy-frost:rgba(247,250,249,.64);
  --sy-crystal:rgba(234,243,241,.78);
  --sy-metal:#a88b5e;
  --sy-champagne:#d5ad70;
  --sy-mint:#8abbb2;
  --sy-line:rgba(45,58,61,.10);
  --sy-line-strong:rgba(45,58,61,.16);
  --sy-success:#5b9989;
  --sy-warning:#aa7e46;
  --sy-danger:#a75f61;
  --sy-void:#171d1f;
  --sy-void-2:#293235;

  --sy-space-1:4px;
  --sy-space-2:8px;
  --sy-space-3:12px;
  --sy-space-4:16px;
  --sy-space-5:20px;
  --sy-space-6:24px;
  --sy-space-8:32px;
  --sy-space-10:40px;
  --sy-space-12:48px;

  --sy-r-sm:12px;
  --sy-r-md:16px;
  --sy-r-lg:22px;
  --sy-r-xl:28px;
  --sy-r-2xl:34px;
  --sy-r-pill:999px;

  --sy-shadow-1:0 10px 32px rgba(31,44,47,.055);
  --sy-shadow-2:0 22px 64px rgba(31,44,47,.085);
  --sy-shadow-3:0 38px 110px rgba(25,37,40,.13);
  --sy-focus:0 0 0 4px rgba(138,187,178,.18);

  --sy-motion-fast:120ms;
  --sy-motion-ui:200ms;
  --sy-motion-scene:600ms;
  --sy-ease:cubic-bezier(.2,.75,.25,1);

  --sy-header-h:78px;
  --sy-left-w:206px;
  --sy-right-w:252px;
  --sy-content-max:1780px;
  --sy-route-accent:#6c8f88;
  --sy-route-accent-rgb:108,143,136;
}

body[data-view="live"]{--sy-route-accent:#d95068;--sy-route-accent-rgb:217,80,104}
body[data-view="studio"]{--sy-route-accent:#7562aa;--sy-route-accent-rgb:117,98,170}
body[data-view="clips"]{--sy-route-accent:#c77b61;--sy-route-accent-rgb:199,123,97}
body[data-view="videos"]{--sy-route-accent:#4e759b;--sy-route-accent-rgb:78,117,155}
body[data-view="learning"]{--sy-route-accent:#397f76;--sy-route-accent-rgb:57,127,118}
body[data-view="business"]{--sy-route-accent:#957142;--sy-route-accent-rgb:149,113,66}
body[data-view="communities"]{--sy-route-accent:#7e68a8;--sy-route-accent-rgb:126,104,168}
body[data-view="messages"]{--sy-route-accent:#527f9b;--sy-route-accent-rgb:82,127,155}
body[data-view="ai"]{--sy-route-accent:#8060a7;--sy-route-accent-rgb:128,96,167}
body[data-view="profile"]{--sy-route-accent:#a88651;--sy-route-accent-rgb:168,134,81}
body[data-view="more"]{--sy-route-accent:#657476;--sy-route-accent-rgb:101,116,118}

html{background:var(--sy-bg);scroll-behavior:smooth}
body{
  color:var(--sy-ink);
  font-feature-settings:"ss01" 1,"cv02" 1,"cv03" 1;
  text-rendering:optimizeLegibility;
  background:
    radial-gradient(ellipse at 12% 0%,rgba(193,222,215,.78),transparent 30%),
    radial-gradient(ellipse at 90% 5%,rgba(232,211,177,.50),transparent 28%),
    radial-gradient(ellipse at 50% 100%,rgba(205,225,220,.42),transparent 38%),
    linear-gradient(180deg,#fbfcfb 0%,#eef3f1 58%,var(--sy-bg-warm) 100%);
  background-attachment:fixed;
}

/* Ambient scene is deliberately quiet; content must remain the focal point. */
.sky-grid{
  opacity:.13!important;
  background-image:linear-gradient(rgba(58,74,77,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(58,74,77,.025) 1px,transparent 1px)!important;
  background-size:64px 64px!important;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.65),transparent 76%);
}
.aurora{opacity:.10!important;filter:blur(62px) saturate(.45)!important;mix-blend-mode:multiply}

/* Material recipes */
.sy-pearl,.material-pearl{background:var(--sy-pearl-soft);border:1px solid rgba(255,255,255,.94);box-shadow:var(--sy-shadow-1)}
.sy-frost,.material-frost{background:var(--sy-frost);border:1px solid rgba(255,255,255,.88);backdrop-filter:blur(24px) saturate(1.08);box-shadow:var(--sy-shadow-1)}
.sy-crystal,.material-crystal{background:linear-gradient(145deg,rgba(255,255,255,.84),var(--sy-crystal));border:1px solid rgba(255,255,255,.95);box-shadow:var(--sy-shadow-2),inset 0 1px 0 #fff}
.sy-metal,.material-metal{background:linear-gradient(145deg,#f8f7f4,#e7e4dd);border:1px solid rgba(97,88,72,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.88),var(--sy-shadow-1)}
.sy-void,.material-void{background:radial-gradient(circle at 76% 18%,rgba(138,187,178,.14),transparent 26%),linear-gradient(145deg,var(--sy-void),var(--sy-void-2));border:1px solid rgba(255,255,255,.10);color:#f6f8f7;box-shadow:0 30px 90px rgba(13,18,20,.20)}

/* Brand */
.brand{width:138px!important;min-width:138px!important;flex:0 0 138px!important;color:var(--sy-ink)!important;text-decoration:none;overflow:visible}
.brand-lockup{display:block;width:138px;height:auto;aspect-ratio:1100/650;object-fit:contain;object-position:center;filter:none!important;transition:transform var(--sy-motion-ui) var(--sy-ease),filter var(--sy-motion-ui) var(--sy-ease)}
.brand:hover .brand-lockup{transform:translateY(-1px) scale(1.012);filter:none!important}
.shell-wallet img{width:56px!important;height:auto!important;aspect-ratio:1100/650;object-fit:contain!important;filter:none!important}

/* Shell */
body>header{
  position:sticky;
  height:var(--sy-header-h)!important;
  padding:0 max(18px,2.4vw)!important;
  gap:24px!important;
  background:rgba(251,252,251,.84)!important;
  border-bottom:1px solid rgba(58,70,73,.07)!important;
  box-shadow:0 12px 44px rgba(40,55,59,.055)!important;
  backdrop-filter:blur(28px) saturate(1.15)!important;
  overflow:hidden;
}
body>header:after{content:"";position:absolute;left:-16%;right:-16%;bottom:0;height:2px;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(var(--sy-route-accent-rgb),.12),rgba(var(--sy-route-accent-rgb),.72),rgba(213,173,112,.45),transparent);background-size:180% 100%;animation:syHeaderHorizon 9s ease-in-out infinite alternate}
@keyframes syHeaderHorizon{from{background-position:0 50%;opacity:.55}to{background-position:100% 50%;opacity:1}}
.command-search{
  height:42px!important;
  border-radius:var(--sy-r-pill)!important;
  border:1px solid rgba(255,255,255,.90)!important;
  background:rgba(255,255,255,.58)!important;
  color:var(--sy-muted)!important;
  box-shadow:inset 0 1px 0 #fff,var(--sy-shadow-1)!important;
  transition:background var(--sy-motion-ui) var(--sy-ease),box-shadow var(--sy-motion-ui) var(--sy-ease)!important;
}
.command-search:hover{background:rgba(255,255,255,.84)!important;box-shadow:inset 0 1px 0 #fff,0 12px 34px rgba(40,55,59,.06)!important}
#account{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin-left:auto;min-width:0}
#account :is(button,select){min-height:40px;border-radius:var(--sy-r-pill);border:1px solid rgba(255,255,255,.90);background:rgba(255,255,255,.62);color:var(--sy-ink);box-shadow:inset 0 1px 0 #fff,var(--sy-shadow-1)}
#account :is(.header-icon,.header-avatar,.header-exit){display:grid;place-items:center;width:40px;min-width:40px;height:40px;padding:0}
#account .header-avatar{background:linear-gradient(145deg,#fff,#e4eeeb);font-weight:780}
#account .header-exit{color:var(--sy-muted)}

main{
  width:min(calc(100% - 28px),var(--sy-content-max));
  margin:18px auto 34px!important;
  padding:0!important;
  display:grid;
  grid-template-columns:var(--sy-left-w) minmax(0,1fr) var(--sy-right-w)!important;
  gap:18px!important;
  align-items:start;
}
.left-rail,.right{position:sticky;top:calc(var(--sy-header-h) + 22px);align-self:start;max-height:calc(100vh - var(--sy-header-h) - 42px);overflow:auto;scrollbar-width:none;background:transparent!important}
.left-rail::-webkit-scrollbar,.right::-webkit-scrollbar{display:none}
.side-nav{display:flex;flex-direction:column;gap:5px!important}
.side-nav .nav{
  min-height:46px;
  border-radius:var(--sy-r-md)!important;
  border:1px solid transparent!important;
  background:transparent!important;
  color:var(--sy-muted)!important;
  transition:transform var(--sy-motion-fast) var(--sy-ease),background var(--sy-motion-ui) var(--sy-ease),color var(--sy-motion-ui) var(--sy-ease)!important;
}
.side-nav .nav::before{content:"·";display:grid;place-items:center;width:26px;height:26px;flex:0 0 26px;border-radius:9px;color:var(--sy-muted);font-size:17px;font-weight:520;line-height:1}
.side-nav .nav[data-view="feed"]::before{content:"⌂"}
.side-nav .nav[data-view="live"]::before{content:"◉"}
.side-nav .nav[data-view="clips"]::before{content:"▷"}
.side-nav .nav[data-view="studio"]::before{content:"✦"}
.side-nav .nav[data-view="learning"]::before{content:"◇"}
.side-nav .nav[data-view="business"]::before{content:"▱"}
.side-nav .nav[data-view="explore"]::before{content:"⌕"}
.side-nav .nav[data-view="communities"]::before{content:"◎"}
.side-nav .nav[data-view="messages"]::before{content:"◌"}
.side-nav .nav[data-view="profile"]::before{content:"○"}
.side-nav .nav[data-view="more"]::before{content:"···";letter-spacing:-2px}
.side-nav .nav[data-create-hub]::before{content:"+"}
.side-nav .nav:hover{transform:translateX(2px)!important;background:rgba(255,255,255,.58)!important;color:var(--sy-ink)!important}
.side-nav .nav.active{background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(229,237,235,.86))!important;color:var(--sy-ink)!important;border-color:rgba(255,255,255,.96)!important;box-shadow:var(--sy-shadow-1),inset 0 1px 0 #fff!important}

#railProgress{min-width:0}
.rail-orbit{width:100%;margin:12px 0 8px;padding:10px;display:grid;grid-template-columns:36px minmax(0,1fr);gap:9px;align-items:center;border:1px solid rgba(255,255,255,.92);border-radius:var(--sy-r-lg);background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(232,240,238,.70));box-shadow:var(--sy-shadow-1),inset 0 1px 0 #fff;color:var(--sy-ink);text-align:left;cursor:pointer}
.rail-orbit-mark{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:radial-gradient(circle at 34% 26%,#fff 0 8%,var(--sy-champagne) 29%,#667574 72%,#252c2d);color:#fff;box-shadow:0 8px 22px rgba(49,64,65,.13)}
.rail-orbit>span:last-child{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:3px 6px}
.rail-orbit small{overflow:hidden;color:var(--sy-muted);font-size:7px;font-weight:760;letter-spacing:.09em;text-overflow:ellipsis;white-space:nowrap}
.rail-orbit b{grid-row:1/3;grid-column:2;color:var(--sy-ink);font-size:17px;line-height:1}
.rail-orbit i{display:block;height:4px;overflow:hidden;border-radius:999px;background:rgba(64,79,81,.09)}
.rail-orbit i em{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--sy-champagne),var(--sy-mint))}
.rail-orbit u{grid-column:1/3;color:var(--sy-subtle);font-size:7px;text-decoration:none}

/* Secondary shell cards are structural primitives, not route decoration. */
.right{display:grid;gap:12px}
.right .mini-card{padding:14px}
.shell-card-title{display:flex;align-items:flex-start;justify-content:space-between;gap:9px;margin-bottom:10px}
.shell-card-title>b{font-size:13px;line-height:1.25;color:var(--sy-ink)}
.shell-card-title button{flex:0 0 auto;padding:2px 0;border:0;background:transparent;color:#7b6748;font-size:10px;font-weight:720;cursor:pointer}
.shell-person{display:grid;grid-template-columns:34px minmax(0,1fr) 28px;align-items:center;gap:8px;padding:6px 0}
.shell-person>span{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:linear-gradient(145deg,#edf3f1,#dde7e4);color:var(--sy-graphite);font-size:11px;font-weight:800}
.shell-person div{min-width:0}
.shell-person :is(b,small){display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shell-person b{font-size:11px}
.shell-person small{margin-top:2px;color:var(--sy-muted);font-size:9px}
.shell-person>button{display:grid;place-items:center;width:28px;height:28px;padding:0;border:1px solid var(--sy-line);border-radius:10px;background:rgba(255,255,255,.64);color:#7b6748;cursor:pointer}
.shell-event{width:100%;display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:8px;padding:7px 0;border:0;border-bottom:1px solid var(--sy-line);background:transparent;color:var(--sy-ink);text-align:left;cursor:pointer}
.shell-event:last-child{border-bottom:0}
.shell-event i{display:grid;place-items:center;width:29px;height:29px;border-radius:10px;background:linear-gradient(145deg,#eef5f3,#f3eadb);color:#7b6748;font-style:normal}
.shell-event span{min-width:0}
.shell-event :is(b,small){display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shell-event b{font-size:10px}
.shell-event small{margin-top:2px;color:var(--sy-muted);font-size:8px}
.shell-event em{padding:4px 6px;border-radius:8px;background:rgba(213,173,112,.15);color:#7b6748;font-size:7px;font-style:normal;font-weight:800}
.shell-empty{margin:12px 0 4px;color:var(--sy-muted);font-size:11px;line-height:1.5}
.right .shell-wallet{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;cursor:pointer;background:linear-gradient(145deg,var(--sy-void),var(--sy-void-2))!important;color:#fff!important;border-color:rgba(255,255,255,.11)!important}
.shell-wallet span :is(small,b){display:block;color:inherit}
.shell-wallet span small{font-size:8px;letter-spacing:.13em;opacity:.68}
.shell-wallet span b{margin-top:5px;font-size:15px}
.shell-wallet>i{display:grid;place-items:center;width:58px;min-width:58px;height:42px;overflow:hidden;border-radius:13px;background:#fff;font-style:normal}

/* Generic content should not automatically look like an identical card. */
.card,.mini-card{color:var(--sy-ink)}
.card{border-radius:var(--sy-r-lg)}
.mini-card{border-radius:var(--sy-r-lg)}
.card:not(.hero):not(.post):not(.composer):not(.gift):not(.live-stage):not(.studio-stage),.mini-card{
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(246,249,248,.88))!important;
  border:1px solid rgba(255,255,255,.92)!important;
  box-shadow:var(--sy-shadow-1)!important;
  backdrop-filter:none!important;
}

/* Controls */
button,input,textarea,select{font:inherit}
:is(button,.primary,.ghost,.module,.gift){position:relative;isolation:isolate}
.sylora-press-ripple{
  position:absolute!important;
  z-index:1!important;
  border-radius:50%!important;
  pointer-events:none!important;
  background:radial-gradient(circle,rgba(255,255,255,.72) 0,rgba(138,187,178,.20) 38%,transparent 70%)!important;
  transform:scale(.12);
  opacity:.72;
  animation:syPressRipple .66s var(--sy-ease) forwards!important;
}
@keyframes syPressRipple{to{transform:scale(1);opacity:0}}
.primary,.btn-primary{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:44px!important;
  height:44px!important;
  padding-block:0!important;
  border-radius:var(--sy-r-pill)!important;
  background:linear-gradient(135deg,var(--sy-route-accent),#26302f 78%)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:0 12px 30px rgba(var(--sy-route-accent-rgb),.20),inset 0 1px 0 rgba(255,255,255,.24)!important;
  transition:transform var(--sy-motion-fast) var(--sy-ease),box-shadow var(--sy-motion-ui) var(--sy-ease),filter var(--sy-motion-ui) var(--sy-ease)!important;
}
.primary:before,.btn-primary:before{content:"";position:absolute;z-index:-1;inset:1px 8px auto;height:45%;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.24),transparent);pointer-events:none}
.primary:hover,.btn-primary:hover{transform:translateY(-1px);filter:saturate(1.08);box-shadow:0 16px 40px rgba(var(--sy-route-accent-rgb),.28),inset 0 1px 0 rgba(255,255,255,.28)!important}
.primary:active,.btn-primary:active{transform:scale(.98)}
.ghost,.secondary{border-radius:var(--sy-r-pill)!important;background:rgba(255,255,255,.50)!important;border:1px solid rgba(255,255,255,.90)!important;color:var(--sy-ink)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.92);transition:transform var(--sy-motion-fast) var(--sy-ease),background var(--sy-motion-ui) var(--sy-ease),box-shadow var(--sy-motion-ui) var(--sy-ease)!important}
.ghost:hover,.secondary:hover{transform:translateY(-1px);background:rgba(var(--sy-route-accent-rgb),.09)!important;box-shadow:0 10px 26px rgba(var(--sy-route-accent-rgb),.12),inset 0 1px 0 #fff!important}
input,textarea,select{border-radius:var(--sy-r-md)!important;border:1px solid rgba(58,70,73,.10)!important;background:rgba(255,255,255,.72)!important;color:var(--sy-ink)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.92)!important}
.media-file-picker{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;min-height:58px;padding:7px;border-radius:var(--sy-r-md);border:1px solid rgba(58,70,73,.10);background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(var(--sy-route-accent-rgb),.055));box-shadow:inset 0 1px 0 #fff;cursor:pointer;overflow:hidden;transition:border-color var(--sy-motion-ui) var(--sy-ease),box-shadow var(--sy-motion-ui) var(--sy-ease),transform var(--sy-motion-fast) var(--sy-ease)}
.media-file-picker:hover{transform:translateY(-1px);border-color:rgba(var(--sy-route-accent-rgb),.20);box-shadow:0 12px 30px rgba(var(--sy-route-accent-rgb),.10),inset 0 1px 0 #fff}
.media-file-picker:focus-within{box-shadow:var(--sy-focus)!important}
.media-file-picker>span{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 16px;border-radius:var(--sy-r-pill);background:linear-gradient(135deg,var(--sy-route-accent),#26302f 82%);color:#fff;font-size:11px;font-weight:760;box-shadow:0 10px 24px rgba(var(--sy-route-accent-rgb),.18),inset 0 1px 0 rgba(255,255,255,.24)}
.media-file-picker>strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sy-muted);font-size:11px;font-weight:650}
.media-file-input{position:absolute!important;width:1px!important;height:1px!important;margin:0!important;padding:0!important;opacity:0!important;pointer-events:none;overflow:hidden;clip-path:inset(50%)}

/* Media creation uses an opaque hero plate and a pearl paint boundary on
   rounded gradient actions. This keeps Chromium's mobile compositor from
   resampling translucent pixels between otherwise identical captures. */
body:is([data-view="clips"],[data-view="videos"]) #app>.hero{backdrop-filter:none!important}
body:is([data-view="clips"],[data-view="videos"]) :is(#openUpload,#videoUploadOpen,#clipUpload>button,#videoUpload>button,.media-file-picker>span){
  border:2px solid rgba(255,255,255,.94)!important;
  background-clip:padding-box!important;
}
body:is([data-view="clips"],[data-view="videos"]) :is(#clipUpload>button,#videoUpload>button){
  background:#26383a!important;
  box-shadow:0 12px 30px rgba(var(--sy-route-accent-rgb),.22),inset 0 1px 0 rgba(255,255,255,.25)!important;
}
:where(button,a,input,textarea,select,[tabindex]):focus-visible{outline:0!important;box-shadow:var(--sy-focus)!important}

.eyebrow{color:#816b4a!important;font-size:10px!important;letter-spacing:.17em!important;font-weight:760!important}
.muted{color:var(--sy-muted)!important}

/* Compact data readout shared by LIVE, AI, Studio, media and account routes. */
.scene-readout{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 4px}
.scene-readout>span{min-width:88px;padding:9px 12px;border-radius:14px;background:rgba(255,255,255,.54);border:1px solid rgba(255,255,255,.90);box-shadow:inset 0 1px 0 #fff}
.scene-readout :is(small,b){display:block}
.scene-readout small{font-size:8px;letter-spacing:.12em;color:var(--sy-muted)}
.scene-readout b{margin-top:3px;font-size:16px;color:var(--sy-ink)}

.mobile-dock{display:none}

/* The canonical 900px shell switch must override the legacy 1050px rail rule
   from styles.css. Keep the compact tablet rail, but do not reserve space for
   the right rail after that secondary surface has been removed. */
@media(min-width:901px){
  main>aside.left-rail{display:flex!important;flex-direction:column}
  .mobile-dock{display:none!important}
}

@media(min-width:1261px){
  main{grid-template-columns:var(--sy-left-w) minmax(0,1fr) var(--sy-right-w)!important}
  main>aside.left-rail{display:flex!important}
  .right{display:grid!important}
}

@media(min-width:901px) and (max-width:1260px){
  main{grid-template-columns:var(--sy-left-w) minmax(0,1fr)!important}
  .right{display:none!important}
}

/* Reduced motion is a design-system contract, not a route patch. */
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

@media(max-width:1180px){
  :root{--sy-left-w:164px;--sy-right-w:218px}
  main{gap:16px!important}
}

@media(min-width:901px) and (max-width:980px){
  :root{--sy-left-w:72px}
  .rail-orbit{grid-template-columns:1fr;padding:9px}
  .rail-orbit-mark{margin:auto}
  .rail-orbit>span:last-child{display:none}
}

@media(max-width:900px){
  :root{--sy-header-h:66px}
  body{background-attachment:scroll}
  body>header{padding:0 12px!important;gap:8px!important}
  .brand{width:98px!important;min-width:98px!important;flex-basis:98px!important}
  .brand-lockup{width:98px}
  #account{min-width:0!important;margin-left:auto;display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:5px!important;overflow:visible!important}
  #localeSwitch{display:block!important;visibility:visible!important;width:52px!important;min-width:52px!important;height:38px!important;padding:0 20px 0 9px!important;border-radius:var(--sy-r-pill)!important;border:1px solid rgba(255,255,255,.92)!important;background:rgba(255,255,255,.68)!important;color:var(--sy-ink)!important;font-size:10px!important;font-weight:760!important;line-height:1!important;box-shadow:inset 0 1px 0 #fff,var(--sy-shadow-1)!important}
  #account .header-icon,#account .header-exit{display:none!important}
  #account .header-avatar{display:grid!important;width:38px!important;height:38px!important;min-width:38px!important;padding:0!important;place-items:center!important}
  #account .primary{min-height:38px!important;height:38px!important;padding:0 13px!important;font-size:10px!important;white-space:nowrap!important}
  .right{display:none!important}
  .left-rail{display:none!important}
  main{display:block!important;width:100%!important;margin:0!important;padding:14px 12px calc(104px + env(safe-area-inset-bottom))!important}
  .mobile-dock{
    position:fixed!important;
    z-index:70!important;
    left:12px!important;right:12px!important;
    bottom:calc(10px + env(safe-area-inset-bottom))!important;
    min-height:66px!important;
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:2px!important;
    padding:7px!important;
    border-radius:24px!important;
    background:rgba(250,252,251,.80)!important;
    border:1px solid rgba(255,255,255,.94)!important;
    box-shadow:0 20px 60px rgba(42,57,61,.14),inset 0 1px 0 #fff!important;
    backdrop-filter:blur(28px) saturate(1.15)!important;
  }
  .mobile-dock .nav{min-width:0!important;min-height:50px!important;padding:6px 3px!important;border-radius:18px!important;color:var(--sy-muted)!important}
  .mobile-dock .nav.active{background:linear-gradient(145deg,#fff,#e8efed)!important;color:var(--sy-ink)!important;box-shadow:var(--sy-shadow-1)!important}
  .mobile-dock .mobile-create{align-self:center;display:grid;place-items:center;align-content:center;gap:2px;min-width:0;height:54px;padding:4px;border:1px solid rgba(255,255,255,.18);border-radius:20px;background:linear-gradient(145deg,var(--sy-void),#45524f);color:#fff;box-shadow:0 12px 30px rgba(31,42,43,.22),inset 0 1px 0 rgba(255,255,255,.22)}
  .mobile-dock .mobile-create>span:first-child{font-size:20px;line-height:1}.mobile-dock .mobile-create>span:last-child{font-size:8px;font-weight:750}
  .scene-readout{gap:6px;margin-top:14px}
  .scene-readout>span{min-width:72px;padding:8px 9px}
}

@media(max-width:480px){
  .brand{width:86px!important;min-width:86px!important;flex:0 0 86px!important}
  .brand-lockup{width:86px}
  .command-search{width:42px!important;min-width:42px!important;flex:0 0 42px!important;padding:0!important;justify-content:center!important}
  .command-search span:nth-child(2),.command-search kbd{display:none!important}
  #app{min-width:0;overflow:clip}
  .media-file-picker{grid-template-columns:1fr;gap:7px;text-align:center}
  .media-file-picker>strong{padding:0 8px 4px}
}

@media(max-width:360px){
  body>header{padding-left:8px!important;padding-right:8px!important;gap:5px!important}
  #localeSwitch{width:48px!important;min-width:48px!important;padding-left:7px!important;padding-right:17px!important}
  #account{gap:4px!important}
  #account .primary{padding-left:10px!important;padding-right:10px!important;font-size:9px!important}
}