* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: 'DM Sans',sans-serif; line-height: 1.65; color: var(--md-sys-color-on-surface); background: var(--md-sys-color-background); }
[hidden] { display: none !important; }
h1,h2,h3 { font-family: 'Outfit',sans-serif; font-weight: 600; line-height: 1.2; margin: 0; }
a { color: var(--md-sys-color-primary); }
button,input { font: inherit; }
:focus-visible { outline: 2px solid var(--md-sys-color-primary); outline-offset: 4px; }
.portal-container { width: min(1200px,calc(100% - 48px)); margin-inline: auto; }
.skip-link { position: fixed; top: -80px; left: 16px; padding: 12px 20px; border-radius: 999px; background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); z-index: 1100; }
.skip-link:focus { top: 12px; }
.portal-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.hero-network { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--md-sys-color-primary); opacity: .15; pointer-events: none; }
.hero-network line { stroke: currentColor; stroke-width: .7; }.hero-network circle { fill: currentColor; }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.2fr 1fr; gap: 80px; align-items: center; padding-block: 88px; }
.eyebrow { display: block; color: var(--md-sys-color-primary); text-transform: uppercase; font-size: 12px; font-weight: 600; letter-spacing: .17em; margin-bottom: 16px; }
h1 { font-size: clamp(42px,5.4vw,72px); letter-spacing: -2px; line-height: 1.08; }
h1 > span { color: var(--md-sys-color-primary); }
.hero-intro { color: var(--md-sys-color-on-surface-variant); font-size: 17px; max-width: 530px; margin-block: 24px 32px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 13px 24px; min-height: 48px; border-radius: 999px; font-size: 14px; font-weight: 600; text-decoration: none; border: 1px solid transparent; }
.button-primary { color: var(--md-sys-color-on-primary); background: var(--md-sys-color-primary); }
.button-secondary { color: var(--md-sys-color-primary); border-color: var(--md-sys-color-outline); }
.business-note { margin-top: 28px; color: var(--tone-text-muted); font-size: 13px; max-width: 440px; }.business-note a { white-space: nowrap; text-decoration: none; }
.workshop { transform: rotate(2deg); border: 1px solid var(--md-sys-color-outline-variant); border-radius: 28px; background: var(--md-sys-color-surface-container); box-shadow: var(--md-elev-2); overflow: hidden; }
.workshop-top { display: flex; align-items: center; gap: 7px; padding: 22px 26px; border-bottom: 1px solid var(--md-sys-color-outline-variant); }.workshop-top > span { width: 8px; height: 8px; background: var(--md-sys-color-outline); border-radius: 50%; }.workshop-top b { margin-left: auto; color: var(--tone-text-muted); font-size: 11px; font-weight: 400; }
.workshop-code { padding: 32px 28px; font: 14px/2 ui-monospace,SFMono-Regular,Consolas,monospace; }.code-muted { color: var(--tone-text-muted); }.code-blue { color: var(--md-sys-color-primary); }.code-cursor { color: var(--md-sys-color-primary); }
.workshop-bottom { padding: 16px 28px; color: var(--tone-text-muted); border-top: 1px solid var(--md-sys-color-outline-variant); font-size: 12px; display: flex; align-items: center; gap: 8px; }.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--md-sys-color-primary); }
.app-directory { padding-block: 72px 88px; }.directory-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 32px; }.directory-heading h2 { font-size: clamp(26px,3vw,36px); letter-spacing: -.8px; }.directory-heading .eyebrow { margin-bottom: 10px; }#app-count { font-size: 13px; color: var(--tone-text-muted); white-space: nowrap; margin: 0 0 4px; }
.search-container { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 60px; padding: 0 20px; border: 1px solid var(--md-sys-color-outline-variant); border-radius: 16px; background: var(--md-sys-color-surface-container); }.search-container:focus-within { border-color: var(--md-sys-color-primary); }.search-container svg { width: 22px; flex: 0 0 22px; color: var(--tone-text-muted); }#app-search { width: 100%; min-width: 0; padding-block: 17px; color: var(--md-sys-color-on-surface); background: transparent; border: 0; outline: 0; font-size: 16px; }#app-search::placeholder { color: var(--tone-text-muted); opacity: 1; }
.category-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 20px 48px; }.category-btn { padding: 9px 18px; min-height: 44px; font-size: 13px; font-weight: 500; border-radius: 999px; border: 1px solid var(--md-sys-color-outline-variant); background: transparent; color: var(--md-sys-color-on-surface-variant); cursor: pointer; }.category-btn.active { border-color: transparent; background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.category { margin-top: 48px; }.category-title { font-size: 23px; letter-spacing: -.3px; margin-bottom: 22px; }.apps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }.card { display: flex; flex-direction: column; align-items: start; padding: 28px; border-radius: 28px; background: var(--md-sys-color-surface-container); border: 1px solid var(--md-sys-color-outline-variant); min-width: 0; transition: transform .28s,border-color .28s; }.card:hover { border-color: var(--md-sys-color-primary); transform: translateY(-4px); }.app-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--md-sys-color-on-primary-container); background: var(--md-sys-color-primary-container); margin-bottom: 24px; }.app-icon svg { width: 22px; height: 22px; }.card h2 { font-size: 21px; overflow-wrap: anywhere; }.card p { color: var(--md-sys-color-on-surface-variant); font-size: 14px; margin-block: 14px 24px; }.app-link { display: inline-flex; align-items: center; min-height: 44px; gap: 10px; margin-top: auto; font-size: 14px; font-weight: 600; text-decoration: none; }.app-link::after { content: '↗'; }
#no-results { padding-block: 48px; text-align: center; color: var(--tone-text-muted); }
footer { border-top: 1px solid var(--md-sys-color-outline-variant); padding-block: 28px; color: var(--tone-text-muted); font-size: 13px; }.footer-row,.footer-row > div { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; }.footer-row a { color: var(--md-sys-color-on-surface-variant); text-decoration: none; }#heart-trigger { color: var(--md-sys-color-primary); background: none; border: none; padding: 10px 6px; font-size: 20px; cursor: pointer; touch-action: none; user-select: none; }
.cookie-banner { position: fixed; inset: auto 20px 20px; margin-inline: auto; max-width: 900px; padding: 24px; background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface); border: 1px solid var(--md-sys-color-outline-variant); border-radius: 28px; box-shadow: var(--md-elev-3); z-index: 1050; display: none; }.cookie-banner.show { display: block; }.cookie-content { display: flex; align-items: center; gap: 24px; }.cookie-text { font-size: 13px; flex: 1; }.cookie-buttons { display: flex; gap: 8px; }.cookie-btn { min-height: 44px; padding: 10px 18px; border-radius: 999px; font-size: 13px; border: 1px solid var(--md-sys-color-outline); background: transparent; color: var(--md-sys-color-on-surface); cursor: pointer; }.cookie-btn.accept { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); border-color: transparent; }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); padding: 16px 24px; border-radius: 16px; color: var(--md-sys-color-on-primary-container); background: var(--md-sys-color-primary-container); box-shadow: var(--md-elev-2); z-index: 1060; max-width: calc(100% - 32px); font-size: 14px; }
@media (max-width: 1000px) { .hero-grid { gap: 40px; }.workshop-code { font-size: 12px; padding: 24px; }.apps { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 700px) { .portal-container { width: calc(100% - 32px); }.hero-grid { grid-template-columns: 1fr; padding-block: 56px; gap: 40px; }.workshop { transform: none; max-width: 520px; }.workshop-code { font-size: 13px; }.app-directory { padding-block: 48px; }.directory-heading { align-items: start; flex-direction: column; gap: 16px; }.category-nav { margin-bottom: 32px; }.category-btn { padding-inline: 14px; }.card { padding: 24px; }.cookie-content { flex-direction: column; align-items: start; }.footer-row { gap: 4px; }.footer-row p { margin-block: 0; } }
@media (max-width: 520px) { .apps { grid-template-columns: 1fr; }h1 { letter-spacing: -1px; }.hero-intro { font-size: 16px; }.workshop-top { padding-inline: 20px; }.workshop-code { padding-inline: 20px; font-size: 12px; } }