/* The existing mobile boundary is 600px. This sheet only styles desktop navigation. */
@media (min-width:601px) {
  .desktop-shell,
  .desktop-header-shell {
    --desktop-sidebar-width:236px;
    --header-h:64px;
    --header-spacer-h:64px;
    --header-surface:var(--color-header);
    --sidebar-surface:var(--color-surface-2);
    --chrome-line:var(--color-border);
    --active-soft:var(--color-accent-soft);
  }
  .desktop-shell .app-header,
  .desktop-header-shell .app-header,
  .desktop-shell .app-header.is-scrolled,
  .desktop-header-shell .app-header.is-scrolled {
    left:0;
    right:0;
    width:100%;
    max-width:none;
    margin:0;
    border:0;
    height:var(--header-h);
    z-index:60;
    border-bottom:1px solid var(--chrome-line);
    border-radius:0;
    background:var(--header-surface);
    box-shadow:0 1px 8px rgba(0,0,0,.04);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
  .desktop-shell .header-inner,
  .desktop-header-shell .header-inner {
    width:100%;
    max-width:none;
    padding-left:0;
    height:var(--header-h);
    padding-right:20px;
    grid-template-columns:var(--desktop-sidebar-width) minmax(0,1fr) auto;
    column-gap:0;
  }
  .desktop-shell .header-inner > .brand,
  .desktop-header-shell .header-inner > .brand {
    position:absolute;
    left:0;
    top:0;
    width:var(--desktop-sidebar-width);
    height:var(--header-h);
    padding:0 16px;
    grid-column:auto;
  }
  .desktop-shell .normal-brand strong,
  .desktop-header-shell .normal-brand strong {
    font-size:15px;
    font-weight:650;
    letter-spacing:-.02em;
  }
  .desktop-shell .brand small,
  .desktop-header-shell .brand small { margin-top:3px; color:var(--color-text-muted); font-size:11px; letter-spacing:.12em; }
  .desktop-shell .header-actions,
  .desktop-header-shell .header-actions { grid-column:3; justify-self:end; gap:8px; }
  .desktop-header-shell .header-actions > .header-icon,
  .desktop-header-shell .header-actions > .avatar-small { width:36px; height:36px; }
  .desktop-header-shell .header-actions > .sign-in { min-height:36px; display:flex; align-items:center; }
  .desktop-header-shell .header-actions > :not(.desktop-account-menu):hover { background:var(--color-surface-hover); }
  .desktop-header-shell .header-actions > :focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
  .desktop-header-gallery-tabs {
    grid-column:2;
    width:max-content;
    max-width:100%;
    min-width:0;
    height:44px;
    margin:0;
    padding:3px;
    display:flex;
    align-items:center;
    gap:6px;
    overflow-x:auto;
    justify-self:center;
    scrollbar-width:none;
  }
  .desktop-header-gallery-tabs::-webkit-scrollbar { display:none; }
  .desktop-header-gallery-tabs a {
    width:auto;
    flex:none;
    min-width:max-content;
    height:38px;
    min-height:38px;
    padding:0 12px;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    border-radius:10px;
    color:var(--color-text-muted);
    white-space:nowrap;
    font-size:14px;
    font-weight:600;
    line-height:1;
  }
  .desktop-header-gallery-tabs a:hover { background:var(--color-surface-hover); color:var(--color-text-secondary); }
  .desktop-header-gallery-tabs a.active { background:var(--active-soft); color:var(--accent); font-weight:650; }
  .desktop-header-gallery-tabs a.active::after,
  .desktop-header-gallery-tabs.gallery-indicator-ready::after { display:none; }
  .desktop-header-gallery-tabs a.gallery-color-from,
  .desktop-header-gallery-tabs a.gallery-color-to { color:inherit!important; }
  .desktop-header-gallery-tabs a:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
  .desktop-shell .desktop-sidebar {
    display:flex !important;
    position:fixed;
    top:calc(var(--header-h) + env(safe-area-inset-top,0px));
    bottom:0;
    left:0;
    width:var(--desktop-sidebar-width);
    box-sizing:border-box;
    padding:24px 12px 20px 16px;
    flex-direction:column;
    gap:24px;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    z-index:20;
    background:var(--sidebar-surface);
    border-right:1px solid var(--chrome-line);
  }
  .desktop-sidebar-nav { display:grid; gap:6px; }
  .desktop-sidebar-nav a,
  .desktop-tutorial { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:11px; }
  .desktop-sidebar svg { width:21px; height:21px; flex:none; }
  .desktop-sidebar-nav a { min-height:46px; font-size:15px; font-weight:550; }
  .desktop-sidebar-nav svg { width:20px; height:20px; }
  .desktop-sidebar-nav a:hover,
  .desktop-tutorial:hover { background:var(--soft); }
  .desktop-sidebar-nav a.active { color:var(--accent); background:var(--active-soft); }
  .desktop-create-group { display:grid; gap:8px; }
  .desktop-create { display:flex; justify-content:center; align-items:center; gap:8px; min-height:46px; border-radius:11px; background:var(--accent); color:#fff; font-weight:650; }
  .desktop-create:hover { filter:brightness(.95); }
  .desktop-share { justify-self:start; padding:4px 8px; font-size:14px; line-height:1.5; color:var(--color-text-muted); }
  .desktop-share:hover { color:var(--accent); }
  .desktop-tutorial { align-items:flex-start; font-size:14px; line-height:1.5; color:var(--color-text-muted); }
  .desktop-sidebar > * { flex-shrink:0; }
  .desktop-sidebar a:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
  .desktop-shell .app-main { width:calc(100% - var(--desktop-sidebar-width) - 32px); margin-left:calc(var(--desktop-sidebar-width) + 32px); margin-right:0; padding-bottom:24px; }
  .desktop-header-shell .bottom-nav,
  .desktop-shell .site-footer { display:none; }
  .desktop-header-shell .app-main:has(>.auth-page) { padding-bottom:0; }
  .desktop-header-shell .auth-page { min-height:calc(100svh - var(--header-spacer-h)); }
  .desktop-gallery .app-main { max-width:none; padding-left:16px; padding-right:24px; }
  .desktop-gallery .app-main > .mobile-gallery-tabs { display:none; }
  .desktop-gallery .gallery-grid,.desktop-shell .portfolio-grid { grid-template-columns:minmax(0,1fr); gap:30px 22px; }
  .desktop-gallery .feed-page-heading { padding:30px 4px 0; }
  .desktop-gallery .feed-page-heading + .gallery-grid { padding-top:24px; }
  .desktop-gallery .work-title-text { min-width:0; flex:1 1 0; }
  .desktop-shell:not(.desktop-gallery) .permalink-page {
    width:min(100%,960px);
    margin-left:auto;
    margin-right:auto;
  }
  /* Keep post navigation at stable viewport coordinates, independent of media dimensions. */
  .desktop-shell:not(.desktop-gallery) .permalink-side-nav a,
  .desktop-shell:not(.desktop-gallery) .permalink-side-nav span {
    position:fixed;
    z-index:20;
    top:50dvh;
    transform:translateY(-50%);
    background:rgba(255,255,255,.86);
    color:var(--color-text-muted);
    box-shadow:0 2px 10px rgba(0,0,0,.08);
  }
  .desktop-shell:not(.desktop-gallery) .permalink-side-nav a:hover {
    transform:translateY(-50%) scale(1.03);
  }
  .desktop-shell:not(.desktop-gallery) .permalink-side-nav a:active {
    transform:translateY(-50%) scale(.97);
  }
  .desktop-shell:not(.desktop-gallery):has(.detail-media:fullscreen) .permalink-side-nav a,
  .desktop-shell:not(.desktop-gallery):has(.detail-media:fullscreen) .permalink-side-nav span {
    display:none;
  }
  .desktop-header-shell .explore-page .category-filters {
    flex-wrap:wrap;
    overflow:visible;
    column-gap:7px;
    row-gap:7px;
  }
}

/* 2026 desktop visual system. Intentionally starts above the approved 760px boundary. */
@media (min-width:761px) {
  html { background:var(--color-bg); }
  body.desktop-header-shell {
    --desktop-sidebar-width:76px;
    --header-h:64px;
    --header-spacer-h:64px;
    --bg:var(--color-bg);
    --soft:var(--color-surface-2);
    --text:var(--color-text);
    --muted:var(--color-text-muted);
    --line:var(--color-border);
    --chrome-line:var(--color-border);
    --active-soft:var(--color-accent-soft);
    --accent:var(--color-accent);
    --desktop-action-neutral:var(--color-surface-2);
    --desktop-action-neutral-hover:var(--color-surface-hover);
    --desktop-action-border:var(--color-border-strong);
    --desktop-action-text:var(--color-text);
    --desktop-action-active:var(--color-accent);
    --desktop-action-active-text:#1a0d05;
    min-height:100vh;
    background:var(--color-bg);
    color:var(--color-text);
    font-family:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  }
  .desktop-header-shell .app-header,
  .desktop-header-shell .app-header.is-scrolled {
    position:fixed;
    top:env(safe-area-inset-top,0px);
    height:64px;
    border-bottom:1px solid var(--color-border);
    background:var(--color-header);
    box-shadow:none;
    -webkit-backdrop-filter:blur(16px) saturate(125%);
    backdrop-filter:blur(16px) saturate(125%);
  }
  .desktop-header-shell .header-inner {
    height:64px;
    padding:0 20px;
    grid-template-columns:240px minmax(0,1fr) max-content;
    gap:10px;
  }
  .desktop-header-shell .header-inner>.brand {
    position:relative;
    width:100%;
    min-width:0;
    height:64px;
    padding:0;
    overflow:hidden;
    grid-column:1;
    align-items:flex-start;
    text-align:left;
    color:var(--color-text);
  }
  .desktop-header-shell .header-inner>.brand>.normal-brand,
  .desktop-header-shell .header-inner>.brand>.scrolled-brand {
    inset:0;
    width:100%;
    max-width:100%;
    overflow:hidden;
    align-items:flex-start;
    justify-content:center;
    text-align:left;
  }
  .desktop-header-shell .header-inner>.brand>.normal-brand { flex-direction:column; }
  .desktop-header-shell .header-inner>.brand>.normal-brand strong,
  .desktop-header-shell .header-inner>.brand>.normal-brand small,
  .desktop-header-shell .header-inner>.brand>.scrolled-brand { max-width:100%; }
  .desktop-header-shell .normal-brand strong {
    font-family:"Bricolage Grotesque","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
    font-size:14.5px;
    font-weight:700;
    letter-spacing:-.025em;
  }
  .desktop-header-shell .brand small { margin-top:3px; color:var(--color-text-muted); font-size:11px; letter-spacing:.03em; }
  .desktop-header-gallery-tabs {
    height:64px;
    padding:0;
    gap:0;
    overflow:visible;
  }
  .desktop-header-gallery-tabs a {
    height:64px;
    min-height:64px;
    padding:0 clamp(9px,1.1vw,16px);
    border-radius:0;
    color:var(--color-text-muted);
    font-size:14px;
    font-weight:500;
  }
  .desktop-header-gallery-tabs a:hover { background:transparent; color:var(--color-text); }
  .desktop-header-gallery-tabs a.active { background:transparent; color:var(--color-text); font-weight:600; }
  .desktop-header-gallery-tabs a.active::after {
    display:block;
    content:"";
    position:absolute;
    right:clamp(9px,1.1vw,16px);
    bottom:0;
    left:clamp(9px,1.1vw,16px);
    width:auto;
    height:2px;
    border-radius:2px 2px 0 0;
    background:var(--color-accent);
    transform:none;
  }
  .desktop-header-gallery-tabs.gallery-indicator-ready::after { display:none; }
  .desktop-header-shell .header-actions { gap:9px; }
  .desktop-header-shell .header-actions>.header-icon,
  .desktop-header-shell .desktop-notifications>.header-icon,
  .desktop-header-shell .header-actions>.mobile-account-link { width:40px; height:40px; color:var(--color-text-muted); }
  .desktop-header-shell .header-actions>.header-icon:hover,
  .desktop-header-shell .desktop-notifications>.header-icon:hover { background:var(--color-surface-hover); color:var(--color-text); }
  .desktop-header-shell .header-actions>.header-icon:first-child {
    width:40px;
    justify-content:center;
    border:1px solid var(--color-border);
    background:var(--color-surface-hover);
  }
  .desktop-header-create {
    height:40px;
    padding:0 17px;
    display:inline-flex!important;
    align-items:center;
    gap:7px;
    border-radius:999px;
    background:var(--color-accent);
    color:#fff;
    font-size:14px;
    font-weight:700;
    line-height:1;
    box-shadow:0 7px 20px rgba(255,107,26,.18);
  }
  .desktop-header-create svg { width:18px; height:18px; stroke-width:3; transform-origin:center; transition:transform 700ms cubic-bezier(.22,1,.36,1); }
  .desktop-header-create:hover { background:var(--color-accent-hover)!important; }
  .desktop-header-create:hover svg { transform:rotate(90deg); }
  .desktop-header-shell .mobile-notification-link { display:none; }
  .desktop-notifications { position:relative; display:block!important; background:transparent!important; }
  .desktop-notifications>.notification-bell {
    padding:0;
    border:0;
    background:transparent;
    font:inherit;
    cursor:pointer;
  }
  .desktop-account-menu { position:relative; display:block!important; }
  .desktop-account-trigger { width:36px; height:36px; padding:0; border:1px solid var(--color-border-strong); color:var(--color-text); cursor:pointer; box-shadow:0 0 0 2px var(--color-bg); }
  .desktop-header-shell .mobile-account-link { display:none; }
  .desktop-header-shell .sign-in { min-height:38px; border-color:var(--color-border-strong); color:var(--color-text); }
  .desktop-header-shell .activity-badge { border-color:var(--color-bg); }

  .desktop-shell .desktop-sidebar {
    top:calc(64px + env(safe-area-inset-top,0px));
    width:76px;
    padding:14px 9px;
    gap:0;
    overflow:visible;
    background:var(--color-bg);
    border-right:1px solid var(--color-border);
  }
  .desktop-sidebar-nav { display:flex; flex-direction:column; gap:6px; }
  .desktop-sidebar-row {
    width:56px;
    min-height:58px;
    padding:8px 3px 7px;
    flex-direction:column;
    justify-content:center;
    gap:4px;
    border-radius:14px;
    color:var(--color-text-muted);
    font-family:"Figtree",system-ui,sans-serif;
    font-size:11px;
    font-weight:500;
    line-height:1;
    text-align:center;
  }
  .desktop-sidebar-row>svg { width:21px; height:21px; }
  .desktop-sidebar-row:hover,.desktop-sidebar-row:focus-visible { background:var(--color-surface-hover); color:var(--color-text); }
  .desktop-sidebar-row.active { background:var(--color-accent-soft); color:var(--color-text); }
  .desktop-sidebar-row.active>svg { color:var(--color-accent); }
  .sidebar-explore { position:relative; margin:0; }
  .sidebar-explore-toggle .sidebar-explore-chevron { display:none; }
  .sidebar-explore-panel,
  .sidebar-explore.is-open .sidebar-explore-panel,
  html.sidebar-explore-preopen .sidebar-explore .sidebar-explore-panel {
    position:absolute;
    top:0;
    left:66px;
    width:260px;
    max-height:min(620px,calc(100vh - 104px));
    padding:12px;
    overflow:auto;
    visibility:hidden;
    opacity:0;
    transform:translateX(-6px);
    pointer-events:none;
  }
  .sidebar-explore.is-open .sidebar-explore-panel {
    visibility:visible;
    opacity:1;
    transform:none;
    pointer-events:auto;
  }
  .desktop-popover-panel {
    z-index:80;
    border:1px solid var(--color-border-strong);
    border-radius:14px;
    background:var(--color-surface-2);
    color:var(--color-text);
    box-shadow:var(--shadow-popover);
  }
  .desktop-popover-panel>strong { display:block; padding:3px 7px 9px; color:var(--color-text-muted); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
  .sidebar-explore-list { padding:0; display:grid; gap:2px; }
  .sidebar-explore-list a { min-height:36px; padding:0 9px; border-radius:9px; color:var(--color-text-secondary); font-size:13px; }
  .sidebar-explore-list a:hover { background:var(--color-surface-hover); color:var(--color-text); }
  .sidebar-explore-list a.active { background:var(--color-accent-soft); color:var(--color-accent-hover); }
  .sidebar-explore-list a>small { color:var(--color-text-muted); }
  .desktop-learn { position:relative; margin-top:16px; }
  .desktop-learn-panel { position:absolute; left:66px; bottom:0; width:255px; padding:10px; }
  .desktop-learn-panel a,
  .desktop-account-panel a,
  .desktop-account-panel form button {
    width:100%;
    min-height:39px;
    padding:0 10px;
    display:flex;
    align-items:center;
    border:0;
    border-radius:9px;
    background:transparent;
    color:var(--color-text-secondary);
    font:600 13px/1.25 "Figtree",system-ui,sans-serif;
    text-align:left;
    cursor:pointer;
  }
  .desktop-learn-panel a:hover,.desktop-account-panel a:hover,.desktop-account-panel form button:hover { background:var(--color-surface-hover); color:var(--color-text); }
  .desktop-account-panel { position:absolute; top:46px; right:0; width:210px; padding:10px; }
  .desktop-account-panel form { margin-top:5px; padding-top:5px; border-top:1px solid var(--color-border); }
  .desktop-account-panel form button { color:#ff9a64; }
  .notifications-popover {
    position:absolute;
    top:48px;
    right:-8px;
    width:min(370px,calc(100vw - 32px));
    max-height:min(600px,calc(100vh - 84px));
    padding:0;
    overflow:hidden;
    background:var(--color-surface);
  }
  .notifications-header {
    min-height:54px;
    padding:0 18px;
    display:flex;
    align-items:center;
    border-bottom:1px solid var(--color-border);
    background:var(--color-surface);
  }
  .notifications-header h2 { margin:0; color:var(--color-text-secondary); font:600 15px/1.2 "Figtree",system-ui,sans-serif; letter-spacing:-.01em; }
  .notifications-content { min-height:92px; }
  .notifications-scroll {
    max-height:min(486px,calc(100vh - 178px));
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    scrollbar-color:var(--color-border-strong) var(--color-surface);
  }
  .notifications-scroll::-webkit-scrollbar { width:7px; }
  .notifications-scroll::-webkit-scrollbar-track { background:var(--color-surface); }
  .notifications-scroll::-webkit-scrollbar-thumb { border:2px solid var(--color-surface); border-radius:8px; background:var(--color-border-strong); }
  .notifications-scroll .notification-row {
    min-height:78px;
    padding:12px 14px;
    gap:10px;
    border-bottom:1px solid var(--color-border);
    background:transparent;
  }
  .notifications-scroll .notification-row[data-notification-href] { cursor:pointer; }
  .notifications-scroll .notification-row:hover { background:var(--color-surface-hover); }
  .notifications-scroll .notification-row.unread { background:linear-gradient(90deg,var(--color-accent-soft),transparent 76%); }
  .notifications-scroll .notification-row.unread:hover { background:linear-gradient(90deg,var(--color-accent-soft),var(--color-surface-hover)); }
  .notifications-scroll .activity-avatar { width:38px; height:38px; flex:none; }
  .notifications-scroll .activity-copy p { color:var(--color-text-secondary); font-size:13px; line-height:1.38; }
  .notifications-scroll .activity-copy p>a,
  .notifications-scroll .activity-copy p strong { color:var(--color-text); }
  .notifications-scroll .activity-copy time { margin-top:4px; color:var(--color-text-muted); font-size:11px; }
  .notifications-scroll .activity-copy q { color:var(--color-text-muted); }
  .notifications-scroll .activity-thumb { width:48px; height:48px; border-radius:9px; background:var(--color-surface-2); }
  .notifications-scroll .unread-dot { left:5px; width:4px; height:4px; }
  .notifications-empty { min-height:124px; padding:40px 20px; display:grid; place-items:center; }
  .notifications-empty h2 { margin:0; color:var(--color-text-muted); font-size:13px; font-weight:500; }
  .notifications-loading { min-height:124px; display:grid; place-items:center; color:var(--color-text-muted); font-size:13px; }
  .notifications-error { padding:38px 20px; color:var(--color-text-muted); font-size:13px; text-align:center; }
  .notifications-footer { padding:9px 12px; border-top:1px solid var(--color-border); background:var(--color-surface); }
  .notifications-footer a {
    min-height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:9px;
    color:var(--color-text-secondary);
    font-size:12px;
    font-weight:600;
  }
  .notifications-footer a:hover { background:var(--color-surface-hover); color:var(--color-text); }
  .notifications-footer a:focus-visible,
  .notifications-scroll a:focus-visible { outline:2px solid var(--color-accent); outline-offset:-2px; }
  .desktop-shell .desktop-create,.desktop-education,.desktop-sidebar-footer { display:none; }

  .desktop-shell .app-main {
    width:calc(100% - 76px);
    max-width:none;
    margin-left:76px;
    padding:20px 28px 40px;
    background:var(--color-bg);
  }
  .desktop-shell .bottom-nav,.desktop-shell .site-footer { display:none; }
  .desktop-gallery .app-main { padding:20px 28px 40px; }
  .desktop-gallery .app-main>.mobile-gallery-tabs { display:none; }
  .desktop-gallery .feed-page-heading { margin:32px 0 0; padding:0 2px; }
  .desktop-gallery .feed-page-heading h1,
  .desktop-gallery .explore-page-heading h1,
  .desktop-shell .page-head h1 {
    color:var(--color-text);
    font-family:"Bricolage Grotesque","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
    font-weight:700;
    letter-spacing:-.025em;
  }
  .desktop-gallery .feed-page-heading h1 { font-size:30px; }
  .desktop-gallery .feed-page-heading p { margin-top:6px; color:var(--color-text-muted); font-size:14px; }
  .desktop-gallery .feed-page-heading+.gallery-grid { padding-top:20px; }
  .desktop-gallery .gallery-grid,.desktop-shell .portfolio-grid { gap:27px 20px; }
  .desktop-gallery .work-card { position:relative; }
  .desktop-gallery .work-media { border-radius:16px; background:var(--color-surface-hover); transition:box-shadow 180ms ease,transform 180ms ease; }
  .desktop-header-shell .has-card-video,
  .desktop-header-shell .has-card-video>.media-loading,
  .desktop-header-shell .has-card-video>.media-error,
  .desktop-header-shell .has-card-video>.grid-error { background:var(--color-surface-hover); }
  .desktop-gallery .work-card:hover .work-media,
  .desktop-gallery .work-card:focus-within .work-media { box-shadow:0 0 0 2px var(--color-accent),0 12px 30px rgba(0,0,0,.24); }
  .desktop-gallery .work-card .work-copy { padding:10px 2px 0; grid-template-rows:28px 28px; }
  .desktop-gallery .work-card a.work-title,
  .desktop-gallery .work-card div.work-title>.work-title-text { color:var(--color-text); font-size:15px; font-weight:600; }
  .desktop-gallery .work-card .author-username { color:rgba(238,234,228,.82); font-size:13px; }
  .desktop-gallery .work-card .card-view-count,
  .desktop-gallery .work-card .card-comment-count,
  .desktop-gallery .work-card .work-byline time { color:var(--color-text-muted); }
  .desktop-gallery .work-card .author-avatar .avatar { background:var(--color-surface-2); color:var(--color-text); box-shadow:0 0 0 1px var(--color-border); }
  .desktop-gallery .work-card .card-menu>div { border-color:var(--color-border-strong); background:var(--color-surface-2); box-shadow:0 14px 34px rgba(0,0,0,.38); }
  .desktop-gallery .work-card .card-menu a,.desktop-gallery .work-card .card-menu button { color:var(--color-text); }
  .desktop-gallery .work-card .card-menu a:hover,.desktop-gallery .work-card .card-menu button:hover { background:var(--color-surface-hover); }
  .desktop-card-save {
    position:absolute;
    z-index:6;
    top:10px;
    right:10px;
    width:34px;
    height:34px;
    margin:0;
    padding:0;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:50%;
    background:rgba(12,13,17,.76);
    color:#f4f1ed;
    opacity:0;
    transform:translateY(-4px);
    transition:opacity 180ms ease,transform 180ms ease,background-color 140ms ease;
    -webkit-backdrop-filter:blur(7px);
    backdrop-filter:blur(7px);
  }
  form.desktop-card-save { display:flex!important; }
  a.desktop-card-save { display:flex!important; }
  .desktop-card-save button { width:34px; height:34px; padding:0; display:grid; place-items:center; border:0; border-radius:50%; background:transparent; color:inherit; cursor:pointer; }
  .desktop-card-save svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.9; }
  .desktop-gallery .work-card:hover .desktop-card-save,
  .desktop-gallery .work-card:focus-within .desktop-card-save { opacity:1; transform:none; }
  .desktop-card-save:hover { background:rgba(255,255,255,.14); color:#fff; }
  .desktop-card-save:has(.bookmark-button.active) { background:rgba(12,13,17,.76); color:#f4f1ed; }
  .desktop-card-save:has(.bookmark-button.active):hover { background:var(--desktop-action-neutral-hover); color:#fff; }
  .desktop-card-save:focus-within { opacity:1; transform:none; }
  .desktop-card-save .bookmark-button.active { color:inherit; }
  .desktop-card-save .bookmark-button.active svg { fill:currentColor; stroke:currentColor; }
  .desktop-shell .work-card .desktop-card-save:focus-visible,
  .desktop-shell .desktop-card-save .bookmark-button:focus-visible { outline:2px solid rgba(255,255,255,.72); outline-offset:3px; }

  .desktop-featured-hero {
    --featured-content-left:clamp(88px,8vw,104px);
    position:relative;
    isolation:isolate;
    height:clamp(340px,50vh,500px);
    display:block!important;
    overflow:hidden;
    border-radius:24px;
    background-color:var(--color-surface-hover);
    color:#fff;
    box-shadow:0 22px 55px rgba(0,0,0,.22);
  }
  .desktop-featured-slides,.desktop-featured-slide,.desktop-featured-media { position:absolute; inset:0; }
  .desktop-featured-slide {
    visibility:hidden;
    opacity:0;
    pointer-events:none;
    transition:opacity 400ms ease,visibility 0s linear 400ms;
  }
  .desktop-featured-slide.is-active {
    z-index:1;
    visibility:visible;
    opacity:1;
    pointer-events:auto;
    transition:opacity 400ms ease;
  }
  .desktop-featured-slide::after {
    content:"";
    position:absolute;
    z-index:1;
    inset:0;
    pointer-events:none;
    background:linear-gradient(90deg,rgba(6,6,10,.9) 0%,rgba(6,6,10,.55) 40%,rgba(6,6,10,.08) 72%),linear-gradient(0deg,rgba(6,6,10,.75),transparent 55%);
  }
  .desktop-featured-media { background:var(--color-surface-hover); }
  .desktop-featured-media video,.desktop-featured-media img { width:100%; height:100%; display:block; object-fit:cover; }
  .desktop-featured-copy { position:absolute; z-index:2; left:var(--featured-content-left); bottom:clamp(25px,5vh,46px); width:min(580px,78%); }
  .desktop-featured-badge { width:max-content; padding:8px 15px 8px 12px; display:flex; align-items:center; gap:8px; border-radius:999px; background:rgba(255,255,255,.15); color:var(--color-on-accent); font-size:16px; font-weight:700; letter-spacing:.005em; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
  .desktop-featured-badge svg { width:18px; height:18px; fill:var(--color-accent); stroke:none; }
  .desktop-gallery .desktop-featured-hero { height:clamp(340px,44vh,460px); }
  .desktop-gallery .desktop-featured-hero .desktop-featured-badge { font-size:13px; padding-top:6px; padding-bottom:6px; }
  .featured-hero-title { max-height:2.9em; margin:14px 0 7px; overflow:hidden; font:700 clamp(40px,5vw,76px)/.96 "Bricolage Grotesque","Hiragino Sans","Yu Gothic",system-ui,sans-serif; letter-spacing:-.035em; text-wrap:balance; }
  .desktop-featured-copy>p { max-width:46ch; max-height:3em; margin:0 0 15px; overflow:hidden; color:rgba(255,255,255,.76); font-size:15px; }
  .desktop-featured-author { width:max-content; margin-bottom:17px; display:flex; align-items:center; gap:9px; color:rgba(255,255,255,.86); font-size:14px; }
  .desktop-featured-author .avatar { width:28px; height:28px; border:1px solid rgba(255,255,255,.34); background:var(--color-surface-2); color:#fff; }
  .desktop-featured-actions { display:flex; gap:10px; }
  .desktop-featured-actions form { margin:0; }
  .desktop-featured-watch,.desktop-featured-save { height:40px; padding:0 17px; display:inline-flex; align-items:center; gap:7px; border:0; border-radius:999px; font:700 14px/1 "Figtree",system-ui,sans-serif; cursor:pointer; }
  .desktop-featured-watch { border:1px solid var(--desktop-action-border); background:var(--desktop-action-neutral); color:var(--desktop-action-text); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
  .desktop-featured-watch:hover { border-color:rgba(255,255,255,.22); background:var(--desktop-action-neutral-hover); color:#fff; }
  .desktop-featured-watch:active { border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.18); color:#fff; }
  .desktop-featured-save { border:1px solid var(--desktop-action-border); background:var(--desktop-action-neutral); color:var(--desktop-action-text); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
  .desktop-featured-save:hover { border-color:var(--color-border-strong); background:var(--color-surface-hover); color:var(--color-text); }
  .desktop-featured-save.active { border-color:var(--color-border-strong); background:var(--color-surface); color:var(--color-text); }
  .desktop-featured-save.active:hover { border-color:var(--color-accent); background:var(--color-surface-hover); color:var(--color-text); }
  .desktop-featured-save:active { border-color:var(--color-accent); background:var(--color-surface-2); color:var(--color-text); }
  .desktop-gallery .desktop-featured-hero .desktop-featured-save:not(.active) { border-color:rgba(255,255,255,.24); background:rgba(12,13,17,.6); color:#fff; }
  .desktop-gallery .desktop-featured-hero .desktop-featured-save:not(.active):hover { border-color:rgba(255,255,255,.38); background:rgba(12,13,17,.7); }
  .desktop-gallery .desktop-featured-hero .desktop-featured-save:not(.active):active { border-color:var(--color-accent); background:rgba(12,13,17,.76); }
  .desktop-header-shell .desktop-featured-watch:focus-visible,
  .desktop-header-shell .desktop-featured-save:focus-visible { outline:2px solid var(--color-accent); outline-offset:3px; }
  .desktop-featured-watch svg,.desktop-featured-save svg { width:17px; height:17px; }
  .desktop-featured-save svg { fill:none; stroke:currentColor; }
  .desktop-featured-save.active svg { color:var(--color-accent); fill:currentColor; stroke:currentColor; }
  .desktop-featured-arrow {
    position:absolute;
    z-index:4;
    top:50%;
    width:48px;
    height:48px;
    padding:0;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.18);
    border-radius:50%;
    background:rgba(12,13,17,.58);
    box-shadow:0 2px 12px rgba(0,0,0,.28);
    color:#fff;
    font:400 29px/1 system-ui,sans-serif;
    text-shadow:0 1px 3px rgba(0,0,0,.8);
    transform:translateY(-50%);
    cursor:pointer;
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
  }
  .desktop-featured-previous { left:24px; }
  .desktop-featured-next { right:24px; }
  .desktop-featured-arrow:hover { background:rgba(12,13,17,.72); }
  .desktop-featured-arrow:active { background:rgba(12,13,17,.84); }
  .desktop-featured-indicators {
    position:absolute;
    z-index:5;
    left:calc(var(--featured-content-left) + 240px);
    bottom:calc(clamp(25px,5vh,46px) + 16px);
    display:flex;
    align-items:center;
    gap:0;
  }
  .desktop-gallery .desktop-featured-hero .desktop-featured-indicators {
    left:auto;
    right:28px;
    bottom:calc(clamp(25px,5vh,46px) - 2px);
  }
  .desktop-featured-indicator {
    position:relative;
    width:20px;
    height:44px;
    min-width:20px;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    cursor:pointer;
    transition:width 180ms ease;
  }
  .desktop-featured-indicator::before {
    content:"";
    position:absolute;
    left:5px;
    top:17px;
    width:10px;
    height:10px;
    border-radius:999px;
    background:#fffaf2;
    opacity:.6;
  }
  .desktop-featured-indicator.is-active { width:46px; }
  .desktop-featured-indicator.is-active::before { width:36px; background:rgba(255,255,255,.34); opacity:1; }
  .desktop-featured-progress { position:absolute; left:5px; top:17px; width:36px; height:10px; overflow:hidden; border-radius:999px; background:var(--color-surface); transform:scaleX(0); transform-origin:left center; }
  .desktop-featured-indicator:not(.is-active) .desktop-featured-progress { display:none; }
  .desktop-header-shell .desktop-featured-arrow:focus-visible,
  .desktop-header-shell .desktop-featured-indicator:focus-visible { outline:2px solid #fff; outline-offset:3px; }

  @media (prefers-reduced-motion:reduce) {
    .desktop-featured-slide,.desktop-featured-slide.is-active { transition:opacity 40ms linear; }
    .desktop-featured-indicator { transition:none; }
    .desktop-featured-progress { display:none; }
  }

  .focus-actions .focus-action,
  .focus-detail-slot .focus-detail {
    border-color:var(--desktop-action-border);
    background:var(--desktop-action-neutral);
    color:var(--desktop-action-text);
  }
  .focus-actions .focus-action:hover,
  .focus-detail-slot .focus-detail:hover {
    border-color:rgba(255,255,255,.22);
    background:var(--desktop-action-neutral-hover);
    color:#fff;
  }
  .focus-actions .focus-action:focus-visible,
  .focus-detail-slot .focus-detail:focus-visible {
    border-color:var(--desktop-action-border);
    background:var(--desktop-action-neutral);
    color:var(--desktop-action-text);
    outline:2px solid var(--desktop-action-active);
    outline-offset:2px;
  }
  .focus-actions .focus-action.focus-like.active,
  .focus-actions .focus-action.focus-sound.active {
    border-color:var(--desktop-action-active);
    background:var(--desktop-action-active);
    color:var(--desktop-action-active-text);
  }
  .focus-actions .focus-action.focus-like.active:hover,
  .focus-actions .focus-action.focus-sound.active:hover {
    border-color:#ff7a32;
    background:#ff7a32;
    color:var(--desktop-action-active-text);
  }
  .focus-actions .focus-action.focus-sound:not(.active) {
    border-color:var(--desktop-action-border);
    background:var(--desktop-action-neutral);
    box-shadow:none;
    color:var(--desktop-action-text);
  }
  .focus-actions .focus-action.focus-sound:not(.active):hover {
    border-color:rgba(255,255,255,.22);
    background:var(--desktop-action-neutral-hover);
    color:#fff;
  }
  .focus-actions .focus-action.focus-sound:not(.active):focus-visible {
    border-color:rgba(255,255,255,.24);
    background:var(--desktop-action-neutral-hover);
    color:#fff;
    outline-color:rgba(255,255,255,.72);
  }
  .focus-actions .focus-action.focus-sound:not(.active):disabled {
    border-color:var(--desktop-action-border);
    background:var(--desktop-action-neutral);
    color:var(--desktop-action-text);
  }
  .focus-actions .focus-action.focus-save.active {
    border-color:rgba(255,255,255,.24);
    background:var(--desktop-action-neutral-hover);
    color:#fff;
  }
  .focus-actions .focus-action.focus-save.active:hover {
    border-color:rgba(255,255,255,.3);
    background:rgba(255,255,255,.18);
    color:#fff;
  }
  .focus-actions .focus-action.focus-save:focus-visible {
    border-color:rgba(255,255,255,.24);
    background:var(--desktop-action-neutral-hover);
    color:#fff;
    outline-color:rgba(255,255,255,.72);
  }
  .focus-actions .focus-action.focus-like.active svg,
  .focus-actions .focus-action.focus-save.active svg { fill:currentColor; stroke:currentColor; }
  .focus-actions .focus-action.focus-comments,
  .focus-detail-slot .focus-detail {
    border-color:var(--desktop-action-border);
    background:var(--desktop-action-neutral);
    color:var(--desktop-action-text);
  }
  .focus-actions .focus-action:disabled { opacity:.58; cursor:wait; }

  .desktop-header-shell .search-overlay { color:var(--color-text); }
  .desktop-header-shell .search-dialog,
  .desktop-header-shell .search-dialog-head,
  .desktop-header-shell .search-results { background:var(--color-surface-hover); border-color:var(--color-border); }
  .desktop-header-shell .search-input-wrap,
  .desktop-header-shell input,
  .desktop-header-shell textarea,
  .desktop-header-shell select,
  .desktop-header-shell .auth-card,
  .desktop-header-shell .form-card,
  .desktop-header-shell .explore-live-search,
  .desktop-header-shell .explore-page .category-filters a,
  .desktop-header-shell .explore-search-row .surprise-me-btn,
  .desktop-header-shell .author-result,
  .desktop-header-shell .empty-state.explore-empty {
    border-color:var(--color-border);
    background:var(--color-surface-hover);
    color:var(--color-text);
  }
  .desktop-header-shell .button.secondary { border-color:var(--color-border-strong); background:var(--color-surface-2); color:var(--color-text); }
  .desktop-header-shell .page-head,.desktop-header-shell .activity-head { border-color:var(--color-border); }
  .desktop-header-shell .muted,.desktop-header-shell .form-help,.desktop-header-shell .explore-page-heading p { color:var(--color-text-muted); }
  .desktop-header-shell .submit-page>p,
  .desktop-header-shell .submit-page>ol,
  .desktop-header-shell .submit-page>ul,
  .desktop-header-shell .tutorial-page .lead,
  .desktop-header-shell .tutorial-page figcaption { color:var(--muted); }
  .desktop-header-shell .search-page .search-bar>button {
    background:var(--accent);
    color:#fff;
    cursor:pointer;
    transition:background-color 140ms ease,opacity 140ms ease,transform 100ms ease;
  }
  .desktop-header-shell .search-page .search-bar>button:hover { background:var(--color-accent-hover); color:#fff; }
  .desktop-header-shell .search-page .search-bar>button:focus-visible { background:var(--color-accent-hover); color:#fff; outline:2px solid var(--color-accent-hover); outline-offset:2px; }
  .desktop-header-shell .search-page .search-bar>button:active { background:#e85b0e; color:#fff; transform:translateY(1px); }
  .desktop-header-shell .search-page .search-bar>button:disabled { background:rgba(255,107,26,.45); color:rgba(255,255,255,.72); cursor:not-allowed; opacity:1; transform:none; }
  .desktop-header-shell :focus-visible { outline-color:var(--color-accent); }
}

@media (min-width:761px) and (max-width:1100px) {
  .desktop-header-shell .header-inner { grid-template-columns:205px minmax(0,1fr) auto; padding-inline:14px; gap:4px; }
  .desktop-header-shell .normal-brand strong { font-size:12.5px; }
  .desktop-header-shell .normal-brand strong::before { width:18px; height:18px; margin-right:5px; }
  .desktop-header-shell .brand small { margin-left:23px; }
  .desktop-header-gallery-tabs a { padding-inline:9px; font-size:13px; }
  .desktop-header-shell .header-actions { gap:5px; }
  .desktop-header-create { padding-inline:12px; }
  .desktop-gallery .app-main { padding-inline:20px; }
}

@media (min-width:1280px) {
  .desktop-header-shell .header-actions>.header-icon:first-child { width:210px; padding:0 14px; display:flex; gap:9px; justify-content:flex-start; border-radius:999px; }
  .desktop-header-shell .header-actions>.header-icon:first-child::after { content:"Search cinemagraphs"; color:var(--color-text-muted); font-size:13px; white-space:nowrap; }
}
@media (min-width:1200px) {
  .desktop-header-gallery-tabs a { font-size:15px; }
}

@media (min-width:761px) and (prefers-reduced-motion:reduce) {
  .desktop-card-save,.desktop-gallery .work-media,.sidebar-explore-panel,.desktop-header-create svg { transition:none!important; }
}
@media (max-width:600px) {
  .desktop-header-gallery-tabs { display:none; }
}
@media (min-width:760px) {
  .desktop-gallery .gallery-grid,.desktop-shell .portfolio-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:1000px) {
  .desktop-gallery .gallery-grid,.desktop-shell .portfolio-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (min-width:1200px) {
  .desktop-gallery .gallery-grid,.desktop-shell .portfolio-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (min-width:2200px) {
  .desktop-gallery .gallery-grid,.desktop-shell .portfolio-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
}

/* Gallery metadata: keep the existing DOM/actions and mobile flow intact.
   Flatten only noninteractive wrappers; title links retain their own boxes. */
@media (min-width:601px) {
  .desktop-header-shell { --desktop-sidebar-width:236px; }
  .desktop-header-shell .header-actions { min-width:0; flex:none; }
  .desktop-header-shell .header-actions > * { flex:none; }
  .desktop-header-shell [data-search-open]:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
  .desktop-shell .work-card .work-copy {
    position:relative;
    display:grid;
    grid-template-columns:28px minmax(0,1fr) auto auto auto;
    grid-template-rows:30px 30px;
    align-items:center;
    gap:6px;
    padding-top:11px;
    min-width:0;
  }
  .desktop-shell .work-card div.work-title,
  .desktop-shell .work-card .work-byline,
  .desktop-shell .work-card .saved-meta-left,
  .desktop-shell .work-card .saved-meta-right { display:contents; }
  .desktop-shell .work-card a.work-title,
  .desktop-shell .work-card div.work-title > .work-title-text {
    grid-column:1 / -1;
    grid-row:1;
    min-width:0;
    padding-right:38px;
    font-size:15px;
    font-weight:650;
    line-height:1.3;
  }
  .desktop-shell .work-card div.work-title > .work-title-text { display:block; }
  .desktop-shell .work-card .work-copy:has(.work-title-star) div.work-title > .work-title-text { padding-right:64px; }
  .desktop-shell .work-card .work-title-star { width:17px; height:17px; flex:none; }
  .desktop-shell .work-card .work-title-star { position:absolute; top:17.5px; right:40px; margin:0; }
  .desktop-shell .work-card .author-avatar { grid-column:1; grid-row:2; min-height:32px; align-items:center; }
  .desktop-shell .work-card .author-avatar .avatar { width:28px; height:28px; border-radius:50%; }
  .desktop-shell .work-card .author-username {
    grid-column:2;
    grid-row:2;
    min-width:0;
    font-size:14px;
    font-weight:500;
    line-height:30px;
  }
  .desktop-shell .work-card .card-view-count,
  .desktop-shell .work-card .card-comment-count {
    grid-row:2;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:max-content;
    min-height:32px;
    padding:0;
    gap:3px;
    color:var(--color-text-muted);
    font-size:13px;
    font-weight:500;
    line-height:1;
    white-space:nowrap;
  }
  .desktop-shell .work-card .card-view-count { grid-column:3; }
  .desktop-shell .work-card .card-comment-count { grid-column:4; min-width:32px; }
  .desktop-shell .work-card .card-view-count svg,
  .desktop-shell .work-card .card-comment-count svg { width:16px; height:16px; flex:none; }
  .desktop-shell .work-card .coub-label { grid-column:5; grid-row:2; min-width:32px; min-height:32px; margin:0; transform:none; justify-self:end; display:flex; align-items:center; justify-content:center; }
  .desktop-shell .work-card .card-menu { position:absolute; top:10px; right:0; margin:0; }
  .desktop-shell .work-card .card-menu summary { width:32px; height:32px; }
  .desktop-shell .work-card .card-menu > div { top:32px; }
  /* Saved cards also keep their existing date, beside the title/actions. */
  .desktop-shell .work-card .work-byline time { position:absolute; top:10px; right:38px; max-width:64px; overflow:hidden; text-overflow:ellipsis; line-height:32px; }
  .desktop-shell .work-card .work-copy:has(time) a.work-title { padding-right:108px; }
  .desktop-shell .work-card .work-copy:has(time):has(.work-title-star) a.work-title { padding-right:134px; }
  .desktop-shell .work-card .work-copy:has(.work-title-star) time { right:64px; }
  .desktop-shell .work-card a:focus-visible,
  .desktop-shell .work-card summary:focus-visible,
  .desktop-shell .work-card button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:3px; }
}
@media (min-width:1200px) {
  .desktop-header-gallery-tabs a { font-size:16px; }
}

/* Reuse the mobile brand states and scroll handoff in the desktop brand column. */
@media (min-width:601px) {
  .desktop-header-shell .header-inner>.brand {
    align-items:center;
    justify-content:center;
    text-align:center;
  }
  .desktop-header-shell .header-inner>.brand>.normal-brand,
  .desktop-header-shell .header-inner>.brand>.scrolled-brand {
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
  }
  .desktop-header-shell .app-header:not(.is-scrolled) .normal-brand {
    opacity:1;
    visibility:visible;
    transform:translateY(0) scale(1);
  }
  .desktop-header-shell .app-header:not(.is-scrolled) .scrolled-brand {
    opacity:0;
    visibility:hidden;
    transform:translateY(8px) scale(.98);
  }
  .desktop-header-shell .app-header.is-scrolled .normal-brand {
    opacity:0;
    visibility:hidden;
    transform:translateY(-7px) scale(.975);
  }
  .desktop-header-shell .app-header.is-scrolled .scrolled-brand {
    opacity:1;
    visibility:visible;
    transform:translateY(0) scale(1);
  }
}
@media (min-width:761px) {
  .desktop-header-shell .header-inner>.brand>.normal-brand,
  .desktop-header-shell .header-inner>.brand>.scrolled-brand {
    align-items:center;
    text-align:center;
  }
  .desktop-header-shell .normal-brand strong::before { content:none; }
  .desktop-header-shell .normal-brand .brand-heart { display:block; }
  .desktop-header-shell .scrolled-brand,
  .desktop-header-shell .compact-wordmark,
  .desktop-header-shell .wordmark-base { color:var(--color-text); }
  .desktop-header-shell .brand-infinity-track { stroke:rgba(238,234,228,.58); }
}
/* Keep both desktop brand states left aligned; share the mobile scroll handoff. */
@media (min-width:761px) {
  .desktop-header-shell .header-inner>.brand>.normal-brand {
    align-items:flex-start;
    text-align:left;
  }
  .desktop-header-shell .header-inner>.brand>.scrolled-brand {
    justify-content:flex-start;
    text-align:left;
    font-family:"Bricolage Grotesque",system-ui,sans-serif;
    font-size:22px;
  }
  .desktop-header-shell .scrolled-brand .color-letter {
    -webkit-text-stroke:0;
    text-shadow:none;
  }
  .desktop-header-shell .scrolled-brand .brand-infinity {
    width:30px;
    height:17px;
    margin-left:6px;
  }
}
/* Only the navigation scrolls when five readable labels no longer fit. */
@media (min-width:601px) and (max-width:899px) {
  .desktop-header-gallery-tabs {
    padding-inline:clamp(8px,1.5vw,14px);
    grid-template-columns:repeat(5,minmax(88px,1fr));
  }
}

/* Ordered sidebar navigation, expandable categories, guides and footer. */
@media (min-width:601px) {
  .desktop-shell .desktop-sidebar {
    padding:18px 12px 16px 16px;
    display:flex!important;
    flex-direction:column;
    gap:0;
  }
  .desktop-sidebar-nav { display:grid; gap:4px; }
  .desktop-sidebar-row {
    width:100%;
    min-width:0;
    min-height:44px;
    padding:0 13px;
    display:flex;
    align-items:center;
    gap:12px;
    border:0;
    border-radius:11px;
    background:transparent;
    color:var(--text);
    font:inherit;
    font-size:14px;
    font-weight:600;
    line-height:1;
    text-align:left;
    cursor:pointer;
  }
  .desktop-sidebar-row > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .desktop-sidebar-row > svg { width:20px; height:20px; flex:none; }
  .desktop-sidebar-row:hover,.desktop-sidebar-row:focus-visible { background:var(--color-surface-hover); }
  .desktop-sidebar-row:focus-visible,.sidebar-explore-list a:focus-visible,.desktop-create:focus-visible,.desktop-education a:focus-visible,.desktop-sidebar-footer a:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
  .desktop-sidebar-row.active { background:var(--active-soft); color:var(--accent); }
  .sidebar-explore { margin-top:12px; flex:none; }
  .sidebar-explore-toggle .sidebar-explore-chevron { width:15px; height:15px; margin-left:auto; }
  .sidebar-explore.is-ready .sidebar-explore-chevron { transition:transform 190ms ease; }
  .sidebar-explore.is-open .sidebar-explore-chevron,
  html.sidebar-explore-preopen .sidebar-explore .sidebar-explore-chevron { transform:rotate(90deg); }
  .sidebar-explore-panel { max-height:0; overflow:hidden; visibility:hidden; }
  .sidebar-explore.is-ready .sidebar-explore-panel { transition:max-height 190ms ease,visibility 0s linear 190ms; }
  .sidebar-explore.is-open .sidebar-explore-panel,
  html.sidebar-explore-preopen .sidebar-explore .sidebar-explore-panel { max-height:620px; visibility:visible; }
  .sidebar-explore.is-ready.is-open .sidebar-explore-panel { transition:max-height 190ms ease,visibility 0s linear; }
  .sidebar-explore-list { min-height:0; overflow:hidden; display:grid; gap:0; padding:9px 0 4px; }
  .sidebar-explore-list a { min-width:0; min-height:30px; padding:0 11px 0 45px; display:flex; align-items:center; gap:8px; border-radius:9px; color:var(--color-text-muted); font-size:12px; font-weight:550; }
  .sidebar-explore-list a:hover { background:var(--color-surface-hover); color:var(--text); }
  .sidebar-explore-list a.active { background:color-mix(in srgb,var(--active-soft) 62%,var(--sidebar-surface)); color:var(--accent); font-weight:600; }
  .sidebar-explore-list a > span { min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .sidebar-explore-list a > small { width:29px; min-width:29px; flex:none; color:color-mix(in srgb,var(--text) 20%,var(--muted)); font-size:11px; font-weight:600; line-height:1; text-align:right; }
  .sidebar-explore-list a.active > small { color:var(--accent); opacity:.76; }
  .desktop-sidebar > .desktop-create { width:100%; min-height:46px; margin-top:10px; flex:none; }
  .desktop-sidebar > .desktop-create:active { filter:brightness(.91); }
  .desktop-education { margin-top:12px; padding-top:10px; display:grid; gap:5px; flex:none; border-top:1px solid var(--chrome-line); }
  .desktop-education a { min-width:0; min-height:40px; padding:0 4px; display:flex; align-items:center; gap:2px; border-radius:9px; color:color-mix(in srgb,var(--text) 42%,var(--muted)); font-size:10.5px; font-weight:600; line-height:1.2; }
  .desktop-education a:hover,.desktop-education a[aria-current="page"] { background:var(--color-surface-hover); color:var(--text); }
  .desktop-education a > span { min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .desktop-education a > svg { width:10px; height:10px; flex:none; }
  .desktop-sidebar-footer { margin-top:auto; padding:24px 10px 2px; flex:none; color:var(--color-text-muted); font-size:11px; line-height:1.3; white-space:nowrap; }
  .desktop-sidebar-footer a:hover { color:var(--accent); }
  @media(prefers-reduced-motion:reduce) {
    .sidebar-explore-panel,.sidebar-explore-toggle .sidebar-explore-chevron { transition:none!important; }
  }
}

/* Keep the redesign authoritative after the legacy desktop rules above. */
@media (min-width:601px) and (max-width:760px) {
  .desktop-shell .desktop-sidebar-redesign { display:none!important; }
}
@media (min-width:761px) {
  .desktop-shell .desktop-sidebar-redesign { display:flex!important; }
  .desktop-shell .desktop-sidebar-legacy { display:none!important; }
  .desktop-header-shell { --desktop-sidebar-width:76px; }
  .desktop-shell .desktop-sidebar {
    top:calc(64px + env(safe-area-inset-top,0px));
    width:76px;
    padding:14px 9px;
    gap:0;
    overflow:visible;
    background:var(--color-bg);
    border-right:1px solid var(--color-border);
  }
  .desktop-sidebar-nav { display:flex; flex-direction:column; gap:6px; }
  .desktop-sidebar-row,
  .desktop-sidebar-redesign a.sidebar-explore-link {
    width:56px;
    min-height:58px;
    padding:8px 3px 7px;
    flex-direction:column;
    justify-content:center;
    gap:4px;
    border-radius:14px;
    background:transparent;
    color:var(--color-text-muted);
    font-size:11px;
    font-weight:500;
    line-height:1;
    text-align:center;
  }
  .desktop-sidebar-row>span { overflow:visible; }
  .desktop-sidebar-row>svg { width:21px; height:21px; }
  .desktop-sidebar-row:hover,.desktop-sidebar-row:focus-visible,
  .desktop-sidebar-redesign a.sidebar-explore-link:hover,.desktop-sidebar-redesign a.sidebar-explore-link:focus-visible { background:var(--color-surface-hover); color:var(--color-text); }
  .desktop-sidebar-row.active,
  .desktop-sidebar-redesign a.sidebar-explore-link.active { background:var(--color-accent-soft); color:var(--color-text); }
  .desktop-sidebar-row.active>svg { color:var(--color-accent); }
  .sidebar-explore { position:relative; margin:0; flex:none; }
  .sidebar-explore-panel,
  .sidebar-explore.is-open .sidebar-explore-panel,
  html.sidebar-explore-preopen .sidebar-explore .sidebar-explore-panel {
    position:absolute;
    top:0;
    left:66px;
    width:260px;
    max-height:min(620px,calc(100vh - 104px));
    padding:12px;
    overflow:auto;
    visibility:hidden;
    opacity:0;
    transform:translateX(-6px);
    pointer-events:none;
  }
  .sidebar-explore.is-ready .sidebar-explore-panel { transition:opacity 180ms ease,transform 180ms ease,visibility 0s linear 180ms; }
  .sidebar-explore.is-open .sidebar-explore-panel {
    max-height:min(620px,calc(100vh - 104px));
    visibility:visible;
    opacity:1;
    transform:none;
    pointer-events:auto;
    transition:opacity 180ms ease,transform 180ms ease,visibility 0s linear;
  }
  .sidebar-explore-list { padding:0; display:grid; gap:2px; overflow:visible; }
  .sidebar-explore-list a { min-height:36px; padding:0 9px; border-radius:9px; color:var(--color-text-secondary); font-size:13px; }
  .sidebar-explore-list a:hover { background:var(--color-surface-hover); color:var(--color-text); }
  .sidebar-explore-list a.active { background:var(--color-accent-soft); color:var(--color-accent-hover); }
  .sidebar-explore-list a>small { color:var(--color-text-muted); }
  .desktop-learn { position:relative; margin-top:16px; }
  .desktop-learn-panel { position:absolute; left:66px; bottom:0; width:255px; padding:10px; }
  .desktop-shell .app-main { width:calc(100% - 76px); margin-left:76px; }
  .desktop-gallery .app-main { padding:20px 28px 40px; }
  .desktop-gallery .feed-page-heading { padding:0 2px; }
  .desktop-gallery .feed-page-heading+.gallery-grid { padding-top:20px; }
  .desktop-gallery .gallery-grid,.desktop-shell .portfolio-grid { gap:27px 20px; }
  .desktop-shell .desktop-create,.desktop-education,.desktop-sidebar-footer { display:none; }

  .desktop-gallery .work-card a.work-title,
  .desktop-gallery .work-card div.work-title>.work-title-text {
    color:var(--color-text);
    font-size:15px;
    font-weight:600;
    line-height:1.3;
  }
  .desktop-gallery .work-card .author-username {
    min-height:32px;
    display:flex;
    align-items:center;
    color:var(--color-text-secondary);
    font-size:13px;
    font-weight:500;
    line-height:1.2;
  }
  .desktop-gallery .work-card .card-view-count,
  .desktop-gallery .work-card .card-comment-count,
  .desktop-gallery .work-card .work-byline time {
    height:32px;
    color:var(--color-text-muted);
    font-size:13px;
    line-height:1;
  }
  .desktop-gallery .work-card .coub-label,
  .desktop-gallery .work-card .card-menu summary {
    width:32px;
    height:32px;
    min-height:32px;
    display:grid;
    place-items:center;
  }
}
@media (min-width:761px) and (max-width:1100px) {
  .desktop-gallery .app-main { padding-inline:20px; }
}

/* One horizontal rule set keeps both arrows equally spaced from the post column. */
@media (min-width:601px) and (max-width:760px) {
  .desktop-shell:not(.desktop-gallery) .permalink-side-nav .permalink-side-prev {
    left:calc(var(--desktop-sidebar-width) + 70px);
  }
  .desktop-shell:not(.desktop-gallery) .permalink-side-nav .permalink-side-next {
    right:38px;
  }
}
@media (min-width:761px) and (max-width:1199px) {
  .desktop-shell:not(.desktop-gallery) .permalink-side-nav .permalink-side-prev {
    left:max(calc(var(--desktop-sidebar-width) + 40px), calc((100vw + var(--desktop-sidebar-width)) / 2 - 468px));
  }
  .desktop-shell:not(.desktop-gallery) .permalink-side-nav .permalink-side-next {
    right:max(40px, calc((100vw - var(--desktop-sidebar-width)) / 2 - 468px));
  }
}
@media (min-width:1200px) {
  .desktop-shell:not(.desktop-gallery) .permalink-side-nav .permalink-side-prev {
    /* 960px column, 60px arrow, and a 30px exterior gap. */
    left:calc((100vw + var(--desktop-sidebar-width)) / 2 - 570px);
  }
  .desktop-shell:not(.desktop-gallery) .permalink-side-nav .permalink-side-next {
    right:calc((100vw - var(--desktop-sidebar-width)) / 2 - 570px);
  }
}

/* Native permalink navigation remains immediate; directional motion is press feedback only. */
@media (min-width:601px) and (prefers-reduced-motion:no-preference) {
  .desktop-shell:not(.desktop-gallery) .permalink-side-nav a {
    transition:transform 120ms cubic-bezier(.2,.8,.3,1);
  }
  .desktop-shell:not(.desktop-gallery) .permalink-side-nav a.permalink-side-prev:active {
    transform:translate3d(-5px,-50%,0) scale(.97);
  }
  .desktop-shell:not(.desktop-gallery) .permalink-side-nav a.permalink-side-next:active {
    transform:translate3d(5px,-50%,0) scale(.97);
  }
}
@media (min-width:601px) and (prefers-reduced-motion:reduce) {
  .desktop-shell:not(.desktop-gallery) .permalink-side-nav a:active {
    transform:translateY(-50%);
  }
}

/* Standalone work information hierarchy on the selected desktop surface. */
@media (min-width:761px) {
  .desktop-shell:not(.desktop-gallery) .work-detail .detail-heading h1 {
    color:var(--color-text);
  }
  .desktop-shell:not(.desktop-gallery) .work-detail .work-categories {
    min-width:0;
  }
  .desktop-shell:not(.desktop-gallery) .work-detail .work-categories a {
    max-width:100%;
    padding-inline:13px;
    overflow-wrap:anywhere;
    white-space:normal;
    border-color:var(--color-border-strong);
    background:var(--color-surface-2);
    color:var(--color-text-secondary);
    box-shadow:none;
  }
  .desktop-shell:not(.desktop-gallery) .work-detail .work-categories a:hover {
    border-color:var(--color-border-strong);
    background:var(--color-surface-hover);
    color:var(--color-text);
  }
  .desktop-shell:not(.desktop-gallery) .work-detail .work-categories a:focus-visible {
    outline:2px solid var(--color-text);
    outline-offset:3px;
    border-color:var(--color-border-strong);
    background:var(--color-surface-hover);
    color:var(--color-text);
  }
  .desktop-shell:not(.desktop-gallery) .permalink-page .work-detail .detail-caption {
    margin:14px 0 0;
    color:var(--color-text-secondary);
    font-size:16px;
    line-height:1.6;
    font-weight:400;
  }
  .desktop-shell:not(.desktop-gallery) .work-detail .work-categories + .detail-caption {
    margin-top:13px;
  }
  .desktop-shell:not(.desktop-gallery) .work-detail .detail-caption a {
    color:var(--color-text-muted);
  }
  .desktop-shell:not(.desktop-gallery) .work-detail .detail-caption a:hover,
  .desktop-shell:not(.desktop-gallery) .work-detail .detail-caption a:focus-visible {
    color:var(--color-text);
  }
  .desktop-shell:not(.desktop-gallery) .work-detail > .detail-author .author-username {
    color:var(--color-text-secondary);
  }
  .desktop-shell:not(.desktop-gallery) .work-detail > .detail-author time,
  .desktop-shell:not(.desktop-gallery) .work-detail > .detail-author .author-separator {
    color:var(--color-text-muted);
  }
}

/* Desktop search is a bounded panel over a restrained theme-aware scrim. */
@media (min-width:761px) {
  .desktop-header-shell .search-overlay {
    top:var(--header-h);
    right:0;
    bottom:0;
    left:0;
    z-index:55;
    padding:28px 32px;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    background:var(--color-overlay);
    color:var(--color-text);
    backdrop-filter:blur(20px) saturate(112%);
    -webkit-backdrop-filter:blur(20px) saturate(112%);
  }
  .desktop-header-shell .search-dialog {
    width:min(920px,calc(100vw - 64px));
    height:min(720px,calc(100dvh - var(--header-h) - 56px));
    min-height:360px;
    max-height:720px;
    overflow:hidden;
    border:1px solid var(--color-border-strong);
    border-radius:20px;
    background:var(--color-surface);
    box-shadow:var(--shadow-popover);
  }
  .desktop-header-shell .search-dialog-head {
    padding:12px 16px;
    background:var(--color-surface);
  }
  .desktop-header-shell .search-results {
    padding:8px 24px 24px;
    background:var(--color-surface);
  }
  .desktop-header-shell .search-group { padding-top:18px; }
}
/* Compact footer follows the existing desktop content gutters. */
@media (min-width:761px) {
  .desktop-header-shell .app-main:has(>.desktop-site-footer) { padding-bottom:16px; }
  .desktop-header-shell .desktop-site-footer {
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:12px 24px;
    margin-top:8px;
    padding-top:12px;
    border-top:1px solid var(--color-border);
    color:var(--color-text-secondary);
    font-size:14px;
    line-height:1.5;
    text-align:left;
  }
  .desktop-site-footer nav { display:flex; flex-wrap:wrap; gap:8px 24px; }
  .desktop-site-footer a {
    display:inline-flex;
    align-items:center;
    min-height:32px;
    color:inherit;
    font-weight:500;
    text-decoration:none;
    text-underline-offset:4px;
  }
  .desktop-site-footer a:hover { text-decoration:underline; }
  .desktop-site-footer a:focus-visible { outline:2px solid var(--color-text); outline-offset:3px; border-radius:2px; }
}
/* Homepage-only density: keep cards at least 240px wide and retain existing gaps. */
@media (min-width:761px) {
  .desktop-gallery .work-card .coub-label { display:none; }
  .desktop-gallery .work-card .work-copy { grid-template-columns:28px minmax(0,1fr) auto auto; }
  .desktop-gallery .work-card .work-copy:not(:has(.card-comment-count)) { grid-template-columns:28px minmax(0,1fr) auto; }
}
@media (min-width:1440px) {
  .desktop-gallery .gallery-grid.home-gallery {
    grid-template-columns:repeat(5,minmax(240px,1fr));
  }
}
@media (min-width:1800px) {
  .desktop-gallery .gallery-grid.home-gallery {
    grid-template-columns:repeat(6,minmax(240px,1fr));
  }
}
/* Large desktop homepage: quieter hero typography and a tighter Recent transition. */
@media (min-width:1440px) {
  .desktop-gallery .desktop-featured-hero .featured-hero-title {
    font-size:clamp(40px,4.375vw,66.5px);
  }
  .desktop-gallery .desktop-featured-hero + .feed-page-heading {
    margin-top:20px;
  }
}

/* Keep desktop chrome visible; the scroll class only changes branding. */
@media (min-width:761px) {
  .desktop-header-shell .app-header,
  .desktop-header-shell .app-header.is-scrolled {
    position:fixed;
    top:env(safe-area-inset-top,0px);
    left:0;
    right:0;
    width:100%;
    max-width:none;
    transform:none;
    opacity:1;
    visibility:visible;
  }
}
/* Preserve the existing overflow layout on narrower desktop screens. */
@media (min-width:761px) and (max-width:1279px) {
  .desktop-header-shell .app-header.is-scrolled .header-inner {
    width:100%;
    max-width:none;
    margin-inline:auto;
    padding-inline:28px;
    grid-template-columns:minmax(300px,1fr) minmax(0,max-content) minmax(300px,1fr);
    column-gap:12px;
  }
  .desktop-header-shell .app-header.is-scrolled .desktop-header-gallery-tabs {
    overflow-x:auto;
    overflow-y:hidden;
  }
}
/* Share the same three zones in both desktop brand states. */
@media (min-width:1280px) {
  .desktop-header-shell .app-header .header-inner {
    width:100%;
    max-width:none;
    margin-inline:0;
    padding-inline:28px;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    column-gap:12px;
  }
  .desktop-header-shell .app-header .header-inner>.brand {
    justify-self:start;
  }
  .desktop-header-shell .app-header .desktop-header-gallery-tabs {
    justify-self:center;
    /* Retain navigation scrolling when expanded search and account controls need space. */
    max-width:calc(100vw - 1016px);
    overflow-x:auto;
    overflow-y:hidden;
  }
  .desktop-header-shell .app-header .header-actions {
    justify-self:end;
  }
}

/* Desktop homepage refinement. Keep all overrides above the mobile boundary. */
@media (min-width:761px) {
  .desktop-gallery:has(.home-gallery) .desktop-sidebar-row,
  .desktop-gallery:has(.home-gallery) .desktop-sidebar-redesign a.sidebar-explore-link {
    color:var(--color-text-secondary);
    font-size:13px;
    font-weight:600;
    line-height:1.2;
  }
  .desktop-gallery:has(.home-gallery) .sidebar-explore-list a { font-size:15px; }
  .desktop-gallery:has(.home-gallery) .desktop-popover-panel>strong { color:var(--color-text-secondary); font-size:13px; }
  .desktop-gallery .gallery-grid.home-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .desktop-gallery .home-gallery .work-copy { grid-template-rows:auto auto; align-content:start; row-gap:8px; }
  .desktop-gallery .home-gallery .work-card div.work-title>.work-title-text {
    font-size:18px;
    font-weight:650;
    line-height:1.35;
    white-space:normal;
    overflow:visible;
    overflow-wrap:anywhere;
    word-break:normal;
    text-wrap:pretty;
    align-self:start;
  }
  .desktop-gallery .home-gallery .work-card .author-username {
    color:var(--color-text-secondary);
    font-size:15px;
    font-weight:600;
    overflow-wrap:anywhere;
    white-space:normal;
    line-height:1.35;
  }
  .desktop-gallery .home-gallery .work-card .card-view-count,
  .desktop-gallery .home-gallery .work-card .card-comment-count {
    color:var(--color-text-secondary);
    font-size:14px;
  }
  .desktop-gallery:has(.home-gallery) .feed-page-heading p { color:var(--color-text-secondary); font-size:15px; }

  /* Intrinsic height lets unusually long titles grow instead of covering controls. */
  .desktop-gallery .desktop-featured-hero { height:auto; min-height:clamp(255px,33vh,345px); }
  .desktop-gallery .desktop-featured-slides { position:relative; min-height:inherit; }
  .desktop-gallery .desktop-featured-slide.is-active {
    position:relative;
    min-height:inherit;
    display:flex;
    align-items:flex-end;
  }
  .desktop-gallery .desktop-featured-copy {
    position:relative;
    left:auto;
    bottom:auto;
    width:min(680px,calc(100% - var(--featured-content-left) - 88px));
    margin-left:var(--featured-content-left);
    padding:20px 0 52px;
  }
  .desktop-gallery .desktop-featured-hero .featured-hero-title {
    max-height:none;
    margin:9px 0 8px;
    overflow:visible;
    overflow-wrap:anywhere;
    word-break:normal;
    font-size:clamp(32px,3vw,48px);
    line-height:1.1;
    letter-spacing:-.025em;
  }
  .desktop-gallery .desktop-featured-copy>p {
    max-height:none;
    margin-bottom:10px;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
    color:rgba(255,255,255,.9);
    font-size:16px;
    line-height:1.4;
  }
  .desktop-gallery .desktop-featured-author { max-width:100%; margin-bottom:12px; color:#fff; font-size:16px; }
  .desktop-gallery .desktop-featured-author>span:last-child { min-width:0; overflow-wrap:anywhere; }
  .desktop-gallery .desktop-featured-author .avatar { flex:none; }
  .desktop-gallery .desktop-featured-watch {
    height:44px;
    padding-inline:22px;
    border-color:rgba(255,255,255,.75);
    background:#f4f1ed;
    color:#17181d;
    font-size:15px;
    box-shadow:0 3px 14px rgba(0,0,0,.18);
  }
  .desktop-gallery .desktop-featured-watch:hover { background:#fff; color:#17181d; border-color:#fff; }
  .desktop-gallery .desktop-featured-watch:active { background:#dedbd7; color:#17181d; }
  .desktop-gallery .desktop-featured-save { height:44px; font-size:15px; }
  .desktop-gallery .desktop-featured-save.active,
  .desktop-gallery .desktop-featured-save.active:hover {
    border-color:var(--color-accent);
    background:rgba(12,13,17,.88);
    color:#ffab7a;
  }
  .desktop-gallery .desktop-featured-hero .desktop-featured-indicators {
    left:var(--featured-content-left);
    bottom:4px;
  }
  .desktop-gallery .home-gallery .desktop-card-save:has(.bookmark-button.active) {
    opacity:1;
    transform:none;
    border:1px solid var(--color-accent);
    background:rgba(12,13,17,.88);
    color:#ffab7a;
  }
}
@media (min-width:1000px) {
  .desktop-gallery .gallery-grid.home-gallery { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (min-width:1200px) {
  .desktop-gallery .gallery-grid.home-gallery { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (min-width:1440px) {
  .desktop-gallery .gallery-grid.home-gallery { grid-template-columns:repeat(5,minmax(0,1fr)); }
}

/* Keep tablet navigation inside its grid zone in both header states. */
@media(min-width:601px) and (max-width:1279px){
  .desktop-header-shell .app-header .desktop-header-gallery-tabs{max-width:100%;overflow-x:auto;overflow-y:hidden}
}
/* Preserve card metadata geometry while enlarging the menu hit area. */
@media(min-width:601px){
  .desktop-shell .work-card .card-menu>summary{width:44px;height:44px;min-width:44px;min-height:44px;margin:-6px}
  .desktop-header-shell .header-actions>.desktop-header-create{background:#c44808;color:#fff}
  .desktop-header-shell .header-actions>.desktop-header-create:hover,
  .desktop-header-shell .header-actions>.desktop-header-create:focus-visible{background:#a63b06!important;color:#fff}
}