/* v0.3.2 additive reader-first UI. Original reader/theme styles stay untouched. */
#kakomukun.kk-ui-ready [hidden] { display: none !important; }
#kakomukun .kk-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; }
#kakomukun.kk-ui-ready { --kk-ui-green: #175a42; --kk-ui-green-2: #2d7658; --kk-ui-mint: #edf8ef; --kk-ui-cream: #f8f8f1; --kk-ui-ink: #163c30; --kk-ui-line: #dde7dc; --kk-ui-red: #b84747; background: linear-gradient(180deg, #fff 0, #fbfcf7 8rem, #f5f8ef 100%); color: #18221e; }
#kakomukun.kk-ui-ready .kk-wrap { max-width: 1320px; padding: 18px 22px 38px; }

#kakomukun .kk-action-icon { display: inline-grid; place-items: center; width: 1.55em; height: 1.55em; flex: 0 0 auto; line-height: 1; }
#kakomukun .kk-action-icon svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
#kakomukun .kk-brand-mark { display: inline-grid; place-items: center; width: 70px; height: 58px; flex: 0 0 auto; color: var(--kk-ui-green); }
#kakomukun .kk-brand-mark svg { width: 100%; height: 100%; fill: #fff; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
#kakomukun .kk-brand-mark .kk-brand-ray { stroke: #81cf65; }

#kakomukun .kk-app-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 72px; padding: 2px 8px 16px; border-bottom: 1px solid #e8eee5; }
#kakomukun .kk-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
#kakomukun .kk-brand-copy { display: flex; align-items: baseline; gap: 16px; min-width: 0; }
#kakomukun .kk-app-heading h1 { margin: 0; color: #103c2e; font-size: clamp(1.7rem, 3.2vw, 2.45rem); letter-spacing: .035em; white-space: nowrap; }
#kakomukun .kk-app-heading .lead { margin: 0; color: #68736d; font-size: .92rem; white-space: nowrap; }
#kakomukun .kk-version { display: inline-flex; align-items: center; min-height: 1.65em; margin-left: .35em; padding: .16em .48em; border: 1px solid #b8d4c2; border-radius: 999px; background: #edf7ef; color: #33634f; font-size: .34em; font-weight: 800; letter-spacing: .03em; vertical-align: middle; }
#kakomukun .kk-header-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
#kakomukun button.kk-header-button, #kakomukun button.kk-help-button { width: auto; min-height: 48px; border: 1px solid transparent; border-radius: 14px; background: #edf6ee; color: #173d31; box-shadow: none; font-size: 1rem; }
#kakomukun button.kk-header-button { min-width: 112px; }
#kakomukun button.kk-help-button { width: 48px; min-width: 48px; padding: 10px; border-radius: 50%; }

#kakomukun .kk-back-nav { display: flex; margin: 12px 0; }
#kakomukun .kk-back-nav-top { justify-content: flex-start; }
#kakomukun .kk-back-nav-bottom { justify-content: center; margin-top: 20px; }
#kakomukun .kk-back-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; max-width: 100%; padding: 8px 14px; border: 1px solid #b8d4c2; border-radius: 12px; background: #edf7ef; color: #175a42; font-size: .95rem; font-weight: 700; line-height: 1.35; text-decoration: none; }
#kakomukun .kk-back-link:hover { background: #dcefe1; text-decoration: underline; }
#kakomukun .kk-back-link:focus-visible { outline: 3px solid #1f66a1; outline-offset: 3px; }
#kakomukun .kk-back-link svg { width: 1.2em; height: 1.2em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

#kakomukun .kk-app-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, 380px); align-items: start; gap: 18px; margin-top: 18px; }
#kakomukun .kk-app-shell:not(.kk-settings-open) { grid-template-columns: minmax(0, 1fr); }
#kakomukun .kk-reader-pane { min-width: 0; }
#kakomukun.kk-ui-ready #kk-tool { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }

