/* Hallmark · room-led concepts: Green Table / Kitchen Radio / Red Room / Blue Hour.
 * Illustrated sets + krche sprite player and podcast host adaptations. */
body{
 --color-paper:oklch(15% .012 155);--color-surface:oklch(19% .015 155);--color-ink:oklch(95% .012 95);--color-muted:oklch(69% .018 155);--color-line:oklch(29% .018 155);--color-accent:oklch(82% .15 145);--color-accent-ink:oklch(18% .02 155);--color-selected:oklch(25% .025 155);--color-focus:oklch(85% .14 145);--color-blue:var(--color-accent);--color-player:oklch(13% .01 155);--color-player-ink:oklch(95% .012 95);--color-player-muted:oklch(67% .018 155);--color-bubble:oklch(95% .015 95);--color-bubble-ink:oklch(23% .015 155);--color-stage-ink:oklch(96% .008 95);--color-overlay:oklch(10% .01 150 / .72);--color-photo-text:oklch(96% .01 95);--color-eva:oklch(79% .08 145);--color-boris:oklch(79% .08 65);--color-rule:var(--color-line);--rule:1px solid var(--color-line);
}
.design-bar{padding:12px 32px;min-height:62px;justify-content:space-between;background:var(--color-paper);gap:24px}.design-label{font-size:12px}.design-options{gap:8px}.design-options button{padding:10px 16px;border-radius:var(--radius-pill);font-size:12px;border:1px solid transparent}.design-options button[aria-pressed="true"]{background:var(--color-selected);color:var(--color-ink);border-color:var(--color-line)}.prototype-label{font-size:9px;letter-spacing:1.2px}.green-swatch{background:oklch(57% .1 155)}.kitchen-swatch{background:oklch(75% .1 65)}.red-swatch{background:oklch(62% .2 25)}.blue-swatch{background:oklch(61% .16 260)}
.app-shell{max-width:1720px;padding:0 40px;grid-template-columns:minmax(0,1fr) 310px;grid-template-areas:"header header" "rail rail" "main chat";gap:0 32px}.app-header{min-height:94px;border-bottom:var(--rule)}.brand{font-size:34px;letter-spacing:-1.8px}.brand-radio{font-size:16px;letter-spacing:0}.brand-dot{background:var(--color-accent)}.header-caption{font-size:11px}.header-actions{gap:20px}.share-button{font-size:12px}.channel-rail{padding:14px 0;display:flex;flex-direction:row;align-items:center;gap:20px;border:0;border-bottom:var(--rule)}.rail-heading,.channel-search,.rail-note,.how-button{display:none}#channels{display:flex;flex-direction:row;flex-wrap:wrap;gap:5px;flex:1}.channel-button{padding:8px 11px;min-height:36px;font-size:11px;gap:7px;border-radius:var(--radius-pill)}.channel-button .icon{width:15px;height:15px}.channel-button[aria-current="true"]::after{display:none}.channel-button[aria-current="true"]{background:var(--color-ink);color:var(--color-paper)}.all-channels{margin:0;padding:8px 0;font-size:11px;min-height:36px;flex-shrink:0}.all-channels .icon{width:15px}
.main-content{padding-top:30px;min-width:0}.intro{margin-bottom:24px;position:relative}.intro-top{margin-bottom:13px}.eyebrow{font-size:9px;letter-spacing:1.6px}.intro-frequency{font-size:9px;letter-spacing:1px}h1{font-size:clamp(28px,2.7vw,43px);line-height:1.12;letter-spacing:-1.4px}.intro-copy{font-size:12px;margin-top:12px}.broadcast{position:relative;border-radius:12px;overflow:hidden;background:var(--color-player);color:var(--color-photo-text)}.broadcast-top{position:absolute;inset:0 0 auto;z-index:4;padding:22px 24px;pointer-events:none}.station-label{font-size:11px;padding:8px 12px;border-radius:var(--radius-pill);background:var(--color-overlay);color:var(--color-photo-text)}.station-label .icon{width:15px}.demo-badge{background:var(--color-overlay);color:var(--color-photo-text);border:0;padding:8px 11px;font-size:9px;letter-spacing:1px}.stage{height:auto;aspect-ratio:16/9;display:block;overflow:hidden;isolation:isolate}.room-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}.stage-orbits,.stage-star,.speech-bubble{display:none}.host{position:absolute;width:25%;max-width:310px;margin:0;text-align:center;transform:none;bottom:27%;z-index:2}.host-eva{left:17.5%}.host-boris{right:17.5%}.mascot-button{width:100%;padding:0;outline-offset:0}.mascot-art{display:block;width:100%}.host-name,.host-boris .host-name{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:8px;border:0;background:var(--color-overlay);color:var(--color-photo-text);font-size:10px;padding:7px 11px}.host-role{font-size:9px;color:var(--color-photo-text);opacity:.7}.host-name .icon{display:none}.host-color{width:4px;height:4px}.room-caption{position:absolute;bottom:6%;left:28px;right:28px;color:var(--color-photo-text);z-index:3;display:flex;justify-content:space-between;align-items:end;gap:20px;text-shadow:0 2px 12px var(--color-overlay)}.room-caption>span{font-size:9px;letter-spacing:2px}.room-caption strong{font-size:clamp(15px,1.5vw,24px);font-weight:400;font-family:var(--font-editorial)}.on-air-marker{bottom:auto;top:18%;left:50%;transform:translateX(-50%);color:var(--color-photo-text);font-size:9px;letter-spacing:.3px}.player{margin:0;padding:20px 24px;border-radius:0;min-height:88px;gap:18px}.play-button{width:46px;height:46px}.player-copy strong{font-size:12px}.player-copy>span{font-size:10px}.waveform{max-width:140px}.player-time{font-size:11px}.below-player{margin-top:16px;font-size:10px}.below-player button{font-size:10px}.on-topic{margin-top:28px}.section-heading h2{font-size:16px}.topic-stories{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.story-button{padding:16px 0}.story-text strong{font-size:12px}.story-index{font-size:10px}.main-footer{padding:24px 0;font-size:10px}.main-footer span:first-child{font-size:13px}
.chat-panel{padding:31px 0 24px 26px;min-height:0;max-height:850px;border-left:var(--rule)}.chat-heading{margin-bottom:25px}.chat-heading h2{font-size:17px}.chat-heading>div>span{font-size:10px}.chat-symbol{background:var(--color-selected)}.chat-messages{min-height:230px;max-height:380px}.chat-message{font-size:12px;margin-bottom:24px}.chat-message strong{font-size:11px}.chat-message strong span{font-size:9px}.chat-avatar{background:var(--color-selected);color:var(--color-ink);border-radius:50%;transform:none!important;font-size:14px;width:27px;height:27px;border:var(--rule)}.chat-date{font-size:8px;letter-spacing:1px}.chat-bottom{padding-top:24px}.quick-prompts{gap:8px}.quick-prompts button{font-size:10px;border-color:var(--color-line)}#chat-form{background:var(--color-surface);border-radius:12px}.call-button{border-radius:var(--radius-pill);font-size:12px;padding:15px 16px}.call-caption{font-size:10px}.call-separator span{background:var(--color-paper)}.call-separator{font-size:9px}.composer-bottom>span{font-size:9px}.modal-copy{color:var(--color-muted)}
/* The actual krche sheet is cropped exactly like MascotAvatarSequence. */
.krche-mascot{display:block;position:relative;overflow:hidden;width:100%;aspect-ratio:1/1;isolation:isolate}.krche-mascot img{display:block;position:absolute;top:0;left:0;max-width:none;pointer-events:none}.krche-poster{width:100%;height:100%}.krche-sequence{visibility:hidden;transform-origin:top left}.krche-mascot[data-ready="true"] .krche-sequence{visibility:visible}.krche-mascot[data-ready="true"] .krche-poster{visibility:hidden}#modal-host-preview{position:relative;inset:auto;width:150px;max-width:150px;margin:0 auto 16px}#modal-host-preview .krche-mascot{border-radius:16px;background:var(--color-player)}
/* Kitchen: intimate editorial page, warm paper with a generous photographic room. */
[data-design="kitchen"]{--color-paper:oklch(95% .025 75);--color-surface:oklch(98% .015 75);--color-ink:oklch(30% .035 50);--color-muted:oklch(49% .03 55);--color-line:oklch(82% .03 75);--color-accent:oklch(51% .09 55);--color-accent-ink:oklch(98% .01 80);--color-selected:oklch(89% .04 75);--color-focus:oklch(48% .15 50);--color-player:oklch(27% .03 50);--color-player-muted:oklch(76% .025 75)}
[data-design="kitchen"] .app-shell{grid-template-columns:minmax(0,1fr) 305px;grid-template-areas:"header header" "main chat" "rail rail";max-width:1470px;gap:0 40px}
[data-design="kitchen"] .app-header{min-height:110px}[data-design="kitchen"] .brand{font-family:var(--font-editorial);font-weight:bold;font-size:40px;letter-spacing:-2px}[data-design="kitchen"] .main-content{padding-top:36px}[data-design="kitchen"] h1{font-family:var(--font-editorial);font-weight:400;font-size:clamp(32px,3.7vw,52px);letter-spacing:-1.8px;max-width:17ch}[data-design="kitchen"] .intro-frequency{display:none}[data-design="kitchen"] .broadcast{border-radius:2px}[data-design="kitchen"] .intro-copy{margin-top:15px}[data-design="kitchen"] .room-caption strong{font-size:21px}[data-design="kitchen"] .channel-rail{border-top:var(--rule);border-bottom:0;padding:22px 0;margin-top:4px}[data-design="kitchen"] .rail-heading{display:block;margin:0 12px 0 0}[data-design="kitchen"] .rail-heading h2{font-family:var(--font-editorial);font-size:20px;font-weight:400}[data-design="kitchen"] .rail-heading>.icon{display:none}[data-design="kitchen"] .chat-panel{padding-top:38px;max-height:900px}[data-design="kitchen"] .chat-heading h2{font-family:var(--font-editorial);font-size:26px;font-weight:400}[data-design="kitchen"] .topic-stories{gap:30px}[data-design="kitchen"] .story-text strong{font-family:var(--font-editorial);font-size:17px}[data-design="kitchen"] .call-button{border-radius:4px}
/* Red: a loud broadcast desk, conversation left, room right. */
[data-design="red"]{--color-paper:oklch(17% .02 25);--color-surface:oklch(21% .024 25);--color-ink:oklch(95% .02 70);--color-muted:oklch(72% .025 30);--color-line:oklch(33% .035 25);--color-accent:oklch(68% .21 28);--color-accent-ink:oklch(17% .02 25);--color-selected:oklch(30% .04 25);--color-focus:oklch(80% .13 65);--color-player:oklch(13% .01 25)}
[data-design="red"] .app-shell{grid-template-columns:300px minmax(0,1fr);grid-template-areas:"header header" "rail rail" "chat main";gap:0 40px}[data-design="red"] .app-header{border-bottom:2px solid var(--color-accent)}[data-design="red"] .brand{font-size:39px}[data-design="red"] h1{font-size:clamp(36px,4.8vw,68px);font-weight:700;line-height:1;letter-spacing:-2.4px;color:var(--color-accent)}[data-design="red"] .intro{margin-bottom:26px}[data-design="red"] .intro-frequency{display:none}[data-design="red"] .broadcast{border-radius:0;display:flex;flex-direction:column}[data-design="red"] .stage{order:2}[data-design="red"] .player{order:1;padding:17px 22px;border-bottom:1px solid var(--color-line)}[data-design="red"] .broadcast-top{top:88px}[data-design="red"] .room-caption strong{font-family:var(--font-display);font-size:20px;font-weight:600}[data-design="red"] .chat-panel{border-left:0;border-right:var(--rule);padding-left:0;padding-right:26px}[data-design="red"] .chat-heading h2{font-size:24px}[data-design="red"] .channel-button{border-radius:2px}[data-design="red"] .call-button{border-radius:2px}[data-design="red"] .on-topic{margin-top:26px}[data-design="red"] .main-footer{border-top:var(--rule);margin-top:16px}
/* Blue: a panoramic listening room, sidebar chat as a quiet inset. */
[data-design="blue"]{--color-paper:oklch(17% .035 265);--color-surface:oklch(22% .04 265);--color-ink:oklch(94% .015 250);--color-muted:oklch(70% .035 255);--color-line:oklch(32% .04 260);--color-accent:oklch(81% .08 245);--color-accent-ink:oklch(19% .04 265);--color-selected:oklch(28% .045 265);--color-focus:oklch(83% .1 245);--color-player:oklch(16% .03 265)}
[data-design="blue"] .app-shell{grid-template-columns:minmax(0,1fr) 320px;grid-template-areas:"header header" "main chat" "rail rail";gap:0 28px;padding:0 32px}[data-design="blue"] .app-header{border-bottom:0}[data-design="blue"] .main-content{padding-top:23px}[data-design="blue"] h1{font-weight:600;font-size:clamp(27px,3vw,46px);letter-spacing:-1.6px}[data-design="blue"] .intro-copy{max-width:44ch}[data-design="blue"] .intro-frequency{display:none}[data-design="blue"] .broadcast{border-radius:20px}[data-design="blue"] .stage{aspect-ratio:16/10}[data-design="blue"] .player{margin:0 18px 18px;border-radius:var(--radius-pill);padding:14px 18px;background:var(--color-surface)}[data-design="blue"] .chat-panel{margin-top:24px;padding:24px;border:var(--rule);border-radius:20px;background:var(--color-surface);max-height:780px;margin-bottom:24px}[data-design="blue"] .call-separator span{background:var(--color-surface)}[data-design="blue"] .channel-rail{padding:14px 0 28px;border:0;justify-content:center}[data-design="blue"] #channels{justify-content:center;flex:0 1 auto}[data-design="blue"] .all-channels{margin-left:12px}[data-design="blue"] .topic-stories{grid-template-columns:minmax(0,1fr)}[data-design="blue"] .topic-stories .story-button:nth-child(2){display:none}[data-design="blue"] .main-footer{display:none}[data-design="blue"] .room-caption strong{font-family:var(--font-body);font-size:16px}[data-design="blue"] .room-caption{bottom:8%}
@media(min-width:1600px){.app-shell{grid-template-columns:minmax(0,1fr) 340px;padding:0 56px;gap:0 40px}.chat-panel{max-height:940px}.stage{aspect-ratio:16/8.6}.host{max-width:340px}}
@media(max-width:1190px){.app-shell,[data-design="kitchen"] .app-shell,[data-design="blue"] .app-shell{grid-template-columns:minmax(0,1fr) 275px;padding:0 24px;gap:0 24px}[data-design="red"] .app-shell{grid-template-columns:260px minmax(0,1fr);gap:0 24px}.chat-panel{padding-left:20px}.design-bar{gap:12px;padding:10px 24px}.design-options button{padding:9px 12px;font-size:11px}.design-label{display:none}.player{padding:16px}.waveform{display:none}.player-copy{flex:1}.host-role{display:none}.room-caption{left:20px;right:20px}.room-caption strong{font-size:17px}[data-design="kitchen"] h1{font-size:40px}[data-design="red"] h1{font-size:46px}[data-design="blue"] .player{padding:12px;margin:0 12px 12px}[data-design="blue"] .chat-panel{padding:20px}.intro-frequency{display:none}.channel-rail{gap:12px}.channel-button{padding:8px;font-size:10px}.channel-button .icon{width:13px;height:13px}.stage{aspect-ratio:16/10}.host{bottom:29%;width:28%}.host-eva{left:15%}.host-boris{right:15%}}
@media(max-width:880px){.design-options button{font-size:10px}.design-options{gap:4px}.app-shell,[data-design="kitchen"] .app-shell,[data-design="red"] .app-shell,[data-design="blue"] .app-shell{grid-template-columns:minmax(0,1fr);grid-template-areas:"header" "rail" "main" "chat";padding:0 24px;gap:0}.app-header,[data-design="kitchen"] .app-header{min-height:85px}.header-caption{display:none}.main-content,[data-design="kitchen"] .main-content,[data-design="blue"] .main-content{padding-top:28px}.stage,[data-design="blue"] .stage{aspect-ratio:16/9}.host{width:25%;bottom:27%}.host-eva{left:17.5%}.host-boris{right:17.5%}.chat-panel,[data-design="kitchen"] .chat-panel,[data-design="red"] .chat-panel,[data-design="blue"] .chat-panel{border:0;border-top:var(--rule);padding:25px 0;max-height:none;margin:16px 0 0;border-radius:0;background:none;min-height:550px}.chat-messages{min-height:190px;max-height:350px}.chat-bottom{padding-top:16px}.quick-prompts{flex-direction:row;flex-wrap:wrap}.call-button{max-width:350px;margin:auto}.chat-heading h2{font-size:21px}.channel-rail,[data-design="kitchen"] .channel-rail,[data-design="blue"] .channel-rail{margin:0;padding:12px 0;border-top:0;border-bottom:var(--rule);gap:12px;justify-content:flex-start}[data-design="kitchen"] .rail-heading{display:none}[data-design="blue"] #channels{justify-content:flex-start;flex:1}.channel-button{font-size:11px;padding:8px 10px}.all-channels,[data-design="blue"] .all-channels{margin:0;font-size:10px}.intro-copy{font-size:12px}.room-caption strong{font-size:20px}.below-player{flex-direction:row;align-items:center}.below-player>span{max-width:none}.section-heading{display:flex!important}.topic-stories,[data-design="blue"] .topic-stories{grid-template-columns:repeat(2,minmax(0,1fr))}[data-design="blue"] .topic-stories .story-button:nth-child(2){display:flex}[data-design="blue"] .main-footer{display:flex}[data-design="blue"] .call-separator span{background:var(--color-paper)}[data-design="red"] .broadcast-top{top:88px}}
@media(max-width:560px){.design-bar{padding:10px 12px;display:block}.design-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.design-options button{justify-content:flex-start;font-size:11px;padding:10px 12px;min-height:38px}.swatch{width:8px;height:8px;display:block!important}.prototype-label{display:block;text-align:center;margin-top:10px;font-size:8px}.app-shell,[data-design="kitchen"] .app-shell,[data-design="red"] .app-shell,[data-design="blue"] .app-shell{padding:0 16px}.app-header,[data-design="kitchen"] .app-header{min-height:78px}.brand,[data-design="kitchen"] .brand,[data-design="red"] .brand{font-size:31px}.brand-radio{font-size:14px}.header-actions{gap:5px}.profile-button{width:30px;height:30px}.channel-rail,[data-design="kitchen"] .channel-rail,[data-design="blue"] .channel-rail{display:block;padding:12px 0}#channels{gap:4px}.channel-button{font-size:10px;padding:7px 8px;min-height:36px}.channel-button .icon{width:13px;height:13px}.all-channels,[data-design="blue"] .all-channels{display:flex;margin-top:6px;padding:7px;min-height:32px}.main-content,[data-design="kitchen"] .main-content,[data-design="blue"] .main-content{padding-top:22px}.intro{margin-bottom:20px}.intro-top{margin-bottom:12px}.eyebrow{font-size:8px;letter-spacing:1px}h1,[data-design="kitchen"] h1,[data-design="blue"] h1{font-size:30px;line-height:1.12;letter-spacing:-1px;max-width:20ch}[data-design="kitchen"] h1{font-size:35px;max-width:15ch}[data-design="red"] h1{font-size:39px;line-height:1.03;letter-spacing:-1.3px}.intro-copy,[data-design="kitchen"] .intro-copy,[data-design="blue"] .intro-copy{font-size:11px;max-width:36ch;margin-top:12px}.broadcast{border-radius:8px}.broadcast-top{padding:14px}.station-label{padding:6px 8px;font-size:10px;gap:5px}.demo-badge{font-size:7px;letter-spacing:.7px;padding:7px}.station-label .icon{width:12px;height:12px}.stage,[data-design="blue"] .stage{height:auto;aspect-ratio:1.17}.room-image{object-fit:cover;object-position:center}.host{width:39%;bottom:30%;max-width:none}.host-eva{left:5%}.host-boris{right:5%}.host-name{font-size:9px;padding:6px 9px;margin-top:6px}.host-role{display:none}.on-air-marker{top:21%;font-size:8px;gap:5px;white-space:nowrap}.mini-wave{height:11px}.room-caption{left:15px;right:15px;bottom:7%;display:block}.room-caption>span{display:block;font-size:7px;letter-spacing:1.4px;margin-bottom:8px}.room-caption strong,[data-design="kitchen"] .room-caption strong,[data-design="red"] .room-caption strong,[data-design="blue"] .room-caption strong{font-size:17px}.player,[data-design="red"] .player{gap:10px;padding:14px;min-height:76px}.play-button{width:40px;height:40px}.player-copy strong{font-size:10px}.player-copy>span{font-size:8px}.player-time{font-size:9px;display:block}.player-icon .icon{width:14px;height:14px}.volume-button{display:none}.player-icon{padding:3px}[data-design="red"] .broadcast-top{top:76px}[data-design="blue"] .player{margin:0 10px 10px;padding:12px}.below-player{margin-top:13px;gap:10px;font-size:9px}.below-player>span{max-width:56%;line-height:1.6}.below-player button{font-size:9px;padding:2px}.on-topic{margin-top:25px}.section-heading h2{font-size:16px}.section-heading>span{font-size:9px}.topic-stories,[data-design="blue"] .topic-stories{display:flex;flex-direction:column;gap:0}.story-button{padding:14px 0}.story-text strong{font-size:12px}[data-design="kitchen"] .story-text strong{font-size:17px}.story-text small{font-size:9px}.main-footer{font-size:9px;padding:22px 0}.main-footer span:last-child{max-width:45%}.chat-panel,[data-design="kitchen"] .chat-panel,[data-design="red"] .chat-panel,[data-design="blue"] .chat-panel{margin-top:0;padding:25px 0 30px;min-height:570px}.chat-message{font-size:12px}.chat-messages{min-height:190px}.chat-date{font-size:8px}.chat-bottom{padding-top:10px}.call-button{max-width:none}#modal-host-preview{width:125px;max-width:125px}.modal-top{margin-bottom:16px}.modal-copy{font-size:13px}.mood-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.mood-option{padding:11px 3px;font-size:11px}.host-tabs button{font-size:12px;padding:8px 14px}.modal-label{margin-top:14px}}
@media(prefers-reduced-motion:reduce){.mascot-art{animation:none!important;transform:none!important}}
@media(max-width:560px){.room-caption>span{display:none}.room-caption strong,[data-design="kitchen"] .room-caption strong,[data-design="red"] .room-caption strong,[data-design="blue"] .room-caption strong{font-size:15px}}