:root { --ink:#102454; --ink-soft:#52617e; --paper:#f7f4ee; --blue:#55b9f2; font-family:Inter,ui-rounded,"SF Pro Rounded",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; }
body { min-height:100vh; margin:0; background:radial-gradient(circle at 9% 5%,rgba(85,185,242,.17),transparent 28rem),radial-gradient(circle at 92% 12%,rgba(255,207,81,.2),transparent 25rem),var(--paper); }
a { color:inherit; text-decoration:none; }
.home-shell { width:min(100% - 2rem,1120px); margin:0 auto; padding:clamp(1.1rem,4vw,2.4rem) 0 4rem; }
.brand-header { position:relative; display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.brand-lockup { display:flex; align-items:center; gap:clamp(.85rem,3vw,1.3rem); }
.brand-lockup img { width:clamp(3.8rem,11vw,5rem); height:auto; border-radius:1.1rem; box-shadow:0 .7rem 1.8rem rgba(16,36,84,.15); }
.brand-kicker,.section-kicker { margin:0 0 .2rem; color:var(--ink-soft); font-size:.7rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
h1 { margin:0; font-size:clamp(2.15rem,8vw,4rem); letter-spacing:-.06em; line-height:.95; }
.brand-tagline { margin:.45rem 0 0; color:var(--ink-soft); font-size:clamp(.88rem,3vw,1.08rem); font-weight:750; }
.settings-link { flex:0 0 auto; width:2.7rem; height:2.7rem; border:1.5px solid rgba(16,36,84,.18); border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.78); box-shadow:0 .35rem 1rem rgba(16,36,84,.09); transition:transform .2s ease,background .2s ease; }
.settings-link svg { width:1.2rem; height:1.2rem; fill:var(--ink); }
.settings-link:hover { background:white; transform:rotate(14deg); }
.settings-link:focus-visible { outline:3px solid var(--blue); outline-offset:3px; }
.library-intro { max-width:48rem; margin:clamp(3.2rem,9vw,6rem) 0 1.7rem; }
.library-intro h2 { margin:0; font-size:clamp(1.8rem,5vw,3rem); letter-spacing:-.045em; line-height:1.05; }
.library-intro>p:last-child { margin:.8rem 0 0; color:var(--ink-soft); font-size:clamp(.95rem,2.4vw,1.08rem); line-height:1.55; }
.deck-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr)); gap:1rem; }
.deck-tile { min-width:0; overflow:hidden; border:1px solid rgba(16,36,84,.13); border-radius:1.35rem; background:rgba(255,255,255,.82); box-shadow:0 .55rem 1.6rem rgba(16,36,84,.08); transition:transform .22s ease,box-shadow .22s ease; }
.deck-tile:hover { transform:translateY(-.25rem); box-shadow:0 .9rem 2rem rgba(16,36,84,.13); }
.deck-tile__link { height:100%; padding:1rem; display:grid; grid-template-columns:7.2rem minmax(0,1fr); gap:1rem; }
.deck-tile__link:focus-visible { outline:3px solid var(--blue); outline-offset:-4px; border-radius:1.2rem; }
.deck-cover { width:100%; aspect-ratio:16/25; overflow:hidden; border:4px solid var(--ink); border-radius:.85rem; align-self:start; background:white; box-shadow:.32rem .38rem 0 rgba(16,36,84,.13); }
.deck-cover img { width:100%; height:100%; display:block; object-fit:fill; }
.deck-copy { min-width:0; display:flex; flex-direction:column; align-items:flex-start; }
.deck-meta { display:flex; flex-wrap:wrap; gap:.35rem; }
.deck-meta span { padding:.26rem .42rem; border-radius:99px; color:var(--ink-soft); background:rgba(16,36,84,.065); font-size:.65rem; font-weight:800; }
.deck-copy h3 { margin:.72rem 0 0; font-size:clamp(1.25rem,3.8vw,1.65rem); letter-spacing:-.035em; line-height:1.08; }
.deck-copy p { margin:.55rem 0 1rem; color:var(--ink-soft); font-size:.86rem; line-height:1.48; }
.open-deck { margin-top:auto; color:#146d9b; font-size:.82rem; font-weight:900; }
.open-deck span { display:inline-block; transition:transform .18s ease; }
.deck-tile:hover .open-deck span { transform:translateX(.25rem); }
.empty-library { padding:4rem 1rem; border:2px dashed rgba(16,36,84,.2); border-radius:1.2rem; text-align:center; }
@media (max-width:430px) { .home-shell{width:min(100% - 1.25rem,1120px)} .brand-lockup{align-items:flex-start} .brand-tagline{max-width:13rem} .deck-tile__link{grid-template-columns:6.3rem minmax(0,1fr);padding:.85rem;gap:.85rem} .deck-copy p{font-size:.8rem} }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after{scroll-behavior:auto!important;transition:none!important} }