:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#172d37;background:#edf2f5;font-size:16px}*{box-sizing:border-box}body{margin:0}button,a,summary{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{cursor:default;opacity:.45}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #3582d4;outline-offset:3px}header{height:88px;border-bottom:1px solid #d2dce2;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;background:#f8fafb}.brand{font-size:25px;letter-spacing:-1px;font-weight:750;text-decoration:none;color:inherit;display:flex;align-items:center;gap:13px}.mark{background:#173744;color:white;border-radius:10px;padding:9px;font-size:20px;letter-spacing:-3px}.lab{font-size:16px;font-weight:400;color:#607680;letter-spacing:0;margin-left:6px}.badge{font-size:13px;border:1px solid #cad6dc;border-radius:30px;padding:7px 13px;color:#536974}main{max-width:1440px;margin:auto;padding:45px 5vw 20px}.intro{display:flex;justify-content:space-between;gap:25px;align-items:center;margin-bottom:32px}.eyebrow{font-size:12px;font-weight:750;letter-spacing:2px;color:#426d7d;margin:0 0 12px}h1{font-size:clamp(25px,2.6vw,38px);letter-spacing:-1.2px;line-height:1.15;margin:0 0 12px;font-weight:650}.intro p:not(.eyebrow){color:#5a6e79;margin:0;line-height:1.6}.languages{display:flex;flex-direction:column;gap:8px;font-size:13px;white-space:nowrap}.languages span{display:flex;gap:15px;font-weight:750}.languages b{font-weight:450;color:#58707b}.jp{color:#8456b9}.tw{color:#007e7b}.en{color:#276dbe}.workspace{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(290px,1fr);gap:22px;align-items:start}.panel{background:white;border:1px solid #d4dfe5;border-radius:15px;box-shadow:0 4px 15px #18374404}.editor{padding:26px}.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}h2{font-size:17px;margin:0;font-weight:650}.quiet{border:0;background:transparent;color:#476674;padding:5px 0;font-size:14px}.quiet:hover{color:#007e7b;text-decoration:underline}.examples{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:27px}.examples button{border:1px solid #d5e0e5;background:#f8fafb;color:#48606b;padding:8px 11px;border-radius:6px;font-size:13px}.examples button.active{background:#e9f4f3;color:#006e6b;border-color:#98ceca}label{font-size:13px;font-weight:650;color:#607580;display:block;margin-bottom:10px}textarea{resize:vertical;display:block;min-height:94px;width:100%;border:1px solid #cbdbe1;border-radius:8px;background:#f8fafb;color:#23414e;padding:18px;font:18px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;outline:none}textarea:focus{border-color:#278b88;box-shadow:0 0 0 3px #278b8814}.under{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:10px 0 30px;font-size:12px;color:#5d6f77}.under .quiet{font-size:12px;white-space:nowrap}.preedit-head{display:flex;justify-content:space-between}.muted{color:#5d6f77;font-size:13px;line-height:1.6}.preedit{font-size:32px;line-height:1.8;min-height:96px;padding:16px 0;white-space:pre-wrap;overflow-wrap:anywhere}.preedit .piece{border-bottom:2px solid;padding-bottom:7px}.preedit .space{color:#a1b2bb}.placeholder{color:#5d6f77;font-size:22px}.candidates{display:flex;gap:8px;flex-wrap:wrap;min-height:39px}.candidates button{font-size:14px;border:1px solid #d6e0e5;background:white;padding:8px 10px;border-radius:6px;white-space:pre-wrap;text-align:left;overflow-wrap:anywhere}.candidates button[aria-pressed=true]{background:#173744;color:white;border-color:#173744}.candidate-index{opacity:.5;margin-right:8px}.commit-row{display:flex;justify-content:space-between;align-items:center;margin:22px 0 26px;gap:15px}.primary{background:#007e78;color:white;border:0;border-radius:7px;padding:11px 16px;font-weight:600;font-size:14px}.primary:hover{background:#00675f}.primary span{margin-left:16px;opacity:.7}.output{border-top:1px solid #e1e8ed;padding-top:22px}.committed{font-size:20px;color:#415c68;min-height:42px;white-space:pre-wrap;overflow-wrap:anywhere}.output .quiet{margin-top:6px}.trace{padding:26px}.tiny{font-size:12px;letter-spacing:1.4px;color:#68818c}.trace>.muted{margin-top:-8px;margin-bottom:22px}.segment{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:12px;border-top:1px solid #e7edef;padding:14px 0;align-items:center}.tag{font-size:11px;font-weight:750;padding:6px 4px;text-align:center;border-radius:5px;background:#edf3f6}.tag.jp{background:#f3edf9}.tag.tw{background:#e9f5f3}.tag.en{background:#edf3fc}.segment code{font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere}.segment small{display:block;color:#758790;font-size:12px;line-height:1.5;margin-top:3px}.segment .result{font-size:21px;max-width:110px;overflow-wrap:anywhere;white-space:pre-wrap}.space-note{display:flex;gap:14px;border-radius:9px;background:#eef5f7;padding:18px;margin-top:18px}.space-symbol{font:28px monospace;color:#527c8d}.space-note strong{font-size:13px}.space-note p{font-size:13px;color:#617883;line-height:1.6;margin:6px 0 0}.notes{margin-top:25px;padding:20px 24px;border:1px solid #d1dee5;border-radius:10px}.notes summary{cursor:pointer;font-size:14px;font-weight:600}.notes summary span{font-size:12px;color:#768992;font-weight:400;margin-left:15px}.notes-grid{display:grid;grid-template-columns:1fr 1fr;gap:35px;padding-top:15px}.notes h3{font-size:14px}.notes p{font-size:14px;line-height:1.75;color:#58707c}footer{display:flex;justify-content:space-between;font-size:11px;letter-spacing:1px;color:#7b919c;padding:28px 0 0}footer i{font-style:normal;margin:0 7px;color:#9caeb7}@media(max-width:950px){main{padding:30px 4vw}.workspace{grid-template-columns:1fr}.intro{align-items:flex-start}.trace{margin-top:0}}@media(max-width:600px){header{padding:0 5vw;height:72px}.lab{display:none}.badge{font-size:11px}.intro{display:block}.languages{flex-direction:row;flex-wrap:wrap;margin-top:20px;gap:12px}.languages span{gap:5px;font-size:11px}.editor,.trace{padding:20px}.under{align-items:flex-start;flex-direction:column;gap:4px}.preedit{font-size:27px}.commit-row{align-items:flex-end}.commit-row>.muted{max-width:130px}.notes-grid{grid-template-columns:1fr;gap:0}.notes summary span{display:block;margin:8px 0 0}.notes{padding:18px}footer{gap:15px;line-height:1.8;flex-direction:column}}

