@font-face{font-family:"Newsreader";src:url(/marketplace/assets/newsreader.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Public Sans";src:url(/marketplace/assets/public-sans.woff2) format("woff2");font-weight:100 900;font-display:swap}
/* Tokens mirror extension/pageweave-tokens.json: paper, edge, ink, muted, night, rust. */
:root{--paper:#F5EEE2;--card:#FAF5EB;--slot:#EFE6D5;--edge:#E2D6C2;--ink:#17304C;--muted:#4E5B6C;--rust:#B0442A;--on-rust:#FFF8F0;--rail:#0F2236;--rail-text:#F5EEE2;--rail-rust:#E8714F;--hair:#E2D6C2;--field:#FBF7EF;--pw-serif:"Newsreader",Georgia,serif;--pw-sans:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--rail-w:104px;color-scheme:light}
@media(prefers-color-scheme:dark){:root{--paper:#0F2236;--card:#132B43;--slot:#0F2236;--edge:rgba(255,255,255,.1);--ink:#F5EEE2;--muted:#A9B6C4;--rust:#E8714F;--on-rust:#0F2236;--rail:#04182C;--hair:rgba(255,255,255,.1);--field:#132B43;color-scheme:dark}}
*{box-sizing:border-box}
html{min-width:320px;background:var(--paper)}
body{margin:0;color:var(--ink);background:var(--paper);font:16px/1.5 var(--pw-sans);-webkit-font-smoothing:antialiased}
button,input{font:inherit;color:inherit}
a{color:inherit}
svg{display:block}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--rust);outline-offset:3px}
.shell{min-height:100vh}

/* Rail */
.sidebar{position:fixed;inset-block:0;inset-inline-start:0;z-index:5;width:var(--rail-w);padding:20px 8px 0;background:var(--rail);display:flex;flex-direction:column;align-items:center;color:var(--rail-text)}
.brand{display:block;border-radius:14px}
.brand img{display:block;width:56px;height:56px}
#primary-nav{display:grid;gap:8px;width:100%;margin-block-start:32px}
.side-link{position:relative;display:grid;justify-items:center;gap:6px;min-height:72px;padding:12px 4px 10px;border-radius:6px;color:var(--rail-text);text-decoration:none;font-size:12px;line-height:1.2;opacity:.82;transition:background-color .2s}
.side-link:hover{background:rgba(255,255,255,.06);opacity:1}
.side-link.selected{background:rgba(255,255,255,.09);opacity:1}
.side-link.selected::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:3px;border-radius:3px;background:var(--rail-rust)}
.side-icon svg{width:28px;height:28px}
.rail-foot{position:relative;margin-block-start:auto;width:100%;height:214px;color:var(--rail-rust)}
.rail-thread{position:absolute;inset-block-start:0;inset-inline-start:0;width:100%;height:210px}
.rail-companion{position:absolute;inset-block-end:12px;inset-inline-start:50%;margin-inline-start:-38px;width:76px;height:auto}
:dir(rtl) .rail-thread{transform:scaleX(-1)}

/* Main */
.main{margin-inline-start:var(--rail-w);min-height:100vh}
.topbar{display:flex;align-items:center;gap:16px;padding:24px 56px 0;max-width:1336px}
.mobile-brand{display:none}
.mobile-brand img{width:32px;height:32px}
.crumb{display:inline-flex;align-items:center;gap:8px;min-height:40px;color:var(--ink);text-decoration:none;font-size:16px}
.crumb svg{width:20px;height:20px}
.crumb:hover span{text-decoration:underline;text-underline-offset:4px}
.top-actions{margin-inline-start:auto;display:flex;align-items:center;gap:16px}
.account-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.account-status.is-signed-in{position:static;width:auto;height:auto;overflow:visible;clip-path:none;color:var(--muted);font-size:14px}
.account-status:not(.is-quiet):not(.is-signed-in){position:static;width:auto;height:auto;overflow:visible;clip-path:none;color:var(--muted);font-size:14px}
.account-button{min-height:44px;padding:0 24px;border:1.5px solid var(--rust);border-radius:6px;background:transparent;color:var(--rust);font-weight:500;cursor:pointer;transition:background-color .2s}
.account-button:hover{background:color-mix(in srgb,var(--rust) 10%,transparent)}
.content{max-width:1336px;padding:8px 56px 96px}

/* Masthead */
.masthead{padding-block:8px 24px}
h1,h2,h3{font-family:var(--pw-serif);font-style:normal;font-weight:600;color:var(--ink);margin:0}
.masthead h1,.page-title h1{font-size:clamp(40px,5.6vw,68px);line-height:1.05;letter-spacing:-.01em}
.masthead p,.page-title p{margin:16px 0 0;max-width:880px;color:var(--ink);font-size:20px;line-height:1.45}
.page-title{padding-block:8px 24px}
.eyebrow{margin-block-end:8px;color:var(--muted);font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.eyebrow span{padding-inline:4px}

/* Filters and search */
.catalog-tools{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-block:16px 24px}
.filter-row{display:flex;flex-wrap:wrap;gap:12px}
.filter-chip{min-height:44px;padding:0 24px;border:1px solid var(--edge);border-radius:6px;background:var(--card);color:var(--ink);cursor:pointer;transition:background-color .2s,border-color .2s}
.filter-chip:hover{border-color:var(--rust)}
.filter-chip.active{border-color:var(--rust);background:var(--rust);color:var(--on-rust);font-weight:500}
.search-box{position:relative;margin-inline-start:auto;display:block;width:min(100%,336px)}
.search-icon{position:absolute;inset-block:0;inset-inline-start:14px;display:grid;place-items:center;color:var(--muted);pointer-events:none}
.search-icon svg{width:22px;height:22px}
.search-box input{width:100%;min-height:44px;padding-inline:44px 14px;border:1px solid var(--edge);border-radius:6px;background:var(--field);color:var(--ink)}
.search-box input::placeholder{color:var(--muted);opacity:1}
.result-count{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0}

/* Cards */
.app-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch}
.app-row{position:relative;display:flex;flex-direction:column;gap:16px;padding:16px;border:1px solid var(--edge);border-radius:12px;background:var(--card);transition:border-color .2s}
.app-row:hover{border-color:var(--rust)}
.art-slot{position:relative;display:grid;place-items:center;aspect-ratio:2/1;border-radius:8px;background:var(--slot);color:var(--muted);font-size:14px;overflow:hidden}
.art-scene{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;object-position:50% 62%}
.art-slot .art-scene.dk{display:none}
@media(prefers-color-scheme:dark){.art-slot .art-scene.lt{display:none}.art-slot .art-scene.dk{display:block}}
.app-row:nth-child(even) .art-scene{object-position:12% 55%;transform:scaleX(-1)}
.art-wide{aspect-ratio:auto;min-height:200px;margin-block:24px 8px;border:1px solid var(--edge);border-radius:12px}
.row-copy{display:grid;gap:4px}
.item-overline{color:var(--muted);font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.row-copy h3{font-size:30px;line-height:1.15}
.row-copy h3 a{text-decoration:none}
.row-copy h3 a::after{content:"";position:absolute;inset:0;border-radius:12px}
.row-copy h3 a:focus-visible{outline:none}
.row-copy h3 a:focus-visible::after{outline:2px solid var(--rust);outline-offset:3px}
.row-copy p{margin:0;color:var(--ink);font-size:16px}
.row-foot{display:flex;align-items:center;gap:12px;margin-block-start:auto;padding-block-start:16px;border-block-start:1px solid var(--hair)}
.where{display:inline-flex;align-items:center;gap:12px;font-size:15px}
.where svg,.chevron svg{width:24px;height:24px}
.access-note{margin-inline-start:auto;color:var(--rust);font-size:13px;font-weight:500}
.chevron{margin-inline-start:auto;display:grid}
.access-note+.chevron{margin-inline-start:0}
:dir(rtl) .chevron svg,:dir(rtl) .crumb svg{transform:scaleX(-1)}

/* Buttons */
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border:1.5px solid transparent;border-radius:6px;font-weight:500;font-size:16px;text-decoration:none;cursor:pointer;transition:background-color .2s}
.button svg{width:20px;height:20px}
.button-primary{background:var(--rust);color:var(--on-rust)}
.button-primary:hover{background:color-mix(in srgb,var(--rust) 88%,var(--ink))}
.button-secondary{border-color:var(--rust);background:transparent;color:var(--rust)}
.text-button{display:inline-flex;align-items:center;min-height:40px;padding:0;border:0;background:none;color:var(--ink);text-decoration:underline;text-underline-offset:4px;cursor:pointer}

/* Detail */
.detail-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:48px;align-items:start;padding-block-start:16px}
.detail-main h1{font-size:clamp(44px,6vw,72px);line-height:1.02;letter-spacing:-.01em}
.lede{margin:12px 0 0;font-size:20px;line-height:1.45;max-width:640px}
.detail-section{margin-block-start:24px}
.detail-section h2{font-size:28px;line-height:1.2}
.check-list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px}
.check-list li{display:flex;align-items:flex-start;gap:12px;font-size:16px}
.check-list svg{flex:none;width:28px;height:28px;margin-block-start:-3px;color:var(--rust)}
.more-details{margin-block-start:32px;border-block-start:1px solid var(--hair);padding-block-start:8px}
.more-details>summary,.dev-install>summary{min-height:40px;display:flex;align-items:center;cursor:pointer;color:var(--ink);text-decoration:underline;text-underline-offset:4px;list-style:none}
.more-details>summary::-webkit-details-marker,.dev-install>summary::-webkit-details-marker{display:none}
.more-details p{color:var(--muted);max-width:640px}
.capability-list{margin:8px 0 0;padding-inline-start:20px;display:grid;gap:4px;color:var(--ink)}
.detail-aside{position:sticky;inset-block-start:24px}
.detail-callout{padding:24px;border:1px solid var(--edge);border-radius:12px;background:var(--card)}
.detail-callout h2{font-size:28px;line-height:1.2}
.detail-callout .check-list{margin-block:20px 0}
.callout-actions{display:grid;gap:16px;margin-block-start:24px;padding-block-start:24px;border-block-start:1px solid var(--hair)}
.callout-actions .button{width:100%}
.account-check{display:flex;align-items:center;gap:8px;font-size:14px}
.access-led{flex:none;width:8px;height:8px;border-radius:50%;border:1.5px solid var(--muted)}
.access-led.led-good{background:var(--rust);border-color:var(--rust)}
.status-note,.quiet-note{margin:0;color:var(--muted);font-size:14px}
.dev-install{justify-self:center;text-align:center}
.dev-install>summary{justify-content:center;font-size:14px}
.dev-steps{margin-block-start:8px;padding:16px;border:1px dashed var(--edge);border-radius:6px;text-align:start;font-size:14px}
.dev-label{margin:0 0 8px;color:var(--ink);font-weight:500}
.dev-steps ol{margin:8px 0;padding-inline-start:20px;display:grid;gap:4px}
.dev-steps h3{margin-block-start:12px;font-family:var(--pw-sans);font-size:14px;font-weight:600}
.dev-steps code{padding:1px 4px;border-radius:4px;background:var(--slot);font:13px/1.4 Consolas,monospace}

