/* Pocket Break / arcade kit. Type, color, spacing and component states live here. */
:root {
  color-scheme: light;
  --ink: #20243a;
  --ink-soft: #596073;
  --paper: #f4f3ed;
  --white: #fffefa;
  --line: #d8d9d2;
  --blue: #345af4;
  --lime: #c7f06e;
  --focus: #294aeb;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --shadow-card: 0 3px 0 #20243a;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --font: "Segoe UI", Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-family: var(--font);
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
button:disabled { cursor: default; opacity: .55; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
button[hidden], section[hidden], div[hidden] { display: none !important; }
svg { display: block; }
.skip { position: fixed; top: -100px; left: 12px; z-index: 30; background: var(--lime); padding: 12px 20px; border: 2px solid var(--ink); }
.skip:focus { top: 12px; }
.arcade-shell { max-width: 1760px; margin: auto; display: grid; grid-template-columns: 210px minmax(0,1fr); min-height: 100svh; }
.sidebar { background: var(--ink); color: #f8f6ee; padding: 34px 18px 24px; display: flex; flex-direction: column; min-height: 100svh; position: sticky; top: 0; align-self: start; height: 100svh; border-right: 2px solid var(--ink); }
.brand { display: flex; align-items: center; gap: 12px; margin: 0 8px 48px; font-size: 26px; line-height: .91; font-weight: 550; letter-spacing: -1.6px; }
.brand b { font-weight: 900; }.brand b span { color: var(--lime); }
.brand-symbol { position: relative; display: block; width: 38px; height: 38px; transform: rotate(-12deg); flex-shrink: 0; }
.brand-symbol i { position: absolute; width: 17px; height: 17px; background: var(--lime); border-radius: 6px 2px 6px 2px; }
.brand-symbol i:nth-child(2){left:21px;transform:rotate(90deg)}.brand-symbol i:nth-child(3){top:21px;transform:rotate(90deg)}.brand-symbol i:nth-child(4){left:21px;top:21px}
.nav-label { margin: 0 13px 14px; font-size: 10px; letter-spacing: 1.8px; font-weight: 750; color: #a8acbd; }
.main-nav { display: grid; gap: 8px; }
.nav-item { border: 1px solid transparent; background: transparent; min-height: 48px; padding: 10px 12px; display: flex; align-items: center; gap: 12px; text-align: left; font-size: 13px; font-weight: 650; border-radius: 9px; color: #dddfe8; }
.nav-item svg, .nav-install svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.nav-item:first-child svg { fill: currentColor; stroke: none; }
.nav-item.selected { color: var(--ink); background: var(--lime); box-shadow: 0 3px 0 #060c1b; }
.nav-item:not(.selected):hover { background: #30374f; color: white; }
.nav-count { font-size: 11px; margin-left: auto; background: #ffffff17; padding: 3px 6px; border-radius: 4px; }
.selected .nav-count { background: #20243a14; }
.sidebar-bottom { margin-top: auto; padding: 34px 12px 0; }
.edition { color: #a8acbd; font: 600 10px/1.5 var(--font); letter-spacing: 1px; }
.sidebar-bottom>p { font-size: 24px; line-height: 1.15; letter-spacing: -.7px; font-weight: 750; margin: 15px 0 24px; }
.nav-install { display: flex; align-items: center; gap: 9px; padding: 12px 0; background: transparent; border: none; color: var(--lime); font-size: 13px; font-weight: 700; min-height: 44px; }
.offline-state { display: block; font-size: 10px; color: #adb4c9; line-height: 1.5; max-width: 155px; }
.main-column { min-width: 0; }
.topbar { height: 78px; padding: 0 38px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); gap: 20px; }
.topbar-label { font-size: 10px; letter-spacing: 1.6px; font-weight: 750; color: var(--ink-soft); }
.topbar-actions { display: flex; gap: 8px; }
.mobile-brand, .mobile-install { display: none!important; }
.button { border: 1.5px solid var(--ink); border-radius: var(--radius-sm); padding: 12px 19px; min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 11px; font-weight: 750; font-size: 13px; box-shadow: 0 2px 0 var(--ink); transition: transform .14s, box-shadow .14s, background .14s; }
.button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.button:hover { transform: translateY(-2px); box-shadow: 0 4px 0 var(--ink); }
.button:active { transform: translateY(2px); box-shadow: none; }
.button-ink { background: var(--ink); color: white; }
.button-ink:hover { background: #353d5c; }
.button-blue { background: var(--blue); color: white; }
.button-light { background: var(--white); color: var(--ink); }
.icon-button { min-width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 8px; background: transparent; display: inline-grid; place-items: center; }
.icon-button svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; }
main { padding: 30px 38px 0; max-width: 1450px; margin: auto; }
.library-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 25px; }
.eyebrow { font-size: 10px; font-weight: 800; letter-spacing: 1.4px; margin: 0 0 8px; }
h1 { font-size: clamp(38px,4vw,52px); font-weight: 850; letter-spacing: -2.7px; margin: 0; line-height: 1; }
.title-period { color: var(--blue); }
.library-info { text-align: right; display: grid; gap: 9px; font-size: 11px; color: var(--ink-soft); padding-bottom: 2px; }
.catalog-stat { font-size: 10px; font-weight: 750; letter-spacing: .8px; color: var(--ink); }
.catalog-stat b { font-size: 20px; margin-right: 7px; letter-spacing: -.5px; }
.library-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 24px; }
.genre-tabs { display: flex; gap: 6px; }
.genre { background: transparent; border: 1px solid transparent; border-radius: 30px; min-height: 44px; padding: 9px 17px; font-size: 13px; font-weight: 650; color: var(--ink-soft); }
.genre:hover { background: #e5e5de; }
.genre.active { background: var(--ink); color: white; border-color: var(--ink); }
.search { width: 215px; height: 42px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid #999eaa; padding: 0 2px; }
.search svg { width: 17px; height: 17px; stroke: var(--ink-soft); stroke-width: 1.8; fill: none; flex-shrink: 0; }
.search input { width: 100%; min-width: 0; border: 0; background: transparent; color: var(--ink); font-size: 13px; padding: 9px 4px; }
.game-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
.game-card { position: relative; border: 1.5px solid var(--ink); border-radius: var(--radius-md); background: var(--white); box-shadow: var(--shadow-card); overflow: clip; display: flex; flex-direction: column; transition: transform .18s, box-shadow .18s; }
.game-card:hover { transform: translateY(-3px); box-shadow: 0 6px 0 var(--ink); }
.card-cover { position: relative; aspect-ratio: 16/8.8; width: 100%; overflow: hidden; display: block; border-bottom: 1.5px solid var(--ink); background: var(--accent); }
.card-cover img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.game-card:hover .card-cover img { transform: scale(1.035); }
.card-number { position: absolute; top: 12px; left: 12px; background: var(--white); color: var(--ink); border: 1px solid var(--ink); font: 800 10px/1 var(--font); padding: 7px 8px; border-radius: 5px; letter-spacing: 1px; box-shadow: 0 2px 0 var(--ink); }
.favorite { position: absolute; z-index: 2; right: 10px; top: 9px; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--ink); border-radius: 50%; color: var(--ink); background: #fffefaeb; }
.favorite svg { width: 20px; height: 20px; fill: transparent; stroke: currentColor; stroke-width: 1.7; }
.favorite[aria-pressed="true"] { background: #ffdc6d; }
.favorite[aria-pressed="true"] svg { fill: var(--ink); }
.favorite:hover { transform: rotate(-10deg); }
.card-body { padding: 17px 18px 15px; display: flex; flex-direction: column; flex: 1; }
.card-category { font-size: 9px; font-weight: 800; color: var(--ink-soft); letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 5px; }
.card-body h2 { font-size: clamp(21px,2vw,28px); font-weight: 850; letter-spacing: -1px; line-height: 1.08; margin: 0; }
.card-summary { font-size: 12px; line-height: 1.6; margin: 9px 0 16px; color: var(--ink-soft); flex: 1; max-width: 37em; }
.card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card-content { font-size: 10px; font-weight: 700; color: var(--ink-soft); display: flex; gap: 5px; align-items: center; }
.card-content b { font-size: 15px; color: var(--ink); }
.play-link { min-height: 44px; min-width: 75px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; border: 1.5px solid var(--ink); padding: 9px 12px; border-radius: 7px; font-size: 12px; font-weight: 800; background: var(--accent); box-shadow: 0 2px 0 var(--ink); }
.play-link:hover { background: var(--ink); color: white; }
.play-link svg { width: 13px; height: 13px; fill: currentColor; }
.game-card.featured { grid-column: span 2; display: grid; grid-template-columns: 56% 44%; background: #e4eaca; }
.featured .card-cover { height: 100%; aspect-ratio: auto; border-bottom: 0; border-right: 1.5px solid var(--ink); min-height: 312px; }
.featured .card-cover img { object-fit: cover; }
.featured .card-body { padding: 32px 25px 24px; justify-content: center; }
.featured .card-category { margin-bottom: 11px; color: #43563d; font-size: 9px; letter-spacing: 1.4px; }
.featured h2 { font-size: clamp(36px,3.1vw,47px); line-height: .98; letter-spacing: -2px; max-width: 220px; }
.featured .card-summary { flex: 0; font-size: 13px; line-height: 1.6; color: #43513e; margin: 16px 0 24px; }
.featured .card-bottom { flex-wrap: wrap; align-items: flex-start; gap: 17px; }
.featured .play-link { width: 100%; min-height: 46px; background: var(--ink); color: #fffefa; justify-content: space-between; padding: 12px 17px; font-size: 13px; }
.featured .play-link:hover { background: #34583c; }
.featured .card-content { color: #536149; order: 2; font-size: 11px; }
.featured .favorite { right: auto; left: calc(56% - 56px); }
.featured .card-number { background: #c7f06e; font-size: 9px; }
.game-card:nth-child(2) .card-cover { flex: 1; min-height: 137px; max-height: 168px; }
.game-grid.filtered .featured { grid-column: span 1; display: flex; background: var(--white); }
.game-grid.filtered .featured .card-cover { min-height: 0; aspect-ratio:16/8.8; border-right:0; border-bottom:1.5px solid var(--ink); }
.game-grid.filtered .featured .card-body { padding: 17px 18px 15px; }
.game-grid.filtered .featured h2 { font-size:28px;letter-spacing:-1px; }
.game-grid.filtered .featured .card-summary { font-size:12px; margin:9px 0 16px; }
.game-grid.filtered .featured .favorite { left:auto;right:10px; }
.game-grid.filtered .featured .play-link { width:auto; min-width:75px; }
.game-grid.filtered .featured .card-content { order:0; }
.shelf-foot { display:flex; justify-content:space-between; align-items:center; gap:12px; border-bottom:1px solid var(--line); padding:25px 0; }
.shelf-label { display:flex; align-items:center;gap:8px;font-size:9px;letter-spacing:1.2px;font-weight:800; }
.shelf-label i { width:8px;height:8px;background:var(--blue);transform:rotate(45deg); }
.shelf-foot p {font-size:11px;color:var(--ink-soft);}
.text-button { background:none;border:0;padding:10px 0;min-height:44px;font-size:12px;font-weight:700;text-decoration:underline;text-underline-offset:4px; }
.text-button span { margin-left:12px; }
.how-it-works { display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding:25px 0 34px; }
.how-it-works>div {display:flex;gap:13px;align-items:flex-start;}
.info-number {font-size:10px;font-weight:800;border:1px solid #b5b9c0;border-radius:5px;padding:4px 5px;margin-top:2px;}
.how-it-works p {margin:0;display:grid;gap:5px;line-height:1.4;}
.how-it-works b {font-size:12px;}
.how-it-works p span {font-size:11px;color:var(--ink-soft);}
footer {display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 38px;padding:20px 0 25px;border-top:1px solid var(--line);font-size:10px;color:var(--ink-soft);}
.footer-wordmark {font-weight:900;letter-spacing:-.5px;color:var(--ink);font-size:13px;}
.footer-wordmark>span {font-size:8px;vertical-align:top;margin-left:2px;}
.empty-state {min-height:330px;border:1px dashed #9198a6;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;}
.empty-state>svg {width:40px;height:40px;stroke:var(--ink-soft);stroke-width:1;fill:none;}
.empty-state h2 {font-size:24px;letter-spacing:-.7px;margin:18px 0 0;}
.empty-state p {font-size:14px;color:var(--ink-soft);max-width:360px;margin-bottom:24px;}
dialog {width:min(460px,calc(100% - 30px));color:var(--ink);background:var(--white);border:2px solid var(--ink);border-radius:18px;padding:26px;box-shadow:7px 7px 0 #12162766;}
dialog::backdrop {background:#172239a8;backdrop-filter:blur(3px);}
.dialog-top {display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;}
.dialog-top .eyebrow {margin:0;}
.close {font-size:26px;line-height:1;}
dialog>img {border-radius:13px;}
dialog h2 {font-size:32px;letter-spacing:-1.4px;line-height:1.05;margin:18px 0 13px;}
dialog p {font-size:14px;line-height:1.65;color:var(--ink-soft);}
.install-steps {margin:24px 0 0;border-top:1px solid var(--line);}
.install-steps h3 {font-size:13px;margin:18px 0 4px;}
.install-steps p {margin:0;font-size:13px;}
dialog .dialog-note {font-size:11px;border-top:1px solid var(--line);padding-top:16px;margin-bottom:0;}
#native-install {width:100%;}
.toast {position:fixed;bottom:20px;left:50%;transform:translate(-50%,15px);opacity:0;pointer-events:none;z-index:40;background:var(--ink);color:white;border:1px solid #fff6;border-radius:9px;padding:12px 20px;font-size:13px;box-shadow:0 5px 20px #10152226;transition:opacity .18s,transform .18s;}
.toast.visible {opacity:1;transform:translate(-50%,0);}
@media(min-width:1550px){main{padding-top:38px}.game-card .card-cover{aspect-ratio:16/8}.featured .card-cover{aspect-ratio:auto;min-height:360px}.card-summary{font-size:14px}.card-category{font-size:10px}.card-body{padding:20px 22px}.featured .card-body{padding:35px}}
@media(max-width:1180px){.arcade-shell{grid-template-columns:176px minmax(0,1fr)}.sidebar{padding:28px 12px}.brand{font-size:24px;gap:8px;margin:0 6px 37px}.brand-symbol{transform:rotate(-12deg) scale(.85);width:34px}.nav-item{font-size:12px;padding:10px 9px;gap:8px}.topbar{padding:0 26px}.topbar-label{font-size:9px;letter-spacing:1px}main{padding-left:26px;padding-right:26px}.game-grid{gap:18px}.featured .card-body{padding:25px 18px}.featured h2{font-size:37px}.featured .card-cover{min-height:320px}.card-body{padding:15px 14px}.card-body h2{font-size:24px}.card-summary{font-size:12px}.shelf-foot p{display:none}footer{margin:0 26px}.how-it-works{gap:14px}.how-it-works>div{gap:9px}}
@media(max-width:980px){.arcade-shell{grid-template-columns:152px minmax(0,1fr)}.sidebar{padding:25px 8px}.brand{font-size:22px;margin-bottom:34px}.brand-symbol{display:none}.nav-label{font-size:9px;margin-left:10px}.nav-item{font-size:11px;gap:8px}.nav-item svg{width:16px;height:16px}.nav-count{display:none}.sidebar-bottom{padding-left:10px}.sidebar-bottom>p{font-size:21px}.nav-install{font-size:12px}.topbar-label{display:none}.topbar{justify-content:flex-end;height:69px}.library-info{display:none}.game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.game-card.featured{grid-column:span 2;min-height:265px}.featured .card-cover{min-height:265px}.featured .card-body{padding:28px}.featured .card-summary{font-size:14px;margin-bottom:16px}.featured h2{font-size:42px}.featured .card-bottom{gap:12px}.game-card:nth-child(2) .card-cover{max-height:none;min-height:0}.how-it-works{grid-template-columns:1fr;padding:22px 0;gap:15px}.how-it-works>div p{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}.how-it-works b{font-size:13px}.how-it-works p span{font-size:12px}.search{width:155px}.genre{padding:8px 12px;font-size:12px}.library-toolbar{gap:8px}.footer-note{display:none}}
@media(max-width:720px){.arcade-shell{display:block}.sidebar{position:static;min-height:0;height:auto;border:0;padding:0;background:var(--paper);color:var(--ink)}.sidebar .brand,.nav-label,.sidebar-bottom{display:none}.main-nav{display:flex;gap:2px;padding:0 18px;border-bottom:1px solid var(--line);overflow:auto;position:absolute;top:66px;left:0;right:0;height:51px;z-index:2;background:var(--white)}.nav-item{min-height:44px;border-radius:0;padding:8px 12px;font-size:12px;gap:7px;flex-shrink:0;color:var(--ink-soft);margin-bottom:0}.nav-item.selected{background:none;color:var(--ink);box-shadow:none;border-bottom:3px solid var(--blue)}.nav-item:not(.selected):hover{background:#e7e9ed;color:var(--ink)}.nav-count{display:block;font-size:10px;background:#20243a0e}.selected .nav-count{background:#345af416}.main-column{padding-top:51px}.topbar{height:66px;padding:0 18px;background:var(--ink);color:var(--white);position:absolute;top:0;left:0;right:0;justify-content:space-between;border:0}.mobile-brand{display:block!important;font-weight:850;letter-spacing:-1px;font-size:22px}.mobile-brand>span{color:var(--lime)}.mobile-install{display:inline-grid!important;color:var(--white);border-color:#ffffff45;min-width:44px}.topbar .button{background:#ffffff12;border-color:#ffffff45;box-shadow:none;font-size:11px;min-height:44px;padding:9px 12px}.topbar .button svg{width:16px;height:16px}.topbar-actions{gap:7px}.topbar .button:hover{transform:none}main{padding:94px 18px 0}.library-heading{margin-bottom:20px}.eyebrow{font-size:9px;letter-spacing:1.3px}h1{font-size:40px;letter-spacing:-2px}.library-toolbar{flex-wrap:wrap;gap:12px;margin-bottom:21px}.genre-tabs{gap:2px;width:100%;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:10px}.genre{font-size:12px;padding:8px 16px;min-height:42px}.search{width:100%;height:38px}.search input{font-size:14px}.game-grid{gap:18px}.game-card.featured{grid-column:span 2;grid-template-columns:53% 47%;min-height:260px}.featured .card-cover{min-height:260px}.featured .card-body{padding:24px 18px}.featured h2{font-size:38px}.featured .card-summary{font-size:12px;line-height:1.55;margin:13px 0 17px}.featured .card-category{font-size:8px;letter-spacing:1px}.featured .favorite{left:calc(53% - 52px);top:10px}.featured .card-number{font-size:8px;left:10px;top:12px}.featured .card-content{font-size:10px}.featured .card-bottom{gap:10px}.featured .play-link{font-size:12px}.card-body{padding:15px 13px 13px}.card-body h2{font-size:23px;letter-spacing:-.8px}.card-summary{font-size:12px;line-height:1.55}.card-category{font-size:8px}.card-content{font-size:9px}.card-content b{font-size:13px}.favorite{width:40px;height:40px;right:8px;top:8px}.card-number{top:10px;left:10px;font-size:9px}.card-bottom{flex-wrap:wrap;gap:10px}.play-link{min-height:44px;font-size:12px;flex:1}.shelf-foot{padding:18px 0;flex-wrap:wrap}.shelf-label{font-size:8px}.text-button{font-size:11px}.how-it-works{padding:23px 0 26px}.how-it-works p{display:grid!important;gap:4px!important}.how-it-works p span{font-size:12px}footer{margin:0 18px;flex-wrap:wrap;gap:8px;padding-top:17px;font-size:9px}.footer-wordmark{font-size:12px}.game-grid.filtered .featured h2{font-size:23px}.game-grid.filtered .featured .card-body{padding:15px 13px 13px}.game-grid.filtered .featured .card-content{order:0}.game-grid.filtered .featured .play-link{min-width:66px}.game-grid.filtered .featured .card-summary{font-size:12px}.empty-state{min-height:300px}}
@media(max-width:440px){.topbar .button{font-size:0;padding:9px 12px}.topbar .button svg{width:21px;height:21px}.game-grid{gap:16px 13px}.game-card.featured{display:flex;min-height:0}.featured .card-cover{height:192px;min-height:0;aspect-ratio:auto;border-right:0;border-bottom:1.5px solid var(--ink)}.featured .card-cover img{object-fit:cover}.featured .card-body{padding:20px}.featured h2{font-size:34px;max-width:none}.featured .card-summary{font-size:13px;margin:10px 0 17px;max-width:300px}.featured .card-category{font-size:9px;margin-bottom:7px}.featured .card-bottom{flex-wrap:nowrap;align-items:center}.featured .card-content{order:0;flex-shrink:0;font-size:11px}.featured .play-link{width:auto;min-width:115px;flex:0}.featured .favorite{left:auto;right:10px}.featured .card-number{font-size:9px}.card-cover{aspect-ratio:1.25}.card-body h2{font-size:20px}.card-summary{display:none}.featured .card-summary{display:block}.card-category{font-size:8px;line-height:1.5;margin-bottom:5px}.card-content{font-size:10px;margin-top:13px}.card-bottom{display:grid;gap:10px}.play-link{justify-content:space-between;padding:10px 12px}.favorite{width:44px;height:44px}.card-number{font-size:8px;padding:5px 6px;top:12px;left:8px}.shelf-foot{display:block}.shelf-foot .text-button{margin-top:6px}.game-grid.filtered .featured .card-body{padding:15px 13px 13px}.game-grid.filtered .featured .card-bottom{display:grid}.game-grid.filtered .featured .card-summary{display:none}.game-grid.filtered .featured h2{font-size:20px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
/* Small-screen library density and readable card metadata. */
.card-summary { font-size: 14px; }
.card-category { font-size: 10px; }
.card-content { font-size: 12px; }
.game-grid.filtered .featured .card-summary { font-size: 14px; }
@media(max-width:720px) { .favorite { width:44px; height:44px; } .genre { min-height:44px; } .main-nav { padding:0 8px; } .nav-item { padding-left:10px; padding-right:10px; font-size:11px; } }
@media(max-width:440px) { .featured .card-cover { height:148px; } .featured .card-body { padding:16px; } .featured .card-body h2 { font-size:30px; } .featured .card-category { margin-bottom:4px; } .featured .card-summary { margin:8px 0 12px; font-size:13px; } .featured .card-bottom { display:flex; } .featured .card-content { margin-top:0; } .card-category { font-size:9px; } .card-content { font-size:11px; } .library-heading { margin-bottom:16px; } .library-toolbar { gap:9px; margin-bottom:18px; } }
.brand-symbol { width:42px; height:42px; transform:rotate(-8deg); border-radius:10px; }
.play-link { color:var(--accent-ink,var(--ink)); }.play-link:hover { color:white; }.featured .play-link { color:#fffefa; }