.phonetic-slots{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}.phonetic-slot{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:46px;background:#edf7f5;border:1px solid #cce2df;border-radius:5px;padding:6px}.slot-label{font-size:12px;color:#557c78}.phonetic-slot strong{font-size:19px;font-weight:500;color:#007e7b}.segment small.replacements{color:#876332;margin-top:7px}
.debug-tools{margin:0 0 22px}.debug-tools p{margin:5px 0}.debug-tools summary{cursor:pointer;font-size:13px;margin:10px 0}.debug-tools textarea{font-size:12px;min-height:180px}.debug-tools label{margin-top:12px}
.input-options{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin:0 0 22px;padding:16px 20px;border:1px solid #cbdbe1;border-radius:10px;background:#f8fafb}.input-options legend{font-size:14px;font-weight:650}.input-options label{display:flex;align-items:center;gap:8px;margin:0}.input-options input{accent-color:#007e78}.input-options select{font:inherit;padding:6px;border:1px solid #bfcfd7;border-radius:5px}.input-options p{flex-basis:100%;margin:0}

.dictionary-form{display:grid;grid-template-columns:1.2fr 1fr auto;gap:14px;align-items:end;margin-top:20px}.dictionary-form input{width:100%;font:16px/1.5 inherit;font-family:inherit;font-size:16px;padding:10px;border:1px solid #bfcfd7;border-radius:6px;background:white;color:#172d37}.dictionary-form input:focus{outline:2px solid #278b88;outline-offset:1px}.custom-entry{display:flex;justify-content:space-between;align-items:center;gap:15px;border-top:1px solid #d5e0e5;padding:10px 0;font-size:14px}.custom-entry span{overflow-wrap:anywhere}.custom-entry .quiet{flex-shrink:0}@media(max-width:600px){.dictionary-form{grid-template-columns:1fr}.dictionary-form button{justify-self:start}}

[hidden]{display:none!important}

/* Compact compose layout; secondary tools stay below the typing loop. */
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
/* Keep the header on one line. */
header{height:52px;padding:0 3vw;gap:20px}
.brand{font-size:20px;gap:10px;flex-shrink:0}
.mark{padding:5px 6px;font-size:15px;border-radius:7px}
.lab{font-size:14px}
.tagline{flex:1;min-width:0;margin:0;font-size:15px;font-weight:600;letter-spacing:0;line-height:1.3;color:#3d5560;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
header .languages{flex-direction:row;gap:14px;font-size:12px}
header .languages span{gap:6px}
.badge{padding:4px 10px;font-size:12px;flex-shrink:0}
main{padding:12px 3vw 20px}
/* Settings toolbar with explanations behind a disclosure. */
.input-options{margin:0 0 12px;padding:6px 14px;gap:6px 18px}
.input-options label{font-size:13px}
.input-options select{padding:3px 6px}
.settings-help{margin-left:auto;font-size:13px;color:#476674}
.settings-help summary{cursor:pointer}
.settings-help[open]{flex-basis:100%;margin-left:0}
.settings-help p{margin:4px 0 0}
.input-options #settings-status:empty{display:none}
/* Raw input, preedit with Commit, and candidate choices form one loop. */
.workspace{gap:16px}
.main-col{display:flex;flex-direction:column;gap:12px;min-width:0;align-self:stretch}
.editor{padding:12px 18px}
.compose{scroll-margin-top:8px}
.compose-bar{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:6px}
.compose-bar label{margin:0}
.bar-actions{display:flex;gap:18px;flex-shrink:0}
.bar-actions .quiet{font-size:13px;padding:2px 0}
#raw{min-height:0;padding:8px 12px;font-size:18px;line-height:1.5}
.under{margin:4px 0;flex-direction:row;align-items:baseline;flex-wrap:wrap}
.preedit-row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.preedit{flex:1;min-width:0;font-size:28px;line-height:1.6;min-height:58px;padding:4px 0 6px}
.preedit .piece{padding-bottom:4px}
.preedit-row .primary{flex-shrink:0;margin-top:8px}
/* The choice slot also accommodates segment correction. */
.choice-slot{min-height:80px;margin-top:4px}
.candidates{gap:6px;min-height:0}
.candidates button{padding:6px 9px}
.examples-row{display:flex;align-items:center;gap:10px;margin-top:10px;padding-top:10px;border-top:1px solid #e1e8ed}
.examples-label{font-size:12px;font-weight:650;color:#607580;flex-shrink:0}
.examples{flex-wrap:nowrap;overflow-x:auto;margin:0;padding-bottom:2px;scrollbar-width:thin;min-width:0}
.examples button{white-space:nowrap;padding:5px 9px;flex-shrink:0}
/* Secondary output and tools. */
.output{border:1px solid #d4dfe5;border-radius:12px;background:white;padding:10px 18px}
.output label{margin-bottom:4px}
.committed{font-size:18px;min-height:0}
.output .quiet{margin-top:2px;padding:2px 0}
.notes{margin-top:0;padding:10px 18px}
main>.notes{margin-top:16px}
.tools .debug-tools:first-of-type{margin-top:12px}
.trace{padding:16px 20px}
.trace .section-head{margin-bottom:10px}
/* Keep the compose card visible while reading the trace. */
@media (min-width:951px) and (min-height:560px){.compose{position:sticky;top:8px;z-index:2;box-shadow:0 6px 18px #1837441a}.main-col>:not(.compose),.main-col>:not(.compose) :is(button,input,textarea,summary){scroll-margin-top:calc(var(--compose-height,400px) + 16px)}}
@media (max-width:950px){main{padding:10px 3vw 20px}.main-col{align-self:auto}}
@media (max-width:600px){
 header{height:44px;padding:0 12px}.tagline,header .languages{display:none}.brand{font-size:18px}
 main{padding:8px 10px 20px}
 .input-options{padding:6px 10px;gap:4px 12px}.settings-help{margin-left:0}
 .editor{padding:10px 12px}.compose-bar label{font-size:12px}
 #raw{font-size:16px;padding:6px 10px} /* stay >=16px: iOS zooms on smaller inputs */
 .preedit{font-size:24px;min-height:44px}
 .candidates button{font-size:14px;padding:5px 8px}
 .choice-slot{min-height:0}
 .output{padding:8px 12px}
}
/* Short landscape screens. */
@media (max-height:500px) and (orientation:landscape){header{height:40px}header .languages,.badge{display:none}.tagline{font-size:13px}main{padding-top:6px}}

.preedit .segment-piece{font:inherit;line-height:inherit;color:inherit;background:transparent;border:0;border-bottom:2px solid;padding:0 0 7px;text-align:left;white-space:pre-wrap}.preedit .segment-piece.tw{color:#007e7b}.preedit .segment-piece.jp{color:#8456b9}.preedit .segment-piece.en{color:#276dbe}.preedit .segment-piece.locked{border-bottom-style:double;border-bottom-width:4px}.correction-focus{background:#e5f2f5!important;outline:2px solid #527c8d;outline-offset:2px}.segment-result{font:inherit;border:0;background:transparent;color:inherit;padding:0;text-align:left}.segment.locked{border-left:3px solid #007e78;padding-left:8px}.lock-label{font-weight:650;color:#007e78!important}.correction-tools{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:15px}.correction-tools p{flex-basis:100%;margin:0}.segment-menu{border:1px solid #99bdc7;border-radius:9px;background:#f5fafb;padding:18px;margin:12px 0 20px}.segment-menu:focus{outline:2px solid #3582d4;outline-offset:2px}.segment-menu .section-head{margin-bottom:12px}.segment-choices{display:flex;gap:7px;flex-wrap:wrap}.segment-choice{border:1px solid #b8cdd5;background:white;border-radius:5px;padding:8px 10px;font-size:14px;white-space:pre-wrap;text-align:left}.segment-choice[aria-selected=true]{background:#173744;color:white}.segment-choice[aria-disabled=true]{opacity:.5}.segment-preview{white-space:pre-wrap;font-size:20px;overflow-wrap:anywhere}.segment-splits,.segment-span-tools{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}.segment-menu label{margin-top:16px}

/* Segment correction replaces whole-composition choices in the same slot. */
.choice-slot:has(#segment-menu:not([hidden])) #candidates{display:none}
.preedit .segment-piece,.preedit .segment-piece.locked{position:relative;padding:0;border:0;line-height:inherit}
.preedit .segment-piece::after{content:"";position:absolute;left:0;right:0;bottom:0;border-bottom:2px solid currentColor}
.preedit .segment-piece.locked::after{border-bottom:4px double currentColor}
.under{min-height:20.8px}
.correction-tools{display:flex;gap:10px;margin:0;flex-shrink:0}
.correction-tools .quiet{padding:0}
#unlock-all:disabled{display:none}
.correction-status{margin:0}
.correction-status:empty{display:none}
.segment-menu{display:flex;flex-direction:column;margin:0;padding:8px;border-radius:7px;overflow:hidden}
.segment-scroll{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.segment-choices{gap:4px}
.segment-choice{padding:4px 7px;font-size:14px;line-height:1.4;overflow-wrap:anywhere;max-width:100%}
.segment-splits,.segment-span-tools{gap:4px 10px;margin-top:4px}
.segment-splits:empty{display:none}
.segment-span-tools{align-items:center}
.segment-span-tools .quiet,.segment-splits .quiet{font-size:12px;padding:2px 0}
.segment-span-tools .muted{font-size:12px;line-height:1.4}
.segment-preview{flex-shrink:0;background:#f5fafb;border-top:1px solid #b8cdd5;padding-top:4px;font-size:13px;line-height:1.6;white-space:pre;overflow-x:auto;margin-top:4px;scrollbar-width:thin}
.segment-preview::before{content:'Preview: ';color:#5d6f77}
@media(max-width:600px){.under{gap:8px}.under #count{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.correction-tools{gap:8px}}

/* A score ambiguity cue occupies the existing underline, without adding height. */
.preedit .segment-piece.uncertain::after{border-bottom-style:dotted}

#segment-remember[aria-pressed=true]{outline:2px solid #527c8d;outline-offset:2px}