*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #fafafa;--surface: #ffffff;--border: #e0e0e0;--text: #1a1a1a;--text-sub: #666666;--accent: #5b4fc4;--accent-hover: #4a3fb3;--accent-bg: #f0eef9;--error: #d93025;--success: #1e8e3e;--encode: #3b82f6;--decode: #ef4444;--radius: 10px;--shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .06);--shadow-lg: 0 4px 12px rgba(0, 0, 0, .1);--transition: .2s ease}@media(prefers-color-scheme:dark){:root{--bg: #0f0f0f;--surface: #1a1a1a;--border: #333333;--text: #e8e8e8;--text-sub: #999999;--accent: #8b7ff0;--accent-hover: #9d93f5;--accent-bg: #1e1a33;--encode: #60a5fa;--decode: #f87171;--shadow: 0 1px 3px rgba(0, 0, 0, .3);--shadow-lg: 0 4px 12px rgba(0, 0, 0, .4)}}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Hiragino Sans,Noto Sans JP,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;min-height:100dvh}.container{max-width:640px;margin:0 auto;padding:2rem 1rem;display:flex;flex-direction:column;min-height:100dvh}header{text-align:center;margin-bottom:2rem}header h1{font-size:1.75rem;font-weight:700;letter-spacing:-.02em}.subtitle{color:var(--text-sub);font-size:.9rem;margin-top:.25rem}.loading{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:3rem 1rem}.spinner{width:36px;height:36px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{font-weight:500}.loading-sub{color:var(--text-sub);font-size:.85rem}.app{flex:1}.hidden{display:none!important}.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow)}.field{margin-bottom:0}.field-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}.field-header label{margin-bottom:0}label{display:block;font-size:.85rem;font-weight:500;color:var(--text-sub);margin-bottom:.5rem}textarea{width:100%;padding:.75rem;border:1px solid var(--border);border-radius:calc(var(--radius) - 2px);background:var(--bg);color:var(--text);font-family:inherit;font-size:1rem;line-height:1.6;resize:vertical;transition:border-color var(--transition),background var(--transition)}textarea:focus{outline:none;border-color:var(--accent)}textarea.readonly{background:var(--surface);color:var(--text-sub);cursor:default;border-style:dashed}.direction-bar{display:flex;justify-content:center;padding:.75rem 0}.direction-toggle{display:flex;align-items:center;gap:.25rem;border:1px solid var(--border);border-radius:999px;background:var(--bg);padding:3px}.direction-option{padding:.4rem 1rem;border:none;border-radius:999px;background:transparent;color:var(--text-sub);font-size:.85rem;font-weight:500;cursor:pointer;transition:all var(--transition);-webkit-user-select:none;user-select:none}.direction-option.active-encode{background:var(--encode);color:#fff}.direction-option.active-decode{background:var(--decode);color:#fff}.direction-option:hover:not([class*=active-]){color:var(--text)}.direction-icon{flex-shrink:0;border-radius:50%;padding:2px;transition:transform .3s ease,background .2s ease,color .2s ease}.direction-icon.encode{background:var(--encode);color:#fff}.direction-icon.decode{background:var(--decode);color:#fff;transform:rotate(180deg)}.options{display:flex;flex-direction:column;gap:.5rem;padding:.75rem 0;margin-bottom:1rem;border-top:1px solid var(--border);border-bottom:1px solid var(--border);transition:opacity var(--transition)}.options.disabled{opacity:.45;pointer-events:none}.furigana-options{display:none}.options-row{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap}.options-hint{font-size:.75rem;color:var(--text-sub);margin:0}.toggle{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.9rem;margin-bottom:0}.toggle input{display:none}.toggle-slider{width:36px;height:20px;background:var(--border);border-radius:10px;position:relative;transition:background var(--transition);flex-shrink:0}.toggle-slider:after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;background:#fff;border-radius:50%;transition:transform var(--transition)}.toggle input:checked+.toggle-slider{background:var(--accent)}.toggle input:checked+.toggle-slider:after{transform:translate(16px)}.toggle-label{color:var(--text);font-weight:500}.label-with-toggle{display:flex;align-items:center;gap:.75rem}.toggle.mini{gap:.35rem;font-size:.75rem}.toggle.mini .toggle-slider{width:28px;height:16px}.toggle.mini .toggle-slider:after{width:12px;height:12px}.toggle.mini input:checked+.toggle-slider:after{transform:translate(12px)}.toggle.mini .toggle-label{font-weight:400;color:var(--text-sub)}.algorithm-select{display:flex;gap:1rem;font-size:.85rem}.algorithm-select label{display:flex;align-items:center;gap:.35rem;color:var(--text);cursor:pointer;font-weight:400}.algorithm-select input[type=radio]{accent-color:var(--accent)}.copy-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--text-sub);cursor:pointer;transition:all var(--transition)}.copy-btn:hover{color:var(--accent);border-color:var(--accent)}.copy-btn.copied{color:var(--success);border-color:var(--success)}.furigana-field{margin-top:1rem}.furigana-display{padding:.75rem;border:1px dashed var(--border);border-radius:calc(var(--radius) - 2px);background:var(--accent-bg);color:var(--accent);font-size:.85rem;word-break:break-all;line-height:1.5}.diff-display{margin-top:.75rem;padding:.625rem .75rem;background:var(--bg);border:1px solid var(--border);border-radius:calc(var(--radius) - 2px);font-family:Noto Sans JP,Hiragino Sans,sans-serif;font-size:.95rem;line-height:1.8;overflow-x:auto}.diff-line{white-space:nowrap}.diff-display .unchanged{color:var(--text-sub);opacity:.5}.diff-display .old{color:var(--error);text-decoration:line-through}.diff-display .fixed{color:var(--success);font-weight:700}.status{margin-top:.75rem;font-size:.8rem;min-height:1.2em}.status.error{color:var(--error)}.status.info{color:var(--text-sub)}footer{text-align:center;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--border);font-size:.85rem;color:var(--text-sub)}footer a{color:var(--accent);text-decoration:none}footer a:hover{text-decoration:underline}.separator{margin:0 .5rem}@media(max-width:480px){.container{padding:1.25rem .75rem}header h1{font-size:1.5rem}.panel{padding:1rem}}