#kakomukun .kk-primary-actions { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
#kakomukun button.kk-primary-action { display: flex; min-width: 0; min-height: 142px; padding: 15px 8px 13px; flex-direction: column; justify-content: center; gap: 9px; border: 1px solid #dfe9df; border-radius: 22px; background: #eef8ef; color: #163c30; box-shadow: 0 6px 18px #1a4d3520, inset 0 0 0 1px #ffffff80; font-size: 1rem; font-weight: 800; line-height: 1.35; text-align: center; }
#kakomukun button.kk-primary-action .kk-action-icon { width: 3.4rem; height: 3.4rem; }
#kakomukun button.kk-primary-action[aria-pressed="true"] { border-color: #276e50; background: linear-gradient(145deg, #31785a, #15583f); color: #fff; box-shadow: 0 9px 24px #174b343d; }
#kakomukun .kk-speech-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; min-width: 0; }
#kakomukun .kk-speech-controls button.kk-primary-action { width: 100%; min-height: 142px; padding: 8px 3px; font-size: .88rem; }
#kakomukun .kk-speech-controls button.kk-primary-action .kk-action-icon { width: 2.5rem; height: 2.5rem; }
#kakomukun .kk-speech-controls .kk-resume-icon,
#kakomukun .kk-speech-controls [data-playback-state="paused"] .kk-pause-icon { display: none; }
#kakomukun .kk-speech-controls [data-playback-state="paused"] .kk-resume-icon { display: inline-grid; }
#kakomukun button.kk-action-pause { background: #edf5f8; color: #17485f; }
#kakomukun button.kk-action-stop { background: #fff1f1; color: var(--kk-ui-red); }
#kakomukun button.kk-action-stop .kk-action-icon svg { fill: currentColor; stroke-width: 1.2; }
#kakomukun button.kk-action-settings { background: #f2f3f2; }
#kakomukun button.kk-primary-action:hover { transform: translateY(-2px); box-shadow: 0 10px 24px #1a4d352c; }
#kakomukun button.kk-primary-action:active { transform: translateY(0); }
#kakomukun button.kk-primary-action:disabled { opacity: .62; cursor: not-allowed; transform: none; }

#kakomukun .kk-reader-card { padding: 0; overflow: hidden; border: 1px solid #e0e8df; border-radius: 22px; background: #fff; box-shadow: 0 10px 30px #203d2b14; }
#kakomukun .kk-reader-card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 68px; padding: 11px 15px 10px 18px; border-bottom: 1px solid #e9eee7; }
#kakomukun .kk-reader-card-header h2 { display: inline-flex; align-items: center; gap: 9px; margin: 0; padding: 0; border: 0; color: #263831; font-size: 1rem; }
#kakomukun .kk-reader-card-header h2 .kk-action-icon { color: var(--kk-ui-green); }
#kakomukun .kk-reader-card-actions { display: flex; gap: 8px; flex: 0 0 auto; }
#kakomukun button.kk-card-button { display: inline-flex; width: auto; min-height: 46px; padding: 9px 13px; border-color: #e0e7df; border-radius: 12px; background: #f7f8f5; color: #273b33; box-shadow: 0 3px 9px #263c2f0e; font-size: .9rem; }
#kakomukun .kk-reader-card .output-wrap { margin: 0; border: 0; border-radius: 0; background: var(--kk-bg); }
#kakomukun .kk-reader-card .kk-output { min-height: 330px; padding: 30px clamp(18px, 3.6vw, 38px); }
#kakomukun .kk-reader-card .status { min-height: 0; margin: 0; padding: 0 18px; color: #626d67; font-size: .8rem; }
#kakomukun .kk-reader-card .status:not(:empty) { min-height: 40px; padding-top: 8px; padding-bottom: 8px; border-top: 1px solid #edf0eb; }

