@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700;800;900&family=Noto+Serif+JP:wght@500;600;700;900&display=swap');

:root {
  color-scheme: dark;
  --bg: #17191c;
  --panel: #202226;
  --line: #3a3e45;
  --muted: #a5acb6;
  --text: #f0f2f5;
  --mint: #bcf4d4;
  --anger: #bcf4d4;
  --cream: #f4f0e6;
  --amber: #b65c3d;
  --font: 'Noto Sans JP', 'Yu Gothic', sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px var(--font); -webkit-font-smoothing: antialiased; }
button, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .45; }
button:focus-visible, select:focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.app-header { height: 62px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.identity { display: flex; align-items: center; gap: 10px; }
.app-symbol { width: 32px; height: 32px; display: grid; place-items: center; color: var(--mint); border: 1px solid #56645b; border-radius: 9px; }
.app-symbol svg { fill: currentColor; stroke: none; }
h1 { margin: 0; font-size: 22px; font-weight: 700; }
h1 span { color: var(--mint); }
.prototype { color: #a3abb5; font: 10px Arial, sans-serif; border: 1px solid #444b54; border-radius: 4px; padding: 4px 6px; letter-spacing: .08em; }
.session-label { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; font-size: 13px; color: #bac2cc; }
.live-dot { display: inline-block; width: 6px; height: 6px; background: var(--mint); border-radius: 50%; flex-shrink: 0; }
.text-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 10px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #c1c7d0; font-size: 12px; white-space: nowrap; }
.text-button:hover { background: #30353b; color: white; }
.text-button svg { width: 16px; height: 16px; }
.help-button { border-color: #454b54; }
.app-layout { display: grid; grid-template-columns: 390px minmax(0, 1fr); grid-template-areas: 'chat work'; height: calc(100dvh - 102px); min-height: 660px; }
.workspace { grid-area: work; min-width: 0; min-height: 0; padding: 14px 20px 0; display: flex; flex-direction: column; }
.task-heading { height: 40px; margin-bottom: 5px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-shrink: 0; }
.task-heading > div { display: flex; align-items: center; gap: 14px; }
.eyebrow { font: 11px Arial, var(--font); color: var(--muted); letter-spacing: .09em; }
.task-heading .eyebrow { color: var(--mint); white-space: nowrap; }
.task-heading h2 { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: .02em; }
.task-type { font: 10px Arial, sans-serif; color: #a3acb8; white-space: nowrap; letter-spacing: .08em; }
.task-type span { margin-left: 6px; }
.workspace-toolbar { height: 39px; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.workspace-tab { display: flex; height: 39px; align-items: center; gap: 8px; padding: 0 13px; border: 1px solid #484e58; border-bottom: 0; border-radius: 8px 8px 0 0; background: #2b2e34; font-size: 12px; }
.workspace-tab svg { width: 15px; height: 15px; }
.tab-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--mint); margin-left: 10px; }
.edit-hint { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #a8b1bd; margin-left: auto; }
.edit-hint svg { width: 15px; height: 15px; }
.focus-toggle { color: var(--mint); border-color: #3e5148; }
.browser-window { flex: 1; min-height: 410px; overflow: hidden; border: 1px solid #4b525b; border-radius: 0 9px 9px 9px; display: flex; flex-direction: column; box-shadow: 0 8px 30px #0002; }
.browser-chrome { height: 38px; background: #2b2e34; display: flex; align-items: center; gap: 14px; padding: 0 14px; flex-shrink: 0; }
.traffic-lights { display: flex; gap: 6px; }
.traffic-lights i { width: 8px; height: 8px; border-radius: 50%; background: #fa8174; }
.traffic-lights i:nth-child(2) { background: #e9bd68; }
.traffic-lights i:nth-child(3) { background: #8fba97; }
.browser-address { display: flex; align-items: center; justify-content: center; gap: 8px; height: 25px; margin: auto; width: 58%; border-radius: 5px; background: #202329; color: #d1d6de; font-size: 11px; }
.browser-address svg { width: 12px; height: 12px; color: #9fa9b4; }
.address-path { color: #919ca9; }
.local-label { font: 10px Arial, sans-serif; letter-spacing: .08em; color: #a2acb8; }
.website { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: auto; position: relative; isolation: isolate; color: #343a32; background: var(--cream); scrollbar-width: thin; scrollbar-color: #c4bcac transparent; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.035' filter='url(%23n)'/%3E%3C/svg%3E"); }
.cafe-nav { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 23px 32px 16px; flex-shrink: 0; }
.cafe-brand { display: flex; align-items: center; gap: 10px; font: 22px 'Noto Serif JP', serif; white-space: nowrap; }
.brand-seal { display: grid; place-items: center; border: 1px solid var(--amber); color: var(--amber); border-radius: 50%; width: 39px; height: 44px; font-size: 27px; }
.cafe-brand small { display: block; margin-top: 5px; font: 8px Arial, sans-serif; letter-spacing: .14em; color: #6f6c5e; }
.cafe-links { display: flex; align-items: center; gap: 20px; font-size: 11px; color: #676756; white-space: nowrap; }
.nav-time { font: 9px Arial, sans-serif; border-left: 1px solid #d4cabb; padding-left: 16px; color: #827762; }
.cafe-hero { flex: 1 0 auto; display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 15px; min-height: 350px; padding: 20px 32px 28px 40px; }
.hero-copy { position: relative; z-index: 2; }
.hero-kicker { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #74664e; letter-spacing: .04em; margin: 0 0 22px; }
.hero-kicker > span { width: 22px; height: 1px; background: var(--amber); }
.editable { position: relative; border: 1px solid transparent; transition: background-color .15s, color .15s; }
.editable:after { content: ''; position: absolute; inset: -5px; border: 1px dashed transparent; border-radius: 3px; pointer-events: none; }
.editable:hover:after { border-color: var(--amber); }
.editable.selected:after { border-color: var(--amber); border-width: 2px; border-style: solid; }
.editable:disabled { opacity: 1; }
.edit-tag { display: none; position: absolute; left: -5px; top: -28px; background: var(--amber); border-radius: 4px 4px 0 0; color: white; padding: 4px 8px; font: 11px var(--font); white-space: nowrap; letter-spacing: 0; }
.editable.selected > .edit-tag { display: block; }
.heading-edit { display: inline-block; background: none; padding: 0; margin: 0; color: inherit; text-align: left; }
.cafe-title { display: block; font: 500 clamp(30px, 2.9vw, 46px)/1.6 'Noto Serif JP', 'Yu Mincho', serif; letter-spacing: .04em; white-space: nowrap; }
.heading-edit[data-size='small'] .cafe-title { font-size: clamp(25px, 2.4vw, 38px); }
.heading-edit[data-size='large'] .cafe-title { font-size: clamp(34px, 3.2vw, 52px); }
.cafe-description { font-size: 13px; line-height: 2; color: #756b58; margin: 20px 0 30px; }
.cafe-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; min-height: 52px; }
.cafe-button { display: flex; align-items: center; justify-content: center; gap: 20px; min-height: 44px; padding: 0 18px; font-size: 13px; font-weight: 500; letter-spacing: .02em; border-radius: 4px; white-space: nowrap; }
.cafe-button[data-size='small'] { min-height: 36px; padding: 0 13px; gap: 12px; font-size: 11px; }
.cafe-button[data-size='large'] { min-height: 54px; padding: 0 25px; gap: 24px; font-size: 15px; box-shadow: 0 4px 10px #3e271321; }
.cafe-button[data-color='cream'] { border-color: #c4baa5; }
.button-arrow { font: 17px Arial, sans-serif; }
.reservation-note { font-size: 11px; color: #85765f; margin: 13px 0 0; }
.coffee-scene { max-width: 370px; }
.scene-caption { font-size: 20px; }
.cafe-bottom { min-height: 48px; margin: 0 30px; border-top: 1px solid #d4cabb; display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 9px Arial, sans-serif; letter-spacing: .06em; color: #7b715e; flex-shrink: 0; }
.cafe-bottom-note { font: 10px var(--font); letter-spacing: 0; }
.bottom-star { display: inline-block; color: var(--amber); font-size: 24px; margin-left: 12px; vertical-align: middle; }
.inspector { display: grid; grid-template-columns: 165px minmax(0,1fr) 158px; gap: 22px; padding: 14px 18px; margin-top: 12px; border: 1px solid #454c56; border-radius: 9px; background: #24272d; flex-shrink: 0; min-height: 106px; }
.inspector-selection label, .inspector legend { display: block; font-size: 12px; font-weight: 500; color: #c8d0db; margin-bottom: 10px; padding: 0; }
.inspector-selection select { width: 100%; height: 39px; padding: 0 10px; border: 1px solid #606a76; border-radius: 5px; color: white; background: #343a43; font-size: 14px; }
.inspector fieldset { margin: 0; border: 0; padding: 0; min-width: 0; }
.color-options { display: flex; gap: 5px; }
.color-swatch { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 46px; min-height: 49px; padding: 4px 2px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #b7c1ce; }
.swatch-dot { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--swatch); box-shadow: 0 0 0 1px #767e87; color: white; }
.swatch-dot svg { width: 15px; height: 15px; stroke-width: 2.5; }
.color-swatch[data-color='cream'] svg { color: #343a32; }
.swatch-label { font-size: 10px; white-space: nowrap; }
.color-swatch.active { border-color: var(--mint); background: #35453e; color: white; }
.color-swatch:hover:not(:disabled) { background: #3b424b; }
.segmented { display: flex; gap: 3px; padding: 3px; border: 1px solid #5a626e; border-radius: 6px; }
.segmented button { flex: 1; border: 0; border-radius: 4px; height: 37px; background: transparent; color: #b7c1ce; font-size: 15px; }
.segmented button.active { background: var(--mint); color: #20382c; font-weight: 700; }
.workspace-footer { min-height: 29px; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #9aa5b3; font-size: 10px; flex-shrink: 0; }
.workspace-footer > span:first-child { display: flex; align-items: center; gap: 6px; color: #c1cbd7; }
.status-dot { width: 5px; height: 5px; border-radius: 50%; background: #8894a3; }
.status-dot.edited { background: var(--mint); }
.chat-panel { grid-area: chat; min-height: 0; min-width: 0; display: flex; flex-direction: column; background: var(--panel); border-right: 1px solid var(--line); }
.client-header { height: 69px; padding: 12px 14px 12px 9px; display: flex; align-items: center; gap: 9px; flex-shrink: 0; cursor: grab; touch-action: none; user-select: none; }
.client-header:active { cursor: grabbing; }
.chat-grip { display: grid; place-items: center; border: 0; background: transparent; color: #a8b4c4; padding: 4px 0; cursor: grab; }
.chat-grip svg { width: 17px; }
.client-avatar { width: 36px; height: 36px; border-radius: 50%; background: #ddc69f; color: #514532; font: 18px 'Noto Serif JP', serif; display: grid; place-items: center; flex-shrink: 0; position: relative; }
.client-avatar > span { position: absolute; bottom: -1px; right: -1px; width: 9px; height: 9px; border: 2px solid var(--panel); border-radius: 50%; background: #b6d7ad; }
.client-name { min-width: 0; }
.client-name strong { display: block; font-size: 15px; font-weight: 600; }
.client-name > span { display: block; margin-top: 3px; color: #adb8c7; font-size: 10px; white-space: nowrap; }
.chat-actions { display: flex; align-items: center; gap: 3px; margin-left: auto; }
.chat-action { display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-width: 30px; height: 32px; border: 1px solid #4a535f; border-radius: 5px; background: #2d333b; color: #c5d0de; font-size: 10px; padding: 4px 6px; }
.chat-action:hover { background: #424d59; color: white; }
.chat-action svg { width: 15px; height: 15px; }
.chat-move-hint { display: flex; align-items: center; justify-content: center; gap: 4px; margin: 0 14px 12px; color: #acb9c8; font-size: 10px; }
.chat-move-hint svg { width: 13px; height: 13px; }
.anger-box { margin: 0 17px; padding: 13px 14px 11px; border: 1px solid #47564c; border-radius: 8px; background: #252e28; flex-shrink: 0; }
.anger-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; color: #c5d4c9; }
.anger-heading > span:first-child { display: flex; align-items: center; gap: 7px; }
.anger-heading svg { width: 17px; height: 17px; color: var(--anger); }
.anger-heading strong { font: 23px Arial, sans-serif; color: var(--anger); }
.anger-max { font: 12px Arial, sans-serif; color: #afc1b2; }
.anger-track { height: 6px; border-radius: 4px; background: #455147; margin: 10px 0 8px; overflow: hidden; }
.anger-track > div { width: 0; height: 100%; background: var(--anger); border-radius: 4px; transition: width .4s; }
.anger-caption { display: flex; justify-content: space-between; gap: 8px; color: #b3c3b7; font-size: 10px; min-height: 16px; }
.anger-caption > span:last-child { color: var(--anger); }
.chat-scroll { flex: 1; min-height: 0; padding: 20px 20px 8px; overflow: auto; scrollbar-width: thin; scrollbar-color: #596574 transparent; }
.chat-date { display: flex; align-items: center; gap: 10px; margin: 0 0 19px; font-size: 11px; color: #a5afbd; }
.chat-date:before, .chat-date:after { content: ''; height: 1px; flex: 1; background: #424a55; }
.message { margin-bottom: 23px; animation: message-in .2s ease-out; }
.message-meta { display: flex; align-items: center; gap: 7px; color: #d2d9e3; font-size: 12px; margin-bottom: 9px; }
.message-meta time { font-size: 10px; color: #98a4b4; margin-left: auto; }
.mini-avatar { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #ddc69f; color: #514532; font-size: 12px; }
.message-body { margin-left: 31px; font-size: 15px; line-height: 1.85; color: #d6dce5; overflow-wrap: anywhere; }
.message-body strong { color: #fff; font-weight: 700; background: #38433b; box-decoration-break: clone; }
.player .message-meta svg { width: 22px; height: 22px; color: var(--mint); }
.player .message-meta > span { font: 9px Arial, sans-serif; border: 1px solid #667585; padding: 2px 5px; border-radius: 3px; color: #bac7d7; }
.player .message-body { padding: 10px 13px; border: 1px solid #4b5664; border-radius: 0 9px 9px; background: #303740; font-size: 14px; }
.system-message { display: flex; align-items: flex-start; justify-content: center; gap: 7px; padding: 8px 0; font-size: 11px; line-height: 1.8; color: #a7b5c6; }
.system-message svg { width: 15px; height: 15px; margin-top: 3px; }
.composer-area { padding: 12px 17px 14px; border-top: 1px solid #3a424d; background: var(--panel); flex-shrink: 0; }
.composer-label { display: flex; align-items: center; gap: 6px; color: #bbc6d4; font-size: 10px; margin-bottom: 9px; }
.composer-label > span:last-child { margin-left: auto; color: #a1aec0; }
.composer { padding: 13px; border: 1px solid #677487; border-radius: 9px; background: #2c333c; }
.composer p { font-size: 14px; line-height: 1.7; color: #dae2eb; margin: 0 0 12px; }
.composer button { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 44px; padding: 9px 15px; border: 0; border-radius: 6px; background: var(--mint); color: #203c2c; font-size: 14px; font-weight: 700; }
.composer button:hover:not(:disabled) { background: #deffeb; }
.composer button svg { width: 19px; height: 19px; }
.composer-note { display: flex; align-items: center; justify-content: center; gap: 5px; color: #a1afbf; margin: 8px 0 0; font-size: 10px; }
.composer-note svg { width: 11px; height: 11px; }
.app-footer { height: 40px; padding: 0 22px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.level-progress { display: flex; align-items: center; gap: 14px; font: 13px Arial, sans-serif; }
.muted { color: #9dabbc; }
.level-dots { display: flex; gap: 5px; }
.level-dots i { display: block; width: 16px; height: 4px; border-radius: 3px; background: #3e4753; }
.level-dots i.current { background: var(--mint); }
.progress-caption { font: 11px var(--font); }
.footer-tagline { font-size: 11px; color: #a3afbe; }
.app-footer .text-button { font-size: 11px; }
.app-layout.chat-floating { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'work'; }
.chat-floating .chat-panel { position: fixed; z-index: 30; width: 390px; height: min(680px, calc(100dvh - 100px)); min-width: 320px; min-height: 340px; max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); border: 1px solid #748394; border-radius: 12px; box-shadow: 0 18px 60px #0009; overflow: hidden; resize: both; }
.chat-floating .client-header { height: 65px; background: #2b323b; border-bottom: 1px solid #4b596b; }
.chat-floating .chat-move-hint { margin-top: 10px; }
.chat-floating .chat-panel.dragging { user-select: none; box-shadow: 0 22px 75px #000b; border-color: var(--mint); }
.chat-floating .chat-panel.collapsed { width: min(365px, calc(100vw - 16px)) !important; height: 65px !important; min-height: 65px; resize: none; }
.chat-panel.collapsed > :not(.client-header) { display: none; }
.chat-panel.collapsed .client-name > span { display: none; }
.chat-panel.collapsed .dock-toggle span { display: none; }
.collapsed-anger { margin-left: auto; color: var(--anger); font: 16px Arial, sans-serif; white-space: nowrap; }
.chat-panel.collapsed .chat-actions { margin-left: 5px; }
body.focus-mode .app-header, body.focus-mode .app-footer { display: none; }
body.focus-mode .app-layout { height: 100dvh; min-height: 660px; }
body.focus-mode .focus-toggle { background: #365346; color: white; }
.toast { position: fixed; left: 50%; bottom: 48px; transform: translate(-50%, 8px); max-width: calc(100vw - 32px); padding: 11px 18px; border: 1px solid #718f7d; border-radius: 8px; background: #283f32; color: #e3ffed; font-size: 13px; z-index: 60; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
.typing { display: flex; gap: 5px; padding: 10px 0 10px 31px; }
.typing i { width: 5px; height: 5px; border-radius: 50%; background: #c0ccda; animation: typing 1s ease infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }.typing i:nth-child(3) { animation-delay: .3s; }
.angry-message .message-body { color: #ffc1ca; }
.ended .editable { cursor: default; }.ended .editable:after { border-color: transparent; }.ended .edit-tag { display: none; }
.shake { animation: shake .35s; }
.show-result-button { display: block; width: calc(100% - 31px); margin: 15px 0 12px 31px; padding: 12px; border: 1px solid #718d7b; border-radius: 6px; background: #2f4739; color: #d4ffe5; font-size: 14px; }
.help-dialog, .result-dialog { max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); overflow: auto; margin: auto; padding: 32px; border: 1px solid #667588; border-radius: 13px; background: #222930; color: var(--text); box-shadow: 0 30px 100px #000b; }
.help-dialog { width: 510px; }
.help-dialog::backdrop, .result-dialog::backdrop { background: #080b10d9; backdrop-filter: blur(5px); }
.dialog-close { position: absolute; top: 9px; right: 14px; border: 0; background: none; color: #d3deec; font-size: 28px; }
.help-dialog h2 { font-size: 31px; line-height: 1.6; margin: 14px 0; }
.help-dialog p, .help-dialog li { font-size: 14px; line-height: 1.9; color: #d1dbe6; }
.help-dialog ol { padding-left: 22px; }
.help-dialog .help-small { font-size: 12px; color: #a9bacb; }
.primary-button, .secondary-button { padding: 12px 20px; min-height: 46px; border-radius: 7px; font-size: 14px; font-weight: 600; }
.primary-button { background: var(--mint); color: #20392c; border: 1px solid var(--mint); }
.secondary-button { background: transparent; color: #d4dfec; border: 1px solid #68798e; }
.help-dialog .primary-button { width: 100%; margin-top: 12px; }
.result-dialog { width: 500px; text-align: center; padding: 0; }
.result-details { padding: 28px; }
.result-mark { display: grid; place-items: center; width: 55px; height: 55px; border: 1px solid #7a9c86; border-radius: 50%; background: #344c3d; color: var(--mint); margin: 0 auto 18px; }
.result-mark svg { width: 28px; height: 28px; }
.result-dialog h2 { margin: 13px 0 10px; font-size: 28px; line-height: 1.5; }
.result-details > p { font-size: 14px; line-height: 1.8; color: #c5d2df; }
.result-stats { display: grid; grid-template-columns: 1fr 1fr; margin: 22px 0; padding: 16px 0; border-block: 1px solid #4b5d70; }
.result-stats > div:first-child { border-right: 1px solid #4b5d70; }
.result-stats span { display: block; font-size: 12px; color: #b4c5d7; margin-bottom: 7px; }
.result-stats strong { font: 24px Arial, var(--font); }
.result-dialog blockquote { margin: 0; font-size: 13px; line-height: 1.9; color: #d9e3ed; }
.result-details .result-footnote { font-size: 11px; color: #a1b3c8; }
.result-actions { display: flex; justify-content: center; gap: 10px; margin-top: 18px; }
.result-dialog.failure .result-mark { background: #4a2930; border-color: #bc727f; color: #ffa1b0; }
.result-dialog.failure .eyebrow { color: #ffa1b0; }
.result-dialog.success { width: 820px; border-color: #555; background: #050505; border-radius: 6px; }
.success .result-details { padding: 16px 24px 22px; }
.success .result-mark, .success #result-eyebrow, .success #result-title { display: none; }
.success .result-stats { border: 0; margin: 12px auto; padding: 0; max-width: 470px; }
.success .result-stats span { display: inline; margin-right: 10px; font-size: 12px; }
.success .result-stats strong { font-size: 20px; }
.success .result-details > p { margin: 5px 0; }
.success .result-footnote { margin-top: 12px; }
.meme-heading { font: 900 clamp(23px, 4vw, 38px)/1.3 'Noto Serif JP', serif; margin: 0; padding: 27px 10px 25px; letter-spacing: .06em; color: #fff; }
.tv-stage { height: 330px; position: relative; overflow: hidden; isolation: isolate; border-block: 4px solid #eee; background: repeating-conic-gradient(from 45deg, #d6c9f3 0deg 90deg, #91b6f1 90deg 180deg, #c9dcf7 180deg 270deg, #a89cdb 270deg 360deg) 0 0 / 42px 42px; }
.tv-set { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, transparent 0 34px, #f3f6ff99 35px 43px, #5b64c777 44px 47px, transparent 48px 82px); }
.tv-diamond { position: absolute; width: 420px; height: 420px; background: linear-gradient(135deg, #f8faffdd, #e8d2f2); left: calc(50% - 210px); top: -100px; transform: rotate(45deg); border: 16px ridge #f7f7ff; box-shadow: 0 0 0 8px #a7b4db, 0 0 0 15px #edf4ff, 0 0 0 21px #7080bc; }
.tv-diamond.second { width: 640px; height: 640px; left: calc(50% - 320px); top: -200px; background: transparent; z-index: -1; }
.tv-bug { position: absolute; top: 10px; left: 13px; z-index: 5; font-weight: 900; font-size: 21px; color: #f53154; -webkit-text-stroke: 1px white; paint-order: stroke fill; text-shadow: 2px 2px #6a2553; transform: rotate(-4deg); }
.tv-bug span { display: block; font-size: 10px; color: #ffec22; -webkit-text-stroke: 0; text-shadow: 1px 1px #252563; }
.tv-corner { position: absolute; top: 10px; right: 10px; z-index: 5; color: #f5ff47; font-size: 11px; font-weight: 900; -webkit-text-stroke: 2px #5b662e; paint-order: stroke fill; }
.robot-contestant { position: absolute; width: 240px; height: 300px; left: calc(50% - 120px); bottom: 10px; filter: drop-shadow(6px 6px 0 #5d47813b); }
.robot-head { position: absolute; top: 34px; left: 56px; width: 128px; height: 122px; background: linear-gradient(120deg,#f7f8ed,#e4e4d7 70%,#b9bdb1); border: 3px solid #6f776c; border-radius: 27px 27px 32px 32px; z-index: 4; box-shadow: inset 0 5px white, 0 4px #959c8e; }
.robot-head > span { position: absolute; right: 10px; bottom: 10px; font: 9px monospace; color: #7e867c; }
.robot-aerial { position: absolute; top: 12px; left: 118px; width: 5px; height: 30px; background: #737b73; z-index: 3; }
.robot-aerial:after { content: ''; width: 13px; height: 13px; border-radius: 50%; background: #b7efcd; border: 2px solid #717970; position: absolute; top: -7px; left: -4px; }
.robot-ear { position: absolute; width: 16px; height: 38px; background: #b4bbaf; border: 3px solid #70786c; top: 76px; z-index: 2; border-radius: 5px; }.robot-ear.left { left: 44px; }.robot-ear.right { right: 44px; }
.robot-brow { position: absolute; left: 29px; top: 28px; width: 63px; height: 4px; background: #889181; border-radius: 4px; }
.robot-eyes { position: absolute; left: 25px; right: 25px; top: 48px; display: flex; justify-content: space-between; }
.robot-eyes i { width: 21px; height: 12px; background: #313c36; border-radius: 3px; box-shadow: inset 0 2px #17231c; }
.robot-mouth { position: absolute; left: 43px; top: 84px; width: 39px; height: 4px; background: #687466; border-radius: 2px; }
.robot-neck { position: absolute; left: 103px; top: 152px; width: 34px; height: 33px; background: #adb6a4; border: 3px solid #737e6b; z-index: 2; }
.robot-suit { position: absolute; left: 15px; top: 167px; width: 210px; height: 160px; background: linear-gradient(100deg,#c31841,#ee2e52 55%,#bb1037); border: 3px solid #92112f; border-radius: 55px 55px 0 0; overflow: hidden; }
.robot-shirt { position: absolute; left: 70px; top: -4px; width: 67px; height: 150px; background: #fffce8; clip-path: polygon(0 0,100% 0,70% 100%,30% 100%); }
.robot-tie { position: absolute; left: 99px; top: 16px; width: 16px; height: 116px; background: #c21838; clip-path: polygon(0 0,100% 0,65% 20%,100% 90%,50% 100%,0 90%,35% 20%); }
.robot-lapel { position: absolute; top: -1px; width: 63px; height: 135px; background: #e84460; border: 1px solid #b51c3d; }.robot-lapel.left { left: 22px; transform: rotate(-18deg); clip-path: polygon(0 0,100% 0,100% 100%,0 60%,35% 45%); }.robot-lapel.right { right: 22px; transform: rotate(18deg); clip-path: polygon(0 0,100% 0,65% 45%,100% 60%,0 100%); }
.tv-caption { position: absolute; left: 0; right: 0; bottom: 37px; z-index: 6; margin: 0; display: flex; justify-content: center; align-items: baseline; gap: 14px; font-family: var(--font); font-weight: 900; line-height: 1.05; white-space: nowrap; transform: rotate(-2deg); filter: drop-shadow(2px 4px 0 #711b76); }
.tv-caption small { font-size: 38px; color: #eb49d8; -webkit-text-stroke: 5px white; paint-order: stroke fill; text-shadow: 2px 2px #802c80; }
.tv-caption > span { color: #f659e1; font-size: clamp(44px, 7vw, 76px); -webkit-text-stroke: 7px white; paint-order: stroke fill; letter-spacing: -.06em; text-shadow: 2px 2px #8d257e; }
.tv-question { position: absolute; inset: auto 0 0; height: 33px; margin: 0; display: grid; place-items: center; z-index: 7; background: #e9ff00; color: #151b09; font-weight: 800; font-size: 20px; letter-spacing: .01em; }
.success .clear-show { animation: reveal .25s ease-out; }
.success .tv-caption { animation: caption-pop .32s cubic-bezier(.2,1.7,.4,1) .2s both; }
@keyframes typing { 50% { opacity: .25; transform: translateY(-3px); } }
@keyframes message-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes shake { 20%,60% { transform: translateX(-3px); } 40%,80% { transform: translateX(3px); } }
@keyframes reveal { from { opacity: 0; } to { opacity: 1; } }
@keyframes caption-pop { from { transform: scale(.55) rotate(-6deg); opacity: 0; } to { transform: scale(1) rotate(-2deg); opacity: 1; } }
@media (min-width: 1600px) { .app-layout { grid-template-columns: 420px minmax(0,1fr); }.message-body { font-size: 16px; }.workspace { padding-inline: 25px; }.cafe-hero { padding-left: 50px; }.coffee-scene { max-width: 420px; } }
@media (max-width: 1250px) { .app-layout { grid-template-columns: 350px minmax(0,1fr); }.workspace { padding-inline: 14px; }.task-type,.nav-time,.edit-hint { display: none; }.workspace-toolbar .text-button:first-of-type { margin-left: auto; }.cafe-nav { padding-inline: 24px; }.cafe-brand { font-size: 18px; }.cafe-links { gap: 13px; font-size: 10px; }.cafe-hero { padding-inline: 28px; gap: 8px; }.cafe-title { font-size: 34px; }.cafe-description { font-size: 12px; }.coffee-scene { max-width: 300px; }.cafe-actions { gap: 12px; }.cafe-button { font-size: 12px; gap: 10px; }.cafe-button[data-size='large'] { font-size: 13px; padding-inline: 18px; gap: 13px; }.inspector { grid-template-columns: 145px minmax(0,1fr) 135px; gap: 12px; padding-inline: 12px; }.color-swatch { width: 38px; }.color-options { gap: 1px; }.swatch-label { font-size: 9px; }.message-body { font-size: 14px; }.client-header { padding-right: 9px; gap: 7px; }.dock-toggle span { display: none; } }
@media (min-width: 901px) and (max-width: 1100px) { .cafe-links > span:first-child { display: none; }.cafe-hero { grid-template-columns: 1fr; position: relative; }.coffee-scene { position: absolute; right: 6px; top: 25px; width: 210px; opacity: .2; z-index: -1; }.cafe-title { font-size: 35px; }.inspector { grid-template-columns: 1fr 140px; gap: 12px; }.color-control { grid-column: 1/-1; grid-row: 2; display: flex; align-items: center; gap: 15px; }.color-control legend { float: left; margin: 0; }.color-options { gap: 6px; }.color-swatch { flex-direction: row; gap: 5px; width: auto; padding: 4px; min-height: 33px; }.swatch-label { font-size: 9px; }.swatch-dot { width: 20px; height: 20px; }.inspector { min-height: 138px; }.workspace-footer > span:last-child { display: none; } }
@media (min-width: 901px) and (max-height: 850px) { .cafe-nav { padding-block: 17px 10px; }.cafe-hero { min-height: 300px; padding-top: 13px; padding-bottom: 20px; }.coffee-scene { max-width: 300px; }.cafe-title { font-size: 36px; }.cafe-description { margin-block: 15px 25px; }.hero-kicker { margin-bottom: 15px; }.cafe-bottom { min-height: 40px; }.inspector { min-height: 100px; padding-block: 11px; } }
@media (max-width: 900px) {
  .app-header { height: 58px; padding: 0 15px; }h1 { font-size: 20px; }.session-label { display: none; }.prototype { font-size: 8px; }
  .app-layout { display: flex; flex-direction: column; min-height: 0; height: auto; }.chat-panel { order: 0; border-right: 0; border-bottom: 1px solid var(--line); }.workspace { order: 1; padding: 14px 12px 0; min-height: 650px; }.client-header { padding-inline: 14px; }.client-name > span { font-size: 11px; }.dock-toggle span { display: inline; }
  .chat-move-hint { display: none; }.anger-box { padding-block: 10px; }.anger-track { margin-block: 8px; }.anger-caption { min-height: 14px; }.chat-scroll { max-height: 290px; flex: none; padding-block: 17px 4px; }.message-body { font-size: 15px; }.composer-area { padding-block: 11px; }.composer { display: flex; align-items: center; gap: 12px; padding: 10px; }.composer p { flex: 1; margin: 0; font-size: 12px; }.composer button { width: auto; min-height: 42px; font-size: 12px; padding-inline: 13px; gap: 6px; }.composer-note { display: none; }
  .app-layout.chat-floating { display: flex; }.chat-floating .workspace { min-height: calc(100dvh - 98px); }.chat-floating .chat-panel { width: 370px; max-width: calc(100vw - 16px); min-height: 340px; }.chat-floating .chat-scroll { flex: 1; min-height: 0; max-height: none; }.chat-floating .composer { display: block; }.chat-floating .composer p { font-size: 14px; margin-bottom: 10px; }.chat-floating .composer button { width: 100%; }.chat-floating .chat-move-hint { display: flex; }.chat-floating .chat-panel.collapsed { width: 330px; }
  .browser-window { min-height: 440px; }.task-heading h2 { font-size: 19px; }.task-heading > div { gap: 10px; }.task-heading .eyebrow { font-size: 10px; }.workspace-toolbar { gap: 4px; }.workspace-toolbar .text-button { font-size: 10px; padding-inline: 6px; }.workspace-tab { font-size: 11px; padding-inline: 10px; }.tab-dot { margin-left: 4px; }.browser-address { font-size: 10px; }.local-label { font-size: 9px; }
  .cafe-nav { padding: 22px 22px 15px; }.cafe-brand { font-size: 19px; }.cafe-brand small { font-size: 7px; }.cafe-links { font-size: 10px; gap: 13px; }.cafe-links > span:first-child { display: none; }.cafe-hero { grid-template-columns: 1fr; padding: 25px 26px 30px; min-height: 340px; }.cafe-title { font-size: 36px; }.heading-edit[data-size='small'] .cafe-title { font-size: 30px; }.heading-edit[data-size='large'] .cafe-title { font-size: 40px; }.cafe-description { font-size: 13px; }.hero-kicker { font-size: 11px; }.coffee-scene { position: absolute; width: 200px; right: 8px; top: 104px; z-index: -1; opacity: .22; }.cafe-bottom { margin-inline: 23px; font-size: 8px; }.cafe-bottom-note { display: none; }.cafe-button { font-size: 13px; }.cafe-button[data-size='small'] { font-size: 11px; }.cafe-button[data-size='large'] { font-size: 14px; }
  .inspector { grid-template-columns: 1fr 145px; min-height: 157px; padding: 13px 14px; gap: 10px 17px; }.color-control { grid-column: 1/-1; grid-row: 2; }.color-control legend { display: none; }.color-options { justify-content: space-between; gap: 5px; }.color-swatch { width: 48px; min-height: 47px; }.swatch-label { font-size: 10px; }.swatch-dot { width: 24px; height: 24px; }.inspector-selection label,.inspector legend { font-size: 11px; margin-bottom: 7px; }.workspace-footer { min-height: 32px; font-size: 9px; }.workspace-footer > span:last-child { display: none; }
  .app-footer { height: 40px; padding-inline: 14px; }.progress-caption,.footer-tagline { display: none; }.level-progress { gap: 10px; font-size: 12px; }.level-dots i { width: 12px; }.help-button { font-size: 11px; padding-inline: 7px; }
  body.focus-mode .app-layout { height: auto; min-height: 100dvh; }body.focus-mode .workspace { min-height: 100dvh; }
  .result-dialog.success { width: 740px; }.meme-heading { padding-block: 22px; }.tv-stage { height: 300px; }.tv-caption { gap: 9px; bottom: 36px; }.tv-caption small { font-size: 30px; -webkit-text-stroke-width: 4px; }.tv-caption > span { font-size: clamp(39px,8vw,66px); -webkit-text-stroke-width: 5px; }.tv-corner { font-size: 9px; max-width: 50%; }.tv-question { font-size: 17px; }.tv-bug { font-size: 18px; }.success .result-details { padding-inline: 17px; }.result-actions { flex-direction: column; }.success .result-stats span { display: block; margin-right: 0; }.success .result-stats strong { font-size: 22px; }
}
@media (max-width: 900px) { .chat-floating .chat-panel.collapsed { width: min(260px, calc(100vw - 16px)) !important; }.chat-floating .chat-panel.collapsed .client-avatar { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *:before, *:after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }