.input-section{width:100%;display:flex;flex-direction:column;gap:1rem;position:relative;flex:1}.input-description{font-size:1rem;color:var(--color-text-secondary);font-weight:500;margin-bottom:.5rem}.input-area{width:100%;padding:1.5rem;background-color:transparent;border:none;border-radius:var(--radius-lg);font-size:1.5rem;line-height:2.5;color:var(--color-text-primary);outline:none;transition:all .2s ease;resize:none;font-family:inherit}.input-area::placeholder{color:var(--color-text-secondary);opacity:.6}.input-actions{position:absolute;bottom:1rem;right:1rem;display:flex;gap:.75rem;align-items:center;z-index:10}.generate-button{width:2.5rem;height:2.5rem;background-color:var(--color-bg-secondary);border-radius:50%;color:var(--color-text-secondary);display:flex;align-items:center;justify-content:center;transition:all .2s ease;cursor:pointer}.generate-button:hover{background-color:var(--color-bg-secondary-hover);color:var(--color-text-primary);transform:rotate(15deg)}.paste-button{display:none}@media(max-width:768px){.paste-button{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:50%;background-color:var(--color-bg-secondary);color:var(--color-text-secondary);transition:all .2s ease;cursor:pointer}.paste-button:active{background-color:var(--color-bg-secondary-hover);transform:scale(.95)}}.nav{width:100%;height:4rem;display:flex;align-items:center;padding:0 2rem;background-color:var(--color-accent-green);border-bottom:1px solid var(--color-border);position:sticky;top:0;z-index:100}.nav .nav-title{text-decoration:none;display:flex;align-items:center;gap:.5rem;transition:opacity .2s}.nav .nav-title:hover{opacity:.8}.nav .logo{width:2rem;height:2rem;object-fit:contain}.nav .title{font-family:Noto Sans JP,sans-serif;font-weight:700;font-size:1.25rem;color:var(--color-text-inverted)}.skeleton-container{display:flex;flex-direction:column;gap:1.25rem;width:100%;padding:1rem}.skeleton-line{height:1.75rem;background-color:#e5e7eb;border-radius:.375rem;animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.result-container-inner{display:flex;flex-direction:column;height:100%;padding:1.5rem;border-radius:var(--radius-lg);transition:background-color .2s ease,color .2s ease}.result-container-inner.dark-result{background-color:var(--color-bg-dark-panel);color:var(--color-text-dark-primary)}.result-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:auto;padding-top:1rem}.export-group{display:flex;gap:.5rem;padding-left:.5rem;margin-left:.5rem;border-left:1px solid var(--color-border);align-items:center}.action-button{background-color:transparent;border:none;color:var(--color-text-secondary);padding:.5rem .75rem;border-radius:var(--radius-md);transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:.5rem;font-weight:500;font-size:.9rem}.action-button:hover{background-color:var(--color-bg-secondary-hover);color:var(--color-text-primary);border-color:var(--color-text-secondary)}.action-button:focus-visible,.menu-item:focus-visible,.switch input:focus-visible+.slider,.kana-accent-hitbox:focus-visible,.kana-text:focus-visible{outline:2px solid var(--color-accent-green);outline-offset:2px}.result-container-inner.dark-result .action-button{color:var(--color-text-dark-secondary)}.result-container-inner.dark-result .action-button:hover{background-color:var(--color-bg-dark-hover);color:var(--color-text-dark-primary)}.theme-toggle.active{color:var(--color-accent-green);background-color:var(--color-accent-green-light)}.result-content{flex:1;position:relative;padding:0}.empty-state{display:flex;justify-content:flex-start;align-items:flex-start;height:100%;color:var(--color-text-secondary);font-size:1.5rem;opacity:.6;padding:0}.empty-state p{font-size:1.5rem;margin:0;color:inherit;line-height:2.5}.result-area{font-size:1.5rem;line-height:2.5;color:var(--color-text-primary);padding:0;border-radius:var(--radius-md);transition:background-color .2s ease,color .2s ease}ruby{display:inline-block;display:ruby}rt{font-size:.6em;line-height:1.2;-webkit-user-select:none;user-select:none;text-align:center;color:var(--color-text-secondary)}.dark-theme .result-area{background-color:var(--color-bg-dark-panel);color:var(--color-text-dark-primary)}.result-container-inner.tone-down{opacity:.7;filter:grayscale(.5);pointer-events:none;-webkit-user-select:none;user-select:none}.toast-notification{position:absolute;bottom:100%;left:0;margin-bottom:.5rem;background-color:var(--color-feedback-success);color:var(--color-feedback-text);padding:.5rem 1rem;border-radius:var(--radius-md);font-size:.875rem;white-space:nowrap;box-shadow:var(--shadow-hover);animation:fadeInOut 2s ease forwards;z-index:10;pointer-events:none}.toast-notification.toast-warning{background-color:var(--color-feedback-warning)}@keyframes fadeInOut{0%{opacity:0;transform:translateY(-10px)}10%{opacity:1;transform:translateY(0)}90%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-10px)}}.action-group-left{display:flex;gap:.5rem;position:relative}.save-menu-container{position:relative;display:inline-block}.save-menu-dropdown{position:absolute;bottom:100%;right:0;width:100px;background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:.5rem;margin-bottom:.5rem;z-index:20;display:flex;flex-direction:column;justify-content:center;gap:.25rem;color:var(--color-text-menu-fixed);text-align:left}.theme-switch-container{display:flex;justify-content:flex-start;align-items:center;width:100%;padding:.5rem .75rem;gap:.5rem;cursor:default;color:var(--color-text-secondary);border-bottom:1px solid var(--color-border)}.switch{position:relative;display:inline-block;width:36px;height:20px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--color-switch-track);transition:.4s;border-radius:32px;width:32px}.slider:before{position:absolute;content:"";height:14px;width:14px;left:3px;bottom:3px;background-color:var(--color-switch-thumb);transition:.4s;border-radius:50%}input:checked+.slider{background-color:var(--color-accent-green)}input:focus+.slider{box-shadow:0 0 1px var(--color-accent-green)}input:checked+.slider:before{transform:translate(12px)}.menu-item{background-color:transparent;border:none;color:var(--color-text-secondary);padding:.5rem .75rem;border-radius:var(--radius-md);transition:all .2s ease;display:flex;align-items:center;justify-content:flex-start;gap:.5rem;font-weight:500;font-size:.9rem}.menu-item:hover{background-color:var(--color-bg-secondary-hover);color:var(--color-text-primary);border-color:var(--color-text-secondary)}.result-container-inner.dark-result .empty-state{color:var(--color-text-dark-secondary)}.result-container-inner.dark-result rt{color:var(--color-text-dark-secondary)}.result-container-inner.dark-result .result-area,.result-container-inner.dark-result .result-area span,.result-container-inner.dark-result .result-area ruby{color:var(--color-text-dark-primary)}.app-container{min-height:100vh;display:flex;flex-direction:column;background-color:var(--color-bg-primary)}.main-content{flex:1;width:100%;max-width:1400px;margin:0 auto;padding:2rem}.two-col-layout{display:grid;grid-template-columns:1fr;gap:2rem;min-height:60vh}@media(min-width:1024px){.two-col-layout{grid-template-columns:1fr 1fr}}.input-panel,.result-panel{background-color:var(--color-bg-secondary);border-radius:var(--radius-xl);border:1px solid var(--color-border);transition:all .2s ease;min-height:500px;display:flex;flex-direction:column;padding:0}:root{--accent-color: var(--color-accent-red);--accent-width: 2px;--kana-accent-lane-height: 1em;--kana-accent-hitbox-height: .5rem;--kana-accent-hitbox-overlap: .125rem;--kana-drop-height: .4rem;--kana-edit-hover-bg: color-mix(in srgb, var(--color-accent-red) 8%, transparent);--kana-edit-focus-bg: color-mix(in srgb, var(--color-accent-red) 12%, transparent)}ruby>rt{min-height:1em}.kana-only-ruby>rt{width:1em;min-width:1em}.kana-only-base{text-align:center}.kana-shell{position:relative;display:inline-grid;grid-template-rows:var(--kana-accent-lane-height) auto;align-items:start;min-width:max-content}.kana-shell[data-empty=true]{min-width:1em}.kana-only-ruby>rt>.kana-shell{width:1em;min-width:1em}.kana-accent-lane{position:relative;inset-inline:auto;height:var(--kana-accent-lane-height);pointer-events:none}.kana-accent-hitbox{position:absolute;inset-inline:0;bottom:calc(var(--kana-accent-hitbox-overlap) * -1);height:var(--kana-accent-hitbox-height);margin:0;padding:0;min-width:0;min-height:0;border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:none;background:transparent;border-radius:var(--radius-sm);pointer-events:auto;z-index:2}.kana-accent-hitbox:hover{background-color:var(--kana-edit-hover-bg)}.kana-accent-hitbox:focus-visible{background-color:var(--kana-edit-focus-bg)}.kana-shell[data-accent=flat]>.kana-accent-lane:before,.kana-shell[data-accent=drop]>.kana-accent-lane:before{content:"";position:absolute;inset-inline:0;bottom:0;border-top:var(--accent-width) solid var(--accent-color);pointer-events:none}.kana-shell[data-accent=drop]>.kana-accent-lane:after{content:"";position:absolute;right:0;bottom:calc(-1 * var(--kana-drop-height) + var(--accent-width));height:var(--kana-drop-height);border-left:var(--accent-width) solid var(--accent-color);pointer-events:none}.kana-text{position:relative;z-index:1}.kana-shell[data-ghost=true]>.kana-text{display:block;visibility:hidden;block-size:0;line-height:0;overflow:hidden;white-space:pre}.kana-shell[data-editable=true]>.kana-text:before{content:"";position:absolute;top:.1em;right:-1px;bottom:0;left:-1px;border-radius:var(--radius-sm);background-color:transparent;transition:background-color .2s ease;pointer-events:none;z-index:-1}.kana-shell[data-editable=true]>.kana-text:hover:before{background-color:var(--kana-edit-hover-bg)}.kana-shell[data-editable=true]:focus-within>.kana-text:before{background-color:var(--kana-edit-focus-bg)}.kana-shell[data-editable=true]:has(.kana-accent-hitbox:hover)>.kana-text:before,.kana-shell[data-editable=true]:has(.kana-accent-hitbox:focus-visible)>.kana-text:before{background-color:transparent}:root{--color-bg-primary: hsl(0, 8%, 90%);--color-bg-secondary: #ffffff;--color-bg-secondary-hover: #fafaf9;--color-text-primary: #1f2937;--color-text-secondary: #6b7280;--color-text-inverted: #ffffff;--color-accent-green: #619e83;--color-accent-green-hover: #4e7e69;--color-accent-green-light: #eff7f4;--color-accent-red: #9e4145;--color-accent-red-hover: #7e3437;--color-accent-red-light: #fcf2f2;--color-border: #e5e7eb;--shadow-soft: 0 4px 6px -1px rgba(0, 0, 0, .05), 0 2px 4px -1px rgba(0, 0, 0, .03);--shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, .05), 0 4px 6px -2px rgba(0, 0, 0, .03);--radius-sm: .375rem;--radius-md: .5rem;--radius-lg: 1rem;--radius-xl: 1.5rem;--color-bg-dark-panel: #1f2937;--color-bg-dark-hover: #374151;--color-text-dark-primary: #f9fafb;--color-text-dark-secondary: #9ca3af;--color-border-dark: #4b5563;--color-text-menu-fixed: #374151;--color-switch-track: #d1d5db;--color-switch-thumb: #ffffff;--color-feedback-success: var(--color-accent-green);--color-feedback-warning: var(--color-accent-red);--color-feedback-text: var(--color-text-inverted)}*{margin:0;padding:0;border:0;box-sizing:border-box}html{background:var(--color-accent-green)}html:after{content:"";position:fixed;bottom:0;left:0;width:100vw;height:50vh;background-color:var(--color-bg-primary);z-index:-1}body{font-family:Noto Sans JP,sans-serif;color:var(--color-text-primary);line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}h1,h2,h3,h4,h5,h6{font-family:Noto Sans JP,sans-serif;font-weight:700;color:var(--color-text-primary)}a{text-decoration:none;color:inherit;transition:opacity .2s ease}button{cursor:pointer;font-family:Noto Sans JP,sans-serif}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}