:root{font-family:ui-rounded,system-ui,-apple-system,'Segoe UI',sans-serif;font-synthesis:none;color:#2a2854;background:#f8f7ff}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(ellipse 520px 430px at 6% 9%,#f3d9ff 0%,transparent 68%),radial-gradient(ellipse 480px 480px at 102% 23%,#d9f9f5 0%,transparent 68%),radial-gradient(ellipse 450px 330px at 20% 76%,#ffebdb 0%,transparent 70%),#f9f8ff}button,textarea,input,select{font:inherit}button{cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}button:active:not(:disabled){transform:scale(.97)}button:disabled{cursor:not-allowed;opacity:.42}button:focus-visible,textarea:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #ff805f;outline-offset:3px}#app{max-width:760px;margin:auto;padding:max(19px,env(safe-area-inset-top)) 22px max(26px,env(safe-area-inset-bottom))}.topbar,.branding,.lang-info,.panel-head,.section-heading,.history-header,.mic-row{display:flex;align-items:center}.topbar{justify-content:space-between;gap:12px;margin-bottom:40px}.branding{gap:12px}.logo{position:relative;display:grid;place-items:center;flex:none;background:#7657f9;color:white;width:51px;height:51px;border-radius:17px;box-shadow:0 8px 0 #e1d9ff;font-size:26px;font-weight:1000;letter-spacing:-.12em;transform:rotate(-6deg)}.logo-spark{position:absolute;color:#ffdd61;right:-6px;top:-8px;font-size:19px;transform:rotate(6deg)}.brand h1{margin:0;font-size:32px;letter-spacing:-.075em;font-weight:900;line-height:1}.brand .dot{color:#fa7a67}.brand p{font-size:9px;letter-spacing:.17em;margin:5px 0 0;font-weight:850;color:#8682a9}.live-pill{white-space:nowrap;background:#e6faf1;color:#167c59;font-size:10px;font-weight:900;letter-spacing:.04em;border:1px solid #b9ebd6;border-radius:100px;padding:10px 12px;display:flex;align-items:center;gap:7px}.live-dot{height:8px;width:8px;background:#21c18e;border-radius:50%;box-shadow:0 0 0 3px #5ce2b52d}.intro{margin-bottom:25px}.intro-kicker{font-size:11px;letter-spacing:.17em;font-weight:900;color:#7957df}.star{color:#fe9b69;margin:0 6px}.intro h2{font-size:clamp(37px,7.7vw,56px);line-height:1.06;letter-spacing:-.064em;font-weight:950;margin:12px 0}.intro h2 span{color:#7957f6}.intro p{color:#77759b;font-size:15px;line-height:1.55;margin:0;max-width:540px}.status{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid #eceaf9;border-radius:40px;padding:11px 16px;box-shadow:0 5px 18px #30205d0b;font-size:12px;font-weight:750;color:#575477;margin:0 0 16px}.status-dot{width:9px;height:9px;border-radius:50%;background:#39c59a;box-shadow:0 0 0 4px #dcfff4}.status[data-stage=listening] .status-dot{background:#ff6b79;box-shadow:0 0 0 4px #ffe5e8;animation:pulse 1s infinite}.status[data-stage=speaking] .status-dot{background:#ffb83a;box-shadow:0 0 0 4px #fff3d7}@keyframes pulse{50%{transform:scale(.7);opacity:.6}}.alert{border-radius:14px;background:#fff0ed;color:#953d42;border:1px solid #ffc9bf;padding:13px 16px;margin:0 0 16px;font-size:13px;line-height:1.5}.alert[hidden],[hidden]{display:none!important}.workspace{position:relative}.panel{border-radius:25px;padding:23px 23px 16px;background:#fff;border:1px solid #e7e5f9;box-shadow:0 12px 32px #524f9d0c;min-height:210px}.source-panel{border-left:6px solid #7459fa}.target-panel{background:linear-gradient(140deg,#edfcfc,#f3faff);border:1px solid #b8e9ea;border-left:6px solid #38bdb7}.panel-head{justify-content:space-between;gap:9px;margin-bottom:20px}.lang-info{gap:12px;min-width:0}.flag{display:grid;place-items:center;width:46px;height:46px;background:#f4f0ff;border-radius:15px;font-size:25px;flex:none}.target-panel .flag{background:#d7f7f5}.panel-eyebrow{font-size:10px;letter-spacing:.11em;font-weight:900;color:#968eb6}.target-panel .panel-eyebrow{color:#5c9ea9}.panel-head h3{font-size:24px;line-height:1.1;letter-spacing:-.055em;margin:3px 0 0;font-weight:900;color:#302b5b}.target-panel h3{color:#156a77}.sound-button{background:#f0edff;border:0;border-radius:100px;padding:10px 13px;display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:850;color:#684be3;white-space:nowrap}.sound-button:not(:disabled):hover{background:#e5ddff}.target-sound{background:#d4f5f2;color:#0a8382}.target-sound:not(:disabled):hover{background:#beeeeb}textarea{width:100%;min-height:104px;resize:vertical;background:transparent;border:0;outline:none;padding:0;color:#312c57;font-size:19px;line-height:1.52}textarea::placeholder{color:#aaa5c7}.translation{margin:0;min-height:104px;font-size:21px;line-height:1.46;white-space:pre-wrap;overflow-wrap:anywhere;color:#185c69;font-weight:600}.translation.placeholder{color:#82afb3;font-weight:450}.panel-foot{display:flex;gap:6px;align-items:center;font-size:9px;letter-spacing:.15em;font-weight:900;color:#ada8cc}.tiny-spark{font-size:13px;color:#fbae78}.target-panel .panel-foot{color:#83b9ba}.swap-wrap{position:relative;height:84px;display:flex;justify-content:center;align-items:center;gap:14px}.connector-line{height:100%;width:2px;background:repeating-linear-gradient(to bottom,#bfb7f9 0 5px,transparent 5px 11px);position:absolute;left:50%;transform:translateX(-50%)}.swap-button{width:58px;height:58px;position:relative;z-index:1;border-radius:21px;border:4px solid #f9f8ff;background:#ffb96e;color:#572c75;box-shadow:0 5px 0 #e3a36b,0 13px 22px #ee9b7b42;display:grid;place-items:center;transform:rotate(-7deg)}.swap-button:hover{background:#ffcb8e;box-shadow:0 7px 0 #e3a36b,0 15px 23px #ee9b7b42}.swap-button:active:not(:disabled){transform:scale(.96) rotate(-7deg)}.direction-pill{position:absolute;left:calc(50% + 47px);top:30px;font-size:10px;letter-spacing:.035em;color:#775cab;font-weight:900;white-space:nowrap;background:#fff;border:1px solid #eee9fa;border-radius:50px;padding:7px 11px}.controls{margin:25px 0 37px}.mic-row{gap:12px}.primary-button{display:inline-flex;align-items:center;justify-content:center;gap:11px;flex:1;padding:19px 12px;border-radius:19px;border:0;background:linear-gradient(110deg,#8058fa,#684bed);box-shadow:0 7px 0 #5034c8,0 15px 25px #7e65d840;color:white;font-size:17px;font-weight:900}.secondary-button{border:2px solid #e7e2f9;border-radius:19px;background:#fff;color:#675b8d;display:inline-flex;align-items:center;justify-content:center;gap:7px;font-weight:850;font-size:14px;padding:18px 19px}.text-button{display:block;margin:23px auto 0;border:0;background:transparent;color:#7455e8;font-size:14px;font-weight:850;padding:10px}.text-button span{font-size:18px;margin-left:3px}.preferences{display:flex;justify-content:center;margin-top:12px}.toggle-row{display:flex;gap:9px;align-items:center;color:#696483;font-size:13px;font-weight:550}.toggle-row input{width:18px;height:18px;accent-color:#7455e8}.instructions{background:linear-gradient(120deg,#fffaf0,#fff6ed);border:1px solid #fbe5c9;padding:23px;border-radius:24px;margin:0 0 32px}.section-heading{gap:9px}.section-heading h3{font-size:21px;letter-spacing:-.04em;margin:0;font-weight:900}.heading-icon{background:#ffcb75;display:grid;place-items:center;width:30px;height:30px;border-radius:10px;color:#91503b;font-size:21px}.instructions ol{padding:0;margin:19px 0 0;list-style:none}.instructions li{display:flex;gap:13px;align-items:flex-start;color:#555272;font-size:14px;line-height:1.55;margin:0 0 15px}.step-num{display:inline-flex;align-items:center;justify-content:center;flex:none;border-radius:10px;width:33px;height:33px;font-weight:900;font-size:12px;color:#7957d6;background:#eee6ff}.instructions strong{color:#302b55}.tip{border-top:1px solid #f6e1cd;padding-top:12px;margin:4px 0 0;color:#8b7b75;font-size:12px;line-height:1.5}.history-section{margin:0 0 28px}.history-header{justify-content:space-between;gap:8px;margin-bottom:14px}.history-icon{background:#d9f9f4;color:#168781;font-size:20px}.clear-button{border:0;background:transparent;color:#8868df;font-size:12px;font-weight:850;padding:10px}.history-empty{border:2px dashed #dcd6f3;border-radius:18px;text-align:center;padding:22px 10px;color:#a09bb9;background:#ffffffa1;font-size:13px}.history-card{border:1px solid #e4e1f7;border-radius:17px;background:#fff;padding:12px 15px;margin:10px 0;box-shadow:0 5px 15px #38326a08}.history-entry{display:flex;justify-content:space-between;align-items:center;gap:10px}.history-entry+.history-entry{border-top:1px solid #f0edfb;margin-top:10px;padding-top:10px}.history-entry p{margin:0;font-size:14px;line-height:1.55;color:#393458;overflow-wrap:anywhere}.history-entry button{border:0;background:#f1effe;color:#7559e4;border-radius:9px;padding:7px 9px;font-weight:750;font-size:11px;white-space:nowrap}.history-entry:last-child button{background:#e9f8f5;color:#258781}.extras{display:grid;gap:15px}.tools-details{background:#fff;border:1px solid #e9e4f4;border-radius:16px;padding:15px 18px}.tools-details summary{font-weight:850;font-size:13px;color:#797196;cursor:pointer}.outline-button{border:1px solid #cbc0ef;color:#644ac5;border-radius:12px;background:#faf9ff;padding:12px 15px;font-size:13px;font-weight:750;margin:13px 0 0}.connection-status,.diagnostic-copy{font-size:12px;color:#817b9c;line-height:1.5;margin:9px 0 0;overflow-wrap:anywhere}.install-section{background:linear-gradient(115deg,#dcd6ff,#d5f8f4);border-radius:18px;padding:19px;display:flex;align-items:center;justify-content:space-between;gap:12px}.install-section h3{margin:0 0 7px;font-size:17px;letter-spacing:-.03em}.install-section p{font-size:12px;color:#68668b;line-height:1.5;margin:0}.install-section .outline-button{flex:none;margin:0;background:white}footer{text-align:center;letter-spacing:.13em;font-size:9px;color:#aaa4c2;margin:35px 0 0;font-weight:850}footer span{color:#ffa05a;margin:0 7px}@media(max-width:570px){#app{padding-left:15px;padding-right:15px}.topbar{margin-bottom:33px}.live-pill{font-size:9px;padding:9px}.brand h1{font-size:29px}.intro h2{font-size:clamp(35px,9vw,47px)}.panel{padding:18px 16px 14px;min-height:205px}.flag{width:43px;height:43px}.panel-head h3{font-size:22px}.sound-button{padding:9px 11px}.direction-pill{left:calc(50% + 40px);font-size:8px;padding:6px}.mic-row{gap:8px}.primary-button{font-size:14px;padding:17px 9px}.secondary-button{padding:14px 13px}.instructions{padding:18px}.section-heading h3{font-size:19px}}@media(max-width:375px){.live-pill{font-size:8px;padding:8px}.brand p{font-size:8px}.panel-head{gap:5px}.sound-button{gap:4px;font-size:11px;padding:8px}.lang-info{gap:8px}.intro-kicker{font-size:9px}.direction-pill{position:static;margin-left:83px}.swap-wrap{justify-content:center}.connector-line{display:none}}

/* v1.4 — language selection stays inside both original colourful panels. */
.lang-picker{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.language-select{display:block;max-width:100%;width:clamp(135px,30vw,240px);min-width:0;appearance:none;-webkit-appearance:none;border:1px solid transparent;border-radius:11px;color:#302b5b;font-weight:900;font-size:21px;letter-spacing:-.035em;line-height:1.15;padding:5px 25px 5px 6px;background-color:#f3efff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%237257dc' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 5px center;cursor:pointer;text-overflow:ellipsis}
.language-select:hover{border-color:#b8a5fd;background-color:#eee8ff}
.target-panel .language-select{color:#156a77;background-color:#def7f5;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%230a8382' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
.target-panel .language-select:hover{border-color:#53c6c0;background-color:#d0f4f0}
.language-select option{color:#252345;background:#fff;font-weight:600}
@media(max-width:570px){.language-select{width:clamp(120px,40vw,205px);font-size:19px;padding-left:5px}.lang-info{gap:9px}.panel-head{gap:6px}.sound-button{padding:9px 9px}}
@media(max-width:390px){.language-select{width:clamp(108px,36vw,150px);font-size:17px}.flag{width:37px;height:43px;font-size:23px}.sound-button{padding:8px 7px;font-size:10px;gap:4px}.sound-button svg{width:16px}.direction-pill{font-size:9px}}

/* LingoFizz v1.6: official icon and optional brand pages link. */
.logo.logo-image{background:none;box-shadow:0 5px 18px #8759e84a;border-radius:16px;overflow:hidden;transform:none}
.logo.logo-image img{display:block;width:100%;height:100%;object-fit:cover;border-radius:16px}
.brand-more{text-align:center;margin:0 0 12px;font-size:12px;line-height:1.6;color:#8a7fa8}
.brand-more a{font-weight:800;color:#7354de;text-decoration:none}
.brand-more a:hover{text-decoration:underline}