:root{--att-card-r: 18px;--att-pad: 12px;--att-gap: 14px;--att-shadow: 0 10px 24px rgba(0,0,0,.22)}.att-grid{display:grid;gap:var(--att-gap);grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}.att-card{display:grid;grid-template-rows:auto 1fr;border:1px solid var(--color-border);border-radius:var(--att-card-r);background:var(--color-background);overflow:hidden;transition:transform .12s ease,box-shadow .15s ease,border-color .12s ease;position:relative;text-align:left}.att-card:hover{transform:translateY(-2px);box-shadow:var(--att-shadow);border-color:var(--color-accent)}.att-card:active,.att-tile:active{transform:translateY(0);box-shadow:none}.att-thumb{aspect-ratio:16 / 10;overflow:hidden;background:color-mix(in srgb,var(--color-text),transparent 92%);position:relative}.att-thumb>img{width:100%;height:100%;object-fit:cover;display:block}.att-body{display:grid;gap:6px;padding:var(--att-pad) var(--att-pad) 14px}.att-title{font:var(--text-title-m);line-height:1.15}.att-subtle{font:var(--text-caption);opacity:.8}.att-kicker{font:var(--text-body);opacity:.9}.att-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid var(--color-border);background:var(--color-background);font:var(--text-caption)}.att-tile{border:1px solid var(--color-border);border-radius:14px;overflow:hidden;background:var(--color-background);transition:transform .12s ease,border-color .12s ease,box-shadow .15s ease;cursor:pointer}.att-tile:hover{transform:translateY(-2px);border-color:var(--color-accent);box-shadow:var(--att-shadow)}.att-tile img{width:100%;height:100%;object-fit:cover;display:block}.att-load{display:grid;place-items:center;height:44px;border-radius:999px;border:1px solid var(--color-border);background:var(--color-background);font:var(--text-body);transition:background .12s ease,border-color .12s ease;padding:0 18px}.att-load:hover{border-color:var(--color-accent)}.att-card__media{display:block;border:0;padding:0;margin:0;background:transparent;width:100%;cursor:pointer;text-align:inherit}.att-actions{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}.att-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--color-border);background:var(--color-background);color:var(--color-text);font:var(--text-body);height:40px;padding:0 14px;border-radius:999px;cursor:pointer;transition:transform .12s ease,border-color .12s ease,box-shadow .15s ease}.att-btn:hover{border-color:var(--color-accent);box-shadow:var(--att-shadow)}.att-btn:active{transform:translateY(0);box-shadow:none}.att-btn--primary{background:var(--color-accent);color:var(--color-accent-contrast, #000);border-color:color-mix(in srgb,var(--color-accent),#000 8%)}.att-btn--tertiary{background:transparent}.att-badge{position:absolute;top:10px;left:10px;padding:6px 10px;border-radius:999px;border:1px solid var(--color-border);background:color-mix(in srgb,var(--color-background),transparent 10%);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font:var(--text-caption)}.att-card__media:focus-visible,.att-btn:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;border-radius:14px}.att-icon-btn{-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:transparent;color:inherit;width:40px;height:40px;border-radius:999px;display:grid;place-items:center;cursor:pointer;position:relative;overflow:hidden;transition:background-color .14s ease,transform .12s ease}.att-icon-btn:hover{background:color-mix(in srgb,var(--color-text),transparent 92%)}.att-icon-btn:focus-visible{outline:2px solid color-mix(in srgb,var(--color-accent),transparent 30%);outline-offset:2px}.att-icon-btn:active{background:color-mix(in srgb,var(--color-text),transparent 88%);transform:scale(.96)}.att-icon-btn:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;opacity:0;transform:scale(.2);background:radial-gradient(circle at center,color-mix(in srgb,var(--color-text),transparent 65%) 0%,transparent 60%);transition:opacity .22s ease,transform .22s ease;pointer-events:none}.att-icon-btn:active:after{opacity:1;transform:scale(1.25);transition:opacity 80ms ease,transform .22s ease}@media (max-width: 520px){.att-icon-btn{width:44px;height:44px}}@media (prefers-reduced-motion: reduce){.att-icon-btn,.att-icon-btn:after{transition:none}}header,header *{pointer-events:auto}:root{--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;--space-xl: 24px;--space-2xl: 32px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-pill: 999px;--control-h: 44px;--fab: 56px}:root[data-theme=light]{--color-background: #f6f4ec;--color-text: #020808;--color-accent: #40E0D0;--color-neutral: #6A7070;--color-border: #6A7070}:root[data-theme=dark]{--color-background: #020808;--color-text: #f6f4ec;--color-accent: #40E0D0;--color-neutral: #6A7070;--color-border: color-mix(in srgb, #6A7070 35%, transparent);--color-border-fallback: rgba(106,112,112,.35)}@media (prefers-color-scheme: dark){:root:not([data-theme=light]){--color-background: #020808;--color-text: #f6f4ec;--color-accent: #40E0D0;--color-neutral: #6A7070;--color-border: color-mix(in srgb, #6A7070 35%, transparent);--color-border-fallback: rgba(106,112,112,.35)}}:root,:root[data-theme=light],:root[data-theme=dark]{--bg: var(--color-background);--text: var(--color-text);--accent: var(--color-accent);--neutral: var(--color-neutral);--border: var(--color-border, var(--color-border-fallback, rgba(106,112,112,.35)))}html,body{background:var(--bg);color:var(--text)}.button{height:var(--control-h);padding:0 var(--space-md);border-radius:var(--radius-pill);background:var(--accent);color:var(--bg);border:1px solid var(--border);font-weight:600}.card{background:#ffffff08;border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-xl)}*,*:before,*:after{box-sizing:border-box}html,body{height:100%;margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif}body{min-height:100vh;background:var(--color-background);color:var(--color-text);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif}#root{min-height:100vh;width:100%}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}button{font:inherit;color:inherit}:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}