:root {
      color-scheme: dark;
      --background: #070809;
      --surface: #0f1113;
      --surface-2: #141719;
      --surface-3: #1a1d1f;
      --stroke: rgba(255,255,255,.077);
      --stroke-strong: rgba(255,255,255,.13);
      --white: #f5f5f1;
      --muted: #969c9b;
      --soft: #c7ccc8;
      --jade: #67ffad;
      --jade-bright: #53ffa5;
      --jade-deep: #008c5b;
      --jade-glow: rgba(73,255,154,.25);
      --jade-text: #67ffad;
      --button-ink: #062115;
      --canvas-shadow: rgba(0,0,0,.28);
      --jade-dark: #407e62;
      --gold: #c8b695;
      --radius: 28px;
      --sans: 'Manrope','DM Sans',system-ui,sans-serif;
      --serif: 'Playfair Display', Georgia,serif;
    }
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: 95px; }
    body { margin: 0; min-width: 320px; background: var(--background); color:var(--white); font-family: var(--sans); -webkit-font-smoothing: antialiased; transition:background-color .38s ease,color .28s ease; }
    :root[data-theme="light"] { color-scheme: light; }
    :root[data-theme="dark"] { color-scheme: dark; }
    button, a, input { font: inherit; }
    button { cursor: pointer; }
    a { color: inherit; text-decoration: none; }
    button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--jade); outline-offset: 4px; }
    ::selection { background: #407b61; color: white; }
    svg { display: block; }
    .icon { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
    .page { width:min(1690px,100%); padding: 21px clamp(15px,2.35vw,40px) 38px; margin: 0 auto; }
    .eyebrow { display: flex; align-items: center; gap: 12px; letter-spacing: .23em; font-size: 10px; font-weight: 800; text-transform: uppercase; color: var(--jade); }
    .eyebrow i { width: 21px; height: 1px; background: currentColor; display: block; opacity: .78; }
    .muted { color: var(--muted); }
    .header { height:75px; border:1px solid var(--stroke); background: #0d0f10; border-radius: 22px; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:0 24px 0 17px; margin-bottom:18px; position:relative; z-index:5; }
    .brand { display:flex; align-items:center; gap: 12px; min-width: 188px; }
    .brand-glyph { width: 43px; height: 43px; border-radius:14px; display:grid; place-items:center; background:linear-gradient(140deg,#1e3028,#0f1816); border:1px solid rgba(150,234,189,.16); color:var(--jade); font:italic 27px var(--serif); box-shadow: inset 0 0 26px rgba(116,204,153,.04); }
    .brand-main { font-size:14px; font-weight:800; letter-spacing:.19em; line-height: 1.2; }
    .brand-sub { color:#858e8a; font-size:9px; font-weight:700; letter-spacing:.24em; margin-top:5px; }
    .top-nav { display:flex; align-items:center; gap:5px; border:1px solid rgba(255,255,255,.065); border-radius:999px; padding:4px; background:#151719; }
    .top-nav a, .top-nav button { border:0; color:#929b97; background:transparent; border-radius:999px; min-height:36px; padding: 0 18px; font-size:11px; font-weight:700; white-space:nowrap; transition:background .2s, color .2s; }
    .top-nav a:hover, .top-nav button:hover { color:var(--white); }
    .top-nav .active { color: #f2f5f1; background:#292d2e; box-shadow:inset 0 1px rgba(255,255,255,.05); }
    .header-end { display:flex; align-items:center; justify-content:flex-end; gap:14px; min-width:188px; }
    .edition { color:#9aa19d; font:italic 13px var(--serif); white-space:nowrap; }
    .state { display:flex; align-items:center; gap:9px; background:#191c1d; border:1px solid var(--stroke); border-radius:999px; padding:10px 13px; font-size:10px; font-weight:800; color:#a8afab; letter-spacing:.04em; white-space:nowrap; }
    .state-dot { width:6px; height:6px; background:#777a75; border-radius:50%; box-shadow:0 0 0 4px rgba(255,255,255,.03); }
    .state.is-playing .state-dot { background:var(--jade-bright); box-shadow:0 0 0 4px rgba(79,255,154,.14),0 0 18px rgba(79,255,154,.62); }
    .state.is-playing #topStateText { color:var(--jade); }
    .hero { position:relative; isolation:isolate; overflow:hidden; border:1px solid var(--stroke); border-radius: 36px; background:radial-gradient(ellipse at 80% 54%, rgba(39,70,55,.15), transparent 36%), #101213; min-height: 550px; display:grid; grid-template-columns:minmax(0,1.14fr) minmax(365px,.86fr); }
    .hero::after { content:""; position:absolute; z-index:-1; width: 540px; height:540px; border-radius:50%; right:-8%; top:-43%; background:radial-gradient(circle,rgba(140,199,165,.065),transparent 67%); pointer-events:none; }
    .hero-content { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:66px clamp(34px,6.2vw,102px) 76px; z-index:2; }
    .hero-pill { color:#b3beb5; border:1px solid rgba(193,225,203,.15); background:rgba(255,255,255,.035); border-radius:999px; padding:11px 15px; display:inline-flex; align-items:center; gap:11px; font-weight:700; font-size:10px; letter-spacing:.13em; text-transform:uppercase; margin-bottom:30px; }
    .hero-pill span { width:6px; height:6px; background:var(--jade); border-radius:50%; }
    h1,h2,h3,p { margin-top:0; }
    .hero h1 { font:400 clamp(55px,5.5vw,92px)/1.09 var(--serif); letter-spacing:-.055em; margin:0 0 23px; max-width:780px; }
    .hero h1 em { color:var(--jade); font-weight:400; }
    .hero-description { color:#a7ada9; font-size:13px; line-height:1.95; max-width:440px; margin:0 0 33px; }
    .hero-actions { display:flex; flex-wrap:wrap; gap:10px; }
    .button { border-radius:999px; min-height:51px; padding:0 22px; display:inline-flex; justify-content:center; align-items:center; gap:11px; border:1px solid var(--stroke-strong); background:#202426; color:var(--white); font-size:12px; font-weight:800; transition: transform .2s, background .2s, border-color .2s; }
    .button:hover { transform:translateY(-2px); border-color:rgba(180,239,208,.28); }
    .button-primary { color:var(--button-ink); background:var(--jade-bright); border-color:var(--jade-bright); box-shadow:0 8px 28px var(--jade-glow); }
    .button-primary:hover { background:#92ffbf; box-shadow:0 12px 32px rgba(75,255,159,.34); }
    .button .icon { width:17px; height:17px; }
    .mobile-copy { display:none; }
    .hero-quote { display:flex; align-items:center; gap:12px; font:italic 12px var(--serif); color:#8b968f; margin:30px 0 0; }
    .quote-stroke { height:1px; width:22px; background:#728276; }
    .art { position:relative; min-height:475px; display:grid; place-items:center; overflow:hidden; }
    .art::after { content:""; position:absolute; inset:12% -15% 12% 0; z-index:-1; background:radial-gradient(ellipse at 55% 50%,rgba(108,174,132,.10),transparent 52%); filter:blur(12px); }
    .art-caption { position:absolute; top:42px; right:42px; display:flex; flex-direction:column; text-align:right; gap:4px; color:#86938b; font-size:10px; font-weight:700; letter-spacing:.18em; }
    .art-caption strong { color:#e2e8e0; font-size:12px; letter-spacing:.17em; }
    .record { width:min(68%,350px); aspect-ratio:1; position:relative; border-radius:50%; display:grid; place-items:center; background:repeating-radial-gradient(circle,transparent 0 4px,rgba(255,255,255,.025) 5px,transparent 6px), radial-gradient(circle at 38% 29%,#292e2c 0,#131919 30%,#080b0b 75%); border:1px solid rgba(193,234,207,.20); box-shadow:0 38px 76px rgba(0,0,0,.50),0 0 0 20px rgba(255,255,255,.018),0 0 0 21px rgba(255,255,255,.06),0 0 0 63px rgba(255,255,255,.011),0 0 0 64px rgba(255,255,255,.048),0 0 0 106px rgba(255,255,255,.009),0 0 0 107px rgba(255,255,255,.024); transition:box-shadow .4s; }
    .record::before { content:""; position:absolute; inset:7%; border-radius:50%; border:1px solid rgba(189,223,202,.15); }
    .record::after { content:""; position:absolute; inset:19%; border-radius:50%; border:1px solid rgba(189,223,202,.09); }
    .record-center { width:57%; aspect-ratio:1; border-radius:50%; display:flex; flex-direction:column; justify-content:center; align-items:center; background:radial-gradient(circle at 28% 22%,#244135,#111b17 53%,#0a100e 85%); border:1px solid rgba(144,206,164,.26); box-shadow:inset 0 0 37px rgba(88,144,104,.10); position:relative; z-index:1; }
    .record-monogram { color:var(--jade); font:italic 74px/.9 var(--serif); margin:-11px 0 12px; text-shadow:0 0 33px rgba(149,245,181,.10); }
    .record-center span { color:#c0ccbf; font-size:9px; font-weight:800; letter-spacing:.30em; }
    .record-center small { color:#829187; font-size:8px; letter-spacing:.17em; margin-top:8px; }
    .record-orbit { position:absolute; left:11%; bottom:18%; background:#171b1b; border:1px solid var(--stroke-strong); padding:12px 16px; border-radius:16px; box-shadow:0 16px 45px rgba(0,0,0,.25); transform:rotate(-7deg); }
    .record-orbit small { color:#929f98; font-size:9px; letter-spacing:.16em; display:block; font-weight:700; }
    .record-orbit strong { color:var(--white); font:italic 22px var(--serif); display:block; margin-top:4px; }
    .hero[data-playing="true"] .record { animation:turn 24s linear infinite; box-shadow:0 30px 90px rgba(0,0,0,.5),0 0 0 20px rgba(255,255,255,.018),0 0 0 21px rgba(180,239,208,.09),0 0 0 63px rgba(255,255,255,.011),0 0 0 64px rgba(180,239,208,.055),0 0 0 106px rgba(255,255,255,.009),0 0 0 107px rgba(180,239,208,.04); }
    .content-grid { display:grid; grid-template-columns:minmax(0,1.42fr) minmax(320px,.8fr); gap:16px; margin-top:16px; }
    .card { background:var(--surface); border:1px solid var(--stroke); border-radius:var(--radius); overflow:hidden; min-width:0; }
    .player { padding: 31px clamp(24px,3.1vw,48px); display:flex; flex-direction:column; justify-content:space-between; min-height:315px; }
    .section-top { display:flex; align-items:center; justify-content:space-between; gap:15px; }
    .section-name { font-size:10px; font-weight:800; letter-spacing:.16em; color:#969e99; text-transform:uppercase; }
    .section-code { color:#727c75; font-size:10px; font-weight:700; letter-spacing:.12em; }
    .now-playing { display:flex; align-items:center; gap:20px; margin:22px 0 19px; }
    .mini-cover { width:86px; height:86px; display:grid; place-items:center; flex:none; border-radius:21px; background:radial-gradient(circle at 25% 20%,#2d4c3c,transparent 56%),linear-gradient(145deg,#1c2721,#101513); color:var(--jade); font:italic 50px var(--serif); border:1px solid rgba(180,239,208,.11); }
    .song-titles { min-width:0; }
    .song-titles h2 { font-size:clamp(20px,2vw,26px); line-height:1.2; margin:0 0 7px; letter-spacing:-.035em; }
    .song-titles p { color:#8a968e; font-size:11px; margin:0; letter-spacing:.025em; }
    .equalizer { display:flex; align-items:center; gap:3px; height:32px; overflow:hidden; opacity:.40; margin:0 0 18px; mask-image:linear-gradient(to right, #000 87%,transparent); }
    .equalizer span { width:3px; flex:1 0 2px; max-width:4px; height:var(--height); border-radius:99px; background:linear-gradient(to top,#168b55,#68ffae); transform-origin:center; }
    .equalizer.playing { opacity:1; }
    .equalizer.playing span { animation:equalize .76s ease-in-out infinite alternate; animation-delay:var(--delay); }
    .player-controls { display:flex; gap:17px; align-items:center; }
    .control-play { background:var(--jade-bright); color:var(--button-ink); box-shadow:0 8px 26px var(--jade-glow); width:52px; height:52px; flex:none; border:0; border-radius:17px; display:grid; place-items:center; transition:transform .2s, background .2s; }
    .control-play:hover { transform:translateY(-2px); background:#92ffbf; }
    .control-play .icon { fill:currentColor; stroke-width:1.3; width:23px; height:23px; }
    .control-play .pause-icon { display:none; }
    .control-play.is-playing .play-icon { display:none; }
    .control-play.is-playing .pause-icon { display:block; }
    .player-labels { flex:1; min-width:0; }
    .player-labels strong { font-size:12px; display:block; font-weight:800; }
    .player-labels span { font-size:10px; color:#859089; display:block; margin-top:4px; line-height:1.4; }
    .volume { display:flex; align-items:center; gap:10px; color:#a1aaa4; }
    .volume input { appearance:none; width:100px; height:3px; background:linear-gradient(to right,var(--jade-bright) 75%,var(--slider-remainder,#393e3e) 75%); border-radius:99px; cursor:pointer; }
    .volume input::-webkit-slider-thumb { appearance:none; width:11px; height:11px; border-radius:50%; background:#edfdf2; border:0; }
    .volume input::-moz-range-thumb { width:11px; height:11px; border-radius:50%; background:#edfdf2; border:0; }
    .studio-card { padding:31px 33px; display:flex; flex-direction:column; justify-content:space-between; min-height:315px; background:radial-gradient(ellipse at 100% 100%,rgba(42,71,51,.16),transparent 62%),var(--surface); }
    .studio-icon { width:46px; height:46px; border:1px solid rgba(180,239,208,.15); border-radius:15px; display:grid; place-items:center; color:var(--jade); background:#1a2420; margin-top:19px; }
    .studio-card h2 { margin:13px 0 11px; font:400 clamp(25px,2.3vw,34px)/1.15 var(--serif); letter-spacing:-.035em; }
    .studio-card h2 em { color:var(--jade); }
    .studio-card p { color:#89958d; font-size:11px; line-height:1.85; max-width:380px; margin:0 0 18px; }
    .inline-link { display:inline-flex; align-items:center; gap:10px; color:#dce9de; font-size:11px; font-weight:800; width:max-content; border-bottom:1px solid rgba(222,237,223,.3); padding-bottom:5px; transition: color .2s, gap .2s; }
    .inline-link:hover { color:var(--jade); gap:15px; }
    .section-intro { padding:54px 4px 19px; display:flex; align-items:flex-end; justify-content:space-between; gap:25px; }
    .section-intro h2 { font:400 clamp(30px,3.4vw,46px)/1.16 var(--serif); letter-spacing:-.04em; margin:12px 0 0; }
    .section-intro p { font-size:12px; line-height:1.8; color:#8d9690; margin:0 0 6px; max-width:310px; text-align:right; }
    .stories { display:grid; grid-template-columns:1.13fr .93fr .93fr; gap:16px; }
    .story { min-height:246px; padding:26px 27px; position:relative; display:flex; flex-direction:column; justify-content:space-between; background:#101213; transition:background .2s,transform .25s,border-color .2s; }
    .story:hover { background:#16191a; border-color:rgba(180,239,208,.17); transform:translateY(-3px); }
    .story:first-child { background:radial-gradient(circle at 92% 18%,rgba(74,125,86,.13),transparent 58%),#111514; }
    .story-header { display:flex; align-items:center; justify-content:space-between; gap:10px; }
    .story-tag { font-size:10px; font-weight:800; color:#89968c; letter-spacing:.095em; }
    .story-index { width:31px; height:31px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.09); color:#909a94; border-radius:50%; font-size:10px; }
    .story h3 { font:400 clamp(25px,2.5vw,34px)/1.17 var(--serif); letter-spacing:-.035em; margin:19px 0 9px; }
    .story h3 em { color:var(--jade); font-weight:400; }
    .story p { margin:0; font-size:11px; color:#858f88; line-height:1.7; max-width:335px; }
    .footer { display:flex; align-items:center; gap:25px; justify-content:space-between; margin-top:33px; padding:0 6px 8px; color:#737b77; font-size:10px; }
    .footer strong { letter-spacing:.20em; font-size:11px; color:#c3cbc4; }
    .footer small { color:#626b65; font-size:10px; }
    .mobile-nav { display:none; }
    .toast { position:fixed; left:50%; bottom:28px; transform:translate(-50%,15px); background:#222827; color:#e8f2e9; border:1px solid rgba(180,239,208,.22); border-radius:18px; padding:15px 20px; z-index:100; box-shadow:0 20px 60px rgba(0,0,0,.55); font-size:12px; line-height:1.6; max-width:min(470px,calc(100vw - 30px)); opacity:0; pointer-events:none; transition:opacity .23s, transform .23s; }
    .toast.visible { opacity:1; transform:translate(-50%,0); }
    .modal { display:none; position:fixed; inset:0; z-index:60; padding:22px; background:rgba(0,0,0,.9); backdrop-filter:blur(15px); }
    .modal.open { display:flex; align-items:stretch; justify-content:center; }
    .modal-inner { display:flex; flex-direction:column; width:min(1600px,100%); min-height:0; background:#0c0e0f; border-radius:27px; overflow:hidden; border:1px solid var(--stroke-strong); }
    .modal-bar { height:67px; padding:0 21px 0 27px; display:flex; align-items:center; justify-content:space-between; gap:18px; border-bottom:1px solid var(--stroke); }
    .modal-bar h2 { font-size:11px; text-transform:uppercase; letter-spacing:.2em; margin:0; }
    .modal-actions { display:flex; gap:11px; align-items:center; }
    .modal-actions a,.modal-actions button { background:#1c2121; padding:11px 15px; border:1px solid var(--stroke); border-radius:999px; font-size:11px; font-weight:700; color:#e5ebe4; }
    .modal-actions button { color:var(--jade); }
    .modal-frame { width:100%; flex:1; min-height:0; background:#070809; border:0; }
    .modal-hint { color:#7d8981; font-size:10px; padding:11px 23px; line-height:1.5; }
    @keyframes turn { to { transform:rotate(360deg); } }
    @keyframes equalize { 0% { transform:scaleY(.25); } 100% { transform:scaleY(1.2); } }
    @media(max-width:1140px) {
      .hero { grid-template-columns:minmax(0,1fr) minmax(315px,.8fr); }
      .hero-content { padding:56px 42px; }
      .hero h1 { font-size:clamp(51px,5.3vw,76px); }
      .edition { display:none; }
      .header-end { min-width:auto; }
      .stories { grid-template-columns:repeat(3,minmax(0,1fr)); }
    }
    @media(max-width:860px) {
      .top-nav { display:none; }
      .hero { grid-template-columns:1fr; }
      .hero-content { padding:50px 44px 24px; }
      .hero h1 { font-size:clamp(52px,8vw,82px); }
      .art { min-height:360px; }
      .record { width:265px; }
      .record-monogram { font-size:65px; }
      .art-caption { top:15px; right:35px; }
      .record-orbit { left:20%; bottom:12%; }
      .content-grid { grid-template-columns:1fr; }
      .player, .studio-card { min-height:290px; }
      .studio-card { padding:29px 34px; }
      .stories { grid-template-columns:1fr 1fr; }
      .story:first-child { grid-column:1 / -1; }
      .story { min-height:220px; }
      .mobile-nav { display:flex; position:fixed; z-index:20; left:50%; transform:translateX(-50%); bottom:calc(12px + env(safe-area-inset-bottom)); width:min(420px,calc(100vw - 28px)); background:rgba(23,27,27,.96); border:1px solid rgba(255,255,255,.12); border-radius:25px; padding:7px; gap:5px; box-shadow:0 22px 60px rgba(0,0,0,.6); backdrop-filter:blur(25px); }
      .mobile-nav a,.mobile-nav button { border:0; background:transparent; color:#89958c; border-radius:18px; flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:4px; min-height:49px; font-size:9px; font-weight:800; }
      .mobile-nav a.active { color:var(--jade); background:#2b3130; }
      .mobile-nav .icon { width:18px; height:18px; }
      .page { padding-bottom:115px; }
      .toast { bottom:calc(98px + env(safe-area-inset-bottom)); }
    }
    @media(max-width:550px) {
      .page { padding:10px 10px 115px; }
      .header { height:64px; margin-bottom:10px; padding:0 13px 0 10px; border-radius:19px; }
      .brand { gap:9px; min-width:0; }
      .brand-glyph { width:37px; height:37px; font-size:24px; border-radius:12px; }
      .brand-main { font-size:11px; letter-spacing:.13em; }
      .brand-sub { font-size:8px; letter-spacing:.13em; }
      .state { padding:8px 10px; font-size:9px; }
      .hero { border-radius:26px; }
      .hero-content { padding:40px 25px 0; }
      .hero-pill { font-size:9px; letter-spacing:.09em; margin-bottom:23px; }
      .hero h1 { font-size:clamp(47px,11.8vw,67px); line-height:1.06; margin-bottom:19px; }
      .hero-description { font-size:12px; line-height:1.83; margin-bottom:26px; }
      .button { padding:0 16px; min-height:48px; font-size:11px; }
      .mobile-copy { display:inline; }
      .desktop-copy { display:none; }
      .hero-quote { margin:24px 0 4px; font-size:11px; }
      .art { min-height:307px; }
      .record { box-shadow:0 28px 55px rgba(0,0,0,.5),0 0 0 16px rgba(255,255,255,.018),0 0 0 17px rgba(255,255,255,.055),0 0 0 42px rgba(255,255,255,.01),0 0 0 43px rgba(255,255,255,.042),0 0 0 70px rgba(255,255,255,.008),0 0 0 71px rgba(255,255,255,.022); }
      .hero[data-playing="true"] .record { box-shadow:0 28px 60px rgba(0,0,0,.5),0 0 0 16px rgba(255,255,255,.018),0 0 0 17px rgba(180,239,208,.09),0 0 0 42px rgba(255,255,255,.01),0 0 0 43px rgba(180,239,208,.06),0 0 0 70px rgba(255,255,255,.008),0 0 0 71px rgba(180,239,208,.035); }
      .record { width:209px; }
      .record-monogram { font-size:53px; margin:-8px 0 6px; }
      .record-center span { font-size:7px; }
      .record-center small { font-size:6px; }
      .art-caption { top:19px; right:22px; font-size:8px; }
      .art-caption strong { font-size:10px; }
      .record-orbit { left:8%; bottom:14%; padding:9px 12px; border-radius:12px; }
      .record-orbit strong { font-size:18px; }
      .card { border-radius:23px; }
      .content-grid { gap:10px; margin-top:10px; }
      .player, .studio-card { padding:24px 22px; min-height:0; }
      .mini-cover { width:68px; height:68px; border-radius:17px; font-size:40px; }
      .now-playing { gap:14px; margin:25px 0 21px; }
      .song-titles h2 { font-size:20px; }
      .song-titles p { font-size:9px; line-height:1.6; }
      .player-controls { gap:12px; }
      .control-play { width:48px; height:48px; border-radius:15px; }
      .player-labels span { font-size:9px; }
      .volume { gap:7px; }
      .volume .icon { width:16px; height:16px; }
      .volume input { width:57px; }
      .studio-icon { margin-top:16px; }
      .studio-card h2 { font-size:28px; }
      .section-intro { padding:39px 10px 20px; flex-direction:column; align-items:start; gap:12px; }
      .section-intro h2 { font-size:35px; }
      .section-intro p { text-align:left; font-size:11px; }
      .stories { grid-template-columns:1fr; gap:10px; }
      .story:first-child { grid-column:auto; }
      .story { min-height:205px; padding:23px 24px; }
      .story h3 { font-size:29px; }
      .footer { padding:0 11px; align-items:start; flex-wrap:wrap; gap:10px 20px; }
      .footer small { width:100%; }
      .modal { padding:8px; }
      .modal-inner { border-radius:18px; }
      .modal-bar { padding:0 10px 0 14px; height:60px; }
      .modal-bar h2 { font-size:8px; letter-spacing:.1em; }
      .modal-actions a { display:none; }
      .modal-actions button { padding:10px 12px; }
      .modal-hint { font-size:9px; padding:9px 14px; }
    }
    @media(prefers-reduced-motion:reduce) {
      *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
    }

    /* ─────────────────────────────────────────────────────────────
       KRN / LA MARQUESA · DUAL APPEARANCE SYSTEM
       Negro absoluto + jade eléctrico | Porcelana fría + esmeralda.
       ───────────────────────────────────────────────────────────── */
    :root {
      --slider-remainder: #3c4440;
    }
    .header,.hero,.card,.top-nav,.state,.brand-glyph,.theme-switch,.mobile-nav,.modal-inner {
      transition:background-color .35s ease, border-color .35s ease, color .3s ease,box-shadow .35s ease;
    }
    .theme-switch {
      display:inline-flex; align-items:center; gap:8px; padding:5px 12px 5px 5px;
      border:1px solid rgba(103,255,173,.19); border-radius:999px;
      background:#191e1b; color:#e9fff2; min-height:39px; white-space:nowrap;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
    }
    .theme-switch:hover { border-color:rgba(103,255,173,.45); }
    .theme-switch-icon { width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:#29392f;color:var(--jade-bright); }
    .theme-switch-icon .icon { width:16px;height:16px;grid-area:1/1; }
    .theme-icon-sun { display:none; }
    .theme-switch-label { font-size:10px;letter-spacing:.02em;font-weight:800; }
    .theme-switch:focus-visible { outline:2px solid var(--jade-bright);outline-offset:4px; }
    [data-theme="dark"] .brand-glyph { color:var(--jade-bright);box-shadow:0 0 21px rgba(83,255,165,.09),inset 0 0 23px rgba(83,255,165,.06); }
    [data-theme="dark"] .hero { background:radial-gradient(ellipse at 79% 49%, rgba(54,132,86,.12),transparent 42%),#0c0f0e; }
    [data-theme="dark"] .hero h1 em,[data-theme="dark"] .story h3 em,[data-theme="dark"] .studio-card h2 em { color:var(--jade-bright); }
    [data-theme="dark"] .record-monogram { color:var(--jade-bright);text-shadow:0 0 44px rgba(83,255,165,.27); }
    [data-theme="dark"] .hero-pill span { box-shadow:0 0 15px rgba(83,255,165,.58); }
    [data-theme="dark"] .mini-cover { border-color:rgba(103,255,173,.22); }
    [data-theme="dark"] .studio-icon { border-color:rgba(103,255,173,.25); background:#16251c; }
    [data-theme="dark"] .eyebrow,[data-theme="dark"] .inline-link:hover { color:var(--jade-bright); }

    /* LIGHT — No es una inversión CSS: cada material tiene su propio acabado. */
    :root[data-theme="light"] {
      --background:#f1f5f1;
      --surface:#fff;
      --surface-2:#f5f9f6;
      --surface-3:#e8f2ea;
      --stroke:rgba(17,46,30,.09);
      --stroke-strong:rgba(12,69,39,.17);
      --white:#15241b;
      --muted:#65756c;
      --soft:#405448;
      --jade:#008a54;
      --jade-text:#006d43;
      --jade-bright:#53f7a0;
      --jade-deep:#006942;
      --jade-glow:rgba(43,224,127,.21);
      --button-ink:#062419;
      --canvas-shadow:rgba(28,70,38,.09);
      --slider-remainder:#d9e3da;
    }
    [data-theme="light"] ::selection { background:#57f6a0; color:#062419; }
    [data-theme="light"] .header { background:rgba(255,255,255,.94);box-shadow:0 8px 30px rgba(22,59,34,.035); }
    [data-theme="light"] .brand-glyph { color:#008655;background:linear-gradient(145deg,#e7fff0,#f5faf6);border-color:rgba(20,150,84,.17);box-shadow:inset 0 0 20px rgba(67,245,147,.15); }
    [data-theme="light"] .brand-sub { color:#687c6f; }
    [data-theme="light"] .top-nav { background:#eef3ee;border-color:#e2eae2; }
    [data-theme="light"] .top-nav a,[data-theme="light"] .top-nav button { color:#64756b; }
    [data-theme="light"] .top-nav a:hover,[data-theme="light"] .top-nav button:hover { color:#123522; }
    [data-theme="light"] .top-nav .active { background:white;color:#112e1c;box-shadow:0 1px 8px rgba(24,87,46,.1); }
    [data-theme="light"] .edition { color:#829188; }
    [data-theme="light"] .theme-switch { background:#edf8f0;color:#183c2a;border-color:rgba(0,143,77,.19);box-shadow:0 2px 8px rgba(27,109,50,.03); }
    [data-theme="light"] .theme-switch-icon { background:#d8fbe4;color:#00804b; }
    [data-theme="light"] .theme-icon-moon { display:none; }
    [data-theme="light"] .theme-icon-sun { display:block; }
    [data-theme="light"] .state { background:#f1f7f2;color:#426b52;border-color:#e4eee6; }
    [data-theme="light"] .state-dot { background:#a5b6aa;box-shadow:0 0 0 4px rgba(28,70,38,.04); }
    [data-theme="light"] .state.is-playing .state-dot { background:#12bd6d;box-shadow:0 0 0 4px rgba(47,222,130,.14),0 0 13px rgba(47,222,130,.3); }
    [data-theme="light"] .state.is-playing #topStateText { color:#067844; }
    [data-theme="light"] .hero { background:radial-gradient(ellipse at 74% 49%,rgba(83,247,160,.19),transparent 42%),linear-gradient(129deg,#ffffff 0%,#f6faf6 56%,#edf8f1 100%);border-color:rgba(14,80,36,.11);box-shadow:0 18px 45px rgba(33,75,44,.045); }
    [data-theme="light"] .hero::after { background:radial-gradient(circle,rgba(83,247,160,.12),transparent 64%); }
    [data-theme="light"] .hero-pill { color:#37684b;border-color:rgba(12,141,73,.18);background:rgba(255,255,255,.82); }
    [data-theme="light"] .hero-pill span { background:#1bda7e;box-shadow:0 0 0 4px rgba(83,247,160,.13),0 0 14px rgba(26,209,112,.21); }
    [data-theme="light"] .hero-description { color:#5c6e61; }
    [data-theme="light"] .hero h1 em { color:#068b56; }
    [data-theme="light"] .button:not(.button-primary) { color:#294234;background:rgba(255,255,255,.88);border-color:#d5e3d8; }
    [data-theme="light"] .button:hover { border-color:rgba(7,154,78,.42); }
    [data-theme="light"] .hero-quote { color:#6e8576; }
    [data-theme="light"] .quote-stroke { background:#a9c6b1; }
    [data-theme="light"] .art::after { background:radial-gradient(ellipse at 55% 50%,rgba(35,203,106,.16),transparent 53%); }
    [data-theme="light"] .art-caption { color:#65816f; }
    [data-theme="light"] .art-caption strong { color:#28543a; }
    [data-theme="light"] .record { background:repeating-radial-gradient(circle,transparent 0 4px,rgba(255,255,255,.029) 5px,transparent 6px),radial-gradient(circle at 32% 25%,#365045 0,#172920 32%,#080e0b 78%);border-color:rgba(34,137,81,.28);box-shadow:0 31px 75px rgba(22,73,40,.20),0 0 0 20px rgba(21,135,74,.025),0 0 0 21px rgba(23,139,71,.10),0 0 0 63px rgba(21,135,74,.018),0 0 0 64px rgba(23,139,71,.065),0 0 0 106px rgba(21,135,74,.012),0 0 0 107px rgba(23,139,71,.05); }
    [data-theme="light"] .hero[data-playing="true"] .record { box-shadow:0 31px 75px rgba(22,73,40,.2),0 0 0 20px rgba(21,135,74,.025),0 0 0 21px rgba(25,227,116,.17),0 0 0 63px rgba(21,135,74,.018),0 0 0 64px rgba(25,227,116,.11),0 0 0 106px rgba(21,135,74,.012),0 0 0 107px rgba(25,227,116,.06); }
    [data-theme="light"] .record-center { background:radial-gradient(circle at 24% 19%,#295942,#0d2419 52%,#07150f 85%);border-color:rgba(102,255,171,.35); }
    [data-theme="light"] .record-monogram { color:#68ffb0;text-shadow:0 0 32px rgba(83,255,165,.35); }
    [data-theme="light"] .record-center span { color:#daf5e3; }
    [data-theme="light"] .record-center small { color:#92bfa2; }
    [data-theme="light"] .record-orbit { background:#fff;border-color:rgba(6,107,54,.15);box-shadow:0 12px 38px rgba(9,54,27,.12); }
    [data-theme="light"] .record-orbit small { color:#617b69; }
    [data-theme="light"] .record-orbit strong { color:#193c26; }
    [data-theme="light"] .card { box-shadow:0 6px 24px rgba(24,67,33,.03); }
    [data-theme="light"] .section-name { color:#65776b; }
    [data-theme="light"] .section-code { color:#9caa9e; }
    [data-theme="light"] .mini-cover { background:radial-gradient(circle at 24% 17%,rgba(50,255,137,.25),transparent 55%),linear-gradient(145deg,#e2fae9,#f3fbf5);color:#067b4d;border-color:#d3eedc; }
    [data-theme="light"] .song-titles p { color:#688172; }
    [data-theme="light"] .equalizer span { background:linear-gradient(to top,#069358,#57f6a1); }
    [data-theme="light"] .player-labels span { color:#6c8574; }
    [data-theme="light"] .volume { color:#577260; }
    [data-theme="light"] .volume input::-webkit-slider-thumb { background:#008755;box-shadow:0 0 0 3px rgba(83,247,160,.19); }
    [data-theme="light"] .volume input::-moz-range-thumb { background:#008755; }
    [data-theme="light"] .studio-card { background:radial-gradient(ellipse at 100% 100%,rgba(44,240,129,.1),transparent 62%),#fff; }
    [data-theme="light"] .studio-icon { color:#007b4c;background:#e4faeb;border-color:#d3f3df; }
    [data-theme="light"] .studio-card h2 em { color:#007e4c; }
    [data-theme="light"] .studio-card p { color:#647e6b; }
    [data-theme="light"] .inline-link { color:#0c6840;border-bottom-color:rgba(4,116,57,.25); }
    [data-theme="light"] .inline-link:hover { color:#02965a; }
    [data-theme="light"] .eyebrow { color:#068452; }
    [data-theme="light"] .section-intro p { color:#687d6d; }
    [data-theme="light"] .story { background:#fff; }
    [data-theme="light"] .story:hover { background:#f9fff9;border-color:rgba(15,178,80,.22); }
    [data-theme="light"] .story:first-child { background:radial-gradient(circle at 92% 18%,rgba(83,247,160,.15),transparent 60%),#fff; }
    [data-theme="light"] .story-tag { color:#728476; }
    [data-theme="light"] .story-index { border-color:rgba(8,109,52,.15);color:#759181; }
    [data-theme="light"] .story h3 em { color:#008a55; }
    [data-theme="light"] .story p { color:#697e70; }
    [data-theme="light"] .footer { color:#708577; }
    [data-theme="light"] .footer strong { color:#235039; }
    [data-theme="light"] .footer small { color:#84968a; }
    [data-theme="light"] .mobile-nav { background:rgba(255,255,255,.97);border-color:rgba(23,114,55,.13);box-shadow:0 14px 44px rgba(21,74,37,.13); }
    [data-theme="light"] .mobile-nav a,[data-theme="light"] .mobile-nav button { color:#6e8574; }
    [data-theme="light"] .mobile-nav a.active { background:#e6faeb;color:#007c4a; }
    [data-theme="light"] .toast { background:#153124;color:#f0fff4;border-color:rgba(83,247,160,.35); }
    [data-theme="light"] .modal { background:rgba(13,31,19,.73); }
    [data-theme="light"] .modal-inner { background:#fff; }
    [data-theme="light"] .modal-actions a,[data-theme="light"] .modal-actions button { background:#edf6ef;color:#224734;border-color:#d5e9d8; }
    [data-theme="light"] .modal-actions button { color:#007d49; }
    [data-theme="light"] .modal-frame { background:#f5f8f5; }
    [data-theme="light"] .modal-hint { color:#6c8272; }
    @media(max-width:1140px) {
      .edition { display:none; }
      .header-end { gap:9px; }
    }
    @media(max-width:550px) {
      .header { gap:8px; }
      .header-end { gap:6px; }
      .theme-switch { width:38px;height:38px; min-height:38px; padding:4px;justify-content:center; flex:none; }
      .theme-switch-icon { width:28px;height:28px; }
      .theme-switch-label { display:none; }
      .header .state { display:none; }
      [data-theme="light"] .record { box-shadow:0 28px 55px rgba(22,73,40,.17),0 0 0 16px rgba(21,135,74,.018),0 0 0 17px rgba(23,139,71,.10),0 0 0 42px rgba(21,135,74,.009),0 0 0 43px rgba(23,139,71,.065),0 0 0 70px rgba(21,135,74,.007),0 0 0 71px rgba(23,139,71,.04); }
      [data-theme="light"] .hero[data-playing="true"] .record { box-shadow:0 28px 55px rgba(22,73,40,.17),0 0 0 16px rgba(21,135,74,.018),0 0 0 17px rgba(25,227,116,.19),0 0 0 42px rgba(21,135,74,.009),0 0 0 43px rgba(25,227,116,.12),0 0 0 70px rgba(21,135,74,.007),0 0 0 71px rgba(25,227,116,.07); }
    }
    @media(prefers-reduced-motion:reduce) {
      *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; }
    }


    /* KRN RADIO · DUO NAV SYSTEM · inspirado en la arquitectura de Noesis V10:
       barra superior y rail lateral flotantes, lienzo desplazable independiente. */
    :root {
      --shell-gap: 12px;
      --rail-width: 78px;
      --top-height: 76px;
      --shell-bg: #050706;
      --workspace-bg: #0b0e0d;
      --bar-bg: rgba(16,19,18,.96);
      --rail-tile: #1b2420;
      --rail-txt: #8b9c90;
      --bar-glass-shadow: 0 15px 40px rgba(0,0,0,.22);
    }
    :root[data-theme="light"] {
      --shell-bg: #edf2ed;
      --workspace-bg: #f7faf7;
      --bar-bg: rgba(255,255,255,.94);
      --rail-tile: #e3f9e9;
      --rail-txt: #66806d;
      --bar-glass-shadow: 0 12px 40px rgba(28,65,36,.07);
    }
    html,body { height:100%; overflow:hidden; }
    html { scroll-behavior:auto; }
    body { min-width:320px; background:var(--shell-bg); }
    .app-shell {
      height:100vh; height:100dvh; width:100%; min-width:0;
      display:grid;
      grid-template-columns:var(--rail-width) minmax(0,1fr);
      grid-template-rows:var(--top-height) minmax(0,1fr);
      gap:var(--shell-gap); padding:var(--shell-gap);
      overflow:hidden;
      background:radial-gradient(ellipse at 3% 84%, rgba(41,255,129,.045),transparent 28%),var(--shell-bg);
    }
    .app-shell>.header {
      grid-column:2;grid-row:1;
      width:100%; min-width:0; height:var(--top-height);
      margin:0; position:relative; z-index:20;
      background:var(--bar-bg);
      backdrop-filter:blur(26px) saturate(135%);
      -webkit-backdrop-filter:blur(26px) saturate(135%);
      border-radius:25px; padding:0 22px;
      box-shadow:var(--bar-glass-shadow);
    }
    .app-shell>.page {
      width:100%; max-width:none;
      grid-column:2; grid-row:2; min-width:0;min-height:0;
      overflow-y:auto;overflow-x:hidden;
      overscroll-behavior:contain;
      scroll-behavior:smooth;
      scroll-padding-top:18px;
      scrollbar-width:thin;
      scrollbar-color:rgba(108,190,143,.24) transparent;
      margin:0; padding:17px 17px 20px;
      border:1px solid var(--stroke);
      background:var(--workspace-bg);
      border-radius:30px;
      box-shadow:0 15px 65px rgba(0,0,0,.08);
    }
    .page::-webkit-scrollbar{width:9px}
    .page::-webkit-scrollbar-thumb{border-radius:30px;background:rgba(108,190,143,.22);border:3px solid var(--workspace-bg)}
    .side-rail {
      grid-column:1;grid-row:2;
      min-height:0;z-index:25;
      display:flex;flex-direction:column;align-items:center;
      padding:12px 6px;gap:18px;
      border:1px solid var(--stroke);
      border-radius:25px;
      background:var(--bar-bg);
      box-shadow:var(--bar-glass-shadow);
      backdrop-filter:blur(24px) saturate(125%);
      -webkit-backdrop-filter:blur(24px) saturate(125%);
    }
    .rail-signature {
      display:grid; place-items:center;
      width:51px;height:51px; flex:none;
      border:1px solid rgba(98,255,159,.23);
      background:radial-gradient(circle at 32% 20%,rgba(83,255,165,.18),transparent 70%),var(--rail-tile);
      color:var(--jade-text);
      border-radius:17px;
      box-shadow:inset 0 0 19px rgba(87,255,156,.05);
    }
    .rail-signature span{font:italic 30px var(--serif);transform:translateY(-1px)}
    .rail-links,.rail-bottom{width:100%;display:flex;align-items:center;flex-direction:column;gap:7px}
    .rail-bottom{margin-top:auto}
    .rail-link {
      width:60px;min-height:62px; flex:none;
      color:var(--rail-txt);
      background:transparent;
      display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
      padding:7px 2px;
      text-align:center;
      border:1px solid transparent;
      border-radius:18px;
      font-size:9px;font-weight:700;letter-spacing:.012em;
      transition:background-color .24s ease,color .24s ease,transform .24s ease,border-color .24s ease;
      position:relative;
    }
    .rail-link .icon{width:19px;height:19px}
    .rail-link:hover {background:var(--rail-tile);color:var(--white);transform:translateY(-1px)}
    .rail-link.active {background:var(--rail-tile);color:var(--jade-text);border-color:rgba(89,235,145,.13)}
    .rail-link.active:after {
      content:"";position:absolute;right:-6px;top:20px;
      width:3px;height:20px;background:var(--jade-bright);
      border-radius:8px;box-shadow:0 0 14px var(--jade-glow);
    }
    .rail-station {font-size:10px;font-weight:800;letter-spacing:.06em;color:var(--rail-txt);display:flex;flex-direction:column;align-items:center;gap:7px;margin:5px 0 8px}
    .rail-bullet {width:7px;height:7px;display:block;border-radius:50%;background:var(--jade-bright);box-shadow:0 0 14px rgba(83,255,165,.42)}
    .app-shell .hero{min-height:min(555px,72vh);}
    .app-shell .header .brand{min-width:180px;}
    .app-shell .header .header-end{min-width:unset;gap:9px;}
    .app-shell .header .top-nav{gap:3px;}
    .app-shell .header .top-nav a,.app-shell .header .top-nav button{padding-inline:15px;}
    .app-shell .header .edition{font-size:11px;letter-spacing:.05em;font-family:var(--sans);font-style:normal;font-weight:700;color:var(--muted);}
    .app-shell .header .state{padding:10px 12px}
    .app-shell #escuchar,.app-shell #universo{scroll-margin-top:16px;}
    .app-shell .footer{margin-bottom:0}
    [data-theme="light"] .side-rail,.app-shell:has([data-theme="light"]) .side-rail{border-color:rgba(13,104,48,.12)}
    [data-theme="light"] .rail-link:hover{color:#123d27}
    [data-theme="light"] .rail-link.active{color:#007c49;background:#dff7e6}
    [data-theme="light"] .rail-signature{color:#008756;background:linear-gradient(145deg,#edfff2,#daf7e3)}
    @media(max-width:1280px) {
      .app-shell .header .edition{display:none}
      .app-shell .header .top-nav a,.app-shell .header .top-nav button{padding-inline:12px}
    }
    @media(max-width:900px) {
      :root {--shell-gap:7px;--rail-width:0px;--top-height:66px;}
      .app-shell{grid-template-columns:minmax(0,1fr);grid-template-rows:66px minmax(0,1fr);gap:7px;padding:7px;padding-top:max(7px,env(safe-area-inset-top));}
      .app-shell>.header{grid-column:1;grid-row:1;min-width:0;height:66px;border-radius:21px;padding:0 13px}
      .app-shell>.page{grid-column:1;grid-row:2;border-radius:23px;padding:12px 11px calc(94px + env(safe-area-inset-bottom));}
      .side-rail{display:none}
      .app-shell .header .top-nav{display:none}
      .app-shell .header .brand{min-width:unset;}
      .app-shell .header .header-end{min-width:0;gap:7px;}
      .app-shell .hero{min-height:unset;}
      .mobile-nav{width:auto;max-width:500px;left:12px;right:12px;bottom:max(8px,env(safe-area-inset-bottom));transform:none;border-radius:22px;min-height:66px;padding:5px;background:var(--bar-bg);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);box-shadow:0 14px 50px rgba(0,0,0,.26)}
      .mobile-nav a,.mobile-nav button{border-radius:16px}
    }
    @media(max-width:550px) {
      :root{--shell-gap:6px}
      .app-shell{padding:6px;padding-top:max(6px,env(safe-area-inset-top));gap:6px}
      .app-shell>.header{height:62px;border-radius:19px;padding:0 10px}
      .app-shell>.page{border-radius:20px;padding:9px 8px calc(97px + env(safe-area-inset-bottom));}
      .app-shell .header .brand{gap:8px}
      .app-shell .header .brand-glyph{width:35px;height:35px;font-size:24px;border-radius:12px}
      .app-shell .header .brand-main{font-size:12px;letter-spacing:.10em}
      .app-shell .header .brand-sub{font-size:7px;letter-spacing:.09em}
      .app-shell .header .state{font-size:9px;padding:8px 10px}
      .app-shell .header .theme-switch{min-width:40px;padding:6px}
      .app-shell .header .theme-switch-label{display:none}
      .mobile-nav{left:8px;right:8px;bottom:max(7px,env(safe-area-inset-bottom));}
    }
    @media(max-width:365px){
      .app-shell .header .state{font-size:8px;padding:7px 7px}
      .app-shell .header .brand-main{font-size:11px}
      .app-shell .header .brand-sub{font-size:6px}
    }
    @media(prefers-reduced-motion:reduce){.app-shell>.page{scroll-behavior:auto}}



/* KRN Radio v1.2.0 · extensión editorial del diseño aprobado "marquesa-dual-bars".
   Respetar tokens y estructura original de barra superior + rail lateral. */
:root{--ext-panel:rgba(255,255,255,.025);--ext-panel2:#171e1b;--ext-border:rgba(129,235,173,.15)}
:root[data-theme=light]{--ext-panel:#f4f9f5;--ext-panel2:#e8f5ec;--ext-border:rgba(5,105,53,.16)}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.identity-button{border:1px solid var(--ext-border);background:var(--ext-panel2);color:var(--jade-text);font-weight:800;border-radius:999px;padding:9px 14px;white-space:nowrap;font-size:10px;max-width:135px;overflow:hidden;text-overflow:ellipsis}
.identity-button:hover{border-color:var(--jade-text)}
.rail-hub{margin-bottom:2px}
.hub-glyph{display:grid;place-items:center;width:26px;height:26px;border-radius:9px;background:var(--jade-bright);color:#042318;font-size:15px;font-weight:900;line-height:1}
.podcasts-section{scroll-margin-top:16px}
.podcasts-section .section-intro h2 em{color:var(--jade-text);font-style:italic}
.podcast-layout{display:grid;grid-template-columns:minmax(0,1.38fr) minmax(285px,.75fr);gap:16px}
.episode-panel{padding:30px 31px;min-height:395px}
.episode-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--stroke);padding-bottom:22px}
.episode-count{margin:9px 0 0;color:var(--muted);font-size:11px;letter-spacing:0}
.episode-search-label{flex:none}
.episode-search-label input{border:1px solid var(--stroke-strong);color:var(--white);background:var(--surface-2);border-radius:999px;min-height:42px;padding:0 17px;width:min(210px,38vw);outline:0;font-size:11px}
.episode-search-label input:focus{border-color:var(--jade-deep)}
.episode-list{display:grid;gap:0;min-height:250px}
.episode-row{display:grid;grid-template-columns:70px minmax(0,1fr) auto;align-items:center;gap:19px;padding:21px 0;border-bottom:1px solid var(--stroke)}
.episode-row:last-child{border-bottom:0}
.episode-row-art{width:70px;aspect-ratio:1;border-radius:16px;background:radial-gradient(circle at 35% 25%,#284d39,#0d1711 70%);display:grid;place-items:center;color:var(--jade-bright);font:italic 36px var(--serif);overflow:hidden;border:1px solid var(--ext-border)}
.episode-row-art img{width:100%;height:100%;object-fit:cover}
.episode-row-meta{color:var(--jade-text);letter-spacing:.1em;text-transform:uppercase;font-size:9px;font-weight:800}
.episode-row h3{font:400 23px/1.2 var(--serif);letter-spacing:-.025em;margin:6px 0 7px;overflow-wrap:anywhere}
.episode-row p{font-size:11px;color:var(--muted);line-height:1.55;margin:0;max-width:570px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.episode-row-actions{display:flex;gap:8px;align-items:center}
.round-control{border:1px solid var(--stroke-strong);border-radius:50%;width:41px;height:41px;display:grid;place-items:center;background:var(--surface-2);color:var(--white);font-size:18px}
.round-control:hover{border-color:var(--jade);color:var(--jade-text)}
.round-control.primary-play{background:var(--jade-bright);color:#062115;border-color:var(--jade-bright)}
.round-control svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8}
.round-control.primary-play svg{fill:currentColor;stroke:none}
.round-control.is-favorite{color:var(--jade-text);border-color:var(--jade-text)}
.episode-empty{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-height:250px;padding:20px 0}
.episode-empty-icon{font:italic 42px var(--serif);color:var(--jade-text);opacity:.8}
.episode-empty h3{font:400 29px var(--serif);letter-spacing:-.025em;margin:14px 0 8px}
.episode-empty p{max-width:440px;color:var(--muted);font-size:12px;line-height:1.7}
.podcast-aside{padding:30px;display:flex;flex-direction:column;align-items:flex-start}
.podcast-artwork{width:100%;aspect-ratio:1.85;border-radius:18px;border:1px solid var(--ext-border);margin:20px 0 25px;overflow:hidden;background:radial-gradient(circle at 55% 55%,#24503b,#101913 66%);display:grid;place-items:center;color:var(--jade-bright);font:italic 80px var(--serif)}
.podcast-artwork img{width:100%;height:100%;object-fit:contain}
.podcast-aside h3{font:400 32px var(--serif);letter-spacing:-.04em;margin:11px 0 9px}
.podcast-aside>p{color:var(--muted);font-size:11px;line-height:1.85}
.distribution-rule{width:100%;margin:14px 0 19px;border-top:1px solid var(--stroke)}
.rss-cta{width:100%;display:flex;align-items:center;gap:10px;padding:14px;margin:15px 0 5px;border:1px solid var(--ext-border);border-radius:14px;background:var(--ext-panel2);font-size:12px;font-weight:800;color:var(--jade-text)}
.rss-cta span:last-child{margin-left:auto}
.rss-cta.disabled{opacity:.60;cursor:default}
.rss-cta:not(.disabled):hover{border-color:var(--jade-text)}
.podcast-aside .rss-hint{font-size:10px;margin:5px 0 17px}
.platform-names{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.platform-names span{font-size:9px;font-weight:800;border:1px solid var(--stroke);border-radius:10px;padding:7px 9px;color:var(--muted)}
.podcast-aside .platform-note{font-size:9px;margin:13px 0 0;line-height:1.6}
.track-progress{display:flex;align-items:center;gap:12px;padding-top:17px;color:var(--muted);font-size:10px}
.track-progress[hidden]{display:none}
.track-progress input{flex:1;min-width:30px;accent-color:var(--jade-bright);cursor:pointer}
:root[data-theme=light] .episode-row-art{background:radial-gradient(circle at 25% 20%,#246946,#0a2013 74%)}
:root[data-theme=light] .podcast-artwork{background:radial-gradient(circle at 55% 45%,#3e8e62,#122a1c 74%)}
@media(max-width:1240px){.podcast-layout{grid-template-columns:minmax(0,1.2fr) minmax(275px,.8fr)}.identity-button{padding:9px}.episode-panel,.podcast-aside{padding:24px}}
@media(max-width:980px){.identity-button{font-size:9px}.podcast-layout{grid-template-columns:1fr}.podcast-aside{max-width:none}.podcast-artwork{max-height:240px}.podcast-aside h3{margin-top:10px}}
@media(max-width:550px){.identity-button{padding:8px;font-size:9px;max-width:80px}.episode-panel,.podcast-aside{padding:20px;border-radius:23px}.episode-toolbar{align-items:stretch;gap:10px;flex-direction:column}.episode-search-label input{width:100%}.episode-row{grid-template-columns:52px minmax(0,1fr);gap:11px;padding:16px 0}.episode-row-art{width:52px;border-radius:13px;font-size:27px}.episode-row h3{font-size:21px}.episode-row-actions{grid-column:2;justify-content:flex-start;margin-top:-3px}.round-control{width:36px;height:36px}.episode-row p{font-size:10px}.podcast-artwork{max-height:210px}.podcast-aside h3{font-size:30px}.mobile-nav a,.mobile-nav button{font-size:8px}.app-shell .header .state{display:none}}
@media(max-width:375px){.app-shell .header .brand-sub{display:none}.identity-button{max-width:72px}}

/* KES / Barra Madre · movimiento real de la búsqueda, sin duplicados */
:root{--kes-type-step:0px}
.kes-skip{position:fixed;z-index:300;top:-100px;left:16px;padding:10px 15px;background:var(--jade-bright);color:#061f14;border-radius:11px;font-size:12px;font-weight:800}
.kes-skip:focus{top:12px}
.kes-context-slot{display:flex;align-items:center;gap:8px;min-width:0;margin-left:auto}
.kes-context-slot:empty{display:none}
.kes-context-slot:not(:empty){max-width:240px}
.kes-context-slot #kesEpisodeSearch{width:100%}
.kes-context-slot .episode-search-label{display:block}
.kes-context-slot .episode-search-label input{width:100%;max-width:240px;background:var(--surface-2)}
:root[data-kes-state=adapted] .header .top-nav{display:none}
#podcastDescription,.episode-row p,.hero-description,.story p{font-size:calc(11px + var(--kes-type-step))}
.hero-description{font-size:calc(13px + var(--kes-type-step))}
.episode-empty p{font-size:calc(12px + var(--kes-type-step))}
/* Dock KES de cinco plazas; mantiene la geometría de la maqueta original */
.mobile-nav.kes-mobile-dock .kes-hub-center{display:flex;flex-direction:column;gap:2px;align-items:center;justify-content:center;color:var(--jade-text)}
.mobile-nav.kes-mobile-dock .kes-hub-center>span{width:34px;height:34px;border-radius:12px;background:var(--jade-bright);color:#062115;display:grid;place-items:center;font:italic 24px var(--serif)}
.mobile-nav.kes-mobile-dock .kes-hub-center>small{font-size:7px;letter-spacing:.08em}
.mobile-nav.kes-mobile-dock [data-kes-more][aria-expanded=true]{color:var(--jade-bright);background:var(--ext-panel2)}
.kes-sheet{position:fixed;inset:0;z-index:110;display:flex;justify-content:center;align-items:flex-end}
.kes-sheet[hidden]{display:none!important}
.kes-sheet-backdrop{position:absolute;inset:0;border:0;background:rgba(0,0,0,.69)}
.kes-sheet-panel{position:relative;z-index:1;width:min(480px,calc(100% - 16px));max-height:min(83dvh,730px);overflow:auto;
 border:1px solid var(--ext-border);border-radius:25px 25px 18px 18px;padding:22px;
 background:var(--surface);color:var(--white);box-shadow:0 20px 80px rgba(0,0,0,.4)}
.kes-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.kes-sheet-head small{font-size:9px;letter-spacing:.16em;color:var(--jade-text);font-weight:800}
.kes-sheet-head h2{font:400 25px var(--serif);margin:8px 0 0}
.kes-sheet-close{border:1px solid var(--stroke-strong);background:var(--surface-2);color:var(--white);height:38px;width:38px;border-radius:13px}
.kes-sheet-links{display:grid;gap:7px}
.kes-sheet-links>a,.kes-sheet-links>button{border:1px solid var(--stroke);border-radius:14px;background:var(--surface-2);color:var(--white);padding:12px 14px;
 min-height:50px;text-align:left;display:flex;align-items:center;gap:12px;font-size:12px;font-weight:750}
.kes-sheet-links>a>span,.kes-sheet-links>button>span{color:var(--jade-text);font-size:19px;min-width:22px;text-align:center}
.kes-sheet-links>a>b,.kes-sheet-links>button>b{margin-left:auto;color:var(--jade-text)}
.kes-sheet-links :is(a,button):hover{border-color:var(--jade-deep)}
.kes-pref{margin-top:18px;border-top:1px solid var(--stroke);display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:15px}
.kes-pref strong,.kes-pref small{display:block}.kes-pref strong{font-size:12px}.kes-pref small{font-size:10px;color:var(--muted);margin-top:4px}
.kes-pref-actions{display:flex;align-items:center;gap:7px}.kes-pref-actions button,.kes-pref-actions output{font-weight:800;border-radius:10px;min-width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--stroke-strong);background:var(--surface-2);color:var(--white);font-size:12px}
.kes-pref-actions output{border:0;background:transparent;min-width:22px;color:var(--jade-text)}
.kes-sheet-foot{font-size:10px;line-height:1.6;color:var(--muted);margin:16px 0 0}
@media(min-width:901px){.kes-sheet-panel{margin-bottom:24px}}
@media(max-width:1200px){.kes-context-slot:not(:empty){max-width:190px}}
@media(max-width:900px){.kes-context-slot:not(:empty){margin-left:auto;max-width:180px}}
@media(max-width:550px){:root[data-kes-state=adapted] .header .brand-sub{display:none}.kes-context-slot:not(:empty){max-width:36vw}.kes-context-slot .episode-search-label input{padding:0 8px;min-height:38px;font-size:10px}.kes-sheet-panel{padding:18px}}
@media(max-width:550px){:root[data-kes-state=adapted] .header .brand>div:last-child,:root[data-kes-state=adapted] .header .identity-button{display:none}:root[data-kes-state=adapted] .kes-context-slot:not(:empty){max-width:52vw}}


/* KRN Radio: adaptación funcional de la maqueta visual. */
.brand>span:last-child{display:flex;flex-direction:column}
.rail-icon{font-size:23px;line-height:1}
.dock-icon{font-size:22px;line-height:1}
.theme-switch-icon{font:24px/1 Georgia,serif}
.state.connected .state-dot{background:var(--jade-bright);box-shadow:0 0 0 4px rgba(79,255,154,.14),0 0 18px rgba(79,255,154,.62)}
.state.connected #signalLabel{color:var(--jade-text)}
.hero-quote{margin-bottom:0}
.record-orbit strong{font-size:19px}
.app-shell .hero{min-height:555px}
.equalizer{gap:3px}
.equalizer span{flex:1 0 2px;max-width:4px;height:var(--height,40%);animation-delay:var(--delay,0s)}
.player.playing .equalizer{opacity:1}
.player.playing .equalizer span{animation:equalize .76s ease-in-out infinite alternate}
.control-play .pause-icon{display:none}
.player.playing .control-play .pause-icon{display:block}
.player.playing .control-play .play-icon{display:none}
#retryButton[hidden],#liveButton[hidden],#podcastEmpty[hidden]{display:none!important}
.round-control{flex:none}
.volume output{font-size:10px;min-width:28px;text-align:right}
.volume input{background:linear-gradient(to right,var(--jade-bright) var(--volume-fill,80%),var(--slider-remainder,#3c4440) var(--volume-fill,80%))}
.studio-options{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px 14px;margin-top:10px}
.studio-options>label{font-size:11px;font-weight:800;color:var(--soft)}
.studio-options select{border:1px solid var(--stroke-strong);border-radius:12px;background:var(--surface-2);color:var(--white);padding:9px 28px 9px 11px;font-size:11px}
.source-info{grid-column:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.source-info span{font-size:11px;font-weight:800;color:var(--soft)}
.source-info small{font-size:10px;color:var(--muted);overflow-wrap:anywhere}
.studio-options .inline-link{grid-column:2;grid-row:2;background:transparent;border-top:0;border-left:0;border-right:0;cursor:pointer;white-space:nowrap;padding:0 0 5px}
.player>#liveButton{background:transparent;border-top:0;border-left:0;border-right:0;margin-top:14px;cursor:pointer}
.episode-panel{display:flex;flex-direction:column}
.episode-empty{flex:1}
.podcast-item{display:block;width:100%;padding:18px 0;border:0;border-bottom:1px solid var(--stroke);background:transparent;color:var(--white);text-align:left;cursor:pointer}
.podcast-item:last-child{border-bottom:0}
.podcast-item:hover h3,.podcast-item.active h3{color:var(--jade-text)}
.podcast-item-top{display:flex;justify-content:space-between;gap:12px;color:var(--jade-text);font-size:9px;font-weight:800;letter-spacing:.11em}
.podcast-item h3{font:400 23px var(--serif);margin:9px 0 5px}
.podcast-item p{font-size:11px;line-height:1.55;color:var(--muted);margin:0}
.podcast-aside .rss-hint{margin:12px 0 0}
#settingsDialog{border:1px solid var(--stroke-strong);border-radius:24px;width:min(520px,calc(100vw - 24px));max-width:100%;padding:0;background:var(--surface);color:var(--white);box-shadow:0 25px 90px rgba(0,0,0,.65)}
#settingsDialog::backdrop{background:rgba(0,0,0,.78);backdrop-filter:blur(10px)}
#settingsForm{padding:28px;display:flex;flex-direction:column;gap:12px}
.dialog-header{display:flex;align-items:flex-start;justify-content:space-between;gap:15px}
.dialog-header h2{font:400 34px var(--serif);margin:6px 0 0}
.dialog-close{width:36px;height:36px;display:grid;place-items:center;border-radius:12px;border:1px solid var(--stroke-strong);background:var(--surface-2);color:var(--white);font-size:25px}
.dialog-intro{color:var(--muted);font-size:12px;line-height:1.7;margin:5px 0 10px}
#settingsForm>label{font-size:11px;font-weight:800;color:var(--soft)}
#streamUrl{width:100%;border:1px solid var(--stroke-strong);border-radius:12px;background:var(--surface-2);color:var(--white);padding:13px;font-size:12px;outline:0}
#streamUrl:focus{border-color:var(--jade-deep)}
.form-hint,.form-error{font-size:10px;line-height:1.5;margin:0;color:var(--muted)}
.form-error{color:#ff9a9a}
.form-error[hidden]{display:none}
.dialog-actions{display:flex;justify-content:space-between;gap:10px;margin-top:12px}
.dialog-actions button{min-height:43px;border-radius:999px;padding:0 17px;font-size:11px;font-weight:800}
.ghost-button{background:var(--surface-2);border:1px solid var(--stroke-strong);color:var(--white)}
.save-button{background:var(--jade-bright);border:1px solid var(--jade-bright);color:var(--button-ink)}
@media(max-width:900px){.app-shell .hero{min-height:unset}.rail-icon{font-size:20px}}
@media(max-width:550px){.studio-options{grid-template-columns:1fr auto}.studio-options .inline-link{grid-column:2}.volume input{width:50px}.volume output{display:none}.header-end .identity-button{max-width:78px}.header .state{display:none}.hero h1{font-size:clamp(45px,11.3vw,64px)}}
@media(max-width:365px){.brand-sub{display:none}.header-end .identity-button{max-width:69px;padding:7px}}
#krnIdLogout[hidden]{display:none!important}