#kakomukun .kk-reader-hint { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 54px; margin-top: 12px; padding: 7px 11px 7px 16px; border: 1px solid #dfebdd; border-radius: 14px; background: linear-gradient(90deg, #eef8e9, #f7fbef); color: #345846; font-size: .83rem; }
#kakomukun .kk-hint-copy, #kakomukun .kk-hint-brand { display: inline-flex; align-items: center; gap: 8px; }
#kakomukun .kk-hint-copy > .kk-action-icon { color: #3e965b; }
#kakomukun .kk-hint-brand { margin-left: auto; color: #25704f; font-weight: 800; white-space: nowrap; }
#kakomukun .kk-hint-brand .kk-brand-mark { width: 42px; height: 34px; }
#kakomukun button.kk-feedback-open { width: auto; min-height: 40px; padding: 7px 10px; border-color: #d8e6d8; border-radius: 10px; background: #fff; color: #315b47; font-size: .82rem; }

#kakomukun .kk-about-panel { margin: 18px 0 30px; }
#kakomukun .kk-about-panel > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; cursor: pointer; border-radius: 10px; color: #315f4a; font-weight: 700; }
#kakomukun .kk-about-panel > summary .kk-action-icon { width: 1.3rem; height: 1.3rem; }
#kakomukun .kk-about-content { margin-top: 10px; }
#kakomukun .kk-about-content > section { margin-top: 12px; }

/* Dialogs */
#kakomukun dialog { box-sizing: border-box; color: #222; }
#kakomukun dialog::backdrop { background: #14281f8a; backdrop-filter: blur(3px); }
#kakomukun dialog.kk-modal { position: fixed; inset: 0; width: min(720px, calc(100% - 28px)); max-width: 720px; max-height: min(760px, calc(100dvh - 28px)); margin: auto; padding: 0; overflow: hidden; border: 1px solid #d9e3d8; border-radius: 20px; background: #fffdf8; box-shadow: 0 24px 70px #10180d55; }
#kakomukun .kk-modal[open] { animation: kk-modal-in 150ms ease-out; }
#kakomukun .kk-modal-shell { display: flex; flex-direction: column; max-height: min(760px, calc(100dvh - 28px)); }
#kakomukun .kk-modal-header, #kakomukun .kk-drawer-header { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 12px; border-bottom: 1px solid #e4ebe2; }
#kakomukun .kk-modal-header h2, #kakomukun .kk-drawer-header h2 { margin: 0; padding: 0; border: 0; font-size: 1.18rem; }
#kakomukun button.kk-dialog-close { display: inline-flex; align-items: center; gap: 5px; width: auto; min-height: 44px; padding: 8px 11px; border-radius: 10px; }
#kakomukun .kk-modal-body { flex: 1; min-height: 0; padding: 18px 20px 22px; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
#kakomukun .kk-input-label { display: block; margin-bottom: 7px; font-weight: 700; }
#kakomukun.kk-ui-ready #kkInput { min-height: 210px; background: #fff; color: #222; }
#kakomukun .kk-input-actions { display: flex; justify-content: flex-end; margin-top: 12px; }
#kakomukun .kk-input-actions #kkConvert { width: auto; min-width: 150px; min-height: 48px; }
#kakomukun .kk-sample-panel { margin-top: 16px; border-top: 1px solid #e4ded2; padding-top: 10px; }
#kakomukun .kk-sample-panel summary { min-height: 40px; padding: 8px 0; cursor: pointer; color: #405c35; font-weight: 700; }

