/* Only the requested tabs and the separate mockup board. No card overrides. */
/* Keep the feed width fixed when an empty mode has no vertical scrollbar. */
html{scrollbar-gutter:stable}
.mode-tabs{--brand-red:#c74b43;display:flex;position:sticky;top:0;z-index:12;background:var(--paper);border-bottom:1px solid var(--line);margin:0 0 24px;transform:translateY(0);transition:transform 180ms ease}
.mode-tabs.is-collapsed{transform:translateY(calc(-100% - 1px));pointer-events:none}
.mode-tabs~.new-updates-chip{--updates-gap:18px;top:calc(var(--mode-tabs-height,56px) + var(--updates-gap));transition:top 180ms ease}
.mode-tabs.is-collapsed~.new-updates-chip{top:var(--updates-gap)}
.mode-tabs a{position:relative;flex:1 1 0;min-width:0;text-align:center;padding:15px 5px 17px;color:var(--muted);font:500 15px/1.4 Inter,"Segoe UI",Arial,sans-serif}
.mode-tab-label{position:relative;display:inline-block}
.mode-count{position:absolute;left:calc(100% + 4px);top:0;width:6px;height:6px;border-radius:50%;background:var(--brand-red)}
[data-theme=dark] .mode-tabs{--brand-red:#f0867b}
.mode-count[hidden]{display:none}
.mode-tabs a:focus-visible{outline:2px solid var(--green);outline-offset:-4px}
.mode-tabs a:hover{background:var(--surface);color:var(--ink)}
.mode-tabs a[aria-selected=true]{color:var(--ink);font-weight:650}
.mode-tabs a[aria-selected=true]::after{content:"";position:absolute;bottom:-1px;left:calc(50% - 26px);width:52px;height:3px;border-radius:3px;background:var(--green)}
.design-board{max-width:1510px;margin:auto;padding:30px 40px 60px}
.board-top{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 36px}
.board-top a{font-size:12px;color:var(--green)}
.board-title{font:400 35px/1.15 Georgia,serif;letter-spacing:-1.2px;margin:0 0 12px}
.board-intro{font-size:14px;color:var(--muted);max-width:760px;line-height:1.7}
.board-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:30px}
.board-panel{min-width:0}.board-panel h2{font-size:14px;margin:0 0 6px}.board-panel>p{color:var(--muted);font-size:12px;min-height:36px;margin:0 0 14px}
.board-panel iframe{width:100%;height:900px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);display:block}
.board-note{font-size:12px;color:var(--muted);margin-top:24px}

@media(max-width:680px){.mode-tabs a{font-size:13px;padding:12px 3px 15px}.mode-tabs~.new-updates-chip{--updates-gap:12px}.design-board{padding:24px 16px}.board-grid{grid-template-columns:1fr}.board-title{font-size:30px}}
@media(prefers-reduced-motion:reduce){.mode-tabs,.mode-tabs~.new-updates-chip{transition:none}}