/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4
 * genre: atmospheric · macrostructure: Bento Grid · theme: NOVO Midnight
 * nav: N9 Edge-aligned minimal · footer: Ft5 Statement
 * audience: prospective Smart-TV users and Samsung reviewers · use: explain the player · tone: cinematic and direct
 */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; overflow-x: clip; color: var(--color-ink); background: var(--color-paper); font-family: var(--font-body); }
body::before { content: ""; position: absolute; top: 8rem; right: 0; width: min(44vw, 35rem); height: 40rem; pointer-events: none; background: radial-gradient(circle, color-mix(in srgb, var(--color-accent) 13%, transparent), transparent 68%); filter: blur(2rem); }
a { color: inherit; text-decoration: none; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 5px; }
img { max-width: 100%; height: auto; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--font-display); font-style: normal; }
.skip-link { position: fixed; z-index: 30; top: -5rem; left: var(--page-gutter); padding: var(--space-sm) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip-link:focus { top: var(--space-md); }
.site-header { position: relative; z-index: 5; min-height: 5.8rem; padding: 0 var(--page-gutter); display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); }
.brand { display: inline-flex; width: 155px; align-items: center; }
.brand img { width: 100%; }
.desktop-nav { display: flex; gap: clamp(1.2rem, 3vw, 3rem); color: var(--color-muted); font-size: .92rem; }
.desktop-nav a, .header-link { white-space: nowrap; transition: color var(--dur-short) var(--ease-soft); }
.desktop-nav a:hover, .header-link:hover { color: var(--color-white); }
.header-link { font-size: .88rem; font-weight: 700; border: var(--rule-hair) solid var(--color-rule); border-radius: 100vw; padding: .65rem 1.05rem; }
.header-link span { margin-left: .55rem; color: var(--color-accent); }
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); min-height: min(47rem, calc(100svh - 5.8rem)); align-items: center; gap: var(--space-lg); padding: var(--space-xl) var(--page-gutter) var(--space-2xl); }
.hero-copy { position: relative; z-index: 2; }
.eyebrow, .feature-kicker, .section-index { font-family: var(--font-mono); font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--color-muted); }
.eyebrow { display: flex; align-items: center; gap: .7rem; margin-bottom: var(--space-lg); }
.status-dot { display: inline-block; flex: none; width: .48rem; height: .48rem; background: var(--color-accent); border-radius: 50%; box-shadow: 0 0 0 .28rem color-mix(in srgb, var(--color-accent) 16%, transparent); }
.hero h1 { font-size: clamp(3.2rem, 6.5vw, 7.5rem); line-height: .98; letter-spacing: -.065em; margin-bottom: var(--space-lg); overflow-wrap: anywhere; }
.hero h1 span { color: var(--color-muted); }
.hero-lead { max-width: 37rem; font-size: clamp(1.08rem, 1.5vw, 1.35rem); line-height: 1.55; color: var(--color-muted); }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-lg); margin-top: var(--space-xl); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 1.5rem; min-height: 3.4rem; padding: .82rem 1.3rem; border-radius: 100vw; white-space: nowrap; font-size: .92rem; font-weight: 700; transition: transform var(--dur-short) var(--ease-soft), background var(--dur-short) var(--ease-soft); }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--color-accent); color: var(--color-accent-ink); }
.button-primary:hover { background: var(--color-accent-dark); }
.text-link { display: inline-flex; align-items: center; gap: .6rem; white-space: nowrap; font-weight: 600; font-size: .94rem; border-bottom: var(--rule-hair) solid var(--color-subtle); padding-bottom: .24rem; }
.text-link:hover { border-color: var(--color-ink); }
.hero-note { color: var(--color-subtle); margin: var(--space-lg) 0 0; font-size: .85rem; }
.hero-art { position: relative; width: min(100%, 34rem); aspect-ratio: 1; justify-self: center; display: grid; place-items: center; isolation: isolate; }
.hero-art::before { content: ""; position: absolute; z-index: -1; inset: 3%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--color-accent) 24%, transparent), transparent 63%); filter: blur(2.8rem); }
.orbit { position: absolute; border: var(--rule-hair) solid var(--color-rule); border-radius: 50%; }
.orbit-outer { inset: 2%; }
.orbit-inner { inset: 16%; border-color: color-mix(in srgb, var(--color-accent) 28%, var(--color-rule)); }
.orbit-outer::before, .orbit-outer::after, .orbit-inner::before { content: ""; position: absolute; width: .55rem; height: .55rem; border-radius: 50%; background: var(--color-accent); }
.orbit-outer::before { top: 12%; right: 16%; }.orbit-outer::after { bottom: 12%; left: 16%; }.orbit-inner::before { bottom: 10%; right: 14%; width: .3rem; height: .3rem; }
.orbit-core { width: 46%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 45% 38%, var(--color-paper-3), var(--color-paper)); box-shadow: 0 1.5rem 4rem var(--color-shadow); }
.orbit-core img { width: 68%; }
.orbit-label { position: absolute; font-family: var(--font-mono); color: var(--color-subtle); font-size: .6rem; letter-spacing: .14em; white-space: nowrap; }
.orbit-label-top { top: 1%; left: 10%; }.orbit-label-bottom { right: 0; bottom: 11%; }
.intro, .flow-section, .faq-section { padding: var(--space-3xl) var(--page-gutter); display: grid; grid-template-columns: minmax(9rem, .28fr) minmax(0, 1fr); gap: var(--space-xl); }
.intro { border-top: var(--rule-hair) solid var(--color-rule); }
.section-index { padding-top: .6rem; }
.intro-main { display: flex; justify-content: space-between; align-items: end; gap: var(--space-xl); }
.intro-main h2, .flow-head h2, .faq-main h2, .clarity-section h2 { font-size: clamp(2.4rem, 4.5vw, 5.5rem); line-height: 1.05; letter-spacing: -.055em; margin-bottom: 0; overflow-wrap: anywhere; }
.intro-main p { max-width: 28rem; color: var(--color-muted); font-size: var(--text-lg); line-height: 1.6; margin-bottom: 0; }
.feature-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; padding: 0 var(--page-gutter) var(--space-3xl); }
.feature { position: relative; min-width: 0; overflow: hidden; border-radius: var(--radius-lg); background: var(--color-paper-2); min-height: 26rem; padding: clamp(1.5rem, 3vw, 2.7rem); display: flex; flex-direction: column; }
.feature h3 { font-size: clamp(1.55rem, 2.2vw, 2.7rem); line-height: 1.1; letter-spacing: -.045em; max-width: 19ch; margin-bottom: .9rem; }
.feature p { line-height: 1.55; }
.feature-copy > p:last-child { max-width: 39ch; margin-bottom: 0; color: var(--color-muted); }
.feature-main { grid-column: span 7; min-height: 42rem; }
.feature-search { grid-column: span 5; }
.feature-sources { grid-column: span 5; }
.feature-profile { grid-column: span 7; }
.feature-main .feature-copy { position: relative; z-index: 2; }
.feature-main .feature-visual { margin-top: auto; }
.visual-library { position: relative; height: 19.5rem; margin-right: -2.7rem; margin-bottom: -2.7rem; padding: 1.35rem; background: linear-gradient(145deg, var(--color-paper-3), var(--color-paper)); border-top-left-radius: var(--radius-md); box-shadow: -.5rem -.5rem 4rem color-mix(in srgb, var(--color-shadow) 40%, transparent); overflow: hidden; }
.library-heading { display: flex; justify-content: space-between; font-size: 1.15rem; font-weight: 700; }.library-mark { color: var(--color-accent); font-weight: 900; letter-spacing: -.07em; }
.library-tabs { display: flex; gap: 1.4rem; margin: 1rem 0; font-size: .7rem; color: var(--color-subtle); white-space: nowrap; }.library-tabs .selected { color: var(--color-ink); border-bottom: 2px solid var(--color-accent); padding-bottom: .4rem; }
.library-focus { height: 8rem; border-radius: var(--radius-sm); background: linear-gradient(100deg, var(--color-accent-dark), var(--color-paper-3) 82%); display: flex; align-items: center; gap: 1rem; padding: 1.2rem; font-size: clamp(1rem, 2vw, 1.7rem); font-weight: 700; }
.library-play { display: grid; place-items: center; border-radius: 50%; width: 2.6rem; height: 2.6rem; background: var(--color-ink); color: var(--color-paper); font-size: .8rem; flex: none; }
.library-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin-top: .8rem; }.library-tiles i { height: 4rem; background: var(--color-paper-3); border-radius: .4rem; }.library-tiles i:nth-child(2) { background: color-mix(in srgb, var(--color-accent) 28%, var(--color-paper-3)); }
.visual-caption { position: absolute; right: 1.4rem; bottom: .75rem; font-size: .64rem; color: var(--color-muted); margin: 0; text-shadow: 0 1px 3px var(--color-shadow); }
.search-visual { margin-top: auto; min-height: 5rem; display: flex; align-items: center; gap: 1rem; padding: 1.2rem; color: var(--color-muted); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-sm); font-size: .96rem; }
.search-icon { font-size: 2.3rem; line-height: 0; color: var(--color-accent); }.search-cursor { height: 1.1rem; width: .1rem; background: var(--color-accent); margin-left: auto; }
.source-chips { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: auto; }.source-chips span { padding: .7rem .85rem; border: var(--rule-hair) solid var(--color-rule); border-radius: .45rem; font-family: var(--font-mono); font-size: .68rem; color: var(--color-muted); }
.remote-art { align-self: end; margin: auto 2rem 0 0; border: var(--rule-hair) solid var(--color-rule); background: var(--color-panel); border-radius: 2rem; padding: .8rem 2.5rem; display: grid; justify-items: center; gap: .6rem; font-size: 1.4rem; color: var(--color-muted); transform: rotate(-11deg); box-shadow: 1rem 1rem 2rem color-mix(in srgb, var(--color-shadow) 40%, transparent); }
.remote-art div { display: flex; align-items: center; gap: 1.4rem; }.remote-art b { border: var(--rule-hair) solid var(--color-rule); border-radius: 50%; width: 3rem; height: 3rem; display: grid; place-items: center; color: var(--color-ink); font-size: .9rem; }
.flow-section { background: var(--color-panel); }
.flow-head { display: flex; justify-content: space-between; align-items: end; gap: var(--space-xl); }.flow-head p { max-width: 26rem; color: var(--color-muted); line-height: 1.6; margin-bottom: 0; }
.flow-list { grid-column: 2; padding: var(--space-xl) 0 0; margin: 0; list-style: none; }.flow-list li { display: grid; grid-template-columns: 5rem minmax(0, 1fr) 2rem; gap: var(--space-lg); align-items: center; border-top: var(--rule-hair) solid var(--color-rule); padding: 1.6rem 0; }.flow-list li:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.flow-number { font: .8rem var(--font-mono); color: var(--color-accent-text); }.flow-list h3 { font-size: clamp(1.4rem, 2vw, 2.2rem); letter-spacing: -.035em; margin-bottom: .25rem; }.flow-list p { margin-bottom: 0; color: var(--color-muted); line-height: 1.5; }.flow-arrow { color: var(--color-subtle); }
.clarity-section { margin: var(--space-3xl) var(--page-gutter); padding: clamp(2rem, 5vw, 5rem); background: var(--color-paper-2); border-radius: var(--radius-lg); display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: var(--space-xl); align-items: center; }.clarity-symbol { width: 6.5rem; height: 6.5rem; display: grid; place-items: center; border: var(--rule-hair) solid var(--color-rule); border-radius: 50%; }.clarity-section p:last-child { max-width: 42rem; color: var(--color-muted); line-height: 1.6; font-size: var(--text-lg); margin: var(--space-lg) 0 0; }
.faq-main { max-width: 58rem; }.faq-main h2 { margin-bottom: var(--space-xl); }.faq-main details { border-top: var(--rule-hair) solid var(--color-rule); }.faq-main details:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }.faq-main summary { cursor: pointer; list-style: none; padding: 1.4rem 2rem 1.4rem 0; font-size: clamp(1rem, 1.5vw, 1.2rem); font-weight: 600; position: relative; }.faq-main summary::-webkit-details-marker { display: none; }.faq-main summary::after { content: "+"; position: absolute; right: .2rem; top: 1.25rem; color: var(--color-accent); font-size: 1.5rem; font-weight: 400; }.faq-main details[open] summary::after { content: "−"; }.faq-main details p { max-width: 42rem; color: var(--color-muted); line-height: 1.65; padding: 0 1.5rem 1.4rem 0; margin: 0; }
.status-section { margin: 0 var(--page-gutter) var(--space-3xl); padding: clamp(2rem, 5vw, 5rem); background: linear-gradient(120deg, var(--color-accent-dark), var(--color-paper-3) 70%); border-radius: var(--radius-lg); }.status-top { display: flex; justify-content: space-between; gap: var(--space-md); color: var(--color-muted); font-family: var(--font-mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }.status-pill { display: inline-flex; align-items: center; gap: .7rem; color: var(--color-ink); }.status-pill .status-dot { background: var(--color-ink); box-shadow: 0 0 0 .28rem color-mix(in srgb, var(--color-ink) 16%, transparent); }.status-section h2 { font-size: clamp(2.5rem, 5vw, 5.6rem); line-height: 1.05; letter-spacing: -.055em; margin: var(--space-2xl) 0 var(--space-lg); }.status-section p { max-width: 40rem; color: var(--color-ink); line-height: 1.6; font-size: var(--text-lg); }.status-section .text-link { margin-top: var(--space-md); }
.site-footer { padding: 0 var(--page-gutter) var(--space-lg); }.footer-statement { font-size: clamp(2.4rem, 6vw, 6.5rem); line-height: 1.02; letter-spacing: -.06em; font-weight: 700; margin: 0 0 var(--space-3xl); }.footer-bottom { border-top: var(--rule-hair) solid var(--color-rule); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-lg); padding-top: var(--space-lg); font-size: .78rem; color: var(--color-subtle); }.footer-bottom img { width: 112px; }.footer-bottom p { margin: 0; }
@media (max-width: 900px) {
  .desktop-nav { display: none; }
  .hero { grid-template-columns: minmax(0, 1fr); min-height: auto; padding-top: var(--space-2xl); }
  .hero-art { width: min(24rem, 78vw); margin-top: var(--space-lg); }
  .intro, .flow-section, .faq-section { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .intro-main, .flow-head { align-items: start; flex-direction: column; }
  .flow-list { grid-column: 1; }
  .feature-main, .feature-profile { grid-column: span 7; }.feature-search, .feature-sources { grid-column: span 5; }
}
@media (max-width: 640px) {
  .site-header { min-height: 4.7rem; }.brand { width: 118px; }.header-link { font-size: .72rem; padding: .6rem .8rem; }
  .hero { padding-top: var(--space-xl); }.hero h1 { font-size: clamp(2.9rem, 11vw, 4.8rem); }.hero-art { margin-top: 0; width: min(18rem, 82vw); }.orbit-label { font-size: .42rem; }
  .intro, .flow-section, .faq-section { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
  .feature-grid { display: block; }.feature { min-height: 22rem; margin-bottom: 1rem; }.feature-main { min-height: 36rem; }.visual-library { margin-right: -1.5rem; margin-bottom: -1.5rem; }.visual-caption { right: .8rem; bottom: .4rem; }
  .flow-list li { grid-template-columns: 2.4rem minmax(0, 1fr); gap: 1rem; }.flow-arrow { display: none; }
  .clarity-section { margin-top: var(--space-xl); margin-bottom: var(--space-xl); grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }.clarity-symbol { width: 4.5rem; height: 4.5rem; }.clarity-symbol img { width: 3.2rem; }
  .status-section { margin-bottom: var(--space-2xl); }.status-top { flex-direction: column; }.status-section h2 { margin-top: var(--space-xl); }.footer-statement { margin-bottom: var(--space-2xl); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }