.main-content {padding-bottom:80px}
.intro {padding:30px 0 20px}
.eyebrow {display:flex;align-items:center;gap:7px;color:var(--accent);font-size:11px;letter-spacing:1.15px;font-weight:800;margin-bottom:9px}
.intro h1 {font-size:34px;line-height:1.35;letter-spacing:-1.3px;font-weight:850}
.intro h1 span {color:var(--accent);font-weight:700;font-size:29px;letter-spacing:0}
.intro p {color:var(--muted);font-size:14px;margin-top:10px;line-height:1.85}
.workspace {display:grid;grid-template-columns:minmax(0,1fr);gap:25px}
.editor-panel,.keyboard-panel,.guide-section,.faq-section {background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.editor-panel {padding:22px 27px 20px}
.panel-heading,.section-top {display:flex;align-items:center;justify-content:space-between;gap:15px}
.panel-heading h2,.section-top h2,.faq-section h2 {font-size:19px;font-weight:800;letter-spacing:-.7px}
.panel-heading p,.section-top p {color:var(--muted);font-size:12.5px;margin-top:4px}
.private-label {font-size:11px;color:#77907f;background:#eff8f1;border-radius:20px;padding:5px 10px;white-space:nowrap}
.editor-toolbar {display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:16px;margin-bottom:11px;flex-wrap:wrap}
.toggle-label {display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:750;cursor:pointer;position:relative}
.toggle-label input {position:absolute;opacity:0;width:1px;height:1px}
.toggle-track {width:36px;height:21px;background:#c5ccd8;border-radius:30px;position:relative;transition:background .15s}
.toggle-track:before {content:"";position:absolute;width:15px;height:15px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .15s;box-shadow:0 1px 2px rgba(0,0,0,.15)}
.toggle-label input:checked+.toggle-track {background:#4b75c5}.toggle-label input:checked+.toggle-track:before {transform:translateX(15px)}
.toggle-label input:focus-visible+.toggle-track {outline:3px solid #80a7ed;outline-offset:3px}
.editor-options {display:flex;gap:8px}
.text-button {background:#fff;border:1px solid #e0e5ee;color:#5a6680;border-radius:7px;padding:6px 10px;font-size:12px;font-weight:600}
.text-button:hover {background:#f5f7fb;color:#2a4d90}
#kana-editor {resize:vertical;display:block;width:100%;height:120px;min-height:110px;padding:18px 19px;background:#fbfcfe;border:1px solid #d9e0eb;border-radius:11px;color:#27364e;font-size:21px;line-height:1.8;letter-spacing:.15px;outline:none}
#kana-editor:focus {border-color:#7998d1;box-shadow:0 0 0 3px rgba(105,145,218,.1)}
#kana-editor::placeholder {color:#abb4c3;font-size:15px;line-height:1.9}
.editor-footer {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:13px}
.char-count {font-size:12px;color:#97a1b3;white-space:nowrap}
.editor-actions {display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.button {display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 12px;border-radius:7px;border:1px solid var(--line);font-size:12px;font-weight:700;white-space:nowrap;transition:background .15s}
.button-ghost {color:#5b6881;background:#fff}.button-ghost:hover:not(:disabled) {background:#f2f6fa}
.button:disabled {opacity:.35;cursor:default}
.button-primary {background:var(--accent);border-color:var(--accent);color:#fff;padding:9px 16px}.button-primary:hover {background:var(--accent-darker)}
.keyboard-panel {padding:28px 27px 25px}
.segmented {background:#f2f4f7;border:1px solid #ebedf2;border-radius:10px;padding:4px;display:flex;align-items:center;gap:3px;white-space:nowrap}
.segment {font-size:12px;font-weight:700;background:transparent;border:0;color:#7a8395;padding:9px 15px;border-radius:7px}
.segment.active {background:#fff;color:var(--blue);box-shadow:0 1px 6px rgba(29,45,69,.12)}
.search-container {position:relative;display:flex;align-items:center;margin-top:24px}
.search-icon {position:absolute;left:14px;color:#909bb0;font-size:24px;line-height:1;pointer-events:none}
#kana-search {display:block;width:100%;height:48px;border:1px solid #dfe5ed;border-radius:9px;padding:0 172px 0 42px;outline:none;background:#fff;font-size:13px}
#kana-search:focus {border-color:#8aa7db;box-shadow:0 0 0 3px rgba(105,145,218,.08)}
#kana-search::placeholder {color:#a7b0bf}.search-hint {position:absolute;right:13px;font-size:11px;color:#a6afbc;pointer-events:none}
.tabs {display:flex;gap:6px;margin-top:21px;margin-bottom:20px;flex-wrap:wrap}
.tab {border:1px solid transparent;background:#f3f5f9;color:#727d92;font-size:12px;font-weight:700;border-radius:8px;padding:9px 14px}
.tab:hover {background:#e8edf5}.tab.active {color:#fff;background:#385da7}
.kana-board {min-height:200px}.kana-grid {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;max-width:650px}
.kana-grid.searching {grid-template-columns:repeat(6,minmax(0,1fr));max-width:none}
.kana-grid.combo-grid {grid-template-columns:repeat(3,minmax(0,1fr));max-width:400px}
.kana-grid.symbol-grid {grid-template-columns:repeat(5,minmax(0,1fr))}
.kana-key {min-width:0;min-height:75px;border:1px solid #e5eaf2;border-radius:10px;background:#fff;color:#26354d;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1px;transition:background .12s,border-color .12s,transform .12s}
.kana-key:hover {background:#f5f8ff;border-color:#a3b8e0;transform:translateY(-1px)}.kana-key:active {transform:translateY(0);background:#e8efff}
.kana-letter {font-size:26px;font-weight:500;line-height:1.35;font-family:"Yu Gothic","Hiragino Kaku Gothic ProN","Meiryo",sans-serif}
.kana-reading {font-size:11px;color:#97a1b1;letter-spacing:.2px}
.empty-state {padding:40px 0;color:var(--muted);font-size:13px;text-align:center}
.board-tip {font-size:12px;color:#939bad;margin-top:18px}
.board-tip strong {color:#65718a}
.guide-section {padding:30px 28px;margin-top:25px}
.guide-section .eyebrow {margin-bottom:6px}.guide-section .section-top p {margin-top:6px}
.rules-list {margin-top:23px;display:grid;gap:9px}
details {border:1px solid #e6eaf1;border-radius:9px;overflow:hidden;background:#fff}
summary {list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:13px 16px;font-size:13px;font-weight:700}
summary::-webkit-details-marker {display:none}
summary:after {content:'+';font-size:20px;line-height:1;font-weight:400;color:#7c87a0}
details[open]>summary:after {content:'−'}
details[open]>summary {background:#fafbfe;border-bottom:1px solid var(--line)}
.rule-table-wrap {overflow-x:auto;padding:7px 16px 12px}
.rule-table-wrap table {width:100%;border-collapse:collapse;font-size:12px;min-width:430px;text-align:left}
.rule-table-wrap th {font-size:11px;color:#8790a1;font-weight:750}
.rule-table-wrap th,.rule-table-wrap td {padding:10px 8px;border-bottom:1px solid #eff1f5}
.rule-table-wrap tr:last-child td {border-bottom:0}
.rule-table-wrap td:nth-child(2) {font-size:15px;color:#263955}
.faq-section {margin-top:25px;padding:28px}
.faq-list {margin-top:18px;display:grid;gap:9px}
.faq-list details p {padding:14px 17px;color:#69758a;font-size:12.5px;line-height:1.8}
.toast {position:fixed;bottom:26px;left:50%;transform:translate(-50%,18px);background:#253047;color:#fff;border-radius:10px;padding:12px 17px;font-size:13px;opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s;z-index:999;white-space:nowrap;max-width:calc(100vw - 30px);text-align:center}
.toast.visible {opacity:1;visibility:visible;transform:translate(-50%,0)}
@media (min-width:1000px) {.editor-panel {position:sticky;top:12px;z-index:2}.workspace {display:block}.keyboard-panel {margin-top:25px}}
@media (max-width:680px) {.container {width:calc(100% - 26px)}.site-header {height:67px}.header-inner {gap:12px}.brand {font-size:21px}.brand-mark {width:35px;height:35px;font-size:20px}.brand small {font-size:8px}.header-nav {display:none}.language-indicator {font-size:11px;padding:5px 8px}.main-content {padding-bottom:40px}.intro {padding:20px 2px 15px}.intro h1 {font-size:27px}.intro h1 span {font-size:22px}.intro p {font-size:12.5px}.desktop-only {display:none}.editor-panel,.keyboard-panel,.guide-section,.faq-section {border-radius:13px}.editor-panel,.keyboard-panel {padding:20px 17px}.panel-heading,.section-top {align-items:flex-start;flex-wrap:wrap}.panel-heading h2,.section-top h2,.faq-section h2 {font-size:18px}.private-label {font-size:10px}.editor-toolbar {margin-top:14px}.editor-options {gap:4px}.text-button {font-size:11px;padding:5px 7px}#kana-editor {font-size:19px;height:108px;min-height:100px;padding:13px}.editor-footer {align-items:flex-start}.editor-actions {gap:5px}.button {font-size:11px;padding:7px 9px}.editor-actions #undo-btn span,.editor-actions #redo-btn span {display:none}.button-primary {padding:8px 12px}.segmented {width:100%;margin-top:5px}.segment {flex:1}.search-container {margin-top:19px}#kana-search {padding-right:14px;font-size:12px}.search-hint {display:none}.tabs {gap:6px;margin-top:17px;margin-bottom:16px}.tab {font-size:11px;padding:7px 10px}.kana-grid {gap:6px}.kana-grid.searching {grid-template-columns:repeat(4,minmax(0,1fr))}.kana-key {min-height:63px;border-radius:8px}.kana-letter {font-size:22px}.kana-reading {font-size:10px}.guide-section,.faq-section {padding:21px 17px;margin-top:17px}.footer-inner {padding:22px 0;align-items:flex-start}.footer-inner>span {font-size:10px;padding-top:8px}}
@media (max-width:360px) {.editor-options {width:100%}.kana-grid.searching {grid-template-columns:repeat(3,minmax(0,1fr))}.button {font-size:10px}}