:root{font-family:BIZ UDPGothic,Hiragino Kaku Gothic ProN,Yu Gothic,Meiryo,sans-serif;color:#173d38;background:#f3f5f1;font-synthesis:none;font-weight:700}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer;touch-action:manipulation;border:2px solid #a6bdb3;background:#fff;color:#173d38;border-radius:12px;min-height:58px;padding:8px 14px;font-size:23px;font-weight:700;box-shadow:0 2px #c7d5ce}button:hover{background:#eaf5ef;border-color:#17665c}button:active{background:#c5e4d4;transform:translateY(2px);box-shadow:none}button:focus-visible,input:focus-visible,select:focus-visible,.message:focus-visible{outline:4px solid #b36500;outline-offset:2px}button:disabled{opacity:.4;cursor:default}button,.input-panel{user-select:none;-webkit-user-select:none}h1,h2,p{margin-top:0}.app{max-width:1440px;margin:auto;padding:14px 24px;display:flex;flex-direction:column;gap:12px;min-height:100dvh}header{display:flex;align-items:center;justify-content:space-between;gap:12px}h1{font-size:24px;margin:0;display:flex;align-items:center;gap:10px}h1 small{font-size:13px;color:#526b62}.brand-mark{background:#17665c;color:#fff;border-radius:10px;padding:5px 10px}.settings-link{font-size:17px;min-height:44px;box-shadow:none;background:transparent}.message-section{border:2px solid #8aa99b;background:#fff;border-radius:16px;padding:12px 20px}.message{height:clamp(136px,22vh,210px);overflow-y:auto;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.3;padding:8px 0;color:#102f2a}.message.empty{color:#637a70;display:flex;align-items:center}.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}.tabs button{display:flex;align-items:center;justify-content:center;gap:12px;background:#e3eae4;border-color:transparent;min-height:64px}.tabs .active{background:#17665c;color:#fff;border:3px solid #104e46;box-shadow:0 3px #0b3b34}.tab-number{font-size:17px;border:1px solid currentColor;border-radius:50%;width:27px;height:27px;display:grid;place-items:center}.selected-label{font-size:12px;background:#fff;color:#17665c;border-radius:4px;padding:3px 5px}.input-panel{background:#e8eee7;border-radius:16px;padding:12px;flex:1}.input-heading{font-size:16px;min-height:35px;display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.input-heading button{min-height:40px;font-size:20px;padding:2px 20px}.input-heading small{font-size:13px}.step-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(2,minmax(84px,1fr));gap:var(--gap);min-height:200px}.kana{font-size:44px;min-width:0;min-height:80px;padding:3px}.kana small{display:block;font-size:14px;color:#61736a;letter-spacing:3px}.selected-row{background:#f3fcf5}.table-grid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:var(--gap)}.table-grid .kana{font-size:29px;min-height:54px}.table-mode .message{height:116px}.phrase-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);position:relative;grid-template-rows:repeat(3,minmax(72px,1fr))}.phrase-grid button{min-height:72px;font-size:25px}.extras{display:grid;grid-template-columns:2fr 2fr 1fr 1fr 1fr;gap:var(--gap)}.extras button{min-height:54px;font-size:25px;background:#fff}.extras small{font-size:14px;margin-left:8px}.actions{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.65fr;gap:var(--gap)}.actions button{min-height:70px;font-size:23px}.danger{color:#8c342b;background:#fff5f0;border-color:#bb887e}.speak{background:#17665c;color:#fff;border-color:#104e46}.speak:hover{background:#104e46;color:#fff}.notice{font-size:15px;margin:0;color:#87431b}.settings{background:#fff;border:1px solid #abc1b5;border-radius:16px;padding:24px}.settings h2{font-size:24px;margin-top:20px}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.settings label{display:flex;flex-direction:column;gap:12px;font-size:19px}.settings .check{flex-direction:row;align-items:center}.check input{width:28px;height:28px}input,select{border:2px solid #89a496;border-radius:8px;padding:12px;min-height:52px;min-width:0;background:#fff;color:#173d38}input[type=range]{width:100%;padding:8px;accent-color:#17665c}.edit-row{display:grid;grid-template-columns:minmax(0,1fr) 64px 64px 90px;gap:10px;margin-bottom:10px}.add-phrase{display:flex;gap:12px;margin:20px 0}.add-phrase input{flex:1}dialog{border:2px solid #17665c;border-radius:20px;max-width:600px;padding:32px;color:#173d38}dialog::backdrop{background:#102e2bbb}.dialog-actions{display:flex;gap:18px;margin-top:30px}.dialog-actions button{min-height:76px;flex:1}.dialog-actions h2{font-size:28px}@media(min-height:900px){.step-grid{min-height:280px}.table-grid .kana{min-height:68px}}@media(max-width:750px){.app{padding:10px;gap:10px}h1 small,.message-caption span,.selected-label,.tab-number{display:none}.tabs button{font-size:19px;padding:7px 3px}.message.empty{font-size:26px!important}.step-grid{min-height:220px}.kana{font-size:36px}.kana small{font-size:10px;letter-spacing:0}.table-grid{gap:5px}.table-grid .kana{font-size:23px;min-height:52px;border-radius:8px}.actions{grid-template-columns:repeat(4,1fr)}.actions button{font-size:17px;padding:8px 2px}.actions .speak{grid-column:1/-1}.extras small{display:none}.extras button{font-size:20px;padding:5px}.phrase-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(5,minmax(72px,1fr))}.phrase-grid button{font-size:21px}.settings-grid{grid-template-columns:1fr}.settings{padding:14px}.edit-row{grid-template-columns:minmax(0,1fr) 44px 44px 60px;gap:5px}.edit-row button{font-size:17px;padding:2px}}@media(prefers-reduced-motion:no-preference){button{transition:background .12s,transform .12s}}@media(min-width:751px)and (max-height:900px){.app{padding:8px 20px;gap:8px}header{min-height:34px}.settings-link{min-height:34px}h1{font-size:21px}.brand-mark{padding:2px 8px}.message-section{padding:8px 16px}.message{height:124px}.table-mode .message{height:100px}.tabs button{min-height:56px;font-size:22px}.input-panel{padding:10px}.input-heading{min-height:26px;margin-bottom:6px}.step-grid{min-height:180px;grid-template-rows:repeat(2,minmax(78px,1fr))}.table-grid .kana{min-height:44px;font-size:28px}.extras button{min-height:44px}.actions button{min-height:56px;font-size:21px}.phrase-grid{grid-template-rows:repeat(3,minmax(64px,1fr))}.phrase-grid button{min-height:64px}}.message{line-height:1.15;padding:4px 0}.phrase-grid button{overflow-wrap:anywhere}.phrase-pagination{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;gap:var(--gap);margin-top:var(--gap);text-align:center}.phrase-pagination button{min-height:56px}.phrase-pagination span{font-size:20px}.no-phrases{position:absolute;inset:0;display:grid;place-items:center}.message.empty{display:block;position:relative}.message-placeholder{font-size:24px;color:#637a70;margin-left:12px}.caret{display:inline-block;width:4px;height:.95em;background:#17665c;vertical-align:-.1em;animation:caret-blink 1.1s step-end infinite}@keyframes caret-blink{0%,49%{opacity:1}50%,to{opacity:0}}@media(prefers-reduced-motion:reduce){.caret{animation:none}}.settings .check input{flex-shrink:0}@media(min-width:751px)and (max-height:900px){.phrase-grid{grid-template-rows:repeat(3,minmax(60px,1fr))}.phrase-grid button{min-height:60px}.phrase-pagination button{min-height:48px}}.app{--panel-height:clamp(304px, calc(100dvh - 424px) ,560px)}.input-panel{height:var(--panel-height);min-height:0;flex:none;display:flex;flex-direction:column}.input-panel .input-heading{height:40px;min-height:40px;flex:none;margin-bottom:6px}.input-panel .step-grid,.input-panel .table-grid,.input-panel .phrase-grid{flex:1;min-height:0;grid-template-rows:repeat(2,minmax(0,1fr))}.input-panel .table-grid{grid-template-rows:repeat(5,minmax(0,1fr))}.input-panel .phrase-grid{grid-template-rows:repeat(3,minmax(0,1fr))}.input-panel .kana,.input-panel .phrase-grid button{min-height:0}.input-panel .phrase-grid button{overflow:auto}.message,.table-mode .message{height:clamp(136px,22vh,210px)}.selected-row{background:#fff;border:3px solid #17665c;color:#102f2a;box-shadow:0 3px #8aa99b}.selected-row:hover{background:#eef5f1;border-color:#104e46}.phrase-pagination{height:64px;min-height:64px;flex:none;box-sizing:border-box;border-top:2px solid #8aa99b;padding-top:8px;margin-top:var(--gap)}.phrase-pagination button{height:52px;min-height:52px;background:#17665c;color:#fff;border:2px solid #104e46;box-shadow:0 2px #0b3b34}.phrase-pagination button:hover:not(:disabled){background:#104e46}.phrase-pagination button:active:not(:disabled){background:#0b3b34}.phrase-pagination button:disabled{opacity:1;background:#e0e5e1;color:#68756d;border-color:#b7c1ba;box-shadow:none}@media(min-width:751px)and (max-height:900px){.message,.table-mode .message{height:124px}}@media(max-width:750px){.app{--panel-height:620px}.input-panel .phrase-grid{grid-template-rows:repeat(5,minmax(0,1fr))}}.step-grid .kana:hover{background:#fff;border-color:#a6bdb3}.step-grid .selected-row:hover{background:#fff;border-color:#17665c}.step-grid .kana:active,.extras button:active{background:#c5e4d4}