:root { --bg: #101011; --bg-soft: #171718; --panel: #1E1E20; --panel-2: #262628; --ink: #F3F3F2; --muted: #A7A7AA; --dim: #858589; --line: rgba(255,255,255,.085); --line-strong: rgba(255,255,255,.15); --mint: #D0D0D2; --mint-ink: #1E1E20; --mint-soft: rgba(208, 208, 210, .11); --folder: #D0D0D2; --folder-soft: rgba(208, 208, 210, .12); --danger: #A7A7AA; --serif: "Fraunces", Georgia, serif; --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --mono: "IBM Plex Mono", ui-monospace, monospace; color-scheme: dark; } * { box-sizing: border-box; } html, body { min-height: 100%; } body { margin: 0; overflow: hidden; background: radial-gradient(circle at 78% -20%, rgba(208, 208, 210, .055), transparent 31rem), var(--bg); color: var(--ink); font-family: var(--sans); } button, input, textarea { font: inherit; } button, a { -webkit-tap-highlight-color: transparent; } [hidden] { display: none !important; } nav.nav { position: relative; z-index: 100; display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 12px; border-bottom: 1px solid var(--line); background: rgba(11, 11, 12, .88); } .nav-right { display: flex; align-items: center; gap: 7px; margin-left: auto; } .nav-action, .primary-button, .soft-button, .text-button, .icon-button, .danger-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; border: 1px solid transparent; border-radius: 10px; padding: 0 13px; color: var(--ink); text-decoration: none; cursor: pointer; font: 600 12px/1 var(--sans); white-space: nowrap; } .nav-action svg, .primary-button svg, .soft-button svg, .text-button svg, .icon-button svg { width: 16px; height: 16px; } .secondary-action, .soft-button { border-color: var(--line); background: rgba(255,255,255,.035); color: #D0D0D2; } .secondary-action:hover, .soft-button:hover { border-color: var(--line-strong); background: rgba(255,255,255,.065); color: #fff; } .primary-action, .primary-button { background: var(--mint); color: var(--mint-ink); box-shadow: inset 0 1px rgba(255,255,255,.35), 0 8px 24px rgba(133, 133, 137, .12); } .primary-action:hover, .primary-button:hover { background: #D0D0D2; } .library-profile { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(208, 208, 210, .35); border-radius: 50%; background: var(--mint-soft); color: var(--mint); text-decoration: none; font: 700 12px var(--sans); } .library-shell { /* One custom property drives the boundary: the grid track, the header gradient and the drag handle all read it, so a resize moves them together. --lib-side-w is only set (on ) once the reader has chosen a width; until then --lib-side-default rules, and it is what the breakpoints move. */ --lib-side-default: 244px; display: grid; grid-template-columns: var(--lib-side-w, var(--lib-side-default)) minmax(0, 1fr); height: calc(100dvh - 54px); } .library-sidebar { display: flex; flex-direction: column; min-width: 0; padding: 26px 15px 16px; overflow: hidden; border-right: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.018), transparent 38%), rgba(16, 16, 17, .75); } /* The grab zone sits outside the sidebar's box: .library-sidebar clips its own overflow and would cut the handle in half at the very edge it has to be draggable from. Fixed rather than absolute — the same idiom .library-main ::before already uses here — so the shell needs no containing block of its own and nothing else on the page changes what it positions against. */ .sidebar-resizer { position: fixed; top: 54px; bottom: 0; left: var(--lib-side-w, var(--lib-side-default)); z-index: 24; width: 11px; margin-left: -5px; cursor: col-resize; touch-action: none; } .sidebar-resizer::after { content: ""; position: absolute; top: 0; bottom: 0; left: 5px; width: 1px; background: transparent; transition: background .12s ease; } .sidebar-resizer:hover::after, .sidebar-resizer:focus-visible::after, .sidebar-resizer.dragging::after { background: var(--accent); } .sidebar-resizer:focus-visible { outline: none; } .sidebar-resizer:focus-visible::after { left: 4px; width: 3px; } /* Held for the whole drag so the cursor does not flicker back to a text caret the moment the pointer leaves the 11px handle, and so nothing selects. */ body.sidebar-resizing { cursor: col-resize; user-select: none; -webkit-user-select: none; } .sidebar-head { padding: 0 10px 22px; } .eyebrow { display: block; color: var(--dim); font: 650 9px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; } .sidebar-head h1 { margin: 8px 0 6px; font: 500 30px/1 var(--serif); letter-spacing: -.025em; } .sidebar-head p { margin: 0; color: var(--dim); font: 450 12px/1.5 var(--sans); } .library-sections { display: grid; gap: 3px; } .library-sections button, .project-list button { display: grid; grid-template-columns: 20px minmax(0,1fr) auto; align-items: center; gap: 9px; min-height: 40px; width: 100%; padding: 0 10px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; text-align: left; font: 550 12.5px/1 var(--sans); } .library-sections button svg, .project-list button > svg { width: 16px; height: 16px; color: var(--dim); } .library-sections button b, .project-list button b { min-width: 21px; color: var(--dim); font: 550 9px/1 var(--mono); text-align: right; } .library-sections button:hover, .project-list button:hover { background: rgba(255,255,255,.035); color: var(--ink); } .library-sections button.active, .project-list button.active { border-color: rgba(208, 208, 210, .16); background: var(--mint-soft); color: #F3F3F2; } .library-sections button.active svg, .project-list button.active > svg { color: var(--mint); } .projects-head { display: flex; align-items: center; justify-content: space-between; margin: 24px 7px 7px 10px; color: var(--dim); font: 650 9px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; } .projects-label { display: inline-flex; align-items: center; gap: 6px; } .projects-label svg { width: 13px; height: 13px; color: var(--folder); } .projects-label b { min-width: 18px; color: #A7A7AA; font: 550 8px/1 var(--mono); text-align: right; } .projects-head button { display: grid; place-items: center; width: 27px; height: 27px; padding: 0; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--dim); cursor: pointer; } .projects-head button:hover { border-color: var(--line); color: var(--ink); background: rgba(255,255,255,.035); } .projects-head svg { width: 14px; height: 14px; } .mobile-folder-toggle { display: none; } .project-search { display: flex; align-items: center; gap: 7px; min-height: 34px; margin: 0 5px 6px; padding: 0 9px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.022); } .project-search:focus-within { border-color: rgba(208, 208, 210, .32); background: var(--folder-soft); } .project-search svg { flex: 0 0 auto; width: 13px; height: 13px; color: var(--dim); } .project-search input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font: 500 10.5px/1 var(--sans); } .project-search input::placeholder { color: #5D5D62; } .project-list { display: grid; gap: 3px; min-height: 40px; overflow: auto; scrollbar-width: thin; } .project-list button { min-height: 46px; } .project-list button > svg { color: var(--folder); } .project-copy { display: grid; min-width: 0; gap: 4px; } .project-copy > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .project-copy > small { overflow: hidden; color: #68686E; font: 500 8.5px/1 var(--mono); text-overflow: ellipsis; white-space: nowrap; } .project-list button.active { border-color: rgba(208, 208, 210, .2); background: var(--folder-soft); } .project-list .empty-projects { padding: 11px 10px; color: #58585E; font: 500 11px/1.5 var(--sans); } .sidebar-foot { display: flex; align-items: flex-start; gap: 8px; margin-top: auto; padding: 13px 10px 0; border-top: 1px solid rgba(255,255,255,.055); color: #58585E; font: 500 9.5px/1.5 var(--sans); } .sidebar-foot svg { flex: 0 0 auto; width: 14px; height: 14px; color: #858589; } .library-main { min-width: 0; overflow: auto; padding: 38px clamp(24px, 3vw, 48px) 80px; scrollbar-width: thin; } .library-main::before { content: ""; position: fixed; inset: 54px 0 auto var(--lib-side-w, var(--lib-side-default)); z-index: -1; height: 190px; background: linear-gradient(180deg, rgba(255,255,255,.018), transparent); pointer-events: none; } .library-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; max-width: 1480px; margin: 0 auto 30px; } .library-head h2 { margin: 9px 0 7px; font: 500 clamp(30px, 3.4vw, 48px)/1.02 var(--serif); letter-spacing: -.035em; } .library-head p { max-width: 650px; margin: 0; color: var(--muted); font: 450 14px/1.55 var(--sans); } .head-actions { display: flex; gap: 8px; padding-bottom: 4px; } .assets-block { max-width: 1480px; margin-inline: auto; } .section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 15px; margin: 35px 0 14px; } .section-heading h3 { margin: 7px 0 0; font: 500 21px/1.1 var(--serif); letter-spacing: -.018em; } .assets-block { margin-top: 34px; } .assets-heading { margin-top: 0; } .asset-summary { color: var(--dim); font: 500 10px/1 var(--mono); } .asset-toolbar { position: sticky; top: -38px; z-index: 20; display: grid; grid-template-columns: minmax(240px, 1fr) auto 128px 38px; gap: 8px; padding: 10px 0; background: linear-gradient(180deg, var(--bg) 72%, transparent); } .library-search { display: flex; align-items: center; gap: 9px; min-height: 40px; padding: 0 11px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.028); } .library-search:focus-within { border-color: rgba(208, 208, 210, .38); background: rgba(208, 208, 210, .035); } .library-search svg { flex: 0 0 auto; width: 15px; height: 15px; color: var(--dim); } .library-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--ink); font: 500 11px/1 var(--sans); } .library-search input::placeholder { color: #58585E; } .library-search kbd { padding: 3px 5px; border: 1px solid var(--line); border-radius: 5px; color: #58585E; font: 500 8px/1 var(--mono); } .kind-filter { display: flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.025); } .kind-filter button { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--dim); cursor: pointer; font: 550 10px/1 var(--sans); } .kind-filter button svg { width: 13px; height: 13px; } .kind-filter button:hover { color: var(--ink); } .kind-filter button.active { background: rgba(255,255,255,.075); color: var(--ink); } .kind-filter button b { min-width: 18px; color: #68686e; font: 500 8px/1 var(--mono); text-align: right; } .kind-filter button.active b { color: #b9b9bd; } .sort-control { display: flex; align-items: center; gap: 7px; min-width: 0; min-height: 40px; padding: 0 9px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.025); color: var(--dim); } .sort-control:focus-within { border-color: rgba(208, 208, 210, .38); } .sort-control > svg { flex: 0 0 auto; width: 13px; height: 13px; } .sort-control select { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: var(--muted); cursor: pointer; font: 550 10px/1 var(--sans); } .icon-button { width: 38px; min-width: 38px; padding: 0; border-color: var(--line); background: rgba(255,255,255,.025); color: var(--muted); } .icon-button:hover { border-color: var(--line-strong); color: #fff; background: rgba(255,255,255,.06); } .asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px,1fr)); gap: 9px; } .asset-card { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #171718; color: var(--ink); cursor: pointer; text-align: left; transition: border-color .12s ease, transform .12s ease; content-visibility: auto; contain-intrinsic-size: 280px; } .asset-card:hover { border-color: rgba(208, 208, 210, .34); transform: translateY(-1px); } .asset-more { display: flex; justify-content: center; padding: 24px 0 2px; } .asset-more[hidden] { display: none; } .asset-more button { min-width: 126px; justify-content: center; } .asset-more button b { min-width: 20px; color: var(--dim); font: 500 8px/1 var(--mono); } .asset-media { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: radial-gradient(circle at 35% 25%, rgba(208, 208, 210, .08), transparent 44%), #101011; } .asset-media > img, .asset-media > video { width: 100%; height: 100%; display: block; object-fit: cover; } .asset-media .missing-stage, .asset-media .audio-stage, .asset-media .pending-stage { display: grid; place-items: center; align-content: center; gap: 10px; width: 100%; height: 100%; padding: 20px; color: var(--mint); } .asset-media .missing-stage svg, .asset-media .audio-stage svg, .asset-media .pending-stage svg { width: 30px; height: 30px; } .asset-media .missing-stage small, .asset-media .audio-stage small, .asset-media .pending-stage small { color: var(--dim); font: 500 9px/1.4 var(--mono); text-align: center; } .asset-badge { position: absolute; top: 9px; left: 9px; display: inline-flex; align-items: center; gap: 5px; min-height: 21px; padding: 0 7px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: rgba(11, 11, 12, .7); color: #E2E2E4; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 650 7px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; } .asset-badge svg { width: 10px; height: 10px; color: var(--mint); } .asset-favorite { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 29px; height: 29px; padding: 0; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; background: rgba(11, 11, 12, .7); color: #D0D0D2; cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .asset-favorite svg { width: 13px; height: 13px; } .asset-favorite.on { color: #B8B8BC; background: rgba(38, 38, 40, .72); } .asset-favorite.on svg { fill: currentColor; } .asset-review-status { position: absolute; right: 9px; bottom: 9px; display: inline-flex; align-items: center; gap: 5px; min-height: 23px; padding: 0 8px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: rgba(11, 11, 12, .74); color: #B8B8BC; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 650 7px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; } .asset-review-status svg { width: 10px; height: 10px; } .asset-review-status.approved { border-color: rgba(208, 208, 210, .3); background: rgba(41, 41, 44, .8); color: #E2E2E4; } .asset-review-status.changes { border-color: rgba(208, 208, 210, .3); background: rgba(41, 41, 44, .8); color: #D0D0D2; } .asset-copy { display: grid; gap: 7px; padding: 12px; } .asset-prompt { display: -webkit-box; min-height: 32px; overflow: hidden; color: #D0D0D2; font: 500 11px/1.45 var(--sans); -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .asset-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--dim); font: 500 8px/1 var(--mono); } .asset-meta span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .asset-project-count { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; color: #858589; } .asset-project-count svg { width: 10px; height: 10px; } .library-skeleton { pointer-events: none; } .library-skeleton .asset-media, .library-skeleton .asset-copy { background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.045) 48%, transparent 66%), rgba(255,255,255,.025); background-size: 240% 100%; animation: library-skeleton 1.35s ease-in-out infinite; } .library-skeleton .asset-copy { min-height: 70px; border-top: 1px solid rgba(255,255,255,.035); } @keyframes library-skeleton { from { background-position: 100% 0; } to { background-position: -100% 0; } } .library-empty { display: grid; place-items: center; align-content: center; min-height: 320px; padding: 35px; border: 1px dashed var(--line); border-radius: 16px; color: var(--dim); text-align: center; } .library-empty > svg { width: 30px; height: 30px; margin-bottom: 13px; color: #858589; } .library-empty strong { color: var(--ink); font: 500 21px/1 var(--serif); } .library-empty p { max-width: 430px; margin: 8px 0 18px; font: 450 12px/1.5 var(--sans); } .library-empty a { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 14px; border-radius: 10px; background: var(--mint); color: var(--mint-ink); text-decoration: none; font: 650 11px/1 var(--sans); } .library-empty a svg { width: 14px; height: 14px; } dialog { margin: auto; padding: 0; border: 1px solid var(--line-strong); background: #171718; color: var(--ink); box-shadow: 0 35px 110px rgba(0,0,0,.7); } dialog::backdrop { background: rgba(11, 11, 12, .78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .project-dialog { width: min(480px, calc(100vw - 28px)); border-radius: 19px; } .project-dialog form { display: grid; gap: 17px; padding: 20px; } .project-dialog header, .picker-dialog header, .asset-inspector header { display: flex; align-items: center; gap: 12px; } .project-dialog header h2, .picker-dialog header h2 { margin: 6px 0 0; font: 500 23px/1.05 var(--serif); } .dialog-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--mint-soft); color: var(--mint); } .dialog-icon svg { width: 19px; height: 19px; } .dialog-close { margin-left: auto; } .project-dialog label { display: grid; gap: 7px; color: var(--muted); font: 550 10px/1 var(--sans); } .project-dialog label small { color: var(--dim); font-weight: 500; } .project-dialog input, .project-dialog textarea { width: 100%; border: 1px solid var(--line); border-radius: 10px; outline: 0; background: #101011; color: var(--ink); font: 500 12px/1.45 var(--sans); } .project-dialog input { height: 43px; padding: 0 12px; } .project-dialog textarea { min-height: 92px; resize: vertical; padding: 11px 12px; } .project-dialog input:focus, .project-dialog textarea:focus { border-color: rgba(208, 208, 210, .4); } .form-error { min-height: 17px; margin: -6px 0 0; color: var(--danger); font: 500 10px/1.4 var(--sans); } .project-dialog footer { display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px; align-items: center; padding-top: 3px; } .danger-button { border-color: rgba(167, 167, 170, .24); background: rgba(167, 167, 170, .07); color: var(--danger); } .danger-button:hover { border-color: rgba(167, 167, 170, .5); } .review-dialog { width: min(840px, calc(100vw - 30px)); max-height: min(850px, calc(100dvh - 30px)); overflow: hidden; border-radius: 20px; } .review-dialog > section { max-height: min(850px, calc(100dvh - 30px)); padding: 22px; overflow: auto; } .review-dialog-head { display: flex; align-items: center; gap: 12px; } .review-dialog-head > div:nth-child(2) { min-width: 0; flex: 1; } .review-dialog-head h2 { margin: 6px 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 25px/1.05 var(--serif); } .review-dialog-head p { margin: 0; color: var(--dim); font: 450 10.5px/1.4 var(--sans); } .review-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin: 22px 0 13px; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.018); } .review-metrics > span { min-height: 78px; padding: 14px; border-right: 1px solid var(--line); } .review-metrics > span:last-child { border-right: 0; } .review-metrics strong { display: block; margin-bottom: 9px; font: 500 24px/1 var(--serif); } .review-metrics small { color: var(--dim); font: 600 7.5px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; } .review-metrics > span:nth-child(1) strong { color: var(--mint); } .review-metrics > span:nth-child(2) strong { color: #D0D0D2; } .review-link-panel { padding: 17px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(145deg, rgba(208, 208, 210, .035), transparent 52%), #171718; } .review-link-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; } .review-link-heading strong { display: block; margin: 7px 0 4px; color: #E2E2E4; font: 600 12px/1.2 var(--sans); } .review-link-heading small { color: var(--dim); font: 450 9.5px/1.4 var(--sans); } .review-link-status { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--dim); font: 650 7px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; } .review-link-status.active { border-color: rgba(208, 208, 210, .27); background: var(--mint-soft); color: var(--mint); } .review-link-options { display: grid; grid-template-columns: 120px minmax(180px,1fr) auto; align-items: end; gap: 8px; margin-top: 16px; } .review-link-options > label:first-child { display: grid; gap: 6px; color: var(--dim); font: 550 8px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; } .review-link-options select { height: 39px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; outline: 0; background: #101011; color: var(--ink); font: 550 10px/1 var(--sans); } .review-feedback-toggle { display: flex; align-items: center; gap: 9px; min-height: 39px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.018); cursor: pointer; } .review-feedback-toggle input { width: 15px; height: 15px; accent-color: var(--mint); } .review-feedback-toggle > span { display: grid; gap: 3px; } .review-feedback-toggle strong { color: #D0D0D2; font: 550 9.5px/1 var(--sans); } .review-feedback-toggle small { color: var(--dim); font: 450 8px/1 var(--sans); } .review-link-reveal { margin-top: 11px; padding: 11px; border: 1px solid rgba(208, 208, 210, .22); border-radius: 11px; background: var(--mint-soft); } .review-link-reveal > label { display: block; margin-bottom: 8px; color: #D0D0D2; font: 550 8.5px/1 var(--sans); } .review-link-reveal > div { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 6px; } .review-link-reveal input { min-width: 0; height: 38px; padding: 0 10px; border: 1px solid rgba(208, 208, 210, .2); border-radius: 9px; outline: 0; background: rgba(11, 11, 12, .48); color: #E2E2E4; font: 500 9px/1 var(--mono); } .review-link-actions { display: flex; align-items: center; justify-content: space-between; gap: 13px; margin-top: 12px; } .review-link-actions > span { display: flex; align-items: center; gap: 7px; color: #58585E; font: 500 8.5px/1.35 var(--sans); } .review-link-actions > span svg { flex: 0 0 auto; width: 13px; height: 13px; color: #A7A7AA; } .review-link-actions .danger-button svg { width: 13px; height: 13px; } .review-link-panel .form-error { margin: 9px 0 0; } .collaboration-panel { position: relative; margin-top: 10px; padding: 17px; overflow: hidden; border: 1px solid rgba(167, 167, 170, .2); border-radius: 14px; background: radial-gradient(circle at 92% 4%, rgba(167, 167, 170, .11), transparent 19rem), linear-gradient(145deg, rgba(208, 208, 210, .035), transparent 48%), #171718; } .collaboration-panel::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: linear-gradient(180deg, #A7A7AA, rgba(208, 208, 210, .7), transparent 88%); } .collaborator-options { display: grid; grid-template-columns: minmax(180px,1fr) 120px auto; align-items: end; gap: 8px; margin-top: 16px; } .collaborator-options > label { display: grid; gap: 6px; color: var(--dim); font: 550 8px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; } .collaborator-options input, .collaborator-options select { width: 100%; height: 39px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; outline: 0; background: #101011; color: var(--ink); font: 550 10px/1 var(--sans); } .collaborator-options input:focus, .collaborator-options select:focus { border-color: rgba(208, 208, 210, .42); } .collaboration-scope { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; } .collaboration-scope > span { display: inline-flex; align-items: center; gap: 6px; min-height: 25px; padding: 0 8px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.018); color: #858589; font: 520 7.5px/1 var(--sans); } .collaboration-scope svg { width: 11px; height: 11px; color: #A7A7AA; } .collaborator-list { display: grid; gap: 6px; } .collaborator-row { display: grid; grid-template-columns: 31px minmax(0,1fr) auto; align-items: center; gap: 9px; min-height: 52px; padding: 8px 9px; border: 1px solid var(--line); border-radius: 11px; background: rgba(11, 11, 12, .22); } .collaborator-mark { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 9px; background: rgba(167, 167, 170, .1); color: #B8B8BC; } .collaborator-mark svg { width: 13px; height: 13px; } .collaborator-copy { min-width: 0; } .collaborator-copy strong { display: block; overflow: hidden; color: #D0D0D2; text-overflow: ellipsis; white-space: nowrap; font: 560 9.5px/1.25 var(--sans); } .collaborator-copy small { display: block; margin-top: 4px; overflow: hidden; color: var(--dim); text-overflow: ellipsis; white-space: nowrap; font: 500 7.5px/1 var(--mono); } .collaborator-revoke { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 29px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--dim); cursor: pointer; font: 600 7.5px/1 var(--sans); } .collaborator-revoke:hover { border-color: rgba(167, 167, 170, .36); background: rgba(167, 167, 170, .06); color: var(--danger); } .collaborator-revoke:disabled { opacity: .45; cursor: wait; } .collaborator-revoke svg { width: 11px; height: 11px; } .collaborator-empty { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 10px; border: 1px dashed var(--line); border-radius: 11px; color: var(--dim); } .collaborator-empty > svg { flex: 0 0 auto; width: 18px; height: 18px; color: #858589; } .collaborator-empty > span { display: grid; gap: 4px; } .collaborator-empty strong { color: var(--muted); font: 550 9px/1 var(--sans); } .collaborator-empty small { color: var(--dim); font: 450 8px/1.35 var(--sans); } .collaboration-panel .form-error { margin: 9px 0 0; } .review-activity-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin: 24px 2px 11px; } .review-activity-head h3 { margin: 7px 0 0; font: 500 19px/1 var(--serif); } .review-feedback-list { display: grid; gap: 6px; } .review-activity-row { display: grid; grid-template-columns: 32px minmax(0,1fr) auto; align-items: start; gap: 10px; padding: 11px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.018); } .review-activity-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: rgba(255,255,255,.035); color: var(--dim); } .review-activity-mark svg { width: 14px; height: 14px; } .review-activity-mark.approved { background: var(--mint-soft); color: var(--mint); } .review-activity-mark.changes { background: rgba(208, 208, 210, .1); color: #D0D0D2; } .review-activity-copy { min-width: 0; padding-top: 2px; } .review-activity-copy strong { display: block; color: #D0D0D2; font: 550 10px/1.35 var(--sans); } .review-activity-copy p { margin: 6px 0 0; color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; font: 450 10px/1.5 var(--sans); } .review-activity-meta { display: flex; align-items: center; gap: 7px; margin-top: 6px; } .review-activity-copy time { color: var(--dim); font: 500 8px/1 var(--mono); } .review-timecode { min-height: 21px; padding: 0 7px; border: 1px solid rgba(208, 208, 210, .25); border-radius: 999px; background: rgba(208, 208, 210, .08); color: var(--mint); cursor: pointer; font: 650 8px/1 var(--mono); } .review-timecode:hover, .review-timecode:focus-visible { border-color: rgba(208, 208, 210, .55); background: rgba(208, 208, 210, .14); } .review-activity-actions { display: flex; gap: 4px; } .review-activity-actions button { display: grid; place-items: center; width: 29px; height: 29px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--dim); cursor: pointer; } .review-activity-actions button:hover { border-color: var(--line-strong); color: var(--ink); background: rgba(255,255,255,.04); } .review-activity-actions button:last-child:hover { color: var(--danger); } .review-activity-actions svg { width: 12px; height: 12px; } .review-feedback-empty { display: grid; place-items: center; padding: 28px; border: 1px dashed var(--line); border-radius: 12px; color: var(--dim); text-align: center; } .review-feedback-empty > svg { width: 22px; height: 22px; margin-bottom: 10px; color: #858589; } .review-feedback-empty strong { color: var(--muted); font: 550 11px/1 var(--sans); } .review-feedback-empty p { margin: 6px 0 0; font: 450 9.5px/1.45 var(--sans); } .picker-dialog { width: min(980px, calc(100vw - 32px)); max-height: min(780px, calc(100dvh - 32px)); border-radius: 20px; } .picker-dialog > section { display: grid; grid-template-rows: auto auto minmax(220px,1fr) auto; max-height: min(780px, calc(100dvh - 32px)); } .picker-dialog header { padding: 20px 20px 14px; } .picker-dialog header > div { flex: 1; } .picker-dialog header p { margin: 7px 0 0; color: var(--dim); font: 450 11px/1.4 var(--sans); } .picker-tools { display: grid; grid-template-columns: minmax(200px,1fr) auto; align-items: center; gap: 12px; padding: 0 20px 12px; } .picker-tools > span { color: var(--dim); font: 500 9px/1 var(--mono); } .picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(135px,1fr)); align-content: start; gap: 7px; min-height: 280px; padding: 0 20px 20px; overflow: auto; } .picker-item { position: relative; aspect-ratio: 1; overflow: hidden; padding: 0; border: 2px solid transparent; border-radius: 11px; background: #101011; cursor: pointer; content-visibility: auto; contain-intrinsic-size: 120px; } .picker-item img { width: 100%; height: 100%; display: block; object-fit: cover; } .picker-item .missing-stage, .picker-item .audio-stage, .picker-item .pending-stage { display: grid; place-items: center; align-content: center; gap: 6px; width: 100%; height: 100%; color: var(--mint); } .picker-item .missing-stage svg, .picker-item .audio-stage svg, .picker-item .pending-stage svg { width: 23px; height: 23px; } .picker-item .audio-stage small, .picker-item .pending-stage small { color: var(--dim); font: 500 7px/1 var(--mono); } .picker-item .picker-check { position: absolute; top: 7px; right: 7px; display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; background: rgba(11, 11, 12, .72); color: transparent; } .picker-item .picker-check svg { width: 13px; height: 13px; } .picker-item.selected { border-color: var(--mint); } .picker-item.selected .picker-check { background: var(--mint); color: var(--mint-ink); border-color: transparent; } .picker-dialog footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 20px 18px; border-top: 1px solid var(--line); color: var(--dim); font: 500 9px/1.3 var(--sans); } .asset-inspector { position: fixed; inset: 0; z-index: 220; visibility: hidden; pointer-events: none; } .asset-inspector.open { visibility: visible; pointer-events: auto; } .inspector-backdrop { position: absolute; inset: 0; padding: 0; border: 0; background: rgba(11, 11, 12, .68); opacity: 0; transition: opacity .18s ease; } .asset-inspector.open .inspector-backdrop { opacity: 1; } .asset-inspector > section { position: absolute; top: 0; right: 0; display: grid; grid-template-rows: auto auto minmax(0,1fr) auto; width: min(460px, 100vw); height: 100dvh; border-left: 1px solid var(--line-strong); background: radial-gradient(circle at 80% -10%, rgba(208, 208, 210, .06), transparent 30rem), #171718; box-shadow: -30px 0 90px rgba(0,0,0,.55); transform: translateX(100%); transition: transform .2s cubic-bezier(.2,.8,.2,1); } .asset-inspector.open > section { transform: none; } .asset-inspector header { padding: 16px; border-bottom: 1px solid var(--line); } .asset-inspector header > div { flex: 1; min-width: 0; } .asset-inspector header strong { display: block; margin-top: 6px; overflow: hidden; color: var(--muted); font: 550 10px/1 var(--mono); text-overflow: ellipsis; white-space: nowrap; } .inspector-preview { display: grid; place-items: center; aspect-ratio: 1.25; overflow: hidden; background: #0B0B0C; } .inspector-preview img, .inspector-preview video { width: 100%; height: 100%; display: block; object-fit: contain; } .inspector-preview audio { width: calc(100% - 48px); } .inspector-preview .audio-stage { display: grid; place-items: center; gap: 15px; width: 100%; padding: 40px; color: var(--mint); } .inspector-preview .audio-stage svg { width: 40px; height: 40px; } .inspector-body { min-height: 0; overflow: auto; padding: 20px; } .inspector-meta { display: flex; flex-wrap: wrap; gap: 6px; } .inspector-meta span, .inspector-projects span { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font: 550 8px/1 var(--mono); } #inspectorPrompt { margin: 18px 0; color: #D0D0D2; font: 450 13px/1.6 var(--sans); } .inspector-projects { display: flex; flex-wrap: wrap; gap: 6px; } .inspector-projects:empty::before { content: "Not in a project yet"; color: var(--dim); font: 500 10px/1 var(--sans); } .inspector-projects button { display: inline-flex; align-items: center; gap: 6px; min-height: 29px; padding: 0 9px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.025); color: var(--muted); cursor: pointer; font: 550 9px/1 var(--sans); } .inspector-projects button:hover { border-color: var(--line-strong); color: var(--ink); } .inspector-projects button.active { border-color: rgba(208, 208, 210, .3); background: var(--mint-soft); color: var(--mint); } .inspector-projects button svg { width: 12px; height: 12px; } .asset-inspector footer { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 7px; padding: 14px 16px calc(14px + env(safe-area-inset-bottom,0px)); border-top: 1px solid var(--line); background: rgba(11, 11, 12, .9); } .toast { position: fixed; left: 50%; bottom: 22px; z-index: 300; max-width: min(440px, calc(100vw - 28px)); padding: 10px 14px; border: 1px solid rgba(208, 208, 210, .26); border-radius: 10px; background: rgba(23, 23, 24, .94); color: var(--ink); box-shadow: 0 15px 45px rgba(0,0,0,.45); opacity: 0; pointer-events: none; transform: translate(-50%, 8px); transition: opacity .15s ease, transform .15s ease; font: 550 11px/1.4 var(--sans); } .toast.show { opacity: 1; transform: translate(-50%,0); } @media (max-width: 1100px) { .library-shell { --lib-side-default: 214px; } .asset-grid { grid-template-columns: repeat(auto-fill,minmax(170px,1fr)); } } @media (max-width: 820px) { body { overflow: auto; } .library-shell { display: block; height: auto; } .library-sidebar { position: sticky; top: 54px; z-index: 30; display: block; padding: 8px 12px; overflow: hidden; border-right: 0; border-bottom: 1px solid var(--line); background: rgba(16, 16, 17, .94); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); } /* No column boundary left to drag once the sidebar is the sticky folder bar. */ .sidebar-resizer { display: none; } .sidebar-head, .sidebar-foot, .projects-head { display: none; } .project-search { display: none; } .library-sections { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; } .library-sections::-webkit-scrollbar { display: none; } .library-sections { margin-bottom: 6px; } .library-sections button { flex: 0 0 auto; display: inline-flex; width: auto; min-height: 34px; padding-inline: 10px; } .library-sections button b { min-width: 0; } .mobile-folder-toggle { display: grid; grid-template-columns: 18px auto auto minmax(0, 1fr) 18px; align-items: center; gap: 8px; width: 100%; min-height: 42px; padding: 0 10px; border: 1px solid rgba(208, 208, 210, .18); border-radius: 10px; background: var(--folder-soft); color: var(--ink); cursor: pointer; text-align: left; font: 600 12px/1 var(--sans); } .mobile-folder-toggle > svg:first-child { width: 16px; height: 16px; color: var(--folder); } .mobile-folder-toggle b { min-width: 20px; color: #858589; font: 600 9px/1 var(--mono); } .mobile-folder-current { min-width: 0; overflow: hidden; color: #858589; font: 500 10px/1 var(--sans); text-align: right; text-overflow: ellipsis; white-space: nowrap; } .mobile-folder-chevron { width: 16px; height: 16px; color: var(--dim); transition: transform .15s ease; } .library-sidebar:not(.folders-open) .mobile-folder-chevron { transform: rotate(180deg); } .project-list { display: none; gap: 3px; max-height: min(42dvh, 340px); margin-top: 6px; padding: 4px 0 2px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } .library-sidebar.folders-open .project-list { display: grid; } .library-sidebar.folders-open .project-search:not([hidden]) { display: flex; margin: 6px 0 0; } .project-list button { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; width: 100%; min-height: 45px; padding-inline: 10px; } .project-copy { display: grid; } .project-copy > small { display: block; } .project-list button b { min-width: 20px; } .project-list .empty-projects { padding: 10px; } .library-main { overflow: visible; padding: 29px 18px 70px; } .library-main::before { display: none; } .asset-toolbar { top: 128px; } .asset-toolbar { grid-template-columns: minmax(0,1fr) 112px 38px; } .kind-filter { grid-column: 1 / -1; grid-row: 2; overflow-x: auto; } .kind-filter button { flex: 1 0 auto; } .review-link-options { grid-template-columns: 110px minmax(160px,1fr); } .review-link-options .primary-button { grid-column: 1 / -1; } .collaborator-options { grid-template-columns: minmax(160px,1fr) 110px; } .collaborator-options .primary-button { grid-column: 1 / -1; } } /* 641-720px kept both nav-action buttons at full size while nothing in the bar could shrink: brand(129) + links(276) + Create(36) + .nav-right(333) = 774px against a 641-720px bar, so the wallet/profile end ran 95-174px off the right edge — measured as a documentElement.scrollWidth of 815px at every width in the band. nav.css's shrinkable pill only starts at 721px and the phone block below stops at 640, so this band had no rule at all. Same remedy, and the same reasoning, as the block below: the Create launcher already offers New project, so the duplicates are what go. */ @media (min-width: 641px) and (max-width: 720px) { .nav-action.secondary-action, .nav-action.primary-action { display: none; } } @media (max-width: 640px) { nav.nav { position: sticky; top: 0; } nav.nav .nav-right { margin-left: auto; } .nav-action.secondary-action { display: none; } /* The global Create launcher is pinned beside Profile at this width and already contains New project. Hiding the duplicate prevents the two plus buttons from occupying the same 36px slot on narrow phones. */ .nav-action.primary-action { display: none; } .library-profile { width: 36px; height: 36px; } .library-sidebar { top: 54px; } .library-main { padding: 16px 12px 64px; } .library-head { display: grid; gap: 15px; margin-bottom: 22px; } .library-head h2 { font-size: 34px; } .library-head p { font-size: 12.5px; } .head-actions { width: 100%; } .head-actions { display: grid; grid-template-columns: 1fr 1fr; } .head-actions > * { width: 100%; } .head-actions .review-project-button { grid-column: 1 / -1; } .section-heading { margin-top: 28px; } .assets-heading { margin-top: 0; } .assets-block { margin-top: 0; } .library-head:not([hidden]) + .assets-block { margin-top: 24px; } .asset-toolbar { top: 122px; } .library-search kbd { display: none; } .asset-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; } .asset-card { border-radius: 8px; } .asset-copy { display: none; } .asset-badge { top: 5px; left: 5px; width: 23px; min-height: 23px; padding: 0; justify-content: center; font-size: 0; } .asset-badge svg { width: 11px; height: 11px; } .asset-favorite { top: 5px; right: 5px; width: 25px; height: 25px; } .asset-favorite svg { width: 12px; height: 12px; } .picker-dialog { width: 100vw; max-height: 100dvh; border-width: 0; border-radius: 0; } .picker-dialog > section { height: 100dvh; max-height: 100dvh; } .picker-grid { grid-template-columns: repeat(3,minmax(0,1fr)); padding-inline: 12px; } .picker-dialog header { padding-inline: 14px; } .picker-tools { padding-inline: 14px; } .picker-dialog footer { padding-inline: 14px; padding-bottom: calc(14px + env(safe-area-inset-bottom,0px)); } .project-dialog footer { grid-template-columns: 1fr 1fr; } .project-dialog footer .danger-button { grid-column: 1 / -1; } .project-dialog footer > span { display: none; } .review-dialog { width: 100vw; max-height: 100dvh; border-width: 0; border-radius: 0; } .review-dialog > section { min-height: 100dvh; max-height: 100dvh; padding: 17px 13px calc(24px + env(safe-area-inset-bottom,0px)); } .review-dialog-head .dialog-icon { display: none; } .review-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); } .review-metrics > span { min-height: 67px; padding: 12px; border-bottom: 1px solid var(--line); } .review-metrics > span:nth-child(2) { border-right: 0; } .review-metrics > span:nth-child(n+3) { border-bottom: 0; } .review-link-options { grid-template-columns: 1fr; } .review-link-options .primary-button { grid-column: auto; } .collaborator-options { grid-template-columns: 1fr; } .collaborator-options .primary-button { grid-column: auto; } .review-link-reveal > div { grid-template-columns: minmax(0,1fr) auto; } .review-link-reveal .soft-button:last-child { grid-column: 1 / -1; } .review-link-actions { align-items: flex-start; } .review-link-actions > span { max-width: 220px; } .collaboration-scope { display: grid; } .collaboration-scope > span { justify-content: flex-start; } .collaborator-row { grid-template-columns: 29px minmax(0,1fr) auto; padding: 7px; } .collaborator-revoke { width: 29px; padding: 0; } .collaborator-revoke { font-size: 0; } .asset-inspector footer { grid-template-columns: 1fr 1fr; } .asset-inspector footer .primary-button { grid-column: 1 / -1; } } @media (max-width: 390px) { .asset-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; } .asset-badge { max-width: calc(100% - 48px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .section-heading h3 { font-size: 19px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } } /* Preview that could not be loaded at all — board #1388. Same geometry as the pending/audio stages so it drops into .asset-media and .picker-item unchanged, but dimmed rather than --mint, because this is a failure and not a working state. */ .asset-media .missing-stage, .picker-item .missing-stage { color: var(--dim); }