@layer base, frame, parts, pages;

@layer base {
  :root {
    --sky: #8ed9f9; --sky-deep: #5fc4ee; --sky-pale: #e4f6fe; --blue: #00468c; --navy: #06305f;
    --sun: #fac800; --sun-pale: #fff3bf; --grass: #3db724; --grass-pale: #dcf5d3; --red: #eb0029; --rose: #ffd9dd;
    --ink: #1d2b3a; --mute: #57687a; --line: #dfe6ec; --paper: #fff; --cloud: #f5f8fa;
    --head: "Baloo 2", "Trebuchet MS", sans-serif; --text: "Figtree", system-ui, sans-serif;
    --wrap: 1290px; --pad: clamp(16px, 4vw, 40px);
  }
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  body { margin: 0; font: 400 17px/1.6 var(--text); color: var(--ink); background: var(--paper); overflow-wrap: anywhere; }
  img { display: block; max-inline-size: 100%; block-size: auto; }
  a { color: var(--blue); text-underline-offset: 3px; }
  h1, h2, h3 { font-family: var(--head); line-height: 1.08; margin: 0; color: var(--ink); letter-spacing: -.01em; }
  h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); font-weight: 800; }
  h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 800; }
  h3 { font-size: 1.25rem; font-weight: 700; }
  p { margin: 0 0 1em; }
  button { font: inherit; }
  .wrap { max-inline-size: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
  .hush { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .buy { display: block; inline-size: 100%; padding: 0; border: 0; background: none; cursor: pointer; transition: transform .15s; }
  .buy:hover { transform: translateY(-2px); }
  .buy:active { transform: translateY(1px); }
  .buy img { inline-size: 100%; }
  .stars { --pct: 100%; display: inline-block; font-size: 1rem; line-height: 1; letter-spacing: 2px;
    background: linear-gradient(90deg, #f5a800 var(--pct), #d5dde4 var(--pct)); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .pill { display: inline-block; padding: .42em 1.15em; border-radius: 99px; background: var(--sky); color: var(--navy); font-weight: 600; text-decoration: none; }
  .pill:hover { background: var(--sky-deep); }
  .more { display: inline-flex; align-items: center; gap: .5em; padding: .6em 1.4em; border-radius: 99px; background: var(--blue); color: #fff; font-weight: 700; text-decoration: none; }
  .more::after { content: "\2192"; }
  .more:hover { background: var(--navy); }
}

@layer frame {
  /* utility strip + sky header (shop.mattel.com / Fisher-Price) */
  .signpost { background: #fff; font-size: .82rem; color: var(--mute); }
  .signpost ul { display: flex; flex-wrap: wrap; gap: 4px 26px; list-style: none; margin-block: 0; padding-block: 9px; }
  .signpost li:last-child { margin-inline-start: auto; }
  .signpost b { color: var(--red); font-weight: 700; }
  .mainst { background: var(--sky); position: sticky; inset-block-start: 0; z-index: 30; }
  .mainst__row { display: flex; align-items: center; gap: 18px; min-block-size: 80px; }
  .mainst__logo { flex: none; margin-block: 8px -18px; position: relative; z-index: 2; }
  .mainst__logo img { inline-size: 118px; filter: drop-shadow(0 3px 0 rgba(0, 48, 95, .18)); }
  .mainst__nav { display: flex; flex-wrap: wrap; gap: 2px 4px; margin-inline: auto; }
  .mainst__nav a { font: 700 1.12rem var(--head); color: var(--navy); text-decoration: none; padding: .35em .7em; border-radius: 99px; }
  .mainst__nav a:hover, .mainst__nav a[aria-current] { background: rgba(255, 255, 255, .6); }
  .mainst__cta { flex: none; inline-size: 218px; }
  .mainst__menu { display: none; }
  @media (max-width: 1180px) {
    .mainst__row { flex-wrap: wrap; min-block-size: 68px; }
    .mainst__logo { margin-block: 6px; }
    .mainst__logo img { inline-size: 84px; }
    .mainst__cta { inline-size: 172px; margin-inline-start: auto; }
    .mainst__menu { display: block; order: 3; }
    .mainst__menu summary { list-style: none; cursor: pointer; inline-size: 46px; block-size: 46px; border-radius: 50%; background: #fff; display: grid; place-items: center; }
    .mainst__menu summary::-webkit-details-marker { display: none; }
    .mainst__menu summary i { inline-size: 20px; block-size: 14px; border-block: 3px solid var(--navy); position: relative; }
    .mainst__menu summary i::after { content: ""; position: absolute; inset-inline: 0; inset-block-start: 2.5px; border-block-start: 3px solid var(--navy); }
    .mainst__nav--wide { display: none; }
    .mainst__menu .mainst__nav { position: absolute; inset-inline: 0; inset-block-start: 100%; background: var(--sky); padding: 10px var(--pad) 18px; flex-direction: column; box-shadow: 0 12px 20px rgba(0, 48, 95, .18); }
    .mainst__menu .mainst__nav a { font-size: 1.2rem; }
  }
  @media (max-width: 420px) { .signpost li:nth-child(2) { display: none; } }

  /* footer: wave + blue columns (Melissa & Doug / Little Tikes) */
  .groundfloor { background: var(--blue); color: #dbeaf8; margin-block-start: 0; position: relative; padding-block: 64px 28px; }
  .groundfloor::before { content: ""; position: absolute; inset-inline: 0; inset-block-end: 100%; block-size: 28px;
    background: radial-gradient(circle at 30px 34px, var(--blue) 30px, transparent 31px) repeat-x; background-size: 60px 28px; }
  .groundfloor a { color: #fff; text-decoration: none; }
  .groundfloor a:hover { text-decoration: underline; }
  .groundfloor__cols { display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: 36px 40px; }
  .groundfloor__brand img { inline-size: 150px; margin-block-end: 16px; }
  .groundfloor h3 { color: var(--sun); font-size: 1.15rem; text-transform: uppercase; letter-spacing: .04em; margin-block-end: 12px; }
  .groundfloor ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
  .groundfloor address { font-style: normal; margin-block-start: 12px; }
  .groundfloor__base { border-block-start: 1px solid rgba(255, 255, 255, .22); margin-block-start: 40px; padding-block-start: 20px; font-size: .86rem; display: grid; gap: 8px; }
  @media (max-width: 900px) { .groundfloor__cols { grid-template-columns: 1fr 1fr; } .groundfloor__brand { grid-column: 1 / -1; } }
  @media (max-width: 460px) { .groundfloor__cols { grid-template-columns: 1fr; } }
}

@layer parts {
  .band { padding-block: clamp(44px, 6vw, 84px); }
  .band__head { text-align: center; margin-block-end: clamp(24px, 3vw, 40px); }
  .band__head p { color: var(--mute); margin: 8px auto 0; max-inline-size: 56ch; }
  .crumbs { font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--mute); padding-block: 22px 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
  .crumbs a { color: var(--mute); text-decoration: none; }
  .crumbs span::before { content: "\203A"; margin-inline-end: 14px; font-size: 1.2em; }

  /* triptych hero (Mattel collection header) */
  .triptych { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; }
  .triptych > * { block-size: clamp(170px, 24vw, 330px); overflow: hidden; }
  .triptych img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 0; }
  .triptych__logo { background: radial-gradient(circle at 50% 40%, #c9eefd, var(--sky-deep)); display: grid; place-items: center; }
  .triptych__logo img { inline-size: min(62%, 300px); block-size: auto; object-fit: contain; filter: drop-shadow(0 6px 0 rgba(0, 48, 95, .16)); }
  .triptych--slim > * { block-size: clamp(110px, 14vw, 190px); }
  @media (max-width: 640px) { .triptych { grid-template-columns: 1fr 1fr; } .triptych > * { block-size: 31vw; } .triptych__logo { grid-column: 1 / -1; grid-row: 1; block-size: 150px; } .triptych__logo img { inline-size: 170px; } }

  .gate { text-align: center; padding-block: 34px 10px; }
  .gate p { max-inline-size: 60ch; margin: 14px auto 0; font-size: 1.12rem; color: var(--mute); }
  .chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }

  /* hairline grid (Mattel collection grid) */
  .lots { display: grid; grid-template-columns: repeat(4, 1fr); border-block-start: 1px solid var(--line); border-inline-start: 1px solid var(--line); }
  .lot { border-inline-end: 1px solid var(--line); border-block-end: 1px solid var(--line); padding: 22px 20px 24px; display: flex; flex-direction: column; background: #fff; position: relative; }
  .lot__pic { display: block; aspect-ratio: 1; margin-block-end: 14px; }
  .lot__pic img { inline-size: 100%; block-size: 100%; object-fit: contain; transition: transform .25s; }
  .lot:hover .lot__pic img { transform: scale(1.04); }
  .lot__tag { position: absolute; inset-block-start: 14px; inset-inline-start: 14px; z-index: 1; background: var(--red); color: #fff; font: 700 .78rem var(--head); letter-spacing: .04em; text-transform: uppercase; padding: .25em .8em; border-radius: 99px; }
  .lot__name { font: 700 1.14rem/1.2 var(--head); color: var(--ink); text-decoration: none; }
  .lot__name:hover { color: var(--blue); }
  .lot__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: .88rem; color: var(--mute); margin-block: 8px 6px; }
  .lot__price { font: 800 1.45rem var(--head); color: var(--blue); margin-block: auto 10px; padding-block-start: 6px; }
  .lot__age { font-size: .84rem; color: var(--mute); }
  @media (max-width: 1080px) { .lots { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 780px) { .lots { grid-template-columns: repeat(2, 1fr); } .lot { padding: 14px 12px 16px; } .lot__name { font-size: 1rem; } .lot__price { font-size: 1.25rem; } }

  /* round line picker (Melissa & Doug circles band) */
  .roundabout { background: var(--sky-pale); }
  .roundabout ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 26px 18px; }
  .roundabout a { display: grid; justify-items: center; gap: 12px; text-decoration: none; color: var(--navy); font: 700 1.1rem/1.15 var(--head); text-align: center; }
  .roundabout span { inline-size: min(100%, 168px); aspect-ratio: 1; border-radius: 50%; background: #fff; border: 5px solid #fff; box-shadow: 0 0 0 3px var(--sky-deep); overflow: hidden; display: grid; place-items: center; transition: transform .2s; }
  .roundabout a:hover span { transform: rotate(-4deg) scale(1.05); box-shadow: 0 0 0 3px var(--sun); }
  .roundabout img { inline-size: 84%; block-size: 84%; object-fit: contain; }
  @media (max-width: 900px) { .roundabout ul { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 420px) { .roundabout ul { grid-template-columns: repeat(2, 1fr); } }

  /* favorites (Melissa & Doug best-seller cards) */
  .porches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
  .porch { border: 2px solid var(--line); border-radius: 22px; padding: 18px; display: flex; flex-direction: column; text-align: center; background: #fff; position: relative; }
  .porch:hover { border-color: var(--sky-deep); }
  .porch .lot__meta { justify-content: center; }
  .porch .lot__price { margin-inline: auto; }
  @media (max-width: 1080px) { .porches { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 520px) { .porches { gap: 12px; } .porch { padding: 12px; border-radius: 16px; } }

  /* ages (Melissa & Doug "fun for all ages" pastel pills) */
  .stages { background: var(--cloud); }
  .stages__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .stage { background: #fff; border-radius: 26px; padding: 26px 24px; }
  .stage__pill { display: inline-block; font: 800 1.3rem var(--head); padding: .2em 1em; border-radius: 99px; margin-block-end: 12px; }
  .stage--s1 .stage__pill { background: var(--rose); color: #a3001d; }
  .stage--s2 .stage__pill { background: var(--sun-pale); color: #7a5a00; }
  .stage--s3 .stage__pill { background: var(--grass-pale); color: #1c6a0c; }
  .stage ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
  .stage li a { display: grid; grid-template-columns: 58px 1fr; gap: 12px; align-items: center; text-decoration: none; color: var(--ink); font-weight: 600; line-height: 1.25; }
  .stage li a:hover { color: var(--blue); }
  .stage li img { inline-size: 58px; block-size: 58px; object-fit: contain; border-radius: 12px; background: var(--cloud); }
  @media (max-width: 900px) { .stages__grid { grid-template-columns: 1fr; } }

  /* brand banner band */
  .meadow { position: relative; background: #8ed9f9; }
  .meadow img { inline-size: 100%; }
  .meadow__say { background: var(--grass); color: #fff; text-align: center; padding-block: 28px 34px; }
  .meadow__say h2 { color: #fff; }
  .meadow__say p { max-inline-size: 62ch; margin: 10px auto 0; font-size: 1.08rem; }

  /* ways to play (Melissa & Doug green photo band) */
  .ways { background: var(--grass-pale); }
  .ways__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .way { text-decoration: none; color: var(--navy); font: 700 1.2rem var(--head); display: grid; gap: 10px; }
  .way span { display: block; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; }
  .way img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 0; transition: transform .3s; }
  .way:hover img { transform: scale(1.05); }
  .way b::after { content: " \2192"; }
  @media (max-width: 780px) { .ways__grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } .way { font-size: 1.02rem; } }

  /* twin story cards (Melissa & Doug pink/green) */
  .twins { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
  .twin { border-radius: 8px; padding: clamp(28px, 4vw, 56px); text-align: center; }
  .twin:first-child { background: var(--rose); }
  .twin:last-child { background: var(--sun-pale); }
  .twin small { font-weight: 700; letter-spacing: .16em; text-transform: uppercase; font-size: .76rem; }
  .twin h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-block: 10px 12px; }
  .twin p { max-inline-size: 44ch; margin-inline: auto; }
  @media (max-width: 780px) { .twins { grid-template-columns: 1fr; } }

  /* reviews */
  .neighbors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .neighbor { margin: 0; border-radius: 22px; background: var(--sky-pale); padding: 24px; display: flex; flex-direction: column; gap: 10px; }
  .neighbor h3 { font-size: 1.15rem; }
  .neighbor blockquote { margin: 0; }
  .neighbor footer { margin-block-start: auto; font-size: .88rem; color: var(--mute); }
  .neighbor footer b { color: var(--ink); }
  @media (max-width: 980px) { .neighbors { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 600px) { .neighbors { grid-template-columns: 1fr; } }

  /* guides */
  .notices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .notice { text-decoration: none; color: var(--ink); border-radius: 22px; overflow: hidden; border: 2px solid var(--line); display: flex; flex-direction: column; }
  .notice:hover { border-color: var(--sun); }
  .notice span { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
  .notice img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 0; }
  .notice div { padding: 18px 20px 22px; }
  .notice h3 { margin-block-end: 6px; }
  .notice p { margin: 0; color: var(--mute); font-size: .95rem; }
  @media (max-width: 860px) { .notices { grid-template-columns: 1fr; } }

  /* faq */
  .asks { max-inline-size: 860px; margin-inline: auto; display: grid; gap: 10px; }
  .asks details { border-block-end: 1px solid var(--line); padding-block: 4px; }
  .asks summary { cursor: pointer; list-style: none; font: 700 1.18rem/1.3 var(--head); padding-block: 14px; padding-inline-end: 44px; position: relative; }
  .asks summary::-webkit-details-marker { display: none; }
  .asks summary::after { content: ""; position: absolute; inset-inline-end: 6px; inset-block-start: 50%; inline-size: 26px; block-size: 26px; margin-block-start: -13px; border-radius: 50%; border: 1.5px solid var(--mute);
    background: linear-gradient(var(--mute), var(--mute)) center / 10px 1.5px no-repeat, linear-gradient(var(--mute), var(--mute)) center / 1.5px 10px no-repeat; }
  .asks details[open] summary::after { background: linear-gradient(var(--mute), var(--mute)) center / 10px 1.5px no-repeat; }
  .asks p { color: var(--mute); max-inline-size: 70ch; }

  /* seo prose */
  .almanac { background: var(--cloud); }
  .almanac h2 { max-inline-size: 24ch; margin-block-end: 22px; }
  .almanac__cols { columns: 2 340px; column-gap: 48px; }

  /* send-off */
  .sendoff { background: var(--sun); overflow: hidden; }
  .sendoff__row { display: grid; grid-template-columns: 1.1fr 1fr; align-items: end; gap: 30px; }
  .sendoff__txt { padding-block: clamp(36px, 5vw, 70px) clamp(60px, 7vw, 96px); }
  .sendoff__txt p { font-size: 1.12rem; margin-block: 10px 22px; }
  .sendoff .buy { max-inline-size: 380px; }
  .sendoff__pic img { inline-size: 100%; border-radius: 30px 30px 0 0; margin-block-end: 28px; }
  @media (max-width: 780px) { .sendoff__row { grid-template-columns: 1fr; } .sendoff__txt { padding-block-end: 0; text-align: center; } .sendoff .buy { margin-inline: auto; } }
}

@layer pages {
  /* line page */
  .linehead { text-align: center; padding-block: 18px 6px; }
  .linehead p { max-inline-size: 70ch; margin: 14px auto 0; color: var(--mute); }
  .linefoot { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
  .linefoot h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-block-end: 14px; }
  @media (max-width: 780px) { .linefoot { grid-template-columns: 1fr; } }
  .count { text-align: end; font-size: .88rem; color: var(--mute); padding-block: 22px 10px; }

  /* product page */
  .house { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 60px); padding-block: 22px 50px; align-items: start; }
  .album { display: grid; gap: 12px; }
  .album input { position: absolute; opacity: 0; pointer-events: none; }
  .album__stage { aspect-ratio: 1; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; position: relative; background: #fff; }
  .album__stage figure { margin: 0; position: absolute; inset: 0; opacity: 0; transition: opacity .2s; }
  .album__stage img { inline-size: 100%; block-size: 100%; object-fit: contain; }
  .album__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .album__thumbs label { border: 2px solid var(--line); border-radius: 14px; overflow: hidden; cursor: pointer; aspect-ratio: 1; }
  .album__thumbs img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .album input:nth-of-type(1):checked ~ .album__stage figure:nth-child(1),
  .album input:nth-of-type(2):checked ~ .album__stage figure:nth-child(2),
  .album input:nth-of-type(3):checked ~ .album__stage figure:nth-child(3),
  .album input:nth-of-type(4):checked ~ .album__stage figure:nth-child(4) { opacity: 1; }
  .album input:nth-of-type(1):checked ~ .album__thumbs label:nth-child(1),
  .album input:nth-of-type(2):checked ~ .album__thumbs label:nth-child(2),
  .album input:nth-of-type(3):checked ~ .album__thumbs label:nth-child(3),
  .album input:nth-of-type(4):checked ~ .album__thumbs label:nth-child(4) { border-color: var(--blue); }
  .deed__line { display: inline-block; font-weight: 700; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--blue); text-decoration: none; margin-block-end: 10px; }
  .deed h1 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
  .deed__rate { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin-block: 12px; color: var(--mute); font-size: .95rem; }
  .deed__lede { font-size: 1.14rem; margin-block: 6px 16px; }
  .deed__price { font: 800 2.3rem/1 var(--head); color: var(--blue); }
  .deed__note { font-size: .84rem; color: var(--mute); margin-block: 6px 16px; }
  .deed .buy { max-inline-size: 460px; }
  .deed__facts { margin: 22px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 0; border-block-start: 1px solid var(--line); }
  .deed__facts dt, .deed__facts dd { margin: 0; padding: 11px 0; border-block-end: 1px solid var(--line); }
  .deed__facts dt { font-weight: 700; padding-inline-end: 22px; }
  .rooms { background: var(--sky-pale); }
  .rooms__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 60px); }
  .rooms h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); margin-block-end: 16px; }
  .rooms ol { list-style: none; counter-reset: r; margin: 0; padding: 0; display: grid; gap: 14px; }
  .rooms li { counter-increment: r; background: #fff; border-radius: 18px; padding: 16px 18px 16px 62px; position: relative; }
  .rooms li::before { content: counter(r); position: absolute; inset-inline-start: 16px; inset-block-start: 16px; inline-size: 32px; block-size: 32px; border-radius: 50%; background: var(--sun); color: var(--navy); font: 800 1.1rem/32px var(--head); text-align: center; }
  .rooms li b { display: block; font-family: var(--head); font-size: 1.1rem; }
  @media (max-width: 860px) { .house, .rooms__grid { grid-template-columns: 1fr; } }

  /* prose pages */
  .letter { max-inline-size: 800px; margin-inline: auto; padding-block: 10px 70px; }
  .letter h1 { margin-block: 18px 16px; }
  .letter h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); margin-block: 1.5em .5em; }
  .letter__lead { font-size: 1.22rem; color: var(--mute); }
  .letter__pic { border-radius: 22px; overflow: hidden; aspect-ratio: 16 / 9; margin-block: 20px; }
  .letter__pic img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 0; }
  .letter dl { display: grid; gap: 14px; margin: 0; }
  .letter dt { font: 700 1.14rem var(--head); }
  .letter dd { margin: 4px 0 0; color: var(--mute); }
  .letter address { font-style: normal; background: var(--sky-pale); border-radius: 18px; padding: 18px 22px; display: inline-block; }
  .letter .picks { list-style: none; padding: 0; display: grid; gap: 10px; }
  .letter .picks a { display: grid; grid-template-columns: 70px 1fr; gap: 14px; align-items: center; text-decoration: none; color: var(--ink); border: 2px solid var(--line); border-radius: 16px; padding: 8px 14px 8px 8px; }
  .letter .picks a:hover { border-color: var(--sky-deep); }
  .letter .picks img { inline-size: 70px; block-size: 70px; object-fit: contain; }
  .letter .picks b { color: var(--blue); font-family: var(--head); font-size: 1.08rem; }
  .letter .picks em { font-style: normal; color: var(--mute); display: block; font-size: .93rem; }
  .lost { text-align: center; padding-block: 70px 90px; }
  .lost img { inline-size: 220px; margin: 0 auto 24px; }
}