/* Settings is an on-demand side panel on desktop. */
#kakomukun dialog.kk-settings-drawer { position: sticky; z-index: 1; top: 12px; display: none; width: 100%; max-width: none; height: calc(100vh - 24px); height: calc(100dvh - 24px); max-height: 860px; margin: 0; padding: 0; overflow: hidden; border: 1px solid #e0e8df; border-radius: 22px; background: #fff; box-shadow: 0 10px 30px #203d2b12; }
#kakomukun dialog.kk-settings-drawer[open] { display: flex; flex-direction: column; }
#kakomukun .kk-drawer-header { min-height: 62px; }
#kakomukun .kk-drawer-header h2 { display: flex; align-items: center; gap: 8px; color: #173d31; }
#kakomukun .kk-drawer-header h2 .kk-action-icon { color: var(--kk-ui-green); }
#kakomukun .kk-drawer-header .kk-dialog-close { display: inline-flex; }
#kakomukun .kk-settings-tabs { display: flex; flex: 0 0 auto; gap: 5px; margin: 10px 16px; padding: 4px; border-radius: 12px; background: #eef1ed; }
#kakomukun .kk-settings-tabs button { flex: 1; width: auto; min-height: 42px; border: 0; border-radius: 9px; background: transparent; color: #4a544e; box-shadow: none; }
#kakomukun .kk-settings-tabs [aria-selected="true"] { background: var(--kk-ui-green); color: #fff; box-shadow: 0 2px 7px #26352224; }
#kakomukun .kk-drawer-body { flex: 1; min-height: 0; padding: 0 16px 14px; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
#kakomukun .kk-quick-settings, #kakomukun .kk-settings-drawer .kk-choice-panel { display: grid; gap: 9px; margin: 0; padding: 0; border: 0; background: transparent; }
#kakomukun .kk-setting-row, #kakomukun .kk-settings-drawer .kk-choice-group { display: grid; grid-template-columns: minmax(128px, .92fr) minmax(0, 1.25fr); align-items: center; gap: 10px; min-height: 66px; padding: 8px 10px; border: 1px solid #e8eee7; border-radius: 13px; background: #fff; }
#kakomukun .kk-setting-row h3, #kakomukun .kk-choice-label, #kakomukun .kk-preset-settings > h3 { display: flex; align-items: center; gap: 8px; margin: 0; color: #273a32; font-size: .9rem; font-weight: 800; line-height: 1.35; }
#kakomukun .kk-setting-row h3 .kk-action-icon, #kakomukun .kk-choice-label .kk-action-icon, #kakomukun .kk-preset-settings h3 .kk-action-icon { width: 1.8rem; height: 1.8rem; color: var(--kk-ui-green); }
#kakomukun .kk-segmented { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; padding: 3px; border-radius: 11px; background: #f1f3f0; }
#kakomukun .kk-binary-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#kakomukun .kk-segmented button { width: 100%; min-width: 0; min-height: 44px; padding: 5px; border: 0; border-radius: 8px; background: transparent; color: #2a3d34; box-shadow: none; }
#kakomukun [data-quick-setting="font"] .kk-segmented button:nth-child(1) { font-size: .82rem; }
#kakomukun [data-quick-setting="font"] .kk-segmented button:nth-child(2) { font-size: 1.08rem; }
#kakomukun [data-quick-setting="font"] .kk-segmented button:nth-child(3) { font-size: 1.38rem; }
#kakomukun .kk-segmented button[aria-pressed="true"] { background: var(--kk-ui-green-2); color: #fff; box-shadow: 0 3px 8px #184b3433; }
#kakomukun .kk-rate-options button { font-size: .76rem; font-weight: 700; white-space: nowrap; }
#kakomukun .kk-line-options button { display: flex; flex-direction: column; justify-content: center; gap: 3px; }
#kakomukun .kk-line-options button:nth-child(2) { gap: 5px; }
#kakomukun .kk-line-options button:nth-child(3) { gap: 8px; }
#kakomukun .kk-line-options i { display: block; width: 72%; height: 2px; background: currentColor; border-radius: 2px; }
#kakomukun .kk-spacing-options button { font-size: .74rem; white-space: nowrap; }
#kakomukun .kk-settings-drawer .kk-choice-panel { margin-top: 9px; }
#kakomukun .kk-settings-drawer .kk-choice-row { display: flex; flex-wrap: nowrap; gap: 5px; min-width: 0; }
#kakomukun .kk-settings-drawer .kk-choice { flex: 1 1 0; width: auto; min-width: 0; min-height: 44px; padding: 6px 5px; border-radius: 9px; font-size: .68rem; line-height: 1.15; }
#kakomukun .kk-settings-drawer .kk-choice-text { display: block; min-width: 0; overflow-wrap: normal; }
#kakomukun .kk-settings-drawer .swatch { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; }
#kakomukun .kk-settings-drawer .kk-theme-group .kk-choice { flex-direction: column; gap: 2px; min-height: 54px; }
#kakomukun .kk-settings-drawer .kk-contrast-group .kk-choice { font-size: .8rem; font-weight: 700; }
#kakomukun .kk-settings-drawer .kk-highlight-group .kk-choice-row { justify-content: space-between; }
#kakomukun .kk-settings-drawer .kk-highlight-group .kk-choice { flex: 0 0 34px; width: 34px; min-height: 34px; padding: 3px; border-color: transparent; border-radius: 50%; background: transparent; }
#kakomukun .kk-settings-drawer .kk-highlight-group .kk-choice .swatch { width: 24px; height: 24px; }
#kakomukun .kk-settings-drawer .kk-highlight-group .kk-choice-text { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); }
#kakomukun .kk-settings-drawer .kk-highlight-group .kk-choice.is-selected { outline: 3px solid var(--kk-ui-green-2); outline-offset: 1px; }
#kakomukun .kk-settings-drawer .kk-bionic-group .kk-choice { font-size: .76rem; }
#kakomukun .kk-preset-settings { margin-bottom: 9px; padding: 10px; border: 1px solid #e8eee7; border-radius: 13px; }
#kakomukun .kk-preset-settings > h3 { margin-bottom: 9px; }
#kakomukun .kk-settings-drawer .kk-icon-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
#kakomukun .kk-settings-drawer .kk-icon-card { align-items: center; width: 100%; min-width: 0; min-height: 70px; padding: 7px 3px; border-radius: 10px; text-align: center; }
#kakomukun .kk-settings-drawer .kk-icon-card .kk-action-icon { width: 1.65rem; height: 1.65rem; }
#kakomukun .kk-settings-drawer .kk-icon-title { font-size: .72rem; line-height: 1.2; }
#kakomukun .kk-settings-drawer .kk-icon-desc { display: none; }
#kakomukun .kk-settings-drawer .kk-suggestion-box { display: none; }
#kakomukun .kk-settings-drawer .controls { display: grid; grid-template-columns: minmax(0, 1fr); gap: 11px; margin: 0; padding: 8px; }
#kakomukun .kk-settings-drawer .control { min-width: 0; }
#kakomukun .kk-settings-drawer .control label { color: #39483f; font-size: .85rem; }
#kakomukun .kk-settings-drawer .control input, #kakomukun .kk-settings-drawer .control select { min-width: 0; max-width: 100%; min-height: 44px; font-size: 16px; }
#kakomukun .kk-drawer-footer { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 9px; padding: 9px 16px max(10px, env(safe-area-inset-bottom)); border-top: 1px solid #e4ebe2; background: #fff; }
#kakomukun .kk-drawer-footer .note { margin: 0; font-size: .7rem; }
#kakomukun .kk-drawer-footer button { width: auto; min-height: 42px; padding: 7px 11px; border-radius: 10px; }

