:root{font-family:ui-rounded,"Hiragino Kaku Gothic ProN","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;color:#423544;background:#fff4e9}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 9% 9%,#ffe3c9 0,transparent 27%),radial-gradient(circle at 95% 35%,#f9e5fb 0,transparent 35%),#fff4e9;min-height:100svh}.shell{max-width:510px;margin:auto;padding:24px 20px max(28px,env(safe-area-inset-bottom))}.top{display:flex;justify-content:space-between;align-items:center}.logo{color:inherit;text-decoration:none;font-weight:900;display:flex;align-items:center;gap:10px;font-size:20px;letter-spacing:.04em}.logo small{display:block;color:#ad94a2;font-size:9px;letter-spacing:.23em;margin-top:1px}.logo-mark{display:grid;place-items:center;width:41px;height:41px;border-radius:14px;color:#fff;background:#ed8aa0;box-shadow:0 4px 0 #d36c89;font-size:23px}.version{color:#b18e9d;font-size:12px}.hero{text-align:center;position:relative;padding:36px 0 22px}.mascot{position:relative;width:122px;height:122px;margin:4px auto 12px;animation:bob 3s ease-in-out infinite}.ears{position:absolute;top:1px;width:100%;display:flex;justify-content:space-around}.ears i{background:#fffdf7;border:3px solid #634b57;width:31px;height:62px;border-radius:80% 80% 15% 15%;transform:rotate(-20deg)}.ears i+i{transform:rotate(20deg)}.face{position:absolute;top:30px;width:122px;height:91px;background:#fffdf7;border:3px solid #634b57;border-radius:49% 49% 44% 44%;display:flex;align-items:center;justify-content:space-evenly;padding:20px 19px}.eye{height:12px;width:7px;background:#58404c;border-radius:50%;margin-top:7px}.blush{position:absolute;top:55px;width:23px;height:12px;border-radius:50%;background:#ffbcc5}.blush.left{left:12px}.blush.right{right:12px}.mouth{position:absolute;top:41px;left:52px;font-size:18px}.bubble{position:absolute;right:13%;top:41px;border-radius:16px 16px 16px 4px;border:2px solid #f4cbd7;background:#fff;padding:9px;font-size:11px;transform:rotate(7deg);box-shadow:0 4px 0 #f9dfe5}.spark{position:absolute;left:17%;top:52px;color:#e6a96e;font-size:30px}.eyebrow{font-size:11px;letter-spacing:.16em;color:#ca849c;font-weight:800;margin:0 0 6px}h1{font-size:32px;letter-spacing:-.06em;margin:0;line-height:1.3}h1 em{font-style:normal;color:#e87799}.subtitle{color:#a58d97;font-size:13px;margin:10px 0 0}.workspace{background:#fffdfb;border:2px solid #f1dae1;box-shadow:0 8px 0 #f5dce2,0 18px 32px #dc9aa020;border-radius:27px;padding:18px;margin-top:10px}.direction{display:flex;align-items:center;gap:12px;margin:0 0 20px}.lang{border:0;background:#f9f1f3;color:#b2a1a7;flex:1;border-radius:12px;padding:12px;font-weight:800;font-size:14px}.lang.active{background:#ffe0e8;color:#d76388}.swap{border:2px solid #f3c9d5;border-radius:50%;background:white;color:#df7193;width:42px;height:42px;font-size:24px;cursor:pointer;transition:transform .3s}.swap:active{transform:rotate(180deg)}.fieldtop,.controls,.resulthead,.resultactions,.sectiontitle{display:flex;align-items:center;justify-content:space-between}.fieldtop label{font-size:13px;font-weight:800}.subtle{border:0;background:none;color:#b89fa9;font-weight:700}textarea{resize:vertical;width:100%;min-height:112px;padding:15px;border-radius:17px;border:2px dashed #ecd7de;background:#fffbfc;margin-top:12px;font:500 17px/1.65 inherit;color:#4a3b45;outline:none}textarea:focus{border-color:#f1a9ba}textarea::placeholder{color:#cbbcc2}.controls{font-size:11px;color:#b5a4aa;margin-top:6px}.modebar{display:flex;align-items:center;gap:8px;margin:22px 0 14px}.modebar>span{font-weight:900;letter-spacing:.08em;color:#bea8ad;font-size:9px}.modes{display:flex;gap:5px;flex:1}.modes button{flex:1;border:1px solid #efdfdf;border-radius:12px;background:#fff;color:#98858b;font-size:11px;font-weight:800;padding:9px 2px;cursor:pointer}.modes button.selected{border-color:#ed9caf;background:#fff0f4;color:#d36f8b}.convert{background:#ef87a0;width:100%;border:0;border-bottom:5px solid #d96583;border-radius:16px;color:#fff;font-weight:900;font-size:19px;padding:16px;cursor:pointer;transition:transform .15s}.convert:active{transform:translateY(4px);border-bottom-width:1px}.arrow{float:right}.result{border:2px solid #f4e0bf;border-radius:17px;background:#fffaf0;margin-top:19px;padding:16px}.resulthead{font-size:10px;letter-spacing:.05em;font-weight:900;color:#cdad79}.resulthead span:last-child{font-size:10px;color:#b9a58b;letter-spacing:0}.output{font-size:25px;font-weight:800;line-height:1.6;overflow-wrap:anywhere;color:#55404f;margin:21px 0 9px;min-height:42px}.note{color:#ab9488;font-size:11px;line-height:1.5;margin:0 0 16px}.resultactions{gap:9px}.resultactions button{flex:1;padding:12px;border-radius:11px;font-size:13px;font-weight:800;cursor:pointer}.copy{border:0;background:#e9a3af;color:#fff}.share{background:#fff;border:1px solid #e6cfc0;color:#997e7b}.samples{margin:40px 0 27px}.sectiontitle h2{margin:0;font-size:17px}.sectiontitle span{font-size:11px;color:#bfa0a9}.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:15px}.chips button{font:700 13px inherit;color:#a56e84;background:#fffdfb;border:1px solid #f0d5dd;border-radius:18px;padding:12px 14px;box-shadow:0 3px 0 #f3dfe4;cursor:pointer}.chips button:active{transform:translateY(2px)}footer{text-align:center;color:#c5a9aa;font-size:11px;padding:16px}footer span{padding:0 6px}#toast{position:fixed;bottom:calc(22px + env(safe-area-inset-bottom));left:50%;transform:translate(-50%,80px);background:#4f3d47;color:#fff;border-radius:25px;padding:12px 22px;white-space:nowrap;font-size:13px;opacity:0;transition:.25s;pointer-events:none}#toast.show{opacity:1;transform:translate(-50%,0)}@keyframes bob{50%{transform:translateY(-7px) rotate(2deg)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}@media(max-width:380px){.shell{padding-inline:13px}.workspace{padding:14px}.bubble{right:0}h1{font-size:29px}}
/* Custom cat artwork */
.logo-image{width:41px;height:41px;object-fit:contain;border-radius:13px;background:#fff}
.mascot-illustration{display:block;width:190px;height:190px;max-width:55%;object-fit:contain;margin:-24px auto -12px;filter:drop-shadow(0 7px 9px #deacb551);animation:bob 3s ease-in-out infinite}
.modebar[hidden]{display:none}
.output{white-space:pre-wrap}

/* v1.0.1: Cat sticker without the square white plate, better mobile spacing.
   The source artwork has an opaque near-white background. Multiply blending
   removes the white appearance against the warm pastel hero backdrop. */
.hero{padding:20px 0 18px;isolation:isolate}
.hero .eyebrow{margin:0 0 4px;position:relative;z-index:1}
.hero-art{width:100%;height:202px;position:relative;display:grid;place-items:center;overflow:visible}
.mascot-illustration{width:min(204px,58vw);height:auto;max-width:none;aspect-ratio:1/1;display:block;position:relative;z-index:0;margin:0;object-fit:contain;background:transparent;border-radius:0;mix-blend-mode:normal;filter:contrast(1.055) saturate(1.08);animation:catFloat 3.5s ease-in-out infinite}
.hero .spark{display:none}
.hero .bubble{position:absolute;right:max(0px,calc(50% - 165px));top:18px;z-index:2;transform:rotate(6deg);max-width:160px;background:#fffafc;border:2px solid #efc7d3;border-radius:20px 20px 20px 5px;box-shadow:0 7px 18px #d69baa29;padding:9px 12px;color:#705765;font-size:12px;white-space:nowrap}
.logo-image{width:43px;height:43px;flex-shrink:0;object-fit:contain;border-radius:12px;mix-blend-mode:normal;background:transparent}
.hero h1{position:relative;z-index:1;margin-top:5px}
.hero .subtitle{margin-top:9px}
@keyframes catFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-6px) rotate(1deg)}}
@media(max-width:380px){.hero-art{height:184px}.mascot-illustration{width:min(188px,60vw)}.hero .bubble{right:0;top:16px;font-size:11px;padding:8px 9px}}
@media(prefers-reduced-motion:reduce){.mascot-illustration{animation:none}}

/* The transparent hero-cat.png removes the rectangular background at source.
   Keep graceful fallback if the new image has not been uploaded yet. */
.mascot-illustration:not(.legacy-art),.logo-image:not(.legacy-art){mix-blend-mode:normal!important;filter:none;background:transparent}
.mascot-illustration.legacy-art{mix-blend-mode:multiply;filter:contrast(1.055) saturate(1.08)}
.logo-image.legacy-art{mix-blend-mode:multiply}

/* v1.1: live conversion, custom dictionary, predictable touch targets */
.livehint{font-size:11px;text-align:center;margin:9px 0 0;color:#a69098}
.customize{margin:26px 0 0}.customize details{background:#fffdfb;border:1px solid #eddbe0;border-radius:19px;padding:15px 17px}
.customize summary{cursor:pointer;font-size:14px;font-weight:850;list-style-position:inside}
.customize summary span{font-size:11px;font-weight:500;color:#a48f99;margin-left:7px}
.settinghelp{font-size:12px;color:#917d85;line-height:1.7;margin:14px 0}
.mappingform{display:grid;gap:10px}.mappingform label{display:grid;gap:5px;font-size:12px;font-weight:750}
.mappingform input{width:100%;min-width:0;background:#fffafc;border:1px solid #e9d7df;border-radius:12px;padding:12px;font:inherit;font-size:16px}
.mappingform button{background:#ef87a0;color:#fff;border:0;border-radius:12px;padding:12px;font-weight:800}
.mappinglist{list-style:none;padding:0;margin:15px 0 8px;display:grid;gap:7px}
.mappinglist li{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:9px;border-radius:10px;background:#fff5f7;font-size:13px;overflow-wrap:anywhere}
.mappinglist li.empty{color:#aa929a;font-size:12px}
.mappinglist li span{min-width:0}.mappinglist button{flex-shrink:0;border:0;background:transparent;color:#bb617d;font-weight:750;padding:8px}
.reset{padding:8px 0}
button{touch-action:manipulation;min-height:40px}
button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #b35d81;outline-offset:3px}
.logo-image{border-radius:0}.mascot-illustration{mix-blend-mode:normal!important}
@media(min-width:640px){.shell{max-width:560px}}

/* v1.2 — iOS text inputs and speech actions */
html,body,.shell{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
textarea,input,select,[contenteditable="true"]{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
textarea,input,select{font-size:16px!important}
textarea{font-size:17px!important}
.resultactions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.resultactions button{min-width:0;padding:12px 4px;font-size:12px;min-height:44px}
.speak{background:#fff;border:1px solid #e6cfc0;color:#856b7b}
.logo-image,.mascot-illustration{background:transparent!important;mix-blend-mode:normal!important;filter:none!important}

/* v1.3: compact cat conversations, editable controls and selectable results. */
.hero-art{height:142px}
.mascot-illustration{width:138px}
.hero .bubble{top:12px;font-size:11px}
.direction{margin-bottom:8px}
.cat-chat{display:flex;align-items:center;gap:12px;margin:0 0 12px;pointer-events:none;user-select:none}
.cat-chat img{width:52px;height:52px;object-fit:contain;flex:none}
.cat-bubble{position:relative;border:1px solid #efc7d3;border-radius:15px;background:#fff4f7;padding:9px 12px;font-size:12px;color:#795868}
.cat-bubble:before{content:"";position:absolute;left:-5px;top:calc(50% - 4px);width:8px;height:8px;background:inherit;border-left:1px solid #efc7d3;border-bottom:1px solid #efc7d3;transform:rotate(45deg)}
.cat-reply{flex-direction:row-reverse;margin:9px 0 0}
.cat-reply .cat-bubble{background:#fff9e9}
.cat-reply .cat-bubble:before{left:auto;right:-5px;transform:rotate(225deg)}
.cat-reply+.result{margin-top:9px}
textarea{font-family:inherit;font-weight:500;line-height:1.65}
input,textarea,select,[contenteditable]:not([contenteditable="false"]){font-size:16px;-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
.output{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
.speech-status,.speech-help{font-size:11px;line-height:1.5;color:#91766d;margin:10px 0 0}
.speech-status:empty{display:none}
.speech-status{color:#88516c}
.speak[aria-pressed="true"]{background:#ffe0e8;border-color:#d76388;color:#924360}
.speak[aria-disabled="true"]{opacity:.65}
#toast{white-space:normal;width:max-content;max-width:calc(100vw - 24px);text-align:center;z-index:10}
@media(max-width:380px){.hero-art{height:130px}.mascot-illustration{width:126px}.hero .bubble{right:0;max-width:142px}.resulthead{gap:6px;flex-wrap:wrap}}

/* v1.4: the text itself is a conversation between the two cats. */
.cat-button{display:block;border:0;padding:0;background:transparent;cursor:pointer;flex:none;line-height:0;border-radius:14px;-webkit-touch-callout:none}
.cat-button img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none}
.brand-cat{width:43px;height:43px}
.hero-cat{width:138px;height:138px}
.hero-cat .mascot-illustration{width:100%;height:100%;animation:none}
.hero .bubble{pointer-events:none}
.chat-message{display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;align-items:start;margin-top:18px}
.chat-cat{width:56px;height:56px;margin-top:14px}
.speech-bubble{position:relative;border:2px solid #efc7d3;border-radius:20px;padding:12px;background:#fff6f8;min-width:0}
.speech-bubble:before{content:"";position:absolute;left:-7px;top:31px;width:11px;height:11px;background:inherit;border-left:2px solid #efc7d3;border-bottom:2px solid #efc7d3;transform:rotate(45deg)}
.input-bubble:focus-within{border-color:#df8da6}
.input-bubble:focus-within:before{border-color:#df8da6}
.input-bubble textarea{border:0;background:transparent;border-radius:10px;margin-top:4px;padding:6px 0;min-height:130px;resize:vertical}
.input-bubble textarea:focus-visible{outline-offset:2px}
.fieldtop{gap:4px;flex-wrap:wrap}
.fieldtop label{font-size:12px}
.fieldtop .subtle{font-size:12px;padding:0 2px}
.input-bubble .controls{gap:5px;flex-wrap:wrap;line-height:1.5}
.output-message{grid-template-columns:minmax(0,1fr) 56px;margin-top:15px}
.output-message .chat-cat{grid-column:2;grid-row:1}
.output-message .result{grid-column:1;grid-row:1;background:#fffaf0;border-color:#f4e0bf;margin-top:0}
.output-message .speech-bubble:before{left:auto;right:-7px;transform:rotate(225deg);border-color:#f4e0bf}
.output{font-size:23px;margin:14px 0 8px}
.resulthead{flex-wrap:wrap;gap:5px;line-height:1.5}
.note{margin-bottom:0}
.kana-reading{font-size:12px;line-height:1.65;overflow-wrap:anywhere;color:#8b7167;margin:0 0 10px;-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
.modebar{margin-top:16px;margin-bottom:8px}
.resultactions{margin-top:16px}
.speech-settings{margin-top:12px;font-size:12px;line-height:1.7;color:#917d85}
.speech-settings summary{cursor:pointer;padding:8px 0}
.speech-settings label{display:block;margin:8px 0 4px}
.speech-settings select{width:100%;min-width:0;min-height:44px;border:1px solid #e9d7df;border-radius:10px;padding:8px;background:#fffafc;color:#55404f;font-family:inherit}
.speech-settings p{margin:8px 0 0}
@media(max-width:380px){.chat-message{grid-template-columns:44px minmax(0,1fr);gap:9px}.output-message{grid-template-columns:minmax(0,1fr) 44px}.chat-cat{width:44px;height:44px;margin-top:20px}.speech-bubble{padding:10px}.hero-cat{width:126px;height:126px}.output{font-size:21px}}

/* v1.5: two reverse choices, with the original round-trip mode retained. */
.reverse-modes{display:flex;gap:8px;margin-top:12px}
.reverse-modes button{flex:1;border:1px solid #efdfdf;border-radius:12px;background:white;color:#98858b;font-family:inherit;font-size:12px;font-weight:700;padding:9px 4px}
.reverse-modes button.selected{border-color:#ed9caf;background:#fff0f4;color:#b95777}
.reverse-modes[hidden],.chips[hidden]{display:none}

/* v1.6: a separate, thumb-sized mascot selector beside the hero cat. */
.hero-mascot{position:relative;width:138px;height:138px}
.mascot-swap{position:absolute;right:-10px;bottom:-2px;display:grid;place-items:center;width:44px;height:44px;border:2px solid #efc7d3;border-radius:50%;background:#fffafc;color:#ce6a8c;font-size:24px;line-height:1;cursor:pointer;box-shadow:0 3px 0 #f4d9e2;z-index:3}
.mascot-swap:active{transform:translateY(2px)}
@media(max-width:380px){.hero-mascot{width:126px;height:126px}}