:root {
  color-scheme: light;
  --content-primary: #071f43;
  --content-accent: #0b8ee8;
  --content-on-primary: #fff;
  --content-bg: #edf4fa;
  --content-surface: #fff;
  --content-soft: #f6f9fc;
  --content-text: #071426;
  --content-muted: #5f7187;
  --content-line: #d7e3ed;
  --content-shadow: 0 24px 80px rgba(7,31,67,.13);
  font-family: Inter,"Segoe UI",Arial,sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; color: var(--content-text); background-color: var(--content-bg); background-image: linear-gradient(rgba(8,55,98,.038) 1px,transparent 1px),linear-gradient(90deg,rgba(8,55,98,.038) 1px,transparent 1px),radial-gradient(circle at 88% 4%,color-mix(in srgb,var(--content-accent) 17%,transparent),transparent 34rem); background-size: 42px 42px,42px 42px,auto; }
button { font: inherit; }
a { color: inherit; }
.content-header { position: sticky; z-index: 40; top: 0; min-height: 80px; padding: 11px max(20px,calc((100vw - 1380px)/2)); display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid rgba(15,45,80,.1); background: color-mix(in srgb,var(--content-surface) 88%,transparent); box-shadow: 0 8px 30px rgba(7,31,67,.06); backdrop-filter: blur(20px); transition: transform .28s ease; }
.content-header.is-hidden { transform: translateY(-110%); }
.content-brand { min-width: 0; display: flex; align-items: center; gap: 12px; text-decoration: none; }
.content-brand > span:last-child { min-width: 0; display: grid; gap: 2px; }
.content-brand strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.content-brand small { color: var(--content-muted); font-size: 9px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.content-logo { position: relative; width: 54px; height: 54px; flex: 0 0 54px; padding: 7px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--content-line); border-radius: 17px; background: #fff; box-shadow: 0 9px 24px rgba(7,31,67,.08); }
.content-logo img { position: absolute; inset: 7px; width: calc(100% - 14px); height: calc(100% - 14px); object-fit: contain; }
.content-logo img.is-dark { display: none; }
.content-logo.is-fallback { color: #fff; background: var(--content-primary); font-size: 23px; font-weight: 950; }
.content-header-actions { display: flex; align-items: center; gap: 10px; }
.content-header-actions > a { min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center; gap: 8px; border-radius: 13px; color: var(--content-on-primary); background: var(--content-primary); box-shadow: 0 10px 26px color-mix(in srgb,var(--content-primary) 24%,transparent); font-size: 12px; font-weight: 900; text-decoration: none; transition: transform .2s ease,box-shadow .2s ease; }
.content-header-actions > a:hover,.content-header-actions > a:focus-visible { transform: translateY(-2px); box-shadow: 0 15px 32px color-mix(in srgb,var(--content-primary) 30%,transparent); outline: 3px solid color-mix(in srgb,var(--content-accent) 28%,transparent); outline-offset: 2px; }
.content-theme-switch { display: flex; padding: 4px; border: 1px solid var(--content-line); border-radius: 13px; background: var(--content-surface); }
.content-theme-switch button { min-height: 34px; padding: 0 10px; border: 0; border-radius: 9px; color: var(--content-muted); background: transparent; font-size: 10px; font-weight: 900; cursor: pointer; }
.content-theme-switch button[aria-pressed="true"] { color: var(--content-on-primary); background: var(--content-primary); }
main { width: min(1380px,calc(100% - 36px)); margin: auto; }
.content-hero { min-height: 610px; padding: clamp(55px,8vw,112px) clamp(10px,4vw,54px); display: grid; grid-template-columns: minmax(0,1.05fr) minmax(360px,.72fr); gap: clamp(36px,7vw,110px); align-items: center; }
.content-kicker,.content-collection > header span,.content-next > div > span { color: var(--content-primary); font-size: 10px; font-weight: 950; letter-spacing: .17em; text-transform: uppercase; }
.content-hero h1 { margin: 15px 0 24px; display: grid; max-width: 850px; font-size: clamp(56px,7.5vw,108px); line-height: .88; letter-spacing: -.065em; }
.content-hero h1 em { margin-top: 15px; color: var(--content-primary); font-size: .47em; font-style: normal; letter-spacing: -.045em; line-height: 1; }
.content-hero-copy > p { max-width: 700px; margin: 0; color: var(--content-muted); font-size: clamp(17px,2vw,22px); line-height: 1.65; }
.content-hero-meta { margin-top: 26px; display: flex; align-items: center; gap: 9px; color: var(--content-muted); font-size: 12px; }
.content-hero-meta strong { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; color: var(--content-on-primary); background: var(--content-primary); }
.content-hero-meta i { width: 4px; height: 4px; margin: 0 4px; border-radius: 50%; background: var(--content-accent); }
.content-hero-art { position: relative; min-height: 420px; }
.content-hero-art > span { position: absolute; overflow: hidden; border: 8px solid color-mix(in srgb,var(--content-surface) 92%,transparent); border-radius: 30px; background: var(--content-surface); box-shadow: 0 28px 70px rgba(7,31,67,.2); transform: rotate(calc((var(--art-index) - 1) * 5deg)); animation: contentFloat 7s ease-in-out infinite alternate; animation-delay: calc(var(--art-index) * -.9s); }
.content-hero-art > span:nth-child(1) { z-index: 3; inset: 35px 55px 5px 25px; }
.content-hero-art > span:nth-child(2) { z-index: 2; inset: 10px 5px 70px 100px; }
.content-hero-art > span:nth-child(3) { z-index: 1; inset: 75px 105px 35px 0; }
.content-hero-art img { width: 100%; height: 100%; object-fit: contain; background: #edf2f6; }
.content-hero-art b { position: absolute; z-index: 5; right: 14px; bottom: 10px; width: 76px; height: 76px; display: grid; place-items: center; border: 6px solid color-mix(in srgb,var(--content-surface) 90%,transparent); border-radius: 50%; color: var(--content-on-primary); background: var(--content-primary); box-shadow: 0 18px 38px rgba(7,31,67,.24); font-size: 22px; }
@keyframes contentFloat { to { transform: translateY(-9px) rotate(calc((var(--art-index) - 1) * 5deg)); } }
.content-collection { margin-bottom: 34px; padding: clamp(24px,4vw,50px); border: 1px solid rgba(15,45,80,.09); border-radius: 36px; background: color-mix(in srgb,var(--content-surface) 84%,transparent); box-shadow: var(--content-shadow); backdrop-filter: blur(16px); }
.content-collection > header { margin-bottom: 30px; display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.content-collection > header h2,.content-next h2 { margin: 7px 0 0; font-size: clamp(32px,4vw,56px); line-height: .98; letter-spacing: -.05em; }
.content-collection > header > a { min-height: 44px; padding: 0 15px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--content-line); border-radius: 13px; color: var(--content-primary); background: var(--content-surface); font-size: 12px; font-weight: 900; text-decoration: none; white-space: nowrap; transition: transform .2s ease,border-color .2s ease; }
.content-collection > header > a:hover,.content-collection > header > a:focus-visible { transform: translateY(-2px); border-color: var(--content-primary); outline: 3px solid color-mix(in srgb,var(--content-accent) 24%,transparent); outline-offset: 2px; }
.content-grid { display: grid; grid-template-columns: repeat(var(--content-columns),minmax(0,1fr)); gap: 18px; }
.content-card { min-width: 0; overflow: hidden; display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--content-line); border-radius: 26px; background: var(--content-surface); box-shadow: 0 12px 32px rgba(7,31,67,.08); transition: transform .25s ease,box-shadow .25s ease,border-color .25s ease; }
.content-card:hover { transform: translateY(-6px); border-color: color-mix(in srgb,var(--content-primary) 38%,var(--content-line)); box-shadow: 0 24px 48px rgba(7,31,67,.14); }
.content-card-media { position: relative; width: 100%; aspect-ratio: 1 / 1; padding: 0; display: grid; place-items: center; overflow: hidden; border: 0; border-bottom: 1px solid var(--content-line); background: linear-gradient(145deg,#e8eef4,#f8fafc); cursor: zoom-in; }
.content-card-media img { width: 100%; height: 100%; object-fit: contain; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.content-card:hover .content-card-media img { transform: scale(1.025); }
.content-card-media > span { color: var(--content-muted); font-size: 12px; font-weight: 800; }
.content-card-media i { position: absolute; top: 14px; right: 14px; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.62); border-radius: 14px; color: #fff; background: rgba(3,18,38,.72); box-shadow: 0 8px 22px rgba(0,0,0,.18); backdrop-filter: blur(10px); }
.content-card-media svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.content-card-media:focus-visible { outline: 4px solid color-mix(in srgb,var(--content-accent) 52%,transparent); outline-offset: -4px; }
.content-card-copy { padding: 19px; display: flex; flex-direction: column; align-items: flex-start; }
.content-card-copy small { color: var(--content-primary); font-size: 9px; font-weight: 950; letter-spacing: .13em; }
.content-card-copy h3 { margin: 9px 0 8px; font-size: clamp(18px,2vw,25px); line-height: 1.08; letter-spacing: -.025em; }
.content-card-copy p { margin: 0 0 18px; color: var(--content-muted); font-size: 13px; line-height: 1.58; }
.content-card-copy > div { width: 100%; margin-top: auto; padding-top: 12px; }
.content-card-copy a { min-height: 42px; padding: 0 13px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; color: var(--content-on-primary); background: var(--content-primary); font-size: 11px; font-weight: 900; text-decoration: none; }
.content-card-copy a:hover,.content-card-copy a:focus-visible { box-shadow: 0 10px 24px color-mix(in srgb,var(--content-primary) 24%,transparent); outline: 3px solid color-mix(in srgb,var(--content-accent) 28%,transparent); outline-offset: 2px; }
.content-empty { padding: 70px 22px; display: grid; justify-items: center; text-align: center; border: 1px dashed var(--content-line); border-radius: 26px; background: var(--content-soft); }
.content-empty > span { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 22px; color: var(--content-on-primary); background: var(--content-primary); font-size: 28px; }
.content-empty h2 { margin: 18px 0 8px; font-size: 30px; }
.content-empty p { max-width: 560px; margin: 0; color: var(--content-muted); line-height: 1.6; }
.content-empty a { margin-top: 20px; color: var(--content-primary); font-weight: 900; }
.content-next { margin-bottom: 34px; padding: clamp(28px,5vw,58px); display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 26px; align-items: center; overflow: hidden; border-radius: 36px; color: #fff; background: radial-gradient(circle at 5% 5%,color-mix(in srgb,var(--content-accent) 25%,transparent),transparent 28rem),linear-gradient(145deg,#04152c,#082b51); box-shadow: 0 28px 70px rgba(3,18,38,.24); }
.content-next > div > span { color: #82e2ff; }
.content-next h2 { color: #fff; }
.content-next p { max-width: 780px; margin: 13px 0 0; color: #c5d7e8; line-height: 1.6; }
.content-next > a { min-height: 52px; padding: 0 20px; display: inline-flex; align-items: center; gap: 10px; border: 1px solid rgba(255,255,255,.18); border-radius: 16px; color: #06182f; background: #fff; font-size: 12px; font-weight: 950; text-decoration: none; white-space: nowrap; transition: transform .2s ease,box-shadow .2s ease; }
.content-next > a:hover,.content-next > a:focus-visible { transform: translateY(-3px); box-shadow: 0 15px 34px rgba(0,0,0,.25); outline: 3px solid rgba(130,226,255,.42); outline-offset: 2px; }
.content-footer { width: min(1380px,calc(100% - 36px)); margin: 0 auto 26px; padding: 24px; display: flex; align-items: center; gap: 18px; border-top: 1px solid var(--content-line); color: var(--content-muted); font-size: 12px; }
.content-footer strong { color: var(--content-text); }
.content-footer a { margin-left: auto; color: var(--content-primary); font-weight: 900; }
[data-content-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--reveal-delay,0) * 55ms); }
[data-content-reveal].is-visible { opacity: 1; transform: none; }
.content-viewer[hidden] { display: none !important; }
.content-viewer { position: fixed; inset: 0; z-index: 100; padding: 22px; display: grid; place-items: center; opacity: 0; transition: opacity .2s ease; }
.content-viewer.is-open { opacity: 1; }
.content-viewer-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(2,12,26,.84); backdrop-filter: blur(18px); }
.content-viewer > section { position: relative; width: min(1180px,100%); max-height: calc(100dvh - 44px); padding: 18px; display: grid; grid-template-columns: minmax(0,1.3fr) minmax(260px,.7fr); gap: 24px; overflow: auto; border: 1px solid rgba(255,255,255,.22); border-radius: 30px; color: #fff; background: #071a31; box-shadow: 0 35px 100px rgba(0,0,0,.5); transform: translateY(12px) scale(.985); transition: transform .24s cubic-bezier(.2,.8,.2,1); }
.content-viewer.is-open > section { transform: none; }
.content-viewer img { width: 100%; max-height: calc(100dvh - 80px); object-fit: contain; border-radius: 20px; background: #fff; }
.content-viewer > section > div { padding: clamp(18px,3vw,42px) 22px 22px 0; align-self: center; }
.content-viewer small { color: #82e2ff; font-size: 9px; font-weight: 950; letter-spacing: .14em; text-transform: uppercase; }
.content-viewer h2 { margin: 10px 0 12px; font-size: clamp(28px,4vw,50px); line-height: .98; letter-spacing: -.045em; }
.content-viewer p { margin: 0; color: #c7d8e8; line-height: 1.65; }
.content-viewer-close { position: absolute; z-index: 3; top: 16px; right: 16px; width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; color: #fff; background: rgba(2,18,39,.82); font-size: 28px; cursor: pointer; }
.content-viewer-close:hover,.content-viewer-close:focus-visible { background: #0b4774; outline: 3px solid rgba(130,226,255,.35); outline-offset: 2px; }
body.content-viewer-open { overflow: hidden; }
html[data-content-theme="dark"] { color-scheme: dark; --content-bg: #061426; --content-surface: #0d223a; --content-soft: #0a1c31; --content-text: #f5f9ff; --content-muted: #bfcee0; --content-line: #29415d; --content-shadow: 0 24px 80px rgba(0,0,0,.35); }
html[data-content-theme="dark"] body { background-image: linear-gradient(rgba(140,194,239,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(140,194,239,.045) 1px,transparent 1px),radial-gradient(circle at 88% 4%,color-mix(in srgb,var(--content-accent) 19%,transparent),transparent 34rem); }
html[data-content-theme="dark"] .content-header { background: rgba(6,20,38,.9); }
html[data-content-theme="dark"] .content-logo:has(.is-dark) { background: #061426; }
html[data-content-theme="dark"] .content-logo .is-light:has(+.is-dark) { display: none; }
html[data-content-theme="dark"] .content-logo img.is-dark { display: block; }
html[data-content-theme="dark"] .content-kicker,html[data-content-theme="dark"] .content-collection > header span,html[data-content-theme="dark"] .content-card-copy small { color: #8edcff; }
html[data-content-theme="dark"] .content-hero h1 em { color: #8edcff; text-shadow: 0 0 24px rgba(73,210,255,.16); }
html[data-content-theme="dark"] .content-card-media { background: linear-gradient(145deg,#0a1d33,#102a47); }
html[data-content-theme="dark"] .content-card-copy a,html[data-content-theme="dark"] .content-header-actions > a { color: #fff; background: #07558f; }
@media (max-width: 1050px) {
  .content-hero { grid-template-columns: 1fr; }
  .content-hero-art { width: min(560px,100%); min-height: 390px; margin: auto; }
  .content-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .content-grid[data-content-columns="1"] { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .content-header { min-height: 68px; padding: 8px 12px; }
  .content-logo { width: 48px; height: 48px; flex-basis: 48px; }
  .content-header-actions > a { min-height: 40px; padding: 0 11px; font-size: 10px; }
  .content-theme-switch { display: none; }
  main { width: min(100% - 20px,680px); }
  .content-hero { min-height: auto; padding: 52px 6px 66px; }
  .content-hero h1 { font-size: clamp(48px,15vw,78px); }
  .content-hero-meta { align-items: flex-start; flex-wrap: wrap; }
  .content-hero-art { min-height: 310px; }
  .content-hero-art > span:nth-child(1) { inset: 28px 38px 5px 18px; }
  .content-collection { padding: 24px 14px; border-radius: 26px; }
  .content-collection > header { align-items: flex-start; flex-direction: column; }
  .content-grid { grid-template-columns: 1fr; gap: 14px; }
  .content-card { border-radius: 22px; }
  .content-card-media { aspect-ratio: 1 / 1; }
  .content-next { padding: 28px 20px; grid-template-columns: 1fr; border-radius: 26px; }
  .content-next > a { width: 100%; justify-content: center; }
  .content-footer { width: calc(100% - 24px); align-items: flex-start; flex-direction: column; }
  .content-footer a { margin-left: 0; }
  .content-viewer { padding: 0; place-items: stretch; }
  .content-viewer > section { width: 100vw; max-width: 100vw; max-height: 100dvh; min-height: 100dvh; padding: 58px 12px 18px; grid-template-columns: 1fr; align-content: center; border: 0; border-radius: 0; }
  .content-viewer img { max-height: 62dvh; }
  .content-viewer > section > div { padding: 8px 8px 16px; }
}
@media (max-width: 430px) {
  .content-brand > span:last-child { display: none; }
  .content-hero-art { min-height: 270px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  [data-content-reveal] { opacity: 1; transform: none; }
}