:root { --bg:#111516; --surface:#171c1d; --surface-2:#1c2223; --surface-alt:#151a1b; --line:#2a3233; --text:#edf0ea; --text-secondary:#cbd1cd; --muted:#8f9894; --muted-2:#7f8985; --placeholder:#66706d; --empty-text:#6d7774; --empty-star:#55605b; --topbar-bg:rgba(17,21,22,.94); --chip-bg:#141819; --chip-active-bg:#2a3030; --panel-bg:#191f20; --input-bg:#121617; --input-btn-bg:#202627; --input-btn-text:#aeb5b2; --lime:#c8f859; --lime-dark:#a9d54a; --lime-ink:#c8f859; --lime-border:#c8f85955; --dot-glow:#c8f85915; --blue:#68aefb; --warn:#f5c26b; --error:#ff8f8f; }
:root[data-theme="light"] { --bg:#f5f6f2; --surface:#ffffff; --surface-2:#eef1ea; --surface-alt:#eff2ea; --line:#dde2d9; --text:#161a17; --text-secondary:#3d453f; --muted:#69726c; --muted-2:#5c6660; --placeholder:#8a938c; --empty-text:#8a938c; --empty-star:#a7afa8; --topbar-bg:rgba(255,255,255,.92); --chip-bg:#eef1ea; --chip-active-bg:#ffffff; --panel-bg:#ffffff; --input-bg:#f2f4ef; --input-btn-bg:#e6e9e1; --input-btn-text:#4b5349; --lime-ink:#5f8a1a; --lime-border:#5f8a1a40; --dot-glow:#5f8a1a22; --warn:#a46200; --error:#c62828; }
* { box-sizing:border-box; } body { margin:0; color:var(--text); background:var(--bg); font-family:Manrope,"Noto Sans JP",sans-serif; min-height:100vh; transition:background-color .2s ease, color .2s ease; }
button,input,textarea { font:inherit; } button { color:inherit; cursor:pointer; } .app-shell { min-height:100vh; display:flex; flex-direction:column; }
.topbar { height:88px; padding:0 48px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:46px; background:var(--topbar-bg); }
.brand { display:flex; align-items:center; gap:12px; color:var(--text); text-decoration:none; font-size:22px; font-weight:800; letter-spacing:-.7px; } .brand-mark { width:28px; height:28px; border-radius:7px; display:block; flex:none; box-shadow:0 0 0 1px var(--line); }
.provider-switcher { display:flex; gap:4px; padding:5px; border:1px solid var(--line); border-radius:13px; background:var(--chip-bg); } .provider { border:0; background:transparent; border-radius:9px; color:var(--muted); display:flex; gap:8px; align-items:center; padding:9px 14px; font-weight:700; font-size:13px; transition:.2s; } .provider:hover{color:var(--text)} .provider.active { background:var(--chip-active-bg); color:var(--text); box-shadow:0 1px 2px #0005; }
.provider-orb { width:18px; height:18px; display:grid; place-items:center; border-radius:50%; font-size:12px; line-height:1; } .openai{color:#101516;background:#e7eee7}.anthropic{color:#151617;background:#dfb594;font-size:10px}.gemini{color:#152140;background:linear-gradient(135deg,#80c7ff,#d6aaff)}
.icon-button { border:1px solid transparent; background:transparent; border-radius:10px; padding:9px; display:grid; place-items:center; } .icon-button:hover { background:var(--surface-2); border-color:var(--line); } .icon-button svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .settings-trigger { color:var(--text-secondary); } .theme-toggle { margin-left:auto; color:var(--text-secondary); } .theme-toggle .icon-moon { display:none; } :root[data-theme="light"] .theme-toggle .icon-sun { display:none; } :root[data-theme="light"] .theme-toggle .icon-moon { display:block; }
.workspace { flex:1; width:min(1320px, calc(100% - 64px)); margin:0 auto; padding:42px 0 27px; display:flex; flex-direction:column; }.language-strip { display:grid; grid-template-columns:minmax(0,1fr) 62px minmax(0,1fr); align-items:center; width:100%; margin-bottom:17px; }.language { display:flex; align-items:center; gap:10px; font-size:14px; font-weight:700; color:var(--text-secondary); }.source-language { justify-content:flex-end; padding-right:18px; }.target-language { padding-left:18px; }.target-select,.custom-target{border:1px solid var(--line);background:var(--surface-2);color:var(--text-secondary);font:inherit;padding:6px 10px;border-radius:9px;min-width:0}.target-select:focus,.custom-target:focus{outline:0;border-color:var(--lime)}.custom-target{width:180px;max-width:100%}.custom-target[hidden]{display:none}.status-dot{width:7px;height:7px;border-radius:99px;background:var(--lime);box-shadow:0 0 0 4px var(--dot-glow)}.swap-button{width:38px;height:38px;justify-self:center;border-radius:50%;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;transition:.2s}.swap-button:hover{border-color:var(--lime);color:var(--lime);transform:rotate(180deg)}.swap-button svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;width:20px}
.panes { flex:1; min-height:480px; display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:0 18px 60px #0002; }.pane { min-width:0; display:flex; flex-direction:column; min-height:480px; background:var(--surface); }.input-pane{border-right:1px solid var(--line)}.output-pane{background:var(--surface-alt)}.pane-head,.pane-footer{height:58px;padding:0 23px;display:flex;align-items:center;justify-content:space-between;border-color:var(--line);color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.03em}.pane-head{border-bottom:1px solid var(--line)}.pane-footer{border-top:1px solid var(--line);margin-top:auto}.text-button{border:0;background:transparent;color:var(--muted);font-size:12px;padding:6px;}.text-button:hover{color:var(--text)}.pane-head-left{display:flex;align-items:center;gap:12px;min-width:0}.mode-select{border:1px solid var(--line);background:var(--surface-2);color:var(--text-secondary);font:11px "DM Mono",monospace;padding:5px 8px;border-radius:8px;max-width:180px}textarea{flex:1;resize:none;border:0;outline:0;background:transparent;color:var(--text);padding:28px 27px;font-family:"Noto Sans JP",Manrope,sans-serif;font-size:25px;line-height:1.7;letter-spacing:-.5px}textarea::placeholder{color:var(--placeholder)}.model-label{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.08em;color:var(--lime-ink);border:1px solid var(--lime-border);padding:5px 8px;border-radius:99px;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.translation{flex:1;padding:28px 27px;font-family:"Noto Sans JP",Manrope,sans-serif;font-size:25px;line-height:1.7;letter-spacing:-.5px;white-space:pre-wrap}.empty-state{height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;color:var(--empty-text);font-family:Manrope,sans-serif;font-size:14px}.empty-state p{margin:0}.empty-star{color:var(--empty-star);font-size:20px}.copy-button{border:0;background:transparent;color:var(--muted);padding:6px;display:grid;place-items:center}.copy-button:hover{color:var(--text)}.copy-button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.repo-link{margin:18px 0 0;font-size:13px}.repo-link a{color:var(--lime-ink);text-decoration:none}.repo-link a:hover{text-decoration:underline}.commit-hash{margin:6px 0 0;color:var(--muted);font-family:"DM Mono",monospace;font-size:10px;opacity:.6}.commit-hash:has(span:empty){display:none}
footer{width:min(1320px,calc(100% - 64px));margin:0 auto;height:52px;color:var(--muted);font-size:11px;display:flex;align-items:center;justify-content:space-between}.app-shell footer i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--lime);margin-right:7px}
.scrim{position:fixed;inset:0;background:#0008;opacity:0;visibility:hidden;transition:.25s;z-index:5}.settings-panel{position:fixed;z-index:6;right:0;top:0;height:100dvh;width:min(420px,100vw);background:var(--panel-bg);border-left:1px solid var(--line);padding:36px;transform:translateX(100%);transition:.28s ease;box-shadow:-20px 0 60px #0004;overflow-y:auto}.settings-panel.open{transform:translateX(0)}.scrim.show{opacity:1;visibility:visible}.settings-head{display:flex;justify-content:space-between;align-items:flex-start}.eyebrow{font:10px "DM Mono",monospace;letter-spacing:.12em;color:var(--lime-ink);margin:0 0 8px}.settings-head h2{font-size:25px;margin:0;letter-spacing:-1px}.close-settings{font-size:26px;line-height:20px;color:var(--muted)}.settings-description{margin:32px 0 28px;color:var(--muted-2);font-size:13px;line-height:1.8}.field-label{display:block;color:var(--text-secondary);font-size:12px;font-weight:700;margin:19px 0 9px}.field-label span{color:var(--lime-ink);font-weight:500;margin-left:5px}.key-field{display:flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--input-bg)}.key-field input,.model-input{color:var(--text);border:0;outline:0;background:transparent;width:100%;padding:13px;font:13px "DM Mono",monospace}.key-field button{border:0;border-left:1px solid var(--line);background:var(--input-btn-bg);color:var(--input-btn-text);padding:0 12px;font-size:11px}.model-input{border:1px solid var(--line);border-radius:9px}.save-button{border:0;background:var(--lime);color:#17200b;border-radius:9px;width:100%;margin-top:30px;padding:14px;font-size:13px;font-weight:800}.save-button:hover{background:#d5ff78}.security-note{font-size:11px;color:var(--muted-2);line-height:1.7;margin-top:18px}.toast{position:fixed;z-index:10;bottom:26px;left:50%;transform:translate(-50%,20px);background:#e8eee6;color:#172017;font-size:12px;font-weight:700;padding:10px 16px;border-radius:9px;opacity:0;visibility:hidden;transition:.2s}.toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}
.locked-state{display:flex;flex-direction:column;align-items:flex-start;gap:14px;font-size:15px;color:var(--text-secondary)}.locked-state p{margin:0}.unlock-button{border:0;background:var(--lime);color:#17200b;border-radius:9px;padding:11px 16px;font-size:13px;font-weight:800}.unlock-button:hover{background:#d5ff78}.unlock-button:disabled{opacity:.5;cursor:progress}.unlock-input{width:min(320px,100%);color:var(--text);background:var(--input-bg);border:1px solid var(--line);border-radius:9px;outline:0;padding:11px 13px;font:13px "DM Mono",monospace}.unlock-input:focus{border-color:var(--lime-border)}.unlock-error{color:var(--error);font-size:13px}.unlock-error:empty{display:none}.vault{margin-top:30px;padding-top:22px;border-top:1px solid var(--line)}.vault-title{font-size:13px;margin:0 0 4px;color:var(--text)}.vault-status{color:var(--muted-2);font-size:12px;line-height:1.8;margin:8px 0 12px}.vault-status.ok{color:var(--lime-ink)}.vault-status.warn{color:var(--warn)}.vault-input{display:block;width:100%;margin-bottom:8px;color:var(--text);background:var(--input-bg);border:1px solid var(--line);border-radius:9px;outline:0;padding:12px 13px;font:13px "DM Mono",monospace}.vault-input:focus{border-color:var(--lime-border)}.vault-buttons{display:flex;flex-wrap:wrap;gap:8px}.vault-button{border:1px solid var(--line);background:var(--input-btn-bg);color:var(--text-secondary);border-radius:9px;padding:10px 14px;font-size:12px;font-weight:700}.vault-button.primary{border-color:transparent;background:var(--lime);color:#17200b}.vault-button:disabled,.vault-link:disabled{opacity:.5;cursor:progress}.vault-link{border:0;background:transparent;color:var(--muted);font-size:11px;padding:10px 0 0;text-decoration:underline}.vault-options{display:grid;gap:6px;margin:12px 0 4px}.vault-option{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:9px;cursor:pointer}.vault-option:has(input:checked){border-color:var(--lime-border);background:var(--input-bg)}.vault-option:has(input:disabled:not(:checked)){opacity:.5;cursor:not-allowed}.vault-option input{margin:3px 0 0;accent-color:var(--lime-ink)}.vault-option strong{display:block;font-size:12px;color:var(--text)}.vault-option small{display:block;font-size:11px;color:var(--muted-2);line-height:1.6;margin-top:2px}.vault-error{color:var(--error);font-size:12px;line-height:1.7;margin:10px 0 0}
.footer-end{display:flex;align-items:center;gap:14px}.lang-switch{display:inline-flex;gap:2px;padding:2px;border:1px solid var(--line);border-radius:8px;background:var(--chip-bg)}.lang-switch button{border:0;background:transparent;color:var(--muted);font:700 10px/1 "DM Mono",monospace;letter-spacing:.06em;padding:4px 7px;border-radius:6px;cursor:pointer}.lang-switch button:hover{color:var(--text)}.lang-switch button[aria-pressed="true"]{background:var(--chip-active-bg);color:var(--text)}
@media (max-width:720px){.topbar{height:auto;padding:18px 14px;gap:10px}.brand>span:not(.brand-mark){display:none}.provider-switcher{margin-left:auto}.provider{padding:8px}.provider:not(.active){font-size:0}.provider:not(.active) .provider-orb{font-size:12px}.theme-toggle{margin-left:0}.workspace{width:calc(100% - 28px);padding-top:24px}.panes{grid-template-columns:1fr;overflow:visible;border-radius:14px}.pane{min-height:360px}.input-pane{border-right:0;border-bottom:1px solid var(--line)}.language-strip{margin-bottom:12px}.source-language{justify-content:flex-start}.target-language{justify-content:flex-end;flex-wrap:wrap;gap:6px;padding-left:0}.source-language{padding-right:0;white-space:nowrap}.target-select,.custom-target{width:100%}textarea,.translation{font-size:20px;padding:22px}.translation{min-height:230px}footer{width:calc(100% - 28px);font-size:10px;gap:10px}.footer-end>span:first-child{display:none}.settings-panel{padding:28px 22px}}
@media (max-width:380px){.provider.active{font-size:0;gap:0}.provider.active .provider-orb{font-size:12px}.provider.active .anthropic{font-size:10px}}
.demo-notice { display:flex; align-items:center; gap:12px; padding:10px 14px 10px 48px; border-bottom:1px solid var(--line); background:var(--surface-2); color:var(--text-secondary); font-size:13px; line-height:1.6; } .demo-notice p { flex:1; margin:0; text-align:center; } .demo-notice-close { flex:none; width:30px; height:30px; border:1px solid transparent; border-radius:8px; background:transparent; color:var(--muted); font-size:20px; line-height:1; display:grid; place-items:center; } .demo-notice-close:hover { color:var(--text); border-color:var(--line); background:var(--surface); } .demo-notice strong { color:var(--text); } .demo-notice a { color:var(--lime-ink); } .demo-notice[hidden] { display:none; }
@media (max-width:720px){.demo-notice{padding:8px 8px 8px 14px;font-size:12px}.demo-notice p{text-align:left}}