/* The sectioned sidebar shares the studio's warm neutral tokens. */
:root, :root[data-theme=light] {
  --paper: var(--ui-bg); --ink: var(--ui-ink); --muted: var(--ui-ink-2);
  --card: var(--ui-surface); --hair: var(--ui-line-strong); --accent: var(--ui-accent);
  --fill-active: var(--ui-selected); --fill-hover: var(--ui-surface-2); --accent-ink: var(--ui-on-accent);
  --line: var(--ui-line-strong); --dash: var(--ui-line-strong); --fill: var(--ui-surface-2); --fill-2: var(--ui-surface-3);
  --ink-fill: var(--ui-ink); --on-ink: var(--ui-bg); --muted-2: var(--ui-ink-2); --ink-soft: var(--ui-ink);
  --r-card: var(--ui-r-card); --r-ctl: var(--ui-r-ctl); --body: var(--ui-font);
  --display: 'Redaction 20', Georgia, serif; --mono: var(--ui-font-mono); --home-sidebar-width: 288px;
}
body { background: var(--ui-bg); color: var(--ui-ink); font-family: var(--ui-font); }
.page-rails { display: none; }
.home-sidebar [hidden] { display: none !important; }
body > header.home-sidebar { position: fixed; inset: 0 auto 0 0; width: var(--home-sidebar-width); height: 100dvh; padding: 0; background: var(--ui-surface); border: 0; border-right: 1px solid var(--ui-line-strong); z-index: 30; }
/* The sidebar follows the A2 direction (design-mockups/studio-home-gallery-a2,
   Alan 2026-09-19): plain words on one left edge, no pills, no icons, no
   fills, one short tick under the active view, and one red action on the
   page, which is Go Pro's. Open studio stays neutral. */
