:root { color-scheme:dark; --bg:#090909; --surface:#141414; --panel:#1c1c1e; --line:#ffffff12; --text:#f6f6f6; --muted:#a3a3a8; --accent:#fa586e; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Apple SD Gothic Neo','Noto Sans KR',sans-serif; color:var(--text); background:var(--bg); font-synthesis:none; -webkit-font-smoothing:antialiased; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:90px; }
body { margin:0; padding:12px 12px 118px 238px; }
button,input,textarea,select { font:inherit; }
button,a,label,select { -webkit-tap-highlight-color:transparent; }
button,a { touch-action:manipulation; }
button { cursor:pointer; }
button:disabled { opacity:.45; cursor:default; }
a { color:inherit; text-decoration:none; }
button:focus-visible,a:focus-visible,summary:focus-visible,select:focus-visible,input:focus-visible { outline:2px solid #ff8696; outline-offset:4px; }
[hidden] { display:none !important; }
.icon { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.icon-definitions { position:absolute; height:0; width:0; overflow:hidden; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.app-sidebar { position:fixed; z-index:5; top:12px; left:12px; bottom:118px; width:214px; border-radius:12px; background:#111; padding:29px 16px 24px; display:flex; flex-direction:column; }
.brand { display:inline-flex; align-items:center; gap:11px; padding:0 12px; width:fit-content; }
.brand-word { font-size:41px; line-height:1; letter-spacing:-2.5px; font-weight:800; }
.brand-word>span { color:var(--accent); }
.brand-mark { display:flex; gap:4px; align-items:center; height:30px; transform:rotate(-10deg); }
.brand-mark i { height:18px; width:5px; background:var(--accent); border-radius:5px; }
.brand-mark i:nth-child(2) { height:31px; }
.brand-mark i:nth-child(3) { height:23px; }
.sidebar-label { font-size:10px; font-weight:650; letter-spacing:1.3px; color:#85858c; padding:0 12px; margin:41px 0 15px; display:flex; justify-content:space-between; }
.sidebar-label>span { font-size:10px; letter-spacing:0; color:#b8b8c1; }
.app-sidebar nav { display:grid; gap:6px; }
.app-sidebar nav a { display:flex; align-items:center; gap:13px; padding:13px 12px; border-radius:7px; color:#a8a8af; font-size:13px; font-weight:550; }
.app-sidebar nav a:hover { color:white; background:#202022; }
.app-sidebar nav .nav-current { background:#28282b; color:white; }
.app-sidebar nav .nav-current .icon { color:var(--accent); }
.language-nav .sidebar-label { margin-top:31px; font-size:11px; letter-spacing:0; }
.language-shortcut { width:100%; display:flex; align-items:center; gap:11px; border:0; background:none; color:#dedee3; padding:9px 10px; border-radius:7px; text-align:left; }
.language-shortcut:hover { background:#242426; }
.language-shortcut>span:nth-child(2) { font-size:12px; font-weight:550; }
.language-shortcut small { display:block; color:#85858d; font-size:10px; font-weight:400; margin-top:5px; }
.mini-cover { width:36px; height:36px; border-radius:4px; flex-shrink:0; display:grid; place-items:center; font-size:18px; font-weight:700; }
.language-shortcut i { width:5px; height:5px; border-radius:50%; margin-left:auto; }
.language-shortcut.selected i { background:var(--accent); }
.sidebar-bottom { margin-top:auto; padding:35px 12px 0; }
.sidebar-bottom p { font-size:14px; font-weight:550; line-height:1.7; letter-spacing:-.4px; margin:17px 0 22px; }
.sidebar-bottom small { color:#6f6f76; font-size:8px; letter-spacing:1px; }
.sidebar-waves { display:flex; gap:4px; align-items:center; height:21px; }
.sidebar-waves i { width:3px; border-radius:2px; height:8px; background:#696970; }
.sidebar-waves i:nth-child(2),.sidebar-waves i:nth-child(4) { height:16px; }
.sidebar-waves i:nth-child(3) { height:23px; background:var(--accent); }
.topbar { height:70px; padding:0 34px; display:flex; align-items:center; justify-content:space-between; border-radius:12px 12px 0 0; background:#181619; }
.top-breadcrumb { display:flex; align-items:center; gap:10px; font-size:12px; color:#c6c3c9; }
.top-breadcrumb .icon { width:16px; height:16px; color:var(--accent); }
.early-access { color:#99949c; font-size:8px; border:1px solid #ffffff17; border-radius:4px; padding:3px 6px; margin-left:5px; letter-spacing:1px; }
.top-right { display:flex; align-items:center; gap:20px; }
.top-status { display:flex; align-items:center; gap:7px; font-size:10px; color:#aaa7af; }
.top-status i { display:block; width:5px; height:5px; background:#88c8a5; border-radius:50%; flex-shrink:0; }
.workspace-avatar { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:650; background:#39333b; color:#e9d7e7; border:3px solid #252127; }
.mobile-brand { display:none; }
.welcome { padding:21px 34px 0; min-height:calc(100vh - 200px); background:linear-gradient(180deg,#221a21 0,#151416 290px,#141414 550px); border-radius:0 0 12px 12px; }
.page-heading { margin-bottom:25px; }
.page-heading h1 { font-size:28px; letter-spacing:-1px; line-height:1.3; margin:0 0 8px; font-weight:750; }
.page-heading p { font-size:12px; color:#a69ea9; margin:0; }
.hero { display:grid; grid-template-columns:1.1fr 1fr; min-height:305px; background:linear-gradient(110deg,#3a202e,#382039 55%,#3a2244); border:1px solid #ffffff06; border-radius:12px; overflow:hidden; }
.intro { padding:33px 35px; position:relative; z-index:1; }
.eyebrow { display:flex; align-items:center; gap:7px; font-size:8px; letter-spacing:1.2px; color:#d6a8bc; font-weight:650; }
.signal-dot { display:block; width:5px; height:5px; border-radius:50%; background:var(--accent); flex-shrink:0; }
.intro h2 { margin:21px 0 15px; font-size:clamp(38px,4.2vw,60px); letter-spacing:-2.8px; line-height:1.09; font-weight:780; }
.lead { font-size:12px; line-height:1.8; color:#d5b7c9; margin:0 0 19px; }
.text-link { background:none; border:0; padding:0; color:inherit; display:inline-flex; align-items:center; gap:10px; font-size:11px; font-weight:650; }
.hero-play { width:32px; height:32px; background:white; color:#442033; display:grid; place-items:center; border-radius:50%; box-shadow:0 5px 20px #19051533; }
.hero-play .icon { fill:currentColor; stroke-width:0; width:18px; height:18px; margin-left:2px; }
.text-link:hover .hero-play { transform:scale(1.06); }
.signal-stage { position:relative; isolation:isolate; overflow:hidden; min-height:305px; background:radial-gradient(ellipse at 65% 55%,#f789bc30,transparent 70%); }
#signal-canvas { position:absolute; width:100%; height:100%; inset:0; opacity:.9; }
.art-orbit { position:absolute; width:270px; height:270px; border:1px solid #ffd2e925; border-radius:50%; top:40px; right:45px; box-shadow:0 0 0 20px #ff9bd305,0 0 0 42px #ff9bd305,0 0 0 65px #ff9bd305; transform:rotate(-25deg) scaleX(.7); }
.stage-top { position:absolute; top:27px; left:23px; right:26px; display:flex; justify-content:space-between; align-items:center; color:#d4adce; font-size:8px; letter-spacing:1.8px; }
.demo-tag { font-size:9px; border:1px solid #ffffff20; padding:4px 6px; border-radius:4px; letter-spacing:0; }
.voice-node { position:absolute; z-index:1; }
.voice-korean { top:88px; left:22px; }
.node-label { font-size:8px; color:#d0a4c4; letter-spacing:1px; margin-bottom:9px; }
.voice-korean .node-copy { font-size:20px; font-weight:500; letter-spacing:-.6px; color:#f8daef; }
.voice-translated { top:169px; right:30px; }
.voice-translated .node-copy { font-size:45px; line-height:.98; letter-spacing:-2px; font-weight:750; color:#fff; }
.voice-translated .node-copy>span { color:#ff96c8; }
.voice-translated .node-copy:lang(ja),.voice-translated .node-copy:lang(zh) { font-size:33px; line-height:1.2; letter-spacing:-1px; }
.stage-bottom { position:absolute; bottom:22px; left:23px; right:30px; display:flex; justify-content:space-between; font-size:8px; letter-spacing:1px; color:#c6a3c0; }
.stage-bottom b { font-weight:500; }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:30px 0 17px; }
.section-heading h2 { font-size:20px; letter-spacing:-.65px; font-weight:700; margin:0; }
.section-heading>span { font-size:10px; color:#9c999f; }
.language-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:19px; }
.language-card { padding:0 0 10px; text-align:left; border:0; border-radius:8px; color:white; background:none; min-width:0; transition:transform .2s; }
.language-card:hover { transform:translateY(-4px); }
.album-cover { position:relative; display:block; overflow:hidden; width:100%; aspect-ratio:1.82; border-radius:7px; isolation:isolate; box-shadow:0 8px 18px #0002; border:1px solid #ffffff09; }
.cover-en { background:#2144c0; color:#ebffbe; }
.cover-ja { background:#f5b2a8; color:#7b263e; }
.cover-zh { background:#b5a1e8; color:#3b235a; }
.cover-meta { position:absolute; top:15px; left:17px; font-size:7px; font-weight:650; letter-spacing:1.1px; z-index:2; }
.cover-word { position:absolute; left:18px; bottom:37px; font-size:58px; letter-spacing:-3px; font-weight:800; z-index:1; }
.cover-en .cover-word { transform:rotate(-6deg); }
.cover-en .cover-shape { position:absolute; height:230px; width:90px; border:28px solid #8fb4ff; border-radius:50%; transform:rotate(37deg); right:30px; top:-32px; opacity:.75; }
.cover-en .cover-shape::after { content:''; position:absolute; width:90px; height:220px; border:20px solid #8fb4ff88; border-radius:50%; left:25px; top:-60px; }
.cover-ja .cover-word { font-size:28px; letter-spacing:-2px; bottom:57px; left:16px; font-weight:750; }
.cover-ja .cover-shape { position:absolute; width:135px; height:135px; border-radius:50%; background:#e2495b; top:29px; right:20px; box-shadow:0 0 0 15px #f6ceb2,0 0 0 17px #dc716777; }
.cover-ja .cover-word { color:#652037; text-shadow:0 1px 0 #fbbbac55; }
.cover-zh .cover-word { font-size:54px; letter-spacing:-4px; }
.cover-zh .cover-shape { position:absolute; width:130px; height:180px; background:#dbf585; right:18px; top:-13px; border-radius:80px 80px 10px 10px; transform:rotate(35deg); box-shadow:35px 40px 0 #805ab5; }
.cover-bottom { position:absolute; bottom:15px; left:18px; font-size:8px; font-weight:600; letter-spacing:.1px; z-index:1; }
.album-check { display:none; position:absolute; bottom:12px; right:12px; background:var(--accent); color:#fff; width:28px; height:28px; border-radius:50%; place-items:center; font-size:13px; box-shadow:0 3px 12px #0004; }
.selected .album-check { display:grid; }
.album-title { display:flex; align-items:center; justify-content:space-between; font-size:15px; font-weight:650; padding-top:13px; }
.album-title .icon { width:15px; height:15px; color:#88848d; }
.selected .album-title { color:#ff8091; }
.album-description { display:block; font-size:11px; color:#929096; margin-top:5px; }
.how-it-works { padding-bottom:23px; scroll-margin-top:20px; }
.how-it-works .section-heading { margin-top:27px; }
.how-it-works .section-heading h2 { font-size:17px; }
.how-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:19px; }
.how-item { display:flex; gap:13px; align-items:center; border-radius:7px; background:#202023; padding:17px 16px; }
.how-number { color:#fc7689; font-size:13px; font-weight:700; }
.how-item h3 { font-size:12px; font-weight:550; margin:0 0 6px; letter-spacing:-.2px; }
.how-item p { font-size:10px; line-height:1.6; margin:0; color:#a7a4ae; }
.welcome-footer { border-top:1px solid #ffffff0a; padding:15px 0 20px; display:flex; align-items:center; justify-content:space-between; gap:15px; font-size:9px; color:#817d86; }
.welcome-footer p { margin:0; }
.launch-panel { position:fixed; z-index:10; bottom:0; left:0; right:0; height:106px; border-top:1px solid #ffffff15; background:#19191bf5; backdrop-filter:blur(24px); display:flex; gap:25px; align-items:center; padding:0 35px; }
.launch-title { display:flex; align-items:center; gap:14px; flex:1; min-width:190px; }
.dock-cover { width:57px; height:57px; border-radius:7px; display:grid; place-items:center; font-size:26px; font-weight:750; }
.launch-title h2 { font-size:13px; margin:0 0 6px; font-weight:600; }
#dock-language-title { font-size:11px; color:#a6a3ad; }
.launch-form { display:flex; gap:32px; align-items:center; flex:2; justify-content:flex-end; }
.language-fields { display:flex; align-items:center; gap:25px; }
.field-label,.patient-language-field>label { display:block; font-size:9px; color:#98939e; margin-bottom:6px; }
.language-value { font-size:14px; }
.language-bridge { color:#918995; padding-top:17px; }
.patient-language-field { min-width:135px; }
select { background:transparent; border:0; color:#f7f5fa; font-size:14px; cursor:pointer; padding:0 22px 0 0; width:100%; min-height:23px; }
option { background:#27272b; color:white; }
.primary,.secondary,.quiet { border:1px solid transparent; border-radius:7px; display:inline-flex; align-items:center; justify-content:center; gap:9px; font-size:12px; font-weight:550; min-height:41px; padding:10px 16px; transition:background .2s,transform .2s; }
.primary { background:var(--accent); color:white; }
.primary:hover { background:#ff7084; }
.secondary { background:#ffffff0b; border-color:#ffffff1b; color:#e5e1e9; }
.secondary:hover { background:#ffffff18; }
.quiet { background:transparent; color:#a8a2ae; }
.quiet:hover { color:white; background:#ffffff09; }
.wide { width:100%; }
#create-button { border-radius:30px; padding:15px 27px 15px 20px; font-size:13px; min-height:51px; box-shadow:0 6px 30px #fa586e17; white-space:nowrap; }
#create-button .icon { fill:currentColor; stroke-width:0; width:20px; height:20px; }
#create-button:hover { transform:scale(1.025); }
.engine-settings { position:relative; }
.engine-settings summary { display:flex; gap:7px; align-items:center; cursor:pointer; list-style:none; color:#b0aab6; min-height:44px; font-size:10px; white-space:nowrap; }
.engine-settings summary::-webkit-details-marker { display:none; }
.engine-settings summary .icon { height:16px; width:16px; }
.engine-content { position:absolute; bottom:calc(100% + 25px); right:0; width:300px; border:1px solid #ffffff20; border-radius:10px; padding:22px; background:#29262e; box-shadow:0 15px 50px #0006; }
.engine-content>label { font-size:12px; display:block; margin-bottom:18px; }
.engine-content select { font-size:12px; min-height:35px; }
.engine-hint { color:#b5adb9; font-size:11px; line-height:1.7; margin-bottom:0; }
/* Conversation view: a lyric canvas with material artwork alongside. */
.in-room { padding-bottom:12px; }
.in-room .app-sidebar { bottom:12px; }
.in-room .language-nav,.in-room .nav-guide { display:none; }
.patient-view .app-sidebar { display:none; }
.patient-view { padding-left:12px; }
.patient-view .mobile-brand { display:block; }
.patient-view .top-breadcrumb { display:none; }
.consultation { background:linear-gradient(180deg,#211b26 0,#161417 320px); border-radius:0 0 12px 12px; padding:24px 30px 20px; min-height:calc(100vh - 94px); }
.room-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:27px; }
.room-heading .eyebrow { font-size:8px; color:#b89ac4; }
.room-heading h1 { font-size:34px; line-height:1.2; letter-spacing:-1.6px; font-weight:750; margin:14px 0 9px; }
.room-heading p { color:#a79fab; font-size:12px; margin:0; line-height:1.7; }
.room-actions { display:flex; align-items:center; gap:9px; }
.language-pill { font-size:10px; color:#c5b6cc; margin-right:7px; }
.room-actions .icon { width:15px; height:15px; }
.workspace { display:grid; grid-template-columns:minmax(0,1fr) 292px; gap:18px; }
.dialogue-panel { min-width:0; display:flex; flex-direction:column; background:linear-gradient(150deg,#392b46,#2a2233 65%,#241f2b); border:1px solid #ffffff0a; border-radius:12px; overflow:hidden; }
.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:61px; padding:0 26px; border-bottom:1px solid #ffffff0a; }
.panel-heading>div { display:flex; align-items:center; gap:9px; }
.panel-heading h2 { margin:0; font-size:12px; font-weight:650; }
.panel-heading .icon { width:16px; height:16px; color:#c3a8d4; }
.muted { color:#baa9c5; font-size:10px; }
.transcript { height:420px; min-height:280px; overflow:auto; padding:29px 30px 5px; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#a992b240 transparent; scroll-behavior:smooth; }
.empty-conversation { height:100%; min-height:280px; display:flex; align-items:center; justify-content:center; flex-direction:column; padding:20px; text-align:center; }
.empty-conversation>span { display:grid; place-items:center; width:82px; height:82px; border-radius:50%; background:#ffffff08; color:#eeafce; font-size:38px; margin-bottom:24px; box-shadow:0 0 0 18px #ffffff03,0 0 0 37px #ffffff02; }
.empty-conversation h3 { font-size:25px; font-weight:650; letter-spacing:-.7px; margin:21px 0 11px; }
.empty-conversation p { font-size:12px; color:#bbabc6; margin:0; line-height:1.8; }
.message { margin:0 0 27px; padding:0 0 24px; border-bottom:1px solid #ffffff0c; }
.message:last-child { border:0; }
.message-meta { display:flex; align-items:center; gap:8px; color:#c4aacd; font-size:10px; margin-bottom:12px; }
.message-meta::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--accent); }
.mine .message-meta::before { background:#b0a0bd; }
.message-main { word-break:keep-all; font-size:29px; line-height:1.55; font-weight:650; letter-spacing:-.9px; color:#f8eefb; white-space:pre-wrap; overflow-wrap:anywhere; }
.mine .message-main { word-break:keep-all; font-size:21px; color:#bcabc8; font-weight:500; }
.message-original { font-size:12px; line-height:1.7; color:#baa4c8; margin-top:11px; overflow-wrap:anywhere; white-space:pre-wrap; }
.message-status { font-size:9px; color:#ad96bd; margin-top:10px; }
.message:last-child:not(.mine) .message-main { word-break:keep-all; font-size:34px; color:#fff; line-height:1.45; letter-spacing:-1px; }
.message:last-child:not(.mine) .message-meta { color:#ffafc7; }
.state-failed { border-left:2px solid var(--accent); padding-left:13px; }
.conversation-controls { margin-top:auto; padding:0 24px; background:#17121d44; }
.mic-area { display:flex; align-items:center; gap:12px; padding:17px 0; border-top:1px solid #ffffff10; }
.mic-button { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:44px; border:0; border-radius:25px; background:#f3e9f8; color:#302138; padding:12px 17px; font-size:11px; font-weight:650; white-space:nowrap; }
.mic-button:hover { background:white; }
.mic-button .icon { width:17px; height:17px; }
.mic-button.active { background:var(--accent); color:white; }
.mic-button.active .icon { animation:micPulse 1.6s ease-in-out infinite; }
@keyframes micPulse { 50% { opacity:.45; } }
.mic-status { font-size:10px; color:#b5a0c3; }
.audio-toggle { display:flex; align-items:center; gap:4px; margin-left:auto; font-size:10px; color:#c6b2d4; }
input[type=checkbox] { accent-color:var(--accent); width:14px; height:14px; }
.composer { display:flex; align-items:center; gap:12px; padding:6px 8px 6px 16px; border:1px solid #ffffff17; border-radius:8px; background:#ffffff08; }
.composer:focus-within { border-color:#b899ce; }
.composer textarea { border:0; background:transparent; color:white; min-width:0; flex:1; resize:none; padding:8px 0; font-size:12px; line-height:1.6; }
.composer textarea:focus { outline:0; }
.composer textarea::placeholder { color:#b3a0bf; }
.composer button { display:grid; place-items:center; width:33px; height:33px; border-radius:50%; border:0; background:#e8dcef; color:#392942; flex-shrink:0; }
.composer button .icon { width:17px; height:17px; }
.composer-foot { display:flex; justify-content:space-between; gap:12px; padding:11px 0 16px; font-size:9px; color:#ad97bb; }
#session-time { font-variant-numeric:tabular-nums; }
.feedback-banner { margin:0 24px 15px; padding:12px 15px; color:#ffc0cb; font-size:12px; border-left:2px solid var(--accent); background:#fa586e13; border-radius:5px; }
.visual-panel { min-width:0; border:1px solid #ffffff0a; border-radius:12px; background:#1e1b22; overflow:hidden; display:flex; flex-direction:column; }
.visual-panel .panel-heading { padding:0 20px; }
.small-pill { font-size:9px; color:#a79aaf; }
.image-stage { position:relative; display:grid; place-items:center; height:225px; margin:18px; background:linear-gradient(140deg,#40394a,#2a2531); border:1px solid #ffffff0a; border-radius:8px; overflow:hidden; }
.image-stage img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; cursor:zoom-in; }
.image-stage.expanded { height:380px; }
.image-stage.expanded img { cursor:zoom-out; }
.image-placeholder { padding:15px; text-align:center; }
.picture-stack { width:64px; height:60px; position:relative; margin:0 auto 21px; }
.picture-stack span { position:absolute; width:53px; height:44px; background:#494052; border:1px solid #95859f; border-radius:4px; top:6px; left:1px; transform:rotate(-13deg); }
.picture-stack span:nth-child(2) { transform:rotate(9deg); top:9px; left:8px; }
.picture-stack span:last-child { transform:rotate(-2deg); top:14px; left:5px; display:grid; place-items:center; background:#6c5678; }
.picture-stack .icon { color:#eed6f5; }
.image-placeholder h3 { font-size:14px; font-weight:600; margin:0 0 10px; letter-spacing:-.3px; }
.image-placeholder p { font-size:11px; color:#b5a6bf; line-height:1.8; margin:0; }
.image-caption { padding:0 19px 16px; display:flex; justify-content:space-between; gap:9px; align-items:center; }
.image-caption strong { font-size:11px; color:#bfb3c8; font-weight:500; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.image-caption button { padding:7px 9px; font-size:10px; min-height:34px; }
#staff-materials,#patient-feedback { padding:0 19px 18px; }
.image-list { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.image-list:empty { display:none; }
.image-list button { max-width:100%; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; border:1px solid #ffffff20; color:#c1adc9; font-size:10px; padding:6px 8px; background:transparent; border-radius:4px; }
.image-list button.selected { color:#ffaabd; border-color:#fa586e66; background:#fa586e0a; }
.upload-button { display:flex; align-items:center; justify-content:center; gap:8px; min-height:43px; padding:12px; font-size:11px; border:1px solid #ffffff1c; border-radius:7px; color:#d0c2d8; cursor:pointer; background:#ffffff06; }
.upload-button:hover { background:#ffffff10; }
.upload-button:focus-within { outline:2px solid var(--accent); outline-offset:3px; }
.upload-button .icon { width:14px; height:14px; }
.download-permission { display:flex; align-items:center; gap:6px; margin:13px 0; font-size:10px; color:#bcb0c4; }
.material-hint { color:#a295aa; font-size:9px; line-height:1.8; margin:0; }
#hide-image { padding:5px 0; font-size:10px; min-height:32px; }
.aside-signature { color:#76647f; font-size:24px; font-weight:700; letter-spacing:-1px; line-height:1.2; margin-top:auto; padding:24px; }
.aside-signature em { color:#9982a5; font-style:normal; }
.signature-line { display:block; width:25px; height:3px; border-radius:2px; background:var(--accent); margin-top:19px; }
.privacy-foot { color:#a396ad; font-size:9px; line-height:1.8; margin-top:16px; }
.shared-caption { display:none; }
.patient-view .consultation { max-width:1420px; margin:auto; }
.patient-view .room-heading h1 { font-size:32px; max-width:680px; }
dialog { background:#252128; color:white; border:1px solid #ffffff20; border-radius:17px; padding:34px; width:calc(100% - 32px); max-width:450px; box-shadow:0 25px 120px #000a; }
dialog::backdrop { background:#050308a8; backdrop-filter:blur(12px); }
.section-kicker { font-size:9px; letter-spacing:1px; color:#ce9fbc; }
dialog h2 { font-size:30px; line-height:1.2; letter-spacing:-1.2px; margin:20px 0 13px; font-weight:700; }
dialog h2>span { color:var(--accent); }
dialog>p { font-size:12px; line-height:1.8; color:#bdb0c5; }
.dialog-close { position:absolute; right:13px; top:10px; width:34px; height:34px; border:0; background:none; color:#b8a9c2; font-size:25px; }
.qr-frame { width:min(236px,100%); aspect-ratio:1; display:grid; place-items:center; margin:24px auto; border-radius:10px; background:white; padding:8px; }
#qr-image { width:100%; height:auto; }
#invite-link { width:100%; border-radius:6px; background:#19161d; color:#bfb0c9; border:1px solid #ffffff18; font-size:10px; padding:11px; }
.dialog-actions { display:flex; gap:10px; margin-top:17px; }
.dialog-actions>* { flex:1; }
#invite-local { font-size:10px; color:#bba7c6; margin-top:18px; }
.toast { position:fixed; z-index:30; bottom:122px; left:50%; transform:translateX(-50%); max-width:min(90vw,540px); background:#f0e9f5; color:#2a2031; padding:14px 22px; border-radius:8px; box-shadow:0 8px 45px #0005; font-size:12px; line-height:1.6; }
.in-room .toast { bottom:23px; }
@media (min-width:1600px) { .welcome,.consultation { padding-left:48px; padding-right:48px; } .hero { min-height:350px; } .intro { padding:42px; } .signal-stage { min-height:350px; } .voice-translated { top:187px; right:65px; } .voice-translated .node-copy { font-size:53px; } .voice-korean { top:105px; left:40px; } .album-cover { aspect-ratio:2.05; } .cover-word { font-size:68px; } .cover-ja .cover-word { font-size:36px; } .cover-zh .cover-word { font-size:65px; } }
@media (max-width:1200px) { body { padding-left:204px; } .app-sidebar { width:180px; padding-left:11px; padding-right:11px; } .topbar { padding:0 25px; } .welcome { padding:21px 25px 0; } .intro { padding:28px; } .intro h2 { font-size:47px; } .voice-translated .node-copy { font-size:38px; } .voice-korean .node-copy { font-size:17px; } .cover-word { font-size:48px; } .cover-ja .cover-word { font-size:24px; bottom:48px; } .cover-zh .cover-word { font-size:44px; } .album-cover { aspect-ratio:1.55; } .cover-ja .cover-shape { right:1px; } .language-grid,.how-grid { gap:15px; } .how-item { padding:15px 12px; gap:10px; } .how-item h3 { font-size:11px; } .how-item p { font-size:9px; } .launch-form { gap:20px; } .workspace { grid-template-columns:minmax(0,1fr) 260px; gap:14px; } .consultation { padding:22px; } .room-heading h1 { font-size:29px; } .language-pill,.mic-status { display:none; } .room-actions { gap:4px; } .transcript { padding:25px; } .message:last-child:not(.mine) .message-main { word-break:keep-all; font-size:29px; } }
@media (max-width:980px) { body { padding-left:12px; } .app-sidebar { display:none; } .top-breadcrumb { display:none; } .mobile-brand { display:block; } .mobile-brand .brand { padding:0; } .mobile-brand .brand-word { font-size:31px; } .mobile-brand .brand-mark { transform:scale(.8) rotate(-10deg); margin-right:-2px; } .topbar { height:65px; } .page-heading h1 { font-size:26px; } .hero { min-height:290px; } .intro h2 { font-size:47px; } .signal-stage { min-height:290px; } .launch-panel { padding:0 24px; gap:20px; } .launch-form { gap:20px; } .launch-title { min-width:170px; } .engine-settings summary>span { display:none; } .language-fields { gap:16px; } .patient-language-field { min-width:104px; } #create-button { padding:13px 20px 13px 15px; font-size:12px; } .room-heading h1 { font-size:28px; } }
@media (max-width:640px) { html { scroll-padding-top:20px; } body,.patient-view { padding:0 0 151px; } .topbar { height:70px; padding:0 21px; border-radius:0; background:#171418; } .top-status { font-size:9px; } .workspace-avatar { display:none; } .welcome { border-radius:0; padding:15px 20px 0; } .page-heading { margin-bottom:23px; } .page-heading h1 { font-size:25px; letter-spacing:-1px; } .page-heading p { font-size:11px; margin-top:8px; } .hero { grid-template-columns:1fr; position:relative; min-height:330px; } .intro { padding:28px 25px; width:100%; } .intro .eyebrow { font-size:6.7px; letter-spacing:.8px; } .intro h2 { font-size:47px; letter-spacing:-2px; margin:25px 0 15px; } .lead { font-size:11px; } .text-link { font-size:10px; position:relative; z-index:2; } .hero-play { height:30px; width:30px; } .signal-stage { position:absolute; inset:0; min-height:0; pointer-events:none; } .signal-stage::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#39202ee6 0,#39202e70 40%,transparent); z-index:0; } .stage-top,.voice-korean,.voice-translated,.stage-bottom { display:none; } .art-orbit { width:250px; height:300px; right:-67px; top:67px; transform:rotate(30deg) scaleX(.8); } #signal-canvas { opacity:.72; left:20%; width:100%; } .section-heading { margin:27px 0 15px; align-items:flex-end; } .section-heading h2 { font-size:19px; line-height:1.4; max-width:215px; } .section-heading>span { display:none; } .language-grid { display:flex; flex-direction:column; gap:12px; } .language-card { display:grid; grid-template-columns:100px minmax(0,1fr); grid-template-rows:1fr 1fr; column-gap:17px; background:#232126; border-radius:9px; padding:8px; align-items:center; } .language-card:hover { transform:none; background:#2d2930; } .album-cover { grid-row:1 / 3; width:100px; height:100px; aspect-ratio:1; border-radius:5px; } .cover-meta { top:9px; left:8px; font-size:4px; letter-spacing:.5px; } .cover-word { font-size:34px; bottom:28px; left:8px; letter-spacing:-1.5px; } .cover-bottom { left:8px; bottom:11px; font-size:5px; } .cover-en .cover-shape { width:52px; height:145px; border-width:12px; right:4px; top:-14px; } .cover-en .cover-shape::after { width:50px; height:130px; border-width:10px; left:12px; top:-30px; } .cover-ja .cover-word { font-size:15px; letter-spacing:-1px; bottom:42px; left:4px; } .cover-ja .cover-shape { width:67px; height:67px; top:20px; right:4px; box-shadow:0 0 0 8px #f6ceb2,0 0 0 9px #dc716777; } .cover-zh .cover-word { font-size:33px; letter-spacing:-2px; } .cover-zh .cover-shape { width:65px; height:100px; top:-4px; right:-9px; box-shadow:15px 30px 0 #805ab5; } .album-check { bottom:7px; right:7px; height:19px; width:19px; font-size:10px; } .album-title { align-self:end; padding-top:0; font-size:16px; margin-bottom:3px; padding-right:10px; } .album-description { align-self:start; margin-top:6px; font-size:11px; color:#aaa4b0; padding-right:8px; } .language-card.selected { background:#30272e; box-shadow:inset 0 0 0 1px #fa586e55; } .how-grid { display:flex; flex-direction:column; gap:0; } .how-item { background:none; padding:17px 3px; border-bottom:1px solid #ffffff0d; border-radius:0; gap:20px; } .how-item:last-child { border:0; } .how-number { font-size:14px; } .how-item h3 { font-size:12px; margin-bottom:6px; } .how-item p { font-size:11px; } .how-it-works { padding-bottom:9px; } .welcome-footer { display:block; padding:18px 0 23px; font-size:9px; line-height:1.8; } .welcome-footer p { margin-top:8px; } .launch-panel { height:141px; padding:15px 20px; gap:12px; flex-direction:column; align-items:stretch; box-shadow:0 -15px 35px #0002; } .launch-title { gap:9px; min-width:0; flex:none; } .dock-cover { width:32px; height:32px; border-radius:4px; font-size:17px; } .launch-title>div { display:flex; align-items:center; gap:10px; } .launch-title h2 { font-size:11px; margin:0; } #dock-language-title { font-size:10px; } .launch-form { gap:13px; flex:1; justify-content:space-between; } .fixed-language,.language-bridge { display:none; } .patient-language-field { min-width:96px; } .patient-language-field>label { font-size:8px; margin-bottom:4px; } .language-fields { flex:1; min-width:0; } select { font-size:13px; } .engine-settings { margin-right:2px; } .engine-settings summary .icon { width:17px; height:17px; } #create-button { font-size:12px; padding:12px 17px 12px 12px; min-height:45px; } #create-button .icon { width:18px; height:18px; } .engine-content { position:fixed; bottom:153px; right:20px; left:20px; width:auto; } .in-room,.patient-view.in-room { padding:0; } .consultation,.patient-view .consultation { border-radius:0; padding:18px 15px; } .room-heading { margin-bottom:23px; align-items:flex-start; gap:8px; } .room-heading h1,.patient-view .room-heading h1 { font-size:26px; line-height:1.25; letter-spacing:-1px; margin:13px 0 9px; } .room-heading p { font-size:11px; max-width:230px; } .room-heading .eyebrow { font-size:7px; } .room-actions { flex-direction:column; padding-top:20px; gap:3px; align-items:flex-end; } .room-actions .secondary { white-space:nowrap; font-size:10px; padding:9px; min-height:34px; } .room-actions .quiet { min-height:30px; font-size:10px; padding:6px; white-space:nowrap; } .workspace { display:flex; flex-direction:column; gap:17px; } .panel-heading { min-height:56px; padding:0 20px; } .panel-heading h2 { font-size:11px; } .muted { font-size:9px; } .transcript { padding:25px 23px 5px; height:390px; } .message-main { word-break:keep-all; font-size:27px; } .mine .message-main { word-break:keep-all; font-size:20px; } .message:last-child:not(.mine) .message-main { word-break:keep-all; font-size:30px; } .message-meta { font-size:9px; } .message-original { font-size:11px; } .conversation-controls { padding:0 18px; } .mic-area { gap:6px; padding:15px 0; } .mic-button { font-size:10px; padding:10px 12px; } .audio-toggle { font-size:9px; } .composer textarea { font-size:11px; } .composer-foot { font-size:8px; } .feedback-banner { margin-left:18px; margin-right:18px; font-size:11px; } .empty-conversation h3 { font-size:22px; } .empty-conversation p { font-size:11px; } .image-stage { height:230px; } .aside-signature { display:none; } .privacy-foot { font-size:9px; } .patient-view .visual-panel.has-image { order:-1; } .patient-view .visual-panel:not(.has-image) .image-stage,.patient-view .visual-panel:not(.has-image) .image-caption { display:none; } .patient-view .image-stage { height:180px; } .patient-view #patient-feedback { display:flex; gap:5px; } .patient-view #patient-feedback button { font-size:10px; padding:9px 5px; } .shared-caption { display:block; font-size:22px; font-weight:650; line-height:1.45; padding:0 19px 20px; max-height:155px; overflow:auto; color:white; } dialog { padding:27px; } dialog h2 { font-size:27px; } .dialog-actions { gap:8px; } .dialog-actions>* { font-size:11px; } #mic-dialog .dialog-actions { flex-direction:column; } .toast { bottom:155px; } }
@media (prefers-reduced-motion:reduce) { html,.transcript { scroll-behavior:auto; } *,*::before,*::after { animation:none !important; transition:none !important; } }

/* Patient series wordmark */
.brand-word small {display:block;font-size:9px;letter-spacing:2.7px;font-weight:650;margin:0 0 4px 3px;color:var(--muted);}
.account-link {color:var(--text);font-size:12px;text-decoration:none;white-space:nowrap;}
@media(max-width:520px){.top-right{gap:12px}.workspace-avatar{display:none}.top-status{font-size:10px}.brand-word small{font-size:8px;letter-spacing:2px}}