/* States */
.notice{margin-block:16px;padding:12px 16px;border:1px solid var(--rust);border-radius:6px;color:var(--ink)}
.notice[data-kind=success]{border-color:var(--edge);background:var(--card)}
.loading-state,.state-panel,.empty-state{display:grid;justify-items:center;gap:12px;padding:64px 16px;text-align:center}
.state-panel h1{font-size:36px;line-height:1.15;max-width:520px}
.state-panel p,.empty-state p,.loading-state p{margin:0;color:var(--muted);max-width:480px}
.empty-state{border:1px dashed var(--rust);border-radius:12px;margin-block-start:24px}
.empty-state h3{font-size:24px}
.state-icon{display:grid;place-items:center;color:var(--rust)}
.state-icon svg{width:40px;height:40px}
.state-icon img{display:block}
.spinner{width:28px;height:28px;border:2px solid var(--edge);border-block-start-color:var(--rust);border-radius:50%;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.catalog-footer{margin-block-start:32px;color:var(--muted);font-size:14px}

/* Theme-paired images */
.lt{display:block}.dk{display:none}
@media(prefers-color-scheme:dark){.lt{display:none}.dk{display:block}}

/* Mobile nav */
.mobile-nav{display:none}

@media(max-width:1180px){.app-list{grid-template-columns:repeat(2,minmax(0,1fr))}.detail-grid{grid-template-columns:minmax(0,1fr) 340px;gap:32px}.topbar{padding-inline:32px}.content{padding-inline:32px}}
@media(max-width:860px){.detail-grid{grid-template-columns:minmax(0,1fr)}.detail-aside{position:static}}
@media(max-width:720px){
 .sidebar{display:none}
 .main{margin-inline-start:0;padding-block-end:72px}
 .topbar{padding:16px 16px 0;gap:8px}
 .mobile-brand{display:block;flex:none}
 .topbar .crumb{margin-inline-start:4px}
 .account-status.is-signed-in,.account-status:not(.is-quiet):not(.is-signed-in){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .account-button{padding:0 16px}
 .content{padding:8px 16px 48px}
 .masthead p,.lede,.page-title p{font-size:18px}
 .app-list{grid-template-columns:minmax(0,1fr);gap:16px}
 .search-box{margin-inline-start:0;width:100%}
 .filter-row{gap:8px;width:100%}
 .filter-chip{padding:0 16px}
 .row-copy h3{font-size:28px}
 .mobile-nav{position:fixed;inset-inline:0;inset-block-end:0;z-index:6;display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));background:var(--rail);padding-block:6px}
 .mobile-nav a,.mobile-nav button{display:grid;justify-items:center;gap:2px;min-height:56px;padding:6px 2px;border:0;background:none;color:var(--rail-text);text-decoration:none;font-size:11px;opacity:.8;cursor:pointer}
 .mobile-nav a.selected{opacity:1;color:var(--rail-rust)}
 .mobile-nav b{font-weight:400}
 .mobile-nav svg{width:24px;height:24px}
 .detail-callout{padding:20px}
 .art-wide{min-height:160px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}