.home-sidebar-inner { display: flex; flex-direction: column; height: 100%; padding: 22px 20px 18px; overflow-y: auto; scrollbar-width: thin; }
.home-sidebar .brand { flex: none; gap: 10px; margin: 0 0 34px; text-transform: none; }
.home-sidebar .brand-mark { width: 34px; height: 34px; }
.home-sidebar .brand .wm { font: 400 18px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.home-sidebar .wm-app { display: inline; color: var(--ui-ink-2); }
.home-sidebar .wm-dot { color: var(--ui-accent); }
.home-section-label, .home-sidebar .sechead h2 { display: block; font: 10px/1 var(--ui-font-mono); text-transform: uppercase; letter-spacing: .18em; color: var(--ui-ink-2); margin: 0 0 14px; }
.home-sidebar .ftabs { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding: 0; margin: 0; border: 0; }
.home-sidebar .ftabs::before, .home-sidebar .ftabs::after, .home-sidebar .ftab::before { display: none; }
.home-sidebar .ftab { position: relative; display: flex; align-items: center; gap: 0; min-height: 0; padding: 0 0 5px; text-align: left; font: 400 24px/1.2 var(--display); letter-spacing: -.01em; color: var(--ui-ink-2); border: 0; border-radius: 0; background: none; appearance: none; }
.home-sidebar .ftab > svg { display: none; }
.home-sidebar .ftab:hover { color: var(--ui-ink); background: none; }
.home-sidebar .ftab[aria-selected=true] { color: var(--ui-ink); background: none; }
.home-sidebar .ftab::after { content: ''; display: none; position: absolute; left: 0; bottom: 0; width: 24px; height: 1px; background: var(--ui-ink); }
.home-sidebar .ftab[aria-selected=true]::after { display: block; }
.home-open-studio { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 14px; min-height: 36px; flex: none; margin: 28px 0 24px; border: 1px solid var(--ui-line-strong); border-radius: var(--ui-r-ctl); background: none; color: var(--ui-ink); font: 14px var(--ui-font); text-decoration: none; }
.home-open-studio:hover { border-color: var(--ui-ink-2); background: var(--ui-surface-2); }
.home-open-studio > span { display: none; }
/* Projects are their own section: one dashed hairline above (structure, no
   crosses), the five most recent as 32px rows, and past that a row that
   unfolds the rest in place (dashboard.js). No scroll box in the column. */
.home-sidebar #projects { flex: none; padding: 22px 0 0; margin: 0; border: 0; border-top: 1px dashed var(--ui-line-strong); }
.home-sidebar .sec::before, .home-sidebar .sec::after { display: none; }
.home-sidebar .sechead { display: flex; align-items: baseline; justify-content: space-between; padding: 0; margin: 0; }
.home-sidebar .sechead h2 { font-weight: 400; }
.home-project-count { font: 10px var(--ui-font-mono); margin: 0 6px 14px 0; color: var(--ui-ink-2); }
.home-sidebar .proj-note { display: block; margin: 0 0 6px; padding: 0; background: none; border: 0; color: var(--ui-ink-2); font: 12.5px/1.45 var(--ui-font); }
.home-project-list { display: flex; flex-direction: column; gap: 1px; }
.home-project-row { flex: none; width: 100%; display: flex; align-items: center; min-height: 32px; gap: 10px; padding: 0 6px; border: 0; border-radius: var(--ui-r-ctl); background: none; color: var(--ui-ink); text-decoration: none; text-align: left; font: 14px/1.4 var(--ui-font); cursor: pointer; }
.home-project-row:hover { background: var(--ui-surface-2); color: var(--ui-ink); }
.home-project-icon { width: 16px; height: 16px; flex: none; display: block; color: var(--ui-ink-2); }
.home-project-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-project-time { margin-left: auto; flex: none; color: var(--ui-ink-2); font: 11px var(--ui-font-mono); white-space: nowrap; }
.home-project-new, .home-project-more { color: var(--ui-ink-2); }
/* The Pro card stays (Alan, 2026-09-19), compact: one line of heading. */
.home-pro-card { flex: none; margin: auto 0 16px; padding: 14px; border-radius: var(--ui-r-card); background: var(--ui-ink); color: var(--ui-bg); }
.home-pro-label { display: block; margin-bottom: 8px; font: 10px var(--ui-font-mono); text-transform: uppercase; letter-spacing: .08em; }
.home-pro-card h2 { font: 400 20px/1.15 var(--display); margin: 0 0 6px; }
.home-pro-card p { font: 12px/1.5 var(--ui-font); margin: 0 0 12px; }
.home-pro-card > a { display: flex; justify-content: space-between; align-items: center; min-height: 32px; padding: 6px 12px; background: var(--ui-accent); color: var(--ui-on-accent); text-decoration: none; border-radius: var(--ui-r-ctl); font: 12px var(--ui-font); }
.home-pro-card > a:hover, .home-mobile-upgrade:hover { background: var(--ui-accent-hover); }
.home-sidebar .nav-right { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 2px 8px; position: relative; margin: 0; padding: 0; border: 0; }
.home-sidebar #account-slot { order: -1; width: 100%; position: relative; }
.home-signin, .home-account-row { width: 100%; display: flex; align-items: center; min-height: 36px; padding: 0 6px; border: 0; border-radius: var(--ui-r-ctl); background: none; color: var(--ui-ink); text-decoration: none; text-align: left; font: 14px var(--ui-font); cursor: pointer; }
.home-signin:hover, .home-account-row:hover { background: var(--ui-surface-2); }
.home-account-row { gap: 10px; }
.home-avatar { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border: 1px solid var(--ui-line-strong); border-radius: 50%; background: var(--ui-surface-2); font: 12px var(--ui-font); }
.home-account-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.home-account-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.home-account-plan { font-size: 10px; color: var(--ui-ink-2); }
.home-account-chevron { margin-left: auto; color: var(--ui-ink-2); }
.home-sidebar :is(.discord-link,.qbtn) { min-height: 28px; height: 28px; min-width: 28px; padding: 0 6px; border: 0; border-radius: var(--ui-r-ctl); color: var(--ui-ink-2); font: 12.5px var(--ui-font); }
.home-sidebar :is(.discord-link,.qbtn):hover { color: var(--ui-ink); background: var(--ui-surface-2); }
.home-sidebar .discord-link { display: flex; width: auto; flex-direction: row; gap: 8px; text-transform: none; letter-spacing: 0; }
.home-sidebar .discord-link svg { display: none; }
.home-sidebar .discord-label { display: inline; }
.home-sidebar #theme-toggle { margin-left: auto; order: 1; }
.home-sidebar .account-pop { top: auto; bottom: calc(100% + 8px); left: 0; right: 0; width: auto; max-width: none; }
.home-sidebar .nav-toggle, .home-mobile-upgrade { display: none; }
.home-sidebar #home-pro-card[hidden] ~ .nav-right { margin-top: auto; }
.home-sidebar :focus-visible { outline: 2px solid var(--ui-ring); outline-offset: 2px; }
main#top { margin-left: var(--home-sidebar-width); padding: 32px; min-height: 100dvh; }
main#top > .wrap { display: flex; flex-direction: column; max-width: 1600px; width: 100%; padding: 0; margin: 0 auto; }
.home-heading { order: 0; display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 28px; }
.home-heading h1 { font: 400 40px/1.15 var(--display); letter-spacing: -.02em; margin: 0 0 8px; }
.home-heading .lede { font: 13px/1.6 var(--ui-font); padding: 0; margin: 0; color: var(--ui-ink-2); }
.home-heading .starter-count { font: 11px var(--ui-font-mono); }
main#top .starter-panel { order: 1; }
main#top .foot { order: 3; }
main#top .setup-band { order: 2; margin: 28px 0 24px; padding-bottom: 0; }
.setup-band h3 { font-family: var(--ui-font); }
#template-gallery .lg-toolbar { margin-bottom: 24px; }
/* The search is as quiet as the buttons beside it: their 40px height, their
   12px inset, no box at rest. A hairline arrives with the pointer and turns
   to ink when the field is focused; that hairline is its focus ring. */
#template-gallery .lg-search { flex: none; width: min(320px, 100%); min-height: 40px; padding: 0 12px; gap: 8px; background: none; border: 1px solid transparent; }
#template-gallery .lg-search:hover { border-color: var(--ui-line-strong); }
#template-gallery .lg-search:focus-within { border-color: var(--ui-ink-2); outline: none; }
#template-gallery .lg-search-mark svg { width: 20px; height: 20px; }
/* The format filters end on the wall's right edge, where Community keeps its sorts. */
#template-gallery .lg-filters { margin-left: auto; }
#template-gallery .lg-count { display: none; }
body > footer { margin-left: var(--home-sidebar-width); }
/* Effects use the template gallery's thumbnail, caption and masonry grammar. */
#effects-panel .erow { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); margin: 0; }
#effects-panel .erow.lg-masonry { display: block; }
#effects-panel .starter-card { display: block; position: relative; grid-column: auto; grid-row: auto; padding: 0; margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--ui-ink); text-decoration: none; overflow: visible; transition: none; }
#effects-panel .erow.lg-masonry > .starter-card { position: absolute; top: 0; left: 0; }
#effects-panel .starter-card:hover { transform: none; }
#effects-panel .starter-preview { display: block; width: 100%; min-height: 0; height: auto; aspect-ratio: var(--preview-ratio, 16 / 9); border: 1px solid var(--ui-line-strong); border-radius: var(--ui-r-card); background: var(--ui-surface); overflow: hidden; }
#effects-panel .starter-preview :is(img,video,iframe) { width: 100%; height: 100%; object-fit: contain; transform: none; aspect-ratio: auto; }
#effects-panel .starter-copy { display: flex; align-items: baseline; gap: 12px; padding: 10px 1px 2px; border: 0; min-height: 0; }
#effects-panel .starter-name { font: 400 13px/1.5 var(--ui-font); letter-spacing: 0; text-transform: none; color: var(--ui-ink); white-space: normal; overflow-wrap: anywhere; }
#effects-panel .starter-copy::after { content: 'Effect'; flex: none; margin-left: auto; color: var(--ui-ink-2); font: 11px/1.5 var(--ui-font); }
#effects-panel :is(.starter-topline,.starter-description,.starter-video-cap) { display: none; }
#effects-panel :is(.starter-use,.starter-cta) { position: absolute; bottom: 50px; left: 14px; right: auto; padding: 8px 12px; margin: 0; min-height: 0; height: auto; text-transform: none; letter-spacing: 0; border: 1px solid var(--ui-line-strong); border-radius: var(--ui-r-ctl); color: var(--ui-ink); background: var(--ui-surface); font: 12px var(--ui-font); opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; }
#effects-panel .starter-card:is(:hover,:focus-visible) :is(.starter-use,.starter-cta) { opacity: 1; transform: none; }
@media (max-width: 1100px) and (min-width: 761px) {
  :root { --home-sidebar-width: 264px; }
  .home-sidebar-inner { padding-inline: 16px; }
  .home-sidebar .brand { gap: 9px; }
  .home-sidebar .brand-mark { width: 32px; height: 32px; }
  main#top { padding: 24px; }
}
@media (max-width: 760px) {
  body > header.home-sidebar { position: relative; inset: auto; width: 100%; height: auto; border: 0; border-bottom: 1px solid var(--ui-line-strong); }
  .home-sidebar-inner { overflow: visible; padding: 16px; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 18px 12px; }
  .home-sidebar .brand { margin: 0; }
  .home-sidebar .brand-mark { width: 32px; height: 32px; }
  .home-sidebar .brand .wm { font-size: 18px; }
  .home-sidebar .home-discover { width: 100%; order: 2; }
  .home-discover > .home-section-label, .home-sidebar #projects, .home-pro-card { display: none; }
  .home-sidebar .ftabs { flex-direction: row; flex-wrap: nowrap; gap: 4px; }
  .home-sidebar .ftab { min-height: 44px; flex: 1 0 auto; padding: 10px 8px; font-size: 18px; justify-content: center; white-space: nowrap; border-radius: var(--ui-r-ctl); }
  .home-sidebar .ftab > svg { display: none; }
  /* On phones the views are a row of centred buttons, so the picked one keeps
     its fill and the desktop tick stays off. */
  .home-sidebar .ftab[aria-selected=true] { background: var(--ui-selected); }
  .home-sidebar .ftab[aria-selected=true]::after { display: none; }
  .home-sidebar .discord-link svg { display: block; }
  .home-open-studio { order: 3; width: 100%; min-height: 44px; margin: 0; }
  .home-sidebar .nav-toggle { display: flex; flex: none; margin-left: auto; width: 44px; height: 44px; padding: 0; gap: 4px; border: 1px solid var(--ui-line-strong); border-radius: var(--ui-r-ctl); appearance: none; }
  .home-sidebar .nav-toggle span { width: 18px; height: 2px; }
  .home-sidebar .nav-right { display: none; position: absolute; top: 68px; right: 16px; width: 250px; padding: 12px; background: var(--ui-surface); border: 1px solid var(--ui-line-strong); border-radius: var(--ui-r-card); box-shadow: var(--ui-shadow-pop); }
  .home-sidebar .nav-right.open { display: flex; }
  .home-mobile-upgrade { display: flex; align-items: center; justify-content: space-between; order: -1; width: 100%; min-height: 44px; padding: 10px 12px; border-radius: var(--ui-r-ctl); color: var(--ui-on-accent); background: var(--ui-accent); font: 13px/1.4 var(--ui-font); text-decoration: none; }
  .home-sidebar :is(.discord-link,.qbtn) { height: 44px; min-height: 44px; min-width: 44px; font-size: 12px; }
  .home-signin, .home-account-row { min-height: 44px; padding: 8px 10px; }
  .home-sidebar #theme-toggle { display: flex; align-items: center; justify-content: center; width: 44px; padding: 0; appearance: none; }
  .home-sidebar :is(.discord-link,.qbtn) svg { width: 18px; height: 18px; flex: none; }
  .home-sidebar .account-pop { top: calc(100% + 8px); bottom: auto; }
  .home-sidebar .bchip-wrap { display: none; }
  main#top { margin: 0; padding: 24px 16px; }
  .home-heading { margin-bottom: 22px; }
  .home-heading h1 { font-size: 32px; }
  .home-heading .starter-count { display: none; }
  body > footer { margin: 0; }
}
@media (max-width: 420px) {
  .home-sidebar .ftabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { #effects-panel :is(.starter-use,.starter-cta) { transition: none; } }
/* Each tab's own tools sit above its own cards: search and formats on
   Templates, the three sorts on Community. The sorts take the Templates
   filter buttons' numbers (.lg-filters and .lg-button in gallery/gallery.css)
   at the right end of a 44px row, the height of the Templates search field,
   so the first card lands at the same height on both tabs. */
.home-heading[hidden] { display: none; }
#community-panel .looks-head { justify-content: flex-end; align-items: center; min-height: 40px; padding: 0; margin: 0 0 24px; }
#community-panel .looks-sorts { gap: 4px; }
#community-panel .looks-sorts .looks-sort { min-height: 40px; padding: 8px 12px; border: 1px solid transparent; border-radius: var(--ui-r-ctl); background: none; color: var(--ui-ink-2); font: 14px/1.5 var(--ui-font); letter-spacing: 0; text-transform: none; }
#community-panel .looks-sorts .looks-sort:hover { background: var(--ui-surface-2); color: var(--ui-ink); }
#community-panel .looks-sorts .looks-sort.active { background: var(--ui-selected); color: var(--ui-ink); }
#community-panel .looks-sorts .looks-sort:focus-visible { outline: 2px solid var(--ui-ring); outline-offset: 3px; }
#community-panel { display: flex; flex-direction: column; }
#community-panel[hidden] { display: none; }
#community-panel #looks-grid { order: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
#community-panel #looks-grid.lg-masonry { display: block; }
#community-panel .looks-mine { order: 1; margin: 20px 0 0; }
#community-panel #looks-status { order: 2; }
#community-panel #looks-sentinel { order: 3; }
#community-panel .look-card { position: relative; margin: 0; background: none; border: 0; box-shadow: none; transition: none; }
#community-panel .lg-masonry > .look-card { position: absolute; top: 0; left: 0; }
#community-panel .lc-media { aspect-ratio: auto; border: 1px solid var(--ui-line-strong); border-radius: var(--ui-r-card); background: var(--ui-surface); }
#community-panel .lc-media :is(img,video) { width: 100%; height: auto; object-fit: contain; }
/* A look's caption speaks the gallery's grammar (.lg-card-caption, .starter-copy):
   the name, then one quiet row with the maker on the art's left edge and the
   counts on its right edge. Every box here is its own ink, so edges are true;
   the counts reach a comfortable target through ::after, not through padding. */
#community-panel .lc-frame { position: relative; }
#community-panel .lc-body { display: block; padding: 10px 1px 2px; }
#community-panel .lc-title { font: 13px/1.5 var(--ui-font); }
#community-panel .lc-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 2px; }
#community-panel .lc-author { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 11px/1.5 var(--ui-font); letter-spacing: 0; text-transform: none; color: var(--ui-ink-2); }
#community-panel .lc-stats { flex: none; display: flex; align-items: center; gap: 12px; }
#community-panel .lc-act { height: auto; min-height: 0; padding: 0; border: 0; border-radius: var(--ui-r-ctl); background: none; font: 11px/1.5 var(--ui-font); text-transform: none; letter-spacing: 0; opacity: 1; }
#community-panel .lc-stats .lc-act { position: relative; gap: 5px; color: var(--ui-ink-2); font-variant-numeric: tabular-nums; }
#community-panel .lc-stats .lc-act::after { content: ''; position: absolute; inset: -6px; }
#community-panel .lc-stats .lc-act:hover { background: none; color: var(--ui-ink); }
#community-panel .lc-stats .lc-act.liked, #community-panel .lc-stats .lc-act.liked:hover { color: var(--ui-accent-text); }
#community-panel .lc-stats .lc-act.liked .lc-ic svg { fill: currentColor; stroke: currentColor; }
#community-panel .lc-act:focus-visible { outline: 2px solid var(--ui-ring); outline-offset: 3px; }
/* Remix and Share wait on the art and arrive with the pointer, the way an
   effect's Use chip does, so the wall stays art first. A touch screen never
   gets them: there a tap opens the look, where Remix is the one red action. */
#community-panel .lc-actions { display: none; }
@media (hover: hover) {
  #community-panel .lc-actions { display: flex; gap: 6px; position: absolute; left: 14px; bottom: 14px; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .15s, transform .15s, visibility 0s .15s; }
  #community-panel .look-card:is(:hover, :focus-within) .lc-actions { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
}
#community-panel .lc-actions .lc-act, #community-panel .lc-actions .lc-act:hover { padding: 8px 12px; border: 1px solid var(--ui-line-strong); background: var(--ui-surface); color: var(--ui-ink); font: 12px var(--ui-font); }
#community-panel .lc-actions .lc-act:not(.lc-remix) { color: var(--ui-ink-2); }
#community-panel .lc-actions .lc-act:hover, #community-panel .lc-actions .lc-act.copied { background: var(--ui-surface-2); color: var(--ui-ink); }
@media (prefers-reduced-motion: reduce) { #community-panel .lc-actions { transition: none; transform: none; } }
@media (max-width: 700px) {
  /* the Templates filters' phone cut (gallery/gallery.css), same breakpoint */
  #community-panel .looks-sorts .looks-sort { padding-inline: 9px; font-size: 12px; }
  #template-gallery .lg-search { width: 100%; min-height: 44px; }
}
@media (max-width: 760px) {
  #community-panel .looks-sorts .looks-sort { min-height: 44px; }
  #community-panel .lc-stats { gap: 20px; }
  #community-panel .lc-stats .lc-act::after { inset: -14px -10px; }
}
#template-gallery .lg-status { padding: 16px 0; border: 0; text-align: left; }
#template-gallery .lg-status h2 { font: 400 14px/1.5 var(--ui-font); }
#template-gallery .lg-status p { color: var(--ui-ink-2); font-size: 12px; }