/* JT World — midnight plum, soft porcelain, and luminous violet. */
:root{color-scheme:dark;--bg:#14101e;--paper:#20192d;--ink:#f6f1e9;--muted:#aaa1b7;--line:#ffffff12;--accent:#b99aee;--sage:#292036;--green:#baa1e0;--serif:Georgia,'Times New Roman',serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Segoe UI',Arial,sans-serif;font-size:14px;-webkit-font-smoothing:antialiased}
body:before{content:'';position:fixed;inset:0;z-index:-1;background:radial-gradient(ellipse at 90% 12%,#59348b1f,transparent 43%),radial-gradient(ellipse at 38% 85%,#51376212,transparent 45%);pointer-events:none}
button,input,textarea,select{font:inherit}button{color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button,a,select,input,textarea{-webkit-tap-highlight-color:transparent;outline-offset:5px}button:focus-visible,a:focus-visible,select:focus-visible,textarea:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--accent)}button:disabled{cursor:wait;opacity:.45}button,a{transition:background .2s,color .2s,border-color .2s,transform .2s}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.svg-library{position:absolute;width:0;height:0}[hidden]{display:none!important}
.sidebar{position:fixed;inset:0 auto 0 0;width:240px;display:flex;flex-direction:column;padding:36px 24px 25px;border-right:1px solid var(--line);background:linear-gradient(165deg,#1e1729,#16111f 55%);z-index:5}
.brand{display:flex;align-items:center;gap:12px;font-size:22px;font-weight:500;letter-spacing:-.6px;white-space:nowrap}.brand-mark{display:grid;place-items:center;width:40px;height:40px;flex-shrink:0;font-family:var(--serif);font-size:18px;letter-spacing:-2px;font-style:italic;color:#e7d7ff;border:1px solid #ad89e252;background:linear-gradient(145deg,#b492eb25,#291c3d);border-radius:11px;box-shadow:inset 0 1px 0 #dcc3ff25}.brand-dot{color:var(--accent)}
.sidebar-main{margin-top:64px;flex:1;overflow:auto}.eyebrow{font-size:9px;font-weight:500;letter-spacing:2px;color:#978ca6;margin:0 0 18px}.nav-item{width:100%;display:flex;align-items:center;gap:12px;padding:14px 11px;background:linear-gradient(100deg,#ae83e824,#ae83e807);border:1px solid #b98bf51c;border-radius:7px;color:#decbf7;font-size:11px;text-align:left}.nav-item svg{width:16px}.nav-item span{margin-left:auto;color:#b791e5}.nav-item:hover{background:#a777e932;border-color:#b98bf54d}.history-heading{display:flex;align-items:baseline;justify-content:space-between;margin-top:43px}.text-button{background:none;border:0;padding:0;color:var(--muted);font-size:11px}.text-button:hover{color:#e2ccff}.history-empty{padding:24px 4px;border-top:1px solid var(--line)}.history-empty svg{color:#8b749f;width:19px}.history-empty p{color:#b4a9c0;line-height:1.8;font-family:var(--serif);font-size:15px;font-style:italic}.history-empty>span{font-size:10px;color:#867a96;line-height:1.6}.history-entry{display:block;width:100%;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--line);padding:17px 5px}.history-entry:hover{background:#ac7be90c}.history-entry strong{display:block;font-size:9px;color:#bda3d8;letter-spacing:.5px;font-weight:400;margin-bottom:8px}.history-entry>span{display:block;font-size:12px;color:#d5cddd;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sidebar-bottom{display:flex;gap:10px;align-items:center;border-top:1px solid var(--line);padding-top:23px}.small-mark{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:#ad82df10;border:1px solid #ba9ad12e;color:#d1b8f2;font-family:var(--serif);font-style:italic;font-size:12px}.sidebar-bottom strong{display:block;font-size:10px;font-weight:400}.sidebar-bottom span:not(.live-dot){font-size:9px;color:#95869f}.live-dot,.connection i{width:5px;height:5px;display:inline-block;background:#b8d2a5;border-radius:50%;box-shadow:0 0 9px #afdc8f40}.sidebar-bottom .live-dot{margin-left:auto}
main{margin-left:240px}.topbar{height:89px;padding:0 56px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.topbar>span{font-size:9px;color:#a294b1;letter-spacing:2px}.topbar b{font-weight:400;color:#665174;margin:0 14px}.how-button{display:flex;align-items:center;gap:20px;background:transparent;border:0;color:#cdc0db;font-size:11px;padding:8px 0}.how-button:hover{color:#fff}.how-button span{color:#be98ed}.page-content{max-width:1280px;margin:auto;padding:48px 56px 0}
.intro{display:flex;position:relative;justify-content:space-between;align-items:center;padding-bottom:43px;margin-bottom:26px}.section-label{display:flex;align-items:center;gap:10px;font-size:9px;font-weight:500;letter-spacing:2.7px;color:#b599d4}.section-label>span{width:5px;height:5px;background:#b98cfa;border-radius:50%;box-shadow:0 0 15px #ba85ff99}h1{font-family:var(--serif);font-size:clamp(38px,4.6vw,69px);font-weight:400;line-height:1.1;letter-spacing:-2.5px;margin:23px 0 21px}h1 em{font-weight:400;color:#c3a6e7}.intro p{font-size:12px;line-height:1.8;color:#a79bb5;margin:0;letter-spacing:.1px}.hero-index{position:absolute;bottom:0;right:0;font-size:8px;letter-spacing:2px;color:#7c6b8d}.intro-seal{position:relative;display:flex;flex-direction:column;align-items:center;gap:20px;margin:0 10px 0 18px;color:#c6a5ef;transform:rotate(9deg)}.intro-seal>svg{width:87px;height:87px;stroke-width:.55;position:relative;filter:drop-shadow(0 0 17px #b585ef4d)}.intro-seal>span{font-size:7px;letter-spacing:2px;text-align:center;line-height:1.8;color:#9f86b9}.globe-halo{position:absolute;top:-16px;left:50%;transform:translateX(-50%);width:120px;height:120px;border:1px solid #bc8be529;border-radius:50%;background:radial-gradient(circle,#b582f41a,transparent 65%);box-shadow:0 0 60px #8a49ca12}
.voice-settings{border:1px solid #a687be23;border-radius:9px;margin-bottom:20px;background:#21182c88;color:#d4c4e4;overflow:hidden}.voice-settings summary{padding:14px 20px;display:flex;align-items:center;gap:11px;cursor:pointer;list-style:none;font-size:11px}.voice-settings summary::-webkit-details-marker{display:none}.settings-icon{font-size:21px;line-height:1;color:#c6a5ed}.settings-caption{margin-left:auto;color:#9c89af;font-size:10px}.settings-plus{font-size:17px;margin-left:12px;color:#bc9cdc}.voice-settings[open] .settings-plus{transform:rotate(45deg)}.voice-settings[open] summary{border-bottom:1px solid var(--line);margin-bottom:20px}.voice-settings>label{display:block;font-size:12px;margin:0 22px}.voice-settings>label>span{font-size:10px;color:#ac99be;margin-left:12px}.key-controls{display:flex;gap:15px;align-items:center;margin:14px 22px 0}.key-controls input{min-width:0;flex:1;width:100%;border:1px solid #a281bd38;background:#14101e;border-radius:5px;padding:11px 13px;color:#f6f1ff;font-size:12px}.key-controls button{flex-shrink:0}.voice-settings p{font-size:10px;line-height:1.7;margin:12px 22px;color:#aa98bd}.voice-settings #keyStatus{color:#d7baf7;margin-bottom:19px}
.studio{position:relative;background:linear-gradient(125deg,#261d33,#1e1829 60%);border:1px solid #bea0e12a;border-radius:16px;overflow:hidden;box-shadow:0 18px 60px #09070d38,inset 0 1px 0 #e0c5ff12}.studio-toolbar{display:flex;justify-content:space-between;align-items:center;padding:20px 28px;border-bottom:1px solid var(--line)}.mode-switch{display:flex;gap:4px;background:#130e1e70;padding:4px;border:1px solid #d0a5ff0c;border-radius:7px}.mode-switch button{display:flex;align-items:center;gap:8px;border:0;border-radius:4px;background:transparent;padding:8px 20px;color:#aa97bc;font-size:11px}.mode-switch button.selected{color:#eee2fd;background:#50346580;box-shadow:inset 0 1px 0 #d9aaff20,0 2px 4px #0002}.mode-switch button:hover{color:#f3eaff}.mode-switch svg{width:13px;height:13px}.type-icon{font-family:var(--serif);font-size:16px;line-height:12px}.connection{display:flex;gap:8px;align-items:center;font-size:9px;letter-spacing:.5px;color:#b9b1c2}.connection.offline{color:#e5adac}.connection.offline i{background:#dc8a86}
.language-row{display:grid;grid-template-columns:1fr 42px 1fr;align-items:center;margin:24px 28px 0;padding:16px 22px;border:1px solid #b496d42b;border-radius:8px;background:#150f2040}.language-row label{display:flex;flex-direction:column;gap:9px;min-width:0}.language-row label:last-child{padding-left:24px}.language-row label>span{font-size:8px;letter-spacing:2.2px;color:#a68dbb}.language-row select{width:100%;border:0;background:transparent;color:#ece0f7;font-size:18px;font-family:var(--serif);padding:0 6px 0 0;cursor:pointer}.language-row option,.record-options option{background:#251c32;color:#f7f0ff}.swap-button{display:grid;place-items:center;width:35px;height:35px;background:#31223e;border:1px solid #ba95df30;border-radius:50%;color:#cdb0eb}.swap-button svg{width:15px}.swap-button:hover{transform:rotate(180deg);border-color:#ac7edf;background:#463057}
.voice-panel{text-align:center;padding:31px 20px 28px;position:relative;background:radial-gradient(ellipse at 50% 43%,#9058ca12,transparent 60%)}.recording-badge{font-size:8px;letter-spacing:2.1px;color:#9e87b5}.voice-visual{height:194px;position:relative;display:flex;align-items:center;justify-content:center;max-width:680px;margin:15px auto 0}.voice-visual:before{content:'';position:absolute;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,#a36ed72b,transparent 67%);filter:blur(12px)}.orbit{position:absolute;border:1px solid #b78be62b;border-radius:50%;height:136px;width:136px}.orbit-two{height:181px;width:181px;border-color:#b78be619}.orbit-three{height:225px;width:225px;border-color:#b78be60c}.record-button{position:relative;z-index:2;width:100px;height:100px;display:grid;place-items:center;color:#fff5ff;border:1px solid #e5c6ff7a;border-radius:50%;background:radial-gradient(circle at 30% 15%,#d5b4f5,#9d6ac3 38%,#754694 68%,#412950);box-shadow:inset 0 2px 5px #f5e5ff52,inset 0 -8px 15px #1c0b2f55,0 0 0 7px #bc8eed0b,0 9px 40px #ad69e933;transition:transform .25s,box-shadow .25s}.record-button:after{content:'';position:absolute;inset:4px;border-radius:50%;border-top:1px solid #fff8;transform:rotate(-25deg);pointer-events:none}.record-button:hover{transform:translateY(-3px);box-shadow:inset 0 2px 5px #f5e5ff52,inset 0 -8px 15px #1c0b2f55,0 0 0 9px #bc8eed15,0 12px 45px #ad69e95c}.record-button svg{width:29px;height:29px;stroke-width:1.5}.stop-shape{display:none;width:20px;height:20px;border-radius:4px;background:#fff1ff}.recording .stop-shape{display:block}.recording .record-button svg{display:none}.recording .orbit{animation:breathe 1.7s infinite}.recording .orbit-two{animation-delay:.3s}.recording .orbit-three{animation-delay:.6s}.recording .recording-badge{color:#e5c8ff}#waveform{position:absolute;inset:0;width:100%;height:100%;opacity:.55}.orbit-spark{position:absolute;left:calc(50% + 80px);top:29px;height:4px;width:4px;border-radius:50%;background:#dab4ff;box-shadow:0 0 10px #c783ff}.spark-two{left:calc(50% - 88px);top:138px;width:3px;height:3px;background:#b18bc7}.voice-panel h2{font:400 27px/1.3 var(--serif);letter-spacing:-.6px;margin:15px 0 9px;color:#efe4f4}.voice-panel>p{font-size:11px;color:#ab98bc;margin:0;line-height:1.8}.record-options{display:flex;align-items:center;justify-content:center;gap:15px;font-size:9px;margin-top:22px;color:#ae98be}.record-options>span:first-child{font-variant-numeric:tabular-nums;letter-spacing:1px}.option-divider{width:1px;height:10px;background:#a186b838}.record-options select{font-size:9px;background:none;border:0;color:#d9b9f4;cursor:pointer;padding:3px}.studio-bottom{display:flex;align-items:center;justify-content:space-between;padding:18px 28px;border-top:1px solid var(--line);background:#140e1f40;font-size:9px;color:#a993b8}.studio-bottom>span{display:flex;align-items:center;gap:8px}.studio-bottom svg{width:14px;height:14px;color:#be9ddb}.switch-label{display:flex;position:relative;align-items:center;gap:9px;cursor:pointer}.switch-label input{position:absolute;opacity:0;width:28px;height:18px}.toggle{width:27px;height:15px;padding:3px;border-radius:20px;background:#52415f;transition:background .2s}.toggle:after{content:'';display:block;width:9px;height:9px;border-radius:50%;background:#efe0ff;transition:transform .2s}.switch-label input:checked+.toggle{background:#9770bd}.switch-label input:checked+.toggle:after{transform:translateX(12px)}.switch-label input:focus-visible+.toggle{outline:2px solid #dfbdff;outline-offset:4px}
.text-panel{padding:34px 29px;min-height:366px}.text-panel>label{font:27px var(--serif);display:block;margin-bottom:22px}.text-panel textarea{width:100%;min-height:181px;resize:vertical;background:none;border:0;font-size:17px;line-height:1.8;color:#e7d9f2}textarea::placeholder{color:#8c759e}.text-panel>div{display:flex;align-items:center;justify-content:space-between;margin-top:18px}.text-panel>div>span{font-size:10px;color:#ab92bd}.primary-button{display:flex;align-items:center;gap:21px;background:linear-gradient(125deg,#c5a0e9,#a678d0);border:1px solid #dcc0f4;border-radius:6px;padding:12px 20px;font-size:11px;font-weight:600;color:#251232;box-shadow:0 5px 20px #a673cb20}.primary-button:hover{transform:translateY(-2px);background:#d0aff0}.primary-button svg{width:16px}
.status-message{padding:15px 20px;margin-top:22px;font-size:12px;line-height:1.6;border-radius:8px;border:1px solid #b287de36;background:#372346;color:#e3c6fc}.status-message.error{background:#402431;border-color:#d091ad45;color:#f0bace}.result-panel{margin-top:33px;animation:appear .4s ease-out}.result-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px}.result-heading p{font-size:8px;margin:0}.result-heading>span{font-size:10px;color:#a68abb}.result-columns{display:grid;grid-template-columns:1fr 1fr;border:1px solid #c4a2e330;border-radius:12px;overflow:hidden;background:#21192d}.source-result,.target-result{min-width:0;padding:26px}.source-result{border-right:1px solid #c4a2e320}.source-result>label,.translation-label{font-size:8px;letter-spacing:1.8px;color:#b193c8}.source-result textarea{display:block;background:none;border:0;resize:vertical;width:100%;min-height:110px;color:#cfc0db;font-size:17px;line-height:1.7;margin:20px 0}.source-result .text-button{font-size:10px;color:#c2a0dd}.target-result{background:linear-gradient(130deg,#3e2a50,#30213d)}.translation-label{display:flex;align-items:center;justify-content:space-between;color:#d5b4ef}.target-result>p{font:26px/1.5 var(--serif);margin:16px 0 28px;overflow-wrap:anywhere;color:#f3e7ff}.icon-button{display:inline-flex;align-items:center;cursor:pointer;background:none;border:0;padding:4px;color:#d5b0ef}.icon-button:hover{color:#fff}.icon-button svg{width:15px;height:15px}.audio-actions{display:flex;align-items:center;gap:13px}.listen-button{display:flex;align-items:center;gap:8px;padding:9px 14px;background:#bc91df26;border:1px solid #d2adf247;border-radius:5px;font-size:11px;color:#e7cafb}.listen-button:hover{background:#bc91df45}.listen-button svg{width:13px;height:13px}.audio-actions>span{font-size:9px;color:#bca2ce}audio{width:100%;height:32px;margin-top:18px}
.language-footer{display:flex;align-items:center;justify-content:space-between;gap:22px;margin-top:37px;padding-bottom:31px;border-bottom:1px solid var(--line)}.language-footer .eyebrow{font-size:8px;letter-spacing:2px;color:#a78bbe}.language-footer p{font:17px var(--serif);font-style:italic;margin:9px 0 0;color:#c5b1d4}.language-chips{display:flex;flex-wrap:wrap;gap:8px}.language-chips span{background:#be99e20a;border:1px solid #c19fe024;border-radius:30px;padding:9px 15px;font-size:10px;color:#b9a1cc}.language-chips span:nth-child(3){background:#b38ad425;border-color:#bb95e144;color:#dfc3f5}footer{display:flex;justify-content:space-between;gap:20px;padding:23px 0 30px;font-size:8px;color:#a38eaf;line-height:1.9}footer .text-button{font-size:8px;color:#c2a0dc;margin-left:6px}
dialog{width:calc(100% - 36px);max-width:540px;background:linear-gradient(140deg,#2b2039,#191322);border:1px solid #ba94dc4d;border-radius:16px;padding:38px;color:#f3e8fb;box-shadow:0 30px 120px #0007}dialog::backdrop{background:#08050dbb;backdrop-filter:blur(9px)}.dialog-close{position:absolute;top:12px;right:18px;background:none;border:0;font-size:27px;color:#c4a3dd}dialog h2{font:36px/1.15 var(--serif);letter-spacing:-1px;margin:24px 0}dialog ol{padding-left:20px}dialog li{padding:10px 0 10px 7px;font-size:13px;color:#e3ceed}dialog li p{font-size:12px;line-height:1.7;color:#b7a1c7;margin:7px 0}.privacy-note{padding:18px;background:#b48dd414;border:1px solid #ba93db17;border-radius:8px;font-size:10px;color:#b49cc6;line-height:1.8}
@keyframes breathe{50%{transform:scale(1.07);opacity:.35}}@keyframes appear{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1600px){.page-content{padding-top:62px}.intro{padding-bottom:49px}.voice-panel{padding-top:37px;padding-bottom:36px}.voice-visual{height:217px}}
@media(max-width:1200px){.sidebar{width:216px;padding:32px 18px}.brand{font-size:20px}main{margin-left:216px}.page-content{padding:40px 34px 0}.topbar{padding:0 34px}.intro-seal{display:none}h1{font-size:clamp(39px,5vw,59px)}.language-footer{align-items:flex-start;flex-direction:column;gap:20px}.language-chips{gap:9px}.studio-toolbar{padding:18px 24px}}
@media(max-width:760px){.sidebar{position:static;inset:auto;width:100%;height:77px;padding:17px 22px;border-right:0;border-bottom:1px solid var(--line);flex-direction:row;align-items:center}.sidebar-main,.sidebar-bottom{display:none}.brand{font-size:20px;gap:10px}.brand-mark{height:34px;width:34px;font-size:16px}main{margin:0}.topbar{position:absolute;right:22px;top:19px;height:38px;border:0;padding:0}.topbar>span{display:none}.how-button{font-size:10px;gap:12px}.page-content{padding:34px 20px 0}.intro{margin-bottom:23px;padding-bottom:34px}.section-label{font-size:8px;letter-spacing:2px}h1{font-size:clamp(35px,6.8vw,49px);letter-spacing:-1.6px;line-height:1.14;margin:22px 0 17px}.intro p{font-size:11px}.hero-index{font-size:7px;letter-spacing:1.4px}.settings-caption{display:none}.settings-plus{margin-left:auto}.voice-settings summary{padding:13px 16px;font-size:10px}.voice-settings>label>span{display:block;margin:5px 0 0}.key-controls{gap:12px}.key-controls input{font-size:11px}.studio-toolbar{padding:15px}.mode-switch button{padding:7px 14px;font-size:10px}.connection{font-size:8px;letter-spacing:0}.connection i{width:4px;height:4px}.language-row{margin:17px 15px 0;padding:14px;grid-template-columns:1fr 36px 1fr}.language-row label:last-child{padding-left:12px}.language-row label>span{font-size:7px;letter-spacing:1.5px}.language-row select{font-size:17px}.swap-button{width:29px;height:29px}.voice-panel{padding:26px 13px}.recording-badge{font-size:6px;letter-spacing:1.6px}.voice-visual{height:184px}.orbit-three{height:208px;width:208px}.voice-panel h2{font-size:23px}.voice-panel>p{font-size:10px}.record-options{font-size:8px}.studio-bottom{justify-content:center;padding:16px}.studio-bottom>span{display:none}.text-panel{padding:28px 22px;min-height:345px}.text-panel>label{font-size:24px}.text-panel textarea{font-size:16px;min-height:174px}.primary-button{font-size:10px;padding:11px 15px;gap:10px}.result-columns{grid-template-columns:1fr}.source-result{border-right:0;border-bottom:1px solid var(--line)}.source-result textarea{min-height:75px}.source-result,.target-result{padding:23px}.language-footer{margin-top:30px}.language-chips{gap:7px}.language-chips span{padding:8px 11px;font-size:9px}footer{flex-direction:column;gap:7px;padding-bottom:24px}dialog{padding:29px}dialog h2{font-size:31px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}