* { box-sizing:border-box }
:root { color-scheme:light; font-family:Inter,"Malgun Gothic","Apple SD Gothic Neo",sans-serif; color:#172434 }
body { margin:0; min-height:100vh; background:radial-gradient(ellipse at 0 0,#dcebf9,transparent 50%),radial-gradient(ellipse at 100% 50%,#e3eefb,transparent 62%),#f4f7fa }
header { display:flex; align-items:center; gap:9px; padding:18px clamp(18px,5vw,84px); font-size:24px; font-weight:700; letter-spacing:-.8px }
main { width:min(100% - 40px,1000px); margin:auto; padding-bottom:max(16px,env(safe-area-inset-bottom)) }
h1 { margin:clamp(10px,3vh,40px) 0 clamp(16px,3vh,32px); text-align:center; font-size:clamp(26px,4vw,45px); letter-spacing:-.055em }
.panel { display:flex; flex-direction:column; height:clamp(360px,72vh,790px); height:clamp(320px,72dvh,790px); background:white; border:1px solid #d7e0ea; border-radius:24px; overflow:hidden; box-shadow:0 12px 50px #1c36500b }
#history { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; overflow-anchor:none; padding:clamp(18px,4vw,46px); display:flex; flex-direction:column }
#hint { margin:auto; text-align:center; color:#56677a; font-size:clamp(16px,2vw,21px); line-height:1.6 }
[hidden] { display:none !important }
article { margin-bottom:1.4rem; overflow-wrap:anywhere; text-align:start }
article p { margin:.2rem 0; line-height:1.55 }
.translation { font-size:clamp(20px,2.4vw,29px); font-weight:540 }
.original { color:#586979; font-size:clamp(15px,1.8vw,19px) }
.pending,.failed { color:#536779; font-size:14px }
.failed { color:#93432b }
.controls { display:grid; justify-items:center; gap:8px; border-top:1px solid #edf1f4; padding:10px 16px 18px }
#status { margin:0; color:#4c6175; text-align:center; font-size:14px; min-height:1.45em }
#mic { border:0; border-radius:50%; width:56px; height:56px; background:#172434; color:white; display:grid; place-items:center; cursor:pointer }
#mic:disabled,select:disabled { opacity:.56; cursor:default }
.stop { display:none; width:16px; height:16px; background:white; border-radius:3px }
#mic.recording { background:#12667d }
.audio-controls { display:flex; align-items:center; justify-content:center; gap:10px }
#tts { display:flex; align-items:center; gap:6px; min-height:44px; padding:0 12px; border-radius:24px; border:1px solid #b9c9d6; background:white; color:#364e60; font:inherit; font-size:14px; cursor:pointer }
#tts[aria-pressed="true"] { color:white; background:#12667d; border-color:#12667d }
#tts[aria-pressed="false"] .waves,#tts[aria-pressed="true"] .mute { display:none }
#speech-status { margin:0; text-align:center; font-size:13px; color:#874526; grid-column:1/-1 }
.recording .stop { display:block }
.recording svg { display:none }
.languages { display:flex; align-items:end; gap:12px; max-width:100% }
.languages span { line-height:41px; color:#667586 }
.languages label { display:grid; gap:4px; font-size:12px; color:#576577; min-width:0 }
select { width:clamp(100px,17vw,175px); max-width:100%; min-height:40px; border:1px solid #c7d1db; border-radius:9px; background:white; padding:0 8px; color:#203044; font:inherit; font-size:15px }
:focus-visible { outline:3px solid #197aa0; outline-offset:-3px }
@media (max-width:600px) { header { padding:12px 16px; font-size:19px } header img { width:28px;height:28px } main { width:calc(100% - 20px) } h1 { margin:8px 0 16px } .panel { height:calc(100dvh - 128px - env(safe-area-inset-bottom)); border-radius:17px } .languages { gap:8px } select { width:min(34vw,155px) } }
@media (max-height:480px) { header { position:absolute; padding:5px 10px;font-size:15px } header img { width:20px;height:20px } h1 { font-size:18px; margin:6px 0 } .panel { height:calc(100dvh - 48px); min-height:155px } .controls { grid-template-columns:auto auto; justify-content:center; align-items:center; gap:4px 12px; padding:4px } #status { grid-column:1/-1 } #mic { width:44px;height:44px } }