/* Zoom retains a fixed word stage and a separately scrolling text region. */
#kakomukun .kk-reader-card .kk-zoom-panel { margin: 12px 16px 0; border-color: #b9d4be; background: #f3faee; }
#kakomukun .kk-reader-card .kk-zoom-panel .kk-zoom-current { background: color-mix(in srgb, var(--kk-highlight-bg, #fff2a8) 55%, #fff); }
#kakomukun.kk-zoom-enabled .kk-reader-card .output-wrap { margin: 12px 16px 16px; border: 1px solid #cfdccf; border-radius: 14px; }
#kakomukun.kk-zoom-enabled .kk-reader-card .kk-output { min-height: 260px; }

/* Feedback modal */
#kakomukun .kk-feedback-dialog .kk-modal-body { padding-top: 4px; }
#kakomukun .kk-feedback-dialog section { margin: 0; padding: 10px 0 0; border: 0; background: transparent; box-shadow: none; }
#kakomukun .kk-feedback-dialog section > p:first-child { margin: 2px 0 12px; color: #646a61; }
#kakomukun .kk-feedback-dialog .feedbackMini { padding: 12px; }
#kakomukun .kk-feedback-dialog .feedbackMini h3, #kakomukun .kk-feedback-dialog .feedbackBlock h3 { margin-top: 0; font-size: 1rem; }
#kakomukun .kk-feedback-dialog .feedbackMini .row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
#kakomukun .kk-feedback-dialog .star { width: 100%; min-width: 0; min-height: 54px; padding: 7px 5px; font-size: .8rem; line-height: 1.2; }
#kakomukun .kk-feedback-dialog .feedbackGrid { grid-template-columns: 1fr 1fr; gap: 10px; }
#kakomukun .kk-feedback-dialog .feedbackBlock { min-width: 0; padding: 12px; }
#kakomukun .kk-feedback-dialog .checks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
#kakomukun .kk-feedback-dialog .checks label { min-width: 0; padding: 7px 8px; overflow-wrap: anywhere; }
#kakomukun .kk-feedback-dialog .feedbackBlock .note { margin-bottom: 8px; font-size: .76rem; }
#kakomukun .kk-feedback-dialog #kkComment { min-height: 100px; }

