.input-section{flex-direction:column;flex:1;width:100%;display:flex}.input-area{--input-actions-reserve-height:calc(var(--editor-action-control-size) + var(--editor-panel-padding));--input-result-baseline-offset:calc((1em * var(--kana-ruby-font-scale)) + var(--kana-accent-gap));width:100%;min-height:calc(var(--editor-panel-min-height) - var(--input-actions-reserve-height));padding:calc(var(--editor-panel-padding) + var(--input-result-baseline-offset)) var(--editor-panel-padding) var(--editor-panel-padding);border-radius:var(--radius-lg);color:var(--color-text-primary);resize:none;field-sizing:content;background-color:#0000;border:none;outline:none;flex:none;font-family:inherit;font-size:1.5rem;line-height:2.5;transition:all .2s;overflow:auto}@supports (field-sizing:content){.input-area{overflow:hidden}}.input-area:focus{outline:none}.input-area-keyboard-focus{outline:2px solid var(--color-accent-green);outline-offset:-2px}.input-area::placeholder{color:var(--color-text-secondary);opacity:.6}.input-actions{justify-content:flex-end;gap:var(--space-3);padding:0 var(--editor-panel-padding) var(--editor-panel-padding);flex-shrink:0;align-items:center;margin-top:auto;display:flex}.generate-button,.paste-button{width:var(--editor-action-control-size);height:var(--editor-action-control-size);background-color:var(--color-bg-secondary);border-radius:var(--radius-md);color:var(--color-text-secondary);cursor:pointer;border:none;flex-shrink:0;justify-content:center;align-items:center;transition:all .2s;display:flex}.generate-button-icon{transition:transform .2s;display:inline-flex}.generate-button:hover,.paste-button:hover{background-color:var(--color-bg-secondary-hover);color:var(--color-text-primary)}.generate-button:focus-visible,.paste-button:focus-visible{outline:2px solid var(--color-accent-green);outline-offset:2px}.generate-button:hover .generate-button-icon{transform:rotate(15deg)}.paste-button{display:none}@media (max-width:768px){.paste-button{display:flex}.paste-button:active{background-color:var(--color-bg-secondary-hover);transform:scale(.95)}}
:root{--accent-color:var(--color-accent-red);--accent-width:2px;--kana-ruby-font-scale:.6;--kana-accent-lane-height:.5em;--kana-accent-gap:2px;--kana-ruby-stack-height:calc(var(--kana-accent-lane-height) + var(--kana-accent-gap) + 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{inline-size:max-content;min-inline-size:1em}.kana-only-base{text-align:center}.kana-shell{grid-template-rows:var(--kana-accent-lane-height) auto;row-gap:var(--kana-accent-gap);align-items:start;min-width:max-content;display:inline-grid;position:relative}.kana-shell[data-empty=true]{min-width:1em}.kana-only-ruby>rt>.kana-shell{inline-size:max-content;min-inline-size:1em}.kana-accent-lane{height:var(--kana-accent-lane-height);pointer-events:none;opacity:0;visibility:hidden;position:relative;inset-inline:auto}.kana-accent-line,.kana-accent-drop{opacity:0;pointer-events:none;visibility:hidden;position:absolute}.kana-accent-line{inset-inline:0;border-top:var(--accent-width) solid var(--accent-color);bottom:0}.kana-accent-drop{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)}.kana-accent-hitbox{inset-inline:0;bottom:calc((var(--accent-width) - var(--kana-accent-hitbox-height)) / 2);height:var(--kana-accent-hitbox-height);appearance:none;min-width:0;min-height:0;box-shadow:none;pointer-events:auto;z-index:2;background:0 0;border:none;border-radius:0;margin:0;padding:0;position:absolute}.kana-shell[data-interactive=true] .kana-accent-hitbox:disabled{cursor:default}.kana-shell:not([data-interactive=true]) .kana-accent-hitbox,.kana-shell:not([data-accent-phase-active=true]) .kana-accent-hitbox{pointer-events:none}.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-phase-active=true][data-accent-visible=true][data-accent=flat]>.kana-accent-lane>.kana-accent-line,.kana-shell[data-accent-phase-active=true][data-accent-visible=true][data-accent=drop]>.kana-accent-lane>.kana-accent-line,.kana-shell[data-accent-phase-active=true][data-accent-visible=true][data-accent=drop]>.kana-accent-lane>.kana-accent-drop{opacity:1;visibility:visible}.kana-text{z-index:1;opacity:0;visibility:hidden;pointer-events:none;position:relative}.kana-text[data-text-visible]{opacity:1;visibility:visible;pointer-events:auto;animation:.22s both kanaRevealFade}.kana-shell[data-accent-phase-active=true][data-accent-visible=true]>.kana-accent-lane{opacity:1;visibility:visible;animation:.22s both kanaRevealFade}.kana-shell[data-ghost=true]>.kana-text{visibility:hidden;white-space:pre}.kana-shell[data-editable=true]>.kana-text{cursor:pointer}.kana-shell[data-editable=true]>.kana-text:focus{outline:none}@keyframes kanaRevealFade{0%{opacity:0}to{opacity:1}}
.skeleton-container{--skeleton-padding-block:16px;--skeleton-padding-inline:0;--skeleton-radius:16px;--skeleton-line-gap:8px;--skeleton-ink:var(--color-text-primary);--skeleton-muted:var(--color-text-secondary);--skeleton-mask:var(--color-border);width:100%;padding:var(--skeleton-padding-block) var(--skeleton-padding-inline);border-radius:var(--skeleton-radius);background-color:#0000;gap:16px;display:grid;position:relative;overflow:hidden}.skeleton-script{gap:var(--skeleton-line-gap);display:grid}.skeleton-line{letter-spacing:.01em;white-space:pre-wrap;margin:0;font-size:1.5rem;line-height:2.5}.skeleton-glyph{color:var(--skeleton-muted);transition:color .26s,opacity .26s;display:inline;position:relative}.skeleton-glyph-visible{color:var(--skeleton-ink);opacity:1}.skeleton-glyph-pending{color:#0000;opacity:1}
.result-container-inner{min-height:100%;padding:var(--space-5);border-radius:var(--radius-lg);flex-direction:column;transition:background-color .2s,color .2s;display:flex;position:relative;overflow:hidden}.result-container-inner.dark-result{--accent-color:color-mix(in srgb, var(--color-accent-green) 72%, white);--kana-edit-hover-bg:color-mix(in srgb, var(--color-accent-green) 14%, transparent);--kana-edit-focus-bg:color-mix(in srgb, var(--color-accent-green) 20%, transparent);background-color:var(--color-bg-dark-panel)}.result-actions{justify-content:space-between;align-items:center;gap:.5rem;margin-top:auto;padding-top:1rem;display:flex}.export-group{border-left:1px solid var(--color-border);align-items:center;gap:.5rem;margin-left:.5rem;padding-left:.5rem;display:flex}.action-button{color:var(--color-text-secondary);border-radius:var(--radius-md);background-color:#0000;border:none;justify-content:center;align-items:center;gap:.5rem;padding:.5rem .75rem;font-size:.9rem;font-weight:500;transition:all .2s;display:flex}.action-group-right .action-button{flex-shrink:0;width:2.5rem;height:2.5rem;padding:0}.action-button:hover{background-color:var(--color-bg-secondary-hover);color:var(--color-text-primary)}.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)}.action-button-expand{display:inline-flex}.action-button-expand svg{width:18px;height:18px}.theme-toggle.active{color:var(--color-accent-green);background-color:var(--color-accent-green-light)}.result-content{flex:1;min-height:0;padding:0;position:relative;overflow:auto}.empty-state{--result-base-text-offset:calc((1em * var(--kana-ruby-font-scale)) + var(--kana-accent-gap));height:100%;color:var(--color-text-secondary);opacity:.6;padding:var(--result-base-text-offset) 0 0;justify-content:flex-start;align-items:flex-start;font-size:1.5rem;display:flex}.empty-state p{color:inherit;margin:0;font-size:1.5rem;line-height:2.5}.result-area{--result-ruby-font-size:calc(1em * var(--kana-ruby-font-scale,.6));--result-ruby-line-height:1.2;--result-reading-text-height:calc(var(--result-ruby-font-size) * var(--result-ruby-line-height));--result-kana-shell-gap:var(--kana-accent-gap);--result-kana-shell-rows:var(--kana-accent-lane-height) auto;--result-accent-track-height:calc(var(--kana-accent-lane-height) + var(--result-kana-shell-gap));--result-reading-track-height:calc(var(--result-accent-track-height) + var(--result-reading-text-height));color:var(--color-text-primary);padding:0 0 var(--result-reading-track-height);border-radius:var(--radius-md);margin:0;font-size:1.5rem;line-height:2.5;transition:background-color .2s,color .2s}.result-container-inner.dark-result .result-area{background-color:var(--color-bg-dark-panel);color:var(--color-text-dark-primary)}.word-stack{grid-template-rows:var(--result-reading-track-height) auto;vertical-align:top;justify-items:stretch;display:inline-grid}.word-inline-cluster{vertical-align:top;align-items:flex-start;display:inline-flex}.word-reading-row,.word-base-row{justify-content:flex-start;width:100%;display:flex}.word-reading-row{min-height:var(--result-reading-track-height);font-size:var(--result-ruby-font-size);line-height:var(--result-ruby-line-height);letter-spacing:0;color:var(--color-text-secondary);-webkit-user-select:none;user-select:none;white-space:nowrap}.word-reading-row-empty{color:#0000}.word-base-row{white-space:nowrap;line-height:1}.word-reading-cell,.word-base-cell{flex:none;justify-content:center;align-items:flex-start;display:inline-flex}.word-base-cell{align-items:flex-end}.word-base-cell-plain{justify-content:flex-start}.furigana-group{isolation:isolate;white-space:nowrap;align-items:flex-end;width:100%;display:flex;position:relative}.word-reading-cell>.kana-shell{grid-template-rows:var(--result-kana-shell-rows);justify-items:stretch;row-gap:var(--result-kana-shell-gap);width:100%;min-width:0}.word-base-cell[style]{width:100%}.word-reading-cell>.kana-shell>.kana-text,.word-reading-cell>.kana-shell>.kana-accent-lane{width:100%;display:block}.result-area-hide-accent .word-reading-cell>.kana-shell>.kana-accent-lane{opacity:0;visibility:hidden;animation:none}.result-area-hide-accent .word-reading-cell>.kana-shell .kana-accent-hitbox{pointer-events:none}.word-reading-cell>.kana-shell>.kana-text{text-align:center}.furigana-group,.word-reading-cell>.kana-shell{min-height:100%}.furigana-group:before{content:"";top:calc(var(--kana-accent-lane-height) + var(--kana-accent-gap) - .125rem);border-radius:calc(var(--radius-sm) + 2px);pointer-events:none;z-index:-1;background-color:#0000;transition:background-color .2s;position:absolute;bottom:-.0625rem;left:-.125rem;right:-.125rem}.furigana-group:has(.kana-text:hover):before{background-color:var(--kana-edit-hover-bg)}.furigana-group:has(.kana-accent-hitbox:hover):before{background-color:var(--kana-edit-hover-bg)}.furigana-group:focus-within:before{background-color:var(--kana-edit-focus-bg)}.furigana-group:has(.kana-accent-hitbox:focus-visible):before{background-color:var(--kana-edit-focus-bg)}.dark-theme .result-area{background-color:var(--color-bg-dark-panel);color:var(--color-text-dark-primary)}@media (max-width:768px){.action-button-expand{display:none}}.result-container-inner.tone-down{opacity:.7;filter:grayscale(.5);pointer-events:none;-webkit-user-select:none;user-select:none}.toast-notification{background-color:var(--color-feedback-success);color:var(--color-feedback-text);border-radius:var(--radius-md);white-space:nowrap;box-shadow:var(--shadow-hover);z-index:10;pointer-events:none;margin-bottom:8px;padding:8px 16px;font-size:.875rem;animation:2s forwards fadeInOut;position:absolute;bottom:100%;left:50%;transform:translate(-50%)}.toast-notification.toast-warning{background-color:var(--color-feedback-warning)}@keyframes fadeInOut{0%{opacity:0;transform:translate(-50%,-10px)}10%{opacity:1;transform:translate(-50%)}90%{opacity:1;transform:translate(-50%)}to{opacity:0;transform:translate(-50%,-10px)}}.action-group-left{align-items:center;gap:.5rem;display:flex;position:relative}.action-group-right{align-items:center;gap:.5rem;display:flex}.copy-action-container{display:inline-flex;position:relative}.accent-toggle{border-radius:var(--radius-md);color:var(--color-text-secondary);cursor:pointer;align-items:center;gap:.75rem;padding:.5rem .75rem;transition:background-color .2s,color .2s;display:inline-flex}.accent-toggle:hover{background-color:var(--color-bg-secondary-hover);color:var(--color-text-primary)}.accent-toggle-label{letter-spacing:.02em;text-transform:lowercase;font-size:.9rem;font-weight:500}.save-menu-container{display:inline-block;position:relative}.save-menu-dropdown{background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-md);min-width:176px;box-shadow:var(--shadow-soft-floating);z-index:20;color:var(--color-text-menu-fixed);text-align:left;flex-direction:column;justify-content:center;gap:.25rem;margin-bottom:.5rem;padding:.5rem;display:flex;position:absolute;bottom:100%;right:0}.save-menu-dropdown:focus-visible{outline:2px solid var(--color-accent-green);outline-offset:2px}.result-container-inner.dark-result .save-menu-dropdown{background-color:var(--color-bg-dark-panel);border-color:var(--color-border-dark);color:var(--color-text-dark-primary)}.menu-inline-row{align-items:center;gap:.5rem;width:100%;display:flex}.menu-divider{border-top:1px solid var(--color-border);margin:.25rem 0}.result-container-inner.dark-result .menu-divider{border-top-color:var(--color-border-dark)}.switch{width:36px;height:20px;display:inline-block;position:relative}.switch input{opacity:0;width:0;height:0}.slider{cursor:pointer;background-color:var(--color-switch-track);border-radius:32px;width:32px;transition:all .4s;position:absolute;inset:0}.slider:before{content:"";background-color:var(--color-switch-thumb);border-radius:50%;width:14px;height:14px;transition:all .4s;position:absolute;bottom:3px;left:3px}input:checked+.slider{background-color:var(--color-accent-green)}input:focus-visible+.slider{box-shadow:0 0 1px var(--color-accent-green)}input:checked+.slider:before{transform:translate(12px)}.menu-item{color:var(--color-text-secondary);border-radius:var(--radius-md);background-color:#0000;border:none;justify-content:flex-start;align-items:center;gap:.5rem;width:100%;padding:.5rem .75rem;font-size:.9rem;font-weight:500;transition:all .2s;display:flex}.menu-item-inline{flex:1}.menu-item:hover{background-color:var(--color-bg-secondary-hover);color:var(--color-text-primary)}.theme-pill-button{width:36px;height:36px;color:var(--color-text-secondary);background-color:#0000;border:none;border-radius:999px;justify-content:center;align-items:center;transition:background-color .2s,color .2s;display:inline-flex}.theme-pill-button:hover{background-color:var(--color-bg-secondary-hover);color:var(--color-text-primary)}.result-container-inner.dark-result .menu-item:hover{background-color:var(--color-bg-dark-hover);color:var(--color-text-dark-primary)}.result-container-inner.dark-result .theme-pill-button{color:var(--color-text-dark-secondary)}.result-container-inner.dark-result .theme-pill-button:hover{background-color:var(--color-bg-dark-hover);color:var(--color-text-dark-primary)}.result-container-inner.dark-result .accent-toggle{color:var(--color-text-dark-secondary)}.result-container-inner.dark-result .accent-toggle:hover{background-color:var(--color-bg-dark-hover);color:var(--color-text-dark-primary)}.result-container-inner.dark-result .word-reading-row{color:var(--color-text-dark-secondary)}.result-container-inner.dark-result .result-area,.result-container-inner.dark-result .word-base-row,.result-container-inner.dark-result .word-base-row span,.result-container-inner.dark-result .word-reading-row .kana-text[data-text-visible=true]{color:var(--color-text-dark-primary)}
.app-container{background-color:var(--color-bg-primary);flex-direction:column;min-height:100vh;display:flex}.main-content{--main-content-padding:var(--space-6);width:100%;max-width:1400px;padding:var(--main-content-padding);flex:1;margin:0 auto;position:relative}.editor-viewport{min-height:calc(100dvh - var(--nav-height) - (var(--main-content-padding) * 2));flex-direction:column;display:flex}.editor-viewport .two-col-layout{flex:1}.two-col-layout{--editor-panel-min-height:12rem;--editor-panel-padding:var(--space-5);--editor-action-control-size:2.5rem;grid-template-columns:1fr;gap:2rem;display:grid}.input-panel-stack,.result-panel-stack{--result-panel-callout-edge-space:1em;--result-panel-callout-space:calc((.875rem * 1.5) + (var(--result-panel-callout-edge-space) * 2));min-height:var(--editor-panel-min-height);z-index:0;flex-direction:column;display:flex;position:relative}.input-panel-stack .input-panel,.result-panel-stack .result-panel{flex:1}.two-col-layout-expanded>.input-panel-stack{opacity:.2;filter:saturate(.8);pointer-events:none;transition:opacity .2s,filter .2s}.two-col-layout-expanded>.result-panel-stack{position:static}.two-col-layout-expanded>.result-panel-stack:before{content:"";background:color-mix(in srgb, var(--color-bg-primary) 56%, transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:109;pointer-events:none;position:fixed;inset:0}.result-panel-stack-expanded .result-panel-expanded{top:calc(var(--nav-height) + var(--space-4));right:var(--space-4);bottom:var(--space-4);left:var(--space-4);z-index:110;min-height:0;box-shadow:var(--shadow-lg);position:fixed}.result-panel-status{justify-content:center;align-items:center;gap:var(--space-1);max-width:calc(100% - (var(--space-4) * 2));color:var(--color-text-secondary);letter-spacing:.01em;text-align:center;white-space:normal;left:50%;top:var(--space-4);z-index:1;font-size:.875rem;font-weight:500;line-height:1.5;display:inline-flex;position:absolute;transform:translate(-50%)}.result-panel-status-chip{top:calc(var(--nav-height) + var(--space-4));gap:var(--space-2);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);background-color:var(--color-bg-secondary);box-shadow:var(--shadow-soft-floating);position:fixed}.result-panel-status-row{display:none}.result-panel-status-dismiss{width:var(--space-5);height:var(--space-5);border-radius:var(--radius-sm);color:var(--color-text-secondary);background-color:#0000;flex-shrink:0;justify-content:center;align-items:center;margin-inline-end:calc(-1 * var(--space-1));transition:background-color .2s,color .2s;display:inline-flex}.result-panel-status-dismiss:hover{background-color:var(--color-bg-secondary-hover);color:var(--color-text-primary)}.result-panel-status-dismiss:focus-visible{outline:2px solid var(--color-accent-green);outline-offset:2px}.result-panel-status-label,.result-panel-status-dots{align-items:center;display:inline-flex}.result-panel-status-dots{justify-content:flex-start;min-width:1.5em}.result-panel-status-dot{opacity:.32;width:.5em;animation:result-panel-status-dot-wave var(--duration-overlay-dot-wave) ease-in-out infinite;justify-content:center;align-items:center;display:inline-flex}.result-panel-status-dot:nth-child(2){animation-delay:.12s}.result-panel-status-dot:nth-child(3){animation-delay:.24s}.temporary-issues-dialog-backdrop{z-index:120;padding:var(--space-4);background:color-mix(in srgb, var(--color-bg-primary) 68%, transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.temporary-issues-dialog{gap:var(--space-4);width:min(100%,28rem);padding:var(--space-6);background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);display:grid}.temporary-issues-dialog-icon{border-radius:var(--radius-lg);width:3rem;height:3rem;color:var(--color-accent-red);background-color:var(--color-accent-red-light);justify-content:center;align-items:center;display:inline-flex}.temporary-issues-dialog-copy{gap:var(--space-2);display:grid}.temporary-issues-dialog-copy h2{font-size:1.25rem;line-height:1.4}.temporary-issues-dialog-copy p{color:var(--color-text-secondary);line-height:1.75}.temporary-issues-dialog-button{min-height:2.5rem;padding:0 var(--space-4);border-radius:var(--radius-md);background-color:var(--color-bg-secondary);border:1px solid var(--color-border);color:var(--color-text-primary);justify-self:flex-end;font-size:.875rem;font-weight:600;transition:border-color .2s,background-color .2s,color .2s,transform .2s}.temporary-issues-dialog-button:hover{background-color:var(--color-bg-secondary-hover);border-color:color-mix(in srgb, var(--color-border) 72%, var(--color-text-secondary))}.temporary-issues-dialog-button:focus-visible{outline:2px solid var(--color-accent-green);outline-offset:2px}.temporary-issues-dialog-button:active{transform:translateY(1px)}@media (min-width:1024px){.two-col-layout{grid-template-columns:1fr 1fr}.input-panel-stack,.result-panel-stack{padding-block:var(--result-panel-callout-space)}.result-panel-status-chip{display:none}.result-panel-status-row{top:var(--result-panel-callout-edge-space);display:inline-flex}.result-panel-stack-expanded .result-panel-expanded{top:calc(var(--nav-height) + var(--space-5));right:var(--space-6);bottom:var(--space-6);left:var(--space-6)}}.input-panel,.result-panel{background-color:var(--color-bg-secondary);border-radius:var(--radius-xl);border:1px solid var(--color-border);min-height:var(--editor-panel-min-height);flex-direction:column;padding:0;transition:all .2s;display:flex}@media (max-width:1023px){.two-col-layout{gap:var(--space-2)}.input-panel-stack{padding-block:0}}@media (max-width:768px){.main-content{--main-content-padding:0px}.two-col-layout{grid-auto-rows:minmax(calc((100dvh - var(--nav-height)) / 2), auto);gap:0}.input-panel-stack,.result-panel-stack{min-height:0}.input-panel,.result-panel{border-inline:0;border-radius:0}.temporary-issues-dialog{padding:var(--space-5)}}@keyframes result-panel-status-dot-wave{0%,60%,to{opacity:.24;transform:translateY(0)}30%{opacity:1;transform:translateY(-.1875rem)}}
.site-footer{padding:var(--space-7) 0 0;background:var(--color-accent-green);color:var(--color-text-inverted);overflow:hidden}.site-footer-inner{row-gap:var(--space-6);width:100%;margin:0 auto;margin-bottom:calc(var(--space-7) + var(--space-6));padding-inline:var(--space-6);column-gap:0;display:grid}.site-footer-top{gap:var(--space-7);display:grid}.site-footer-brand{gap:var(--space-4);width:fit-content;color:var(--color-text-inverted);align-items:center;font-size:1.5rem;font-weight:700;display:inline-flex}.site-footer-logo{width:calc(var(--space-7) * 2);height:calc(var(--space-7) * 2);object-fit:contain}.site-footer-about{gap:var(--space-4);display:grid}.site-footer-about p{max-width:48rem;color:color-mix(in srgb, var(--color-text-inverted) 88%, transparent);text-wrap:pretty;font-size:1rem;line-height:1.75}.site-footer-social{--footer-social-glyph-offset:calc((var(--space-7) - var(--space-5)) / 2);gap:0;display:grid}.site-footer-social-links{flex-wrap:wrap;align-items:center;line-height:0;display:flex}.site-footer-social-link{width:var(--space-7);height:var(--space-7);color:var(--color-text-inverted);border-radius:var(--radius-md);font:inherit;background:0 0;border:0;justify-content:center;align-items:center;display:inline-flex}.site-footer-social-link:hover{opacity:1;background:color-mix(in srgb, var(--color-text-inverted) 12%, transparent)}.site-footer-social-link:focus-visible{outline:var(--space-1) solid var(--color-text-inverted);outline-offset:var(--space-1)}.site-footer-email-link{width:fit-content;max-width:calc(100% - var(--footer-social-glyph-offset));color:var(--color-text-inverted);overflow-wrap:anywhere;text-align:right;background-image:linear-gradient(currentColor,currentColor);background-position:100% 70%;background-repeat:no-repeat;background-size:0 var(--stroke-width-thin);transition:background-size var(--duration-interaction-fast) ease, opacity var(--duration-interaction-fast) ease;justify-self:end;margin-inline-end:var(--footer-social-glyph-offset);font-size:1rem;font-weight:400;line-height:1.5}.site-footer-email-link:hover{background-size:100% var(--stroke-width-thin);font-weight:400}.site-footer-email-link:focus-visible{outline:var(--space-1) solid var(--color-text-inverted);outline-offset:var(--space-1)}.footer-social-svg{display:block}.site-footer-wordmark{width:100%;color:var(--color-text-inverted);flex-wrap:nowrap;align-items:flex-end;margin:0;padding:.18em 0 0;font-size:clamp(4rem,15vw,14rem);font-weight:700;line-height:.82;display:flex}.site-footer-wordmark span{white-space:nowrap;display:block}@media (min-width:768px){.site-footer-inner{grid-template-columns:repeat(2,minmax(0,1fr))}.site-footer-top{display:contents}.site-footer-brand{grid-column:1}.site-footer-social{text-align:right;grid-column:2;justify-self:end}.site-footer-social-links{justify-content:flex-end}.site-footer-about{grid-column:1}.site-footer-about p{max-width:none}}@media (max-width:767px){.site-footer-top{gap:var(--space-7);grid-template-columns:auto minmax(0,1fr);align-items:start;display:grid}.site-footer-social{justify-self:end}.site-footer-social-links{justify-content:flex-end}.site-footer-wordmark{text-align:center;flex-wrap:wrap;place-content:flex-end center;font-size:26vw}.site-footer-wordmark span{flex-basis:100%}}
.nav{width:100%;height:var(--nav-height);background-color:var(--color-accent-green);border-bottom:1px solid var(--color-border);z-index:100;align-items:center;padding:0 2rem;display:flex;position:sticky;top:0}.nav-brand{align-items:center;display:flex}.nav .nav-title{align-items:center;gap:.5rem;text-decoration:none;transition:opacity .2s;display:flex}.nav .nav-title:hover{opacity:.8}.nav .logo{object-fit:contain;width:2rem;height:2rem}.nav .title{color:var(--color-text-inverted);font-family:Noto Sans JP,sans-serif;font-size:1.25rem;font-weight:700}.nav-guide-button{--nav-guide-button-size:calc(var(--space-6) + var(--space-2));width:var(--nav-guide-button-size);height:var(--nav-guide-button-size);border-radius:var(--radius-md);color:var(--color-text-inverted);transition:background-color var(--duration-interaction-fast) ease, opacity var(--duration-interaction-fast) ease;flex-shrink:0;justify-content:center;align-items:center;margin-left:auto;display:inline-flex}.nav-guide-button:hover{background-color:color-mix(in srgb, var(--color-text-inverted) 16%, transparent);opacity:.9}.nav-guide-button:focus-visible{outline:var(--stroke-width-thin) solid var(--color-text-inverted);outline-offset:var(--space-1)}
.usage-edit-showcase{justify-content:center;align-items:center;width:min(100%,560px);display:flex}.usage-accent-word{--usage-accent-font-size:var(--usage-font-size-showcase);--accent-width:3px;--kana-drop-height:.7rem;--kana-accent-lane-height:.5em;--kana-accent-gap:2px;--kana-accent-hitbox-height:.5rem;padding-top:var(--space-4);color:var(--color-text-primary);justify-content:center;align-items:flex-start;line-height:1;display:inline-flex;position:relative}.usage-cursor-track{width:0;height:0;transform:translateX(var(--cursor-x,0));z-index:3;transition:transform .28s cubic-bezier(.16,1,.3,1);position:absolute;top:0;left:0}.usage-accent-cursor-state-entering .usage-cursor-track{animation:.6s cubic-bezier(.16,1,.3,1) forwards usage-cursor-slide-in}.usage-accent-cursor-state-exiting .usage-cursor-track{animation:.6s cubic-bezier(.7,0,.84,0) forwards usage-cursor-slide-out}.usage-accent-cursor-state-click .usage-cursor-icon{animation:.25s both usage-cursor-press}.usage-accent-kana-cell{padding:0 0 var(--space-1);border-radius:var(--radius-md);display:inline-flex;position:relative}.usage-demo-word-stack{grid-template-rows:auto auto;justify-items:center;display:inline-grid}.usage-demo-reading-row{font-size:calc(var(--usage-accent-font-size) * .76);justify-content:center;align-items:flex-start;font-weight:400;line-height:1;display:flex}.usage-demo-reading-cell{justify-content:center;min-width:1em}.usage-demo-base-row{margin-top:calc(var(--space-1) + .05em);justify-content:center;display:flex}.usage-demo-base-cell{font-size:calc(var(--usage-accent-font-size) * 1.14);letter-spacing:.02em;font-weight:500;line-height:1}.usage-accent-kana-cell .kana-shell{min-width:1em}.usage-accent-kana-cell .kana-accent-hitbox{top:calc(var(--kana-accent-lane-height) - (var(--kana-accent-hitbox-height) / 2) + .125rem);pointer-events:none;bottom:auto}.usage-cursor-icon{filter:drop-shadow(0 1px 2px #00000026);opacity:1;position:absolute;top:18px;left:-7px}.usage-accent-cursor-state-moving .usage-cursor-icon,.usage-accent-cursor-state-hover .usage-cursor-icon,.usage-accent-cursor-state-click .usage-cursor-icon,.usage-accent-cursor-state-result .usage-cursor-icon{opacity:1}.usage-accent-cursor-state-hover .usage-accent-kana-cell[data-cursor-target],.usage-accent-cursor-state-result .usage-accent-kana-cell[data-cursor-target],.usage-accent-cursor-state-moving .usage-accent-kana-cell[data-cursor-target]{background-color:var(--kana-edit-hover-bg);transition:background-color .15s}.usage-accent-cursor-state-click .usage-accent-kana-cell[data-cursor-target]{background-color:var(--kana-edit-hover-bg);transition:transform .1s;transform:scale(.94)}.usage-accent-word .kana-accent-lane,.usage-accent-word .kana-accent-line,.usage-accent-word .kana-accent-drop{transition:opacity .2s}.usage-accent-word .kana-accent-line{top:0;bottom:auto}.usage-accent-word .kana-accent-drop{top:var(--accent-width);height:var(--kana-drop-height);bottom:auto}@keyframes usage-cursor-slide-in{0%{transform:translateX(calc(var(--cursor-x,0) - 250px));opacity:0}to{transform:translateX(var(--cursor-x,0));opacity:1}}@keyframes usage-cursor-slide-out{0%{transform:translateX(var(--cursor-x,0));opacity:1}to{transform:translateX(calc(var(--cursor-x,0) + 400px));opacity:0}}@keyframes usage-cursor-press{0%{transform:translateY(0)}40%{transform:translateY(3px)}to{transform:translateY(0)}}@media (prefers-reduced-motion:reduce){.usage-cursor-track{display:none}.usage-accent-cursor-state-entering,.usage-accent-cursor-state-hover,.usage-accent-cursor-state-click,.usage-accent-cursor-state-result,.usage-accent-cursor-state-moving,.usage-accent-cursor-state-exiting{background-color:#0000}.usage-accent-cursor-state-click .usage-accent-kana-cell{transform:none}}@media (max-width:768px){.usage-accent-word{--usage-accent-font-size:2.25rem}}
.usage-section{--usage-font-size-heading:1.75rem;--usage-font-size-title:1.125rem;--usage-font-size-body:1rem;--usage-font-size-showcase:3rem;padding:calc(var(--space-7) + var(--space-4)) 0;border-top:1px solid var(--color-border)}.usage-section-inner{width:100%;max-width:1400px;padding:0 var(--space-6);margin:0 auto}.usage-section-copy{gap:var(--space-2);display:grid}.usage-section h2{font-size:var(--usage-font-size-heading);color:var(--color-text-primary);font-weight:700;line-height:1.2}.usage-heading-segment{display:inline}.usage-heading-primary{color:inherit;text-decoration-line:underline;-webkit-text-decoration-color:var(--color-accent-green);text-decoration-color:var(--color-accent-green);text-decoration-thickness:var(--space-1);text-underline-offset:var(--space-1)}.usage-section p,.usage-section li{font-size:var(--usage-font-size-body);color:var(--color-text-secondary);font-weight:400;line-height:1.75}.usage-pitch-primer{gap:var(--space-6);padding:calc(var(--space-7) + var(--space-4)) 0;border-block:1px solid var(--color-border);display:grid}.usage-pitch-intro{gap:var(--space-6);align-self:start;display:grid}.usage-pitch-copy{gap:var(--space-2);display:grid}.usage-pitch-copy h3,.usage-guide-copy h3,.usage-pitch-state h4{font-size:var(--usage-font-size-title);color:var(--color-text-primary);font-weight:700;line-height:1.3}.usage-pitch-state h4{min-height:0}.usage-pitch-copy p{white-space:pre-line;text-wrap:pretty;max-width:56rem}.usage-pitch-states{gap:var(--space-6);align-self:start;display:grid}.usage-pitch-state{column-gap:var(--space-4);row-gap:var(--space-1);grid-template-columns:auto minmax(0,1fr);align-items:center;display:grid}.usage-pitch-state p{grid-column:2}.usage-pitch-mark{width:64px;height:64px;font-size:var(--usage-font-size-showcase);color:var(--color-text-primary);grid-row:span 2;justify-content:center;align-items:center;font-weight:400;line-height:1;display:inline-flex}.usage-pitch-mark .kana-shell{width:1.25em;transform:translateY(calc(-1 * var(--space-2)))}.usage-guide{margin-top:calc(var(--space-7) + var(--space-4));scroll-margin-top:calc(var(--nav-height) + var(--space-4));gap:0;display:grid}.usage-guide-card{gap:var(--space-4);padding:calc(var(--space-7) + var(--space-4)) 0;box-shadow:none;background:0 0;border:0;border-radius:0;display:grid}.usage-guide-card+.usage-guide-card{border-top:1px solid var(--color-border)}.usage-guide-preview{width:100%;min-height:calc((var(--space-7) * 4) + var(--space-4));padding:var(--space-6);border-radius:var(--radius-lg);background:var(--color-bg-secondary);box-shadow:none;border:0;justify-content:center;align-items:center;display:flex}.usage-action-showcase{justify-content:center;gap:var(--space-6);width:min(100%,520px);display:flex}.usage-action-icon{width:112px;height:112px;color:var(--color-text-primary);justify-content:center;align-items:center;display:inline-flex}.usage-action-icon svg{width:56px;height:56px}.usage-guide-copy{gap:var(--space-2);align-content:center;display:grid}.usage-guide-copy p{color:var(--color-text-secondary);text-wrap:pretty}@keyframes usage-section-reveal{0%{opacity:0;transform:translateY(var(--space-5))}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:no-preference){.usage-section[data-reveal-ready=true] .usage-reveal-target{opacity:0;transform:translateY(var(--space-5));will-change:opacity, transform}.usage-section[data-reveal-ready=true] .usage-reveal-target.is-visible{opacity:1;will-change:auto;animation:.72s cubic-bezier(.16,1,.3,1) both usage-section-reveal;transform:translateY(0)}}@media (min-width:1024px){.usage-section-inner{padding-inline:calc((var(--space-7) * 2) + var(--space-6))}.usage-section-copy p{white-space:nowrap;max-width:none}.usage-pitch-primer{align-items:start;gap:calc(var(--space-7) + var(--space-6));grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}.usage-pitch-states{gap:var(--space-4)}.usage-guide{grid-template-columns:1fr}.usage-guide-card{align-items:center;gap:calc(var(--space-7) * 2);grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:344px}.usage-guide-card:nth-child(2n) .usage-guide-preview{order:2}.usage-guide-card:nth-child(2n) .usage-guide-copy{order:1}}@media (max-width:768px){.usage-section{padding:var(--space-7) var(--space-4)}.usage-heading-segment{display:block}.usage-section-inner{padding:0}.usage-pitch-primer{gap:var(--space-5);padding:var(--space-6) 0}.usage-pitch-states{gap:var(--space-4)}.usage-pitch-state{align-items:center}.usage-pitch-mark{align-self:center}.usage-guide{margin-top:var(--space-6)}.usage-guide-card{padding:var(--space-6) 0}.usage-action-showcase{gap:var(--space-4)}.usage-action-icon{width:80px;height:80px}.usage-action-icon svg{width:40px;height:40px}}