:root{font-family:system-ui,sans-serif;color:#e9edf2;background:#14191f;color-scheme:dark}
*{box-sizing:border-box}
body{margin:0}
main{max-width:600px;margin:auto;padding:18px 12px calc(min(100vw,600px)*.58972 + 24px + env(safe-area-inset-bottom))}
header{padding:0 3px 10px}
.heading,.section-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}
h1{font-size:clamp(18px,4.9vw,24px);margin:3px 0;font-weight:650}
header p{font-size:12px;color:#a9bac6;line-height:1.6;margin:5px 0}
#status{color:#b8dfce;min-height:18px}
#recording-badge{font-size:11px;white-space:nowrap;border-radius:20px;background:#28333d;padding:5px 9px;color:#b0bec8}
#recording-badge.active{background:#246347;color:#d6ffe7}
section{border:1px solid #33414d;border-radius:12px;background:#1c252e;margin-bottom:10px;padding:13px}
.section-heading{font-size:11px;color:#a9bac6}
#sentence{font-size:clamp(18px,4.8vw,22px);line-height:1.9;margin:8px 0 0;overflow-wrap:anywhere}
#sentence span{border-radius:4px}
#sentence .current{background:#365949;color:#d5ffe8;box-shadow:0 2px #8bcda8}
#sentence .done{color:#8c9da8}
.target-card{background:#202e38;border-color:#456657}
#target{font-size:clamp(21px,6vw,28px);font-weight:600;line-height:1.5;margin:7px 0 2px;overflow-wrap:anywhere}
#keys{font:500 clamp(16px,4.5vw,21px)/1.5 ui-monospace,monospace;color:#a9e4c5;margin:3px 0 12px;overflow-wrap:anywhere}
button{border:1px solid #455868;border-radius:8px;padding:10px 12px;background:#314453;color:inherit;font-size:13px;font-family:inherit;cursor:pointer}
button:active{background:#4a6b7c}
button:disabled{opacity:.45;cursor:default}
button.primary{background:#b8e2c5;color:#133523;border-color:#b8e2c5;font-weight:650}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.primary-actions>*{flex:1;min-width:120px}
.correction-actions{margin-top:8px}
.correction-actions button{background:transparent;font-size:12px;padding:8px 10px}
#notice{font-size:12px;line-height:1.5;color:#c7d7e2;margin:8px 0 0;min-height:0}
#notice:empty{display:none}
.result-card{padding-bottom:7px}
#text{font-size:16px;line-height:1.6;min-height:27px;padding:5px 0;white-space:pre-wrap;overflow-wrap:anywhere}
#candidates{display:flex;gap:5px;overflow-x:auto;padding:3px 0}
#candidates:empty{display:none}
#candidates button{padding:6px 10px;font-size:13px;white-space:nowrap;background:#293d4b}
#latency{font-size:10px;white-space:nowrap}
#saved{font-size:12px;color:#d1e6db}
#sync-status{font-size:12px;color:#9ccbb2;line-height:1.5;margin:5px 0}
#sync-status.pending{color:#e4ca91}
.quiet{font-size:11px;padding:5px 8px;background:transparent}
.save-card details{font-size:12px;margin-top:8px;color:#a9bac6}
summary{cursor:pointer;line-height:1.6}
label{display:block;font-size:12px;margin:7px 0}
input{font:inherit;background:#151d25;border:1px solid #526575;color:#e9edf2;border-radius:7px;padding:9px;width:100%;max-width:360px}
.note,.input-help{color:#93a9b8;font-size:11px;line-height:1.8;padding:0 3px}
.input-help p{margin:5px 0}
/* 左右24pxを空け、実機の1070×631の4段配置を保持する。 */
#keyboard{position:fixed;z-index:2;left:50%;transform:translateX(-50%);bottom:env(safe-area-inset-bottom);width:min(calc(100% - 48px),600px);aspect-ratio:1070/631;display:grid;grid-template-rows:repeat(4,minmax(0,1fr));touch-action:none;user-select:none;-webkit-user-select:none;background:#292a2c}
.row{display:grid;grid-template-columns:repeat(20,minmax(0,1fr));min-height:0}
.key{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;margin:3px;padding:0;border:0;border-radius:8px;background:#414244;color:#f1ece9;font:400 clamp(19px,5.6vw,32px)/1 system-ui,sans-serif}
.key small{position:absolute;right:5px;top:4px;color:#bcbdbf;font-size:clamp(9px,2.7vw,14px);line-height:1}
.key--function{background:#38393b;font-size:clamp(13px,3.9vw,22px)}
.key--space{background:#414244;color:#a4a4a6;font-size:clamp(14px,4.1vw,23px)}
.key--enter{border-radius:999px;background:#e8d0aa;color:#3b342d;font-size:clamp(22px,6.3vw,36px)}
.key[data-action=delete]{font-size:clamp(22px,6.1vw,35px)}
@media(max-height:740px)and(orientation:portrait){main{padding-top:9px}header{padding-bottom:5px}header p{margin:2px 0}section{padding:10px;margin-bottom:8px}#sentence{font-size:17px;line-height:1.65}#target{font-size:21px}.correction-actions{margin-top:6px}}
@media(orientation:landscape)and(max-height:600px){main{max-width:none;padding:12px calc(56vw + 14px) 16px 12px}#keyboard{left:auto;right:24px;transform:none;bottom:max(8px,env(safe-area-inset-bottom));width:min(calc(54vw - 16px),calc(100vw - 48px),calc((100dvh - 24px)*1.69572),600px)}h1{font-size:17px}#target{font-size:21px}#sentence{font-size:17px}.key{font-size:clamp(17px,3.5vw,26px)}.key--function{font-size:14px}.key--space{font-size:16px}}

/* 全画面の案内を順に確認してから収集画面へ進む。 */
[hidden]{display:none!important}
body.intro-open{overflow:hidden}
body.intro-open>main{display:none}
body.intro-open #keyboard{display:none}
#intro{position:fixed;inset:0;margin:0;border:0;width:100%;max-width:none;height:100dvh;max-height:none;padding:24px max(20px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));background:#14191f;color:#e9edf2;overflow-y:auto;overscroll-behavior:contain}
#intro::backdrop{background:#14191f}
.intro-content{max-width:560px;margin:auto;min-height:100%;display:flex;flex-direction:column}
#intro-progress{font-size:13px;color:#a9e4c5;margin:0 0 8px}
#intro-heading{font-size:17px;color:#a9bac6;margin:0 0 20px}
#intro h2{font-size:clamp(22px,6vw,30px);line-height:1.45;margin:0 0 16px;outline:none}
#intro p{line-height:1.85;font-size:16px}
#intro strong{color:#bcf0ce}
#intro-keyboard{display:block;width:100%;margin:20px 0 10px;background:#292a2c;border-radius:12px}
.demo-key{fill:#414244}.demo-letter{fill:#f1ece9;font:44px system-ui,sans-serif}
.demo-trail{stroke:#a9e4c5;stroke-width:12;stroke-linejoin:round;stroke-linecap:round;opacity:.7}
.demo-finger{fill:#e8d0aa;stroke:#fff;stroke-width:5}
.intro-code{white-space:nowrap}
.intro-example{border:1px solid #456657;border-radius:12px;background:#202e38;padding:20px;text-align:center;display:grid;gap:12px;margin:20px 0}
.intro-example>span{font-size:24px}.intro-example>strong{font:32px ui-monospace,monospace}.intro-highlight{background:#365949;border-radius:5px;padding:3px}
.intro-example small{font-size:16px;color:#c7d7e2}
.intro-rules{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;background:#202e38;padding:16px;border-radius:12px;font-size:18px}
.intro-actions{display:flex;gap:12px;margin-top:auto;padding-top:22px}
.intro-actions #intro-next{flex:1;font-size:16px;padding:15px 12px}
@media(max-height:600px){#intro{padding-top:16px}#intro-keyboard{max-height:180px}#intro h2{font-size:22px}#intro-heading{margin-bottom:12px}}