#kakomukun button:focus-visible, #kakomukun summary:focus-visible, #kakomukun [role="tabpanel"]:focus-visible, #kakomukun textarea:focus-visible, #kakomukun select:focus-visible, #kakomukun input:focus-visible { outline: 3px solid #156ac7; outline-offset: 3px; }
@keyframes kk-modal-in { from { transform: translateY(12px) scale(.985); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes kk-drawer-in { from { transform: translateX(32px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #kakomukun *, #kakomukun *::before, #kakomukun *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }

@media (max-width: 1150px) and (min-width: 1000px) {
  #kakomukun.kk-ui-ready .kk-wrap { padding-left: 12px; padding-right: 12px; }
  #kakomukun .kk-app-shell { grid-template-columns: minmax(0, 1fr) 330px; gap: 12px; }
  #kakomukun button.kk-primary-action { min-height: 126px; font-size: .88rem; }
  #kakomukun button.kk-primary-action .kk-action-icon { width: 2.8rem; height: 2.8rem; }
  #kakomukun .kk-setting-row, #kakomukun .kk-settings-drawer .kk-choice-group { grid-template-columns: minmax(110px, .9fr) minmax(0, 1.2fr); padding-left: 8px; padding-right: 8px; }
}

@media (max-width: 999px) {
  #kakomukun.kk-ui-ready .kk-wrap { max-width: 860px; }
  #kakomukun .kk-app-shell { grid-template-columns: minmax(0, 1fr); }
  #kakomukun dialog.kk-settings-drawer { position: fixed; inset: 0 0 0 auto; z-index: auto; width: min(440px, 100%); max-width: 100%; height: 100vh; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-left: 1px solid #d9e4d8; border-radius: 20px 0 0 20px; box-shadow: -12px 0 48px #10180d3d; }
  #kakomukun dialog.kk-settings-drawer[open] { animation: kk-drawer-in 170ms ease-out; }
  #kakomukun .kk-drawer-header .kk-dialog-close { display: inline-flex; }
}

@media (max-width: 680px) {
  #kakomukun .kk-speech-controls { grid-column: span 2; }
  #kakomukun .kk-speech-controls button.kk-primary-action { min-height: 106px; }
  #kakomukun.kk-ui-ready .kk-wrap { padding: 10px 10px 28px; }
  #kakomukun .kk-app-heading { padding: 2px 2px 10px; }
  #kakomukun .kk-brand-mark { width: 48px; height: 42px; }
  #kakomukun .kk-brand-copy { display: block; }
  #kakomukun .kk-app-heading h1 { font-size: 1.55rem; }
  #kakomukun .kk-app-heading .lead { margin-top: -2px; font-size: .72rem; }
  #kakomukun .kk-version { font-size: .34em; }
  #kakomukun button.kk-header-button { min-width: 48px; width: 48px; padding: 10px; }
  #kakomukun button.kk-header-button span:not(.kk-action-icon) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  #kakomukun .kk-primary-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  #kakomukun button.kk-primary-action { min-height: 106px; padding: 10px 5px; border-radius: 17px; font-size: .83rem; }
  #kakomukun button.kk-primary-action .kk-action-icon { width: 2.55rem; height: 2.55rem; }
  #kakomukun .kk-reader-card-header { align-items: flex-start; flex-direction: column; padding: 12px; }
  #kakomukun .kk-reader-card-actions { width: 100%; }
  #kakomukun button.kk-card-button { flex: 1 1 0; min-width: 0; padding-left: 7px; padding-right: 7px; }
  #kakomukun .kk-reader-card .kk-output { min-height: 280px; padding: 22px 14px; }
  #kakomukun .kk-reader-hint { align-items: flex-start; flex-wrap: wrap; padding: 9px 10px; }
  #kakomukun .kk-hint-copy { width: 100%; }
  #kakomukun .kk-hint-brand { margin-left: 0; }
  #kakomukun button.kk-feedback-open { margin-left: auto; }
  #kakomukun dialog.kk-modal, #kakomukun dialog.kk-settings-drawer { inset: 0; width: 100%; max-width: none; height: 100vh; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  #kakomukun .kk-modal-shell { height: 100dvh; max-height: 100dvh; }
  #kakomukun .kk-modal-header, #kakomukun .kk-drawer-header { padding: 12px 11px 9px; }
  #kakomukun .kk-modal-body, #kakomukun .kk-drawer-body { padding-left: 11px; padding-right: 11px; }
  #kakomukun .kk-settings-tabs { margin-left: 11px; margin-right: 11px; }
  #kakomukun .kk-setting-row, #kakomukun .kk-settings-drawer .kk-choice-group { grid-template-columns: minmax(115px, .9fr) minmax(0, 1.25fr); }
  #kakomukun .kk-feedback-dialog .feedbackMini .row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #kakomukun .kk-feedback-dialog .feedbackGrid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  #kakomukun .kk-settings-drawer .kk-icon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 370px) {
  #kakomukun .kk-speech-controls { grid-column: 1 / -1; order: 5; }
  #kakomukun button.kk-action-sequence { order: 3; }
  #kakomukun button.kk-action-settings { order: 4; }
  #kakomukun button.kk-header-button { display: none; }
  #kakomukun .kk-brand-mark { width: 42px; height: 38px; }
  #kakomukun .kk-app-heading h1 { font-size: 1.38rem; }
  #kakomukun .kk-app-heading .lead { display: none; }
  #kakomukun .kk-header-actions { gap: 5px; }
  #kakomukun .kk-primary-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #kakomukun button.kk-primary-action { min-height: 94px; }
  #kakomukun button.kk-primary-action .kk-action-icon { width: 2.25rem; height: 2.25rem; }
  #kakomukun button.kk-action-settings { grid-column: auto; min-height: 94px; flex-direction: column; }
  #kakomukun .kk-setting-row, #kakomukun .kk-settings-drawer .kk-choice-group { grid-template-columns: minmax(100px, .8fr) minmax(0, 1.2fr); gap: 6px; padding: 7px; }
  #kakomukun .kk-setting-row h3, #kakomukun .kk-choice-label { font-size: .78rem; }
  #kakomukun .kk-setting-row h3 .kk-action-icon, #kakomukun .kk-choice-label .kk-action-icon { width: 1.5rem; height: 1.5rem; }
  #kakomukun .kk-setting-row[data-quick-setting="rate"] { grid-template-columns: minmax(0, 1fr); }
  #kakomukun .kk-rate-options button { font-size: .9rem; }
  #kakomukun .kk-settings-drawer .kk-choice { font-size: .6rem; }
  #kakomukun .kk-hint-brand { display: none; }
}