@import"https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700&family=Noto+Serif+JP:wght@600;700&display=swap";@keyframes marching-ants{0%{background-position:0 0,0 100%,0 0,100% 0}to{background-position:20px 0,-20px 100%,0 -20px,100% 20px}}:root{--rc-drag-handle-size: 12px;--rc-drag-handle-mobile-size: 24px;--rc-drag-handle-bg-colour: rgba(0, 0, 0, .2);--rc-drag-bar-size: 6px;--rc-border-color: rgba(255, 255, 255, .7);--rc-focus-color: #0088ff}.ReactCrop{position:relative;display:inline-block;cursor:crosshair;max-width:100%}.ReactCrop *,.ReactCrop *:before,.ReactCrop *:after{box-sizing:border-box}.ReactCrop--disabled,.ReactCrop--locked{cursor:inherit}.ReactCrop__child-wrapper{overflow:hidden;max-height:inherit}.ReactCrop__child-wrapper>img,.ReactCrop__child-wrapper>video{display:block;max-width:100%;max-height:inherit}.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper>img,.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper>video{touch-action:none}.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__crop-selection{touch-action:none}.ReactCrop__crop-mask{position:absolute;inset:0;pointer-events:none;width:calc(100% + .5px);height:calc(100% + .5px)}.ReactCrop__crop-selection{position:absolute;top:0;left:0;transform:translateZ(0);cursor:move}.ReactCrop--disabled .ReactCrop__crop-selection{cursor:inherit}.ReactCrop--circular-crop .ReactCrop__crop-selection{border-radius:50%}.ReactCrop--circular-crop .ReactCrop__crop-selection:after{pointer-events:none;content:"";position:absolute;inset:-1px;border:1px solid var(--rc-border-color);opacity:.3}.ReactCrop--no-animate .ReactCrop__crop-selection{outline:1px dashed white}.ReactCrop__crop-selection:not(.ReactCrop--no-animate .ReactCrop__crop-selection){animation:marching-ants 1s;background-image:linear-gradient(to right,#fff 50%,#444 50%),linear-gradient(to right,#fff 50%,#444 50%),linear-gradient(to bottom,#fff 50%,#444 50%),linear-gradient(to bottom,#fff 50%,#444 50%);background-size:10px 1px,10px 1px,1px 10px,1px 10px;background-position:0 0,0 100%,0 0,100% 0;background-repeat:repeat-x,repeat-x,repeat-y,repeat-y;color:#fff;animation-play-state:running;animation-timing-function:linear;animation-iteration-count:infinite}.ReactCrop__crop-selection:focus{outline:2px solid var(--rc-focus-color);outline-offset:-1px}.ReactCrop--invisible-crop .ReactCrop__crop-mask,.ReactCrop--invisible-crop .ReactCrop__crop-selection{display:none}.ReactCrop__rule-of-thirds-vt:before,.ReactCrop__rule-of-thirds-vt:after,.ReactCrop__rule-of-thirds-hz:before,.ReactCrop__rule-of-thirds-hz:after{content:"";display:block;position:absolute;background-color:#fff6}.ReactCrop__rule-of-thirds-vt:before,.ReactCrop__rule-of-thirds-vt:after{width:1px;height:100%}.ReactCrop__rule-of-thirds-vt:before{left:33.3333333333%}.ReactCrop__rule-of-thirds-vt:after{left:66.6666666667%}.ReactCrop__rule-of-thirds-hz:before,.ReactCrop__rule-of-thirds-hz:after{width:100%;height:1px}.ReactCrop__rule-of-thirds-hz:before{top:33.3333333333%}.ReactCrop__rule-of-thirds-hz:after{top:66.6666666667%}.ReactCrop__drag-handle{position:absolute;width:var(--rc-drag-handle-size);height:var(--rc-drag-handle-size);background-color:var(--rc-drag-handle-bg-colour);border:1px solid var(--rc-border-color)}.ReactCrop__drag-handle:focus{background:var(--rc-focus-color)}.ReactCrop .ord-nw{top:0;left:0;transform:translate(-50%,-50%);cursor:nw-resize}.ReactCrop .ord-n{top:0;left:50%;transform:translate(-50%,-50%);cursor:n-resize}.ReactCrop .ord-ne{top:0;right:0;transform:translate(50%,-50%);cursor:ne-resize}.ReactCrop .ord-e{top:50%;right:0;transform:translate(50%,-50%);cursor:e-resize}.ReactCrop .ord-se{bottom:0;right:0;transform:translate(50%,50%);cursor:se-resize}.ReactCrop .ord-s{bottom:0;left:50%;transform:translate(-50%,50%);cursor:s-resize}.ReactCrop .ord-sw{bottom:0;left:0;transform:translate(-50%,50%);cursor:sw-resize}.ReactCrop .ord-w{top:50%;left:0;transform:translate(-50%,-50%);cursor:w-resize}.ReactCrop__disabled .ReactCrop__drag-handle{cursor:inherit}.ReactCrop__drag-bar{position:absolute}.ReactCrop__drag-bar.ord-n{top:0;left:0;width:100%;height:var(--rc-drag-bar-size);transform:translateY(-50%)}.ReactCrop__drag-bar.ord-e{right:0;top:0;width:var(--rc-drag-bar-size);height:100%;transform:translate(50%)}.ReactCrop__drag-bar.ord-s{bottom:0;left:0;width:100%;height:var(--rc-drag-bar-size);transform:translateY(50%)}.ReactCrop__drag-bar.ord-w{top:0;left:0;width:var(--rc-drag-bar-size);height:100%;transform:translate(-50%)}.ReactCrop--new-crop .ReactCrop__drag-bar,.ReactCrop--new-crop .ReactCrop__drag-handle,.ReactCrop--fixed-aspect .ReactCrop__drag-bar,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-n,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-e,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-s,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-w{display:none}@media(pointer:coarse){.ReactCrop .ord-n,.ReactCrop .ord-e,.ReactCrop .ord-s,.ReactCrop .ord-w{display:none}.ReactCrop__drag-handle{width:var(--rc-drag-handle-mobile-size);height:var(--rc-drag-handle-mobile-size)}}:root{--bg-color: #f5f2eb;--text-main: #242424;--text-muted: #5d5d5d;--accent: #3f6d62;--accent-soft: #8db7ae;--card-bg: #ffffff;--success: #4d845f;--error: #c0392b;--washi: #fffaf0;--shadow: 0 8px 20px rgba(0, 0, 0, .06);--ring: rgba(63, 109, 98, .24);--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px);--safe-right: env(safe-area-inset-right, 0px);--bottom-bar-base-h: 56px;--bottom-bar-h: calc(var(--bottom-bar-base-h) + var(--safe-bottom));--sheet-mobile-top-gap: 8px;--ease-spring: cubic-bezier(.2, 0, 0, 1)}*{box-sizing:border-box;-webkit-font-smoothing:antialiased}body{margin:0;padding:0;min-height:100dvh;overflow:hidden;background:radial-gradient(circle at top right,rgba(63,109,98,.07),transparent 45%),radial-gradient(circle at bottom left,rgba(141,183,174,.12),transparent 42%),var(--bg-color);color:var(--text-main);font-family:Noto Sans JP,Hiragino Kaku Gothic ProN,Meiryo,PingFang SC,Microsoft YaHei,sans-serif;line-height:1.65}#root{min-height:100dvh;background:inherit}.app-container{background:transparent}.app-container{max-width:100%;margin:0 auto;padding:1rem .85rem;padding-bottom:calc(1rem + var(--safe-bottom));min-height:100dvh;display:flex;flex-direction:column;overflow:hidden;position:relative}.app-container--practice{max-width:none;width:100%;padding:0;overflow:visible}@media(max-width:430px)and (max-height:760px){:root{--bottom-bar-base-h: 50px}.app-container{padding-top:.7rem;padding-left:.7rem;padding-right:.7rem;padding-bottom:calc(.7rem + var(--safe-bottom))}.app-container--practice{padding:0}}@media(min-width:640px){.app-container{max-width:540px;padding:1.8rem 1.1rem}}@media(min-width:1024px){.app-container{max-width:760px;padding:2.6rem 1.1rem 2.1rem}}.page-frame{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}.page-frame--practice{overflow:visible}.sheet-shell{display:flex;flex-direction:column;min-height:0}.sheet-header{z-index:2}.sheet-content{flex:1;min-height:0}.sheet-footer{z-index:2}.home-page{flex:1;min-height:0;overflow-y:auto;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch}.home-header{text-align:center;margin-bottom:1.5rem;padding-top:.5rem}.home-logo{font-size:1.8rem;border:2px solid var(--accent);width:48px;height:48px;display:flex;align-items:center;justify-content:center;margin:0 auto .6rem;color:var(--accent);border-radius:12px;background:linear-gradient(140deg,#3f6d620f,#ffffffe6);box-shadow:0 6px 14px #3f6d6221;font-family:"Noto Serif JP",Hiragino Mincho ProN,serif}.home-title{font-size:1.35rem;margin:0;font-weight:700;letter-spacing:.04em;font-family:"Noto Serif JP",Hiragino Mincho ProN,serif}.home-title small{margin-left:.35rem;font-size:.8rem;color:var(--accent)}.home-version{margin-top:.4rem;font-size:.7rem;color:var(--text-muted);opacity:.6;font-family:SF Mono,Monaco,Consolas,monospace}@media(min-width:640px){.home-logo{width:62px;height:62px;font-size:2.35rem;margin-bottom:.95rem}.home-title{font-size:1.7rem}.home-title small{font-size:.95rem}.home-version{font-size:.75rem}}.mode-card-set{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1rem}.mode-card{display:flex;align-items:center;gap:.9rem;padding:1rem 1.05rem;background:var(--card-bg);border:3px solid transparent;border-radius:16px;cursor:pointer;transition:border-color .2s var(--ease-spring),background .2s,box-shadow .2s var(--ease-spring);box-shadow:var(--shadow);min-height:86px;text-align:left;width:100%;font-family:inherit;font-size:inherit}.mode-card.selected{border-color:var(--accent);background:#3f6d6214;transform:translateY(-2px);box-shadow:0 12px 24px #3f6d6226}.mode-card:active{transform:scale(.98)}.mode-card-icon{font-size:1.5rem;flex-shrink:0;width:40px;text-align:center}.mode-card-text strong{display:block;font-size:.98rem;color:var(--text-main)}.mode-card-text p{margin:.25rem 0 0;font-size:.82rem;color:var(--text-muted);line-height:1.4}.free-settings{overflow:hidden}.free-settings-inner{background:#ffffffeb;border-radius:14px;border:1px solid rgba(63,109,98,.12);padding:.75rem 1rem}.custom-checkboxes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;margin-top:.4rem}.custom-checkbox{display:flex;align-items:center;gap:.4rem;background:#fffc;border:1px solid rgba(63,109,98,.15);padding:.45rem .6rem;border-radius:10px;font-size:.78rem;font-weight:600;color:var(--text-main)}.custom-checkbox input{accent-color:var(--accent)}.free-settings-warning{margin:.45rem 0 0;color:var(--error);font-size:.75rem;font-weight:600}.setting-label{font-size:.82rem;font-weight:600;color:var(--text-muted);margin-bottom:.35rem}.setting-hint{font-size:.72rem;color:var(--text-muted);opacity:.7;margin-bottom:.45rem}.chip-select{display:flex;gap:.45rem;margin-bottom:1rem;flex-wrap:wrap}.chip-item{flex:1;min-width:52px;height:40px;border-radius:999px;border:1.5px solid #d2d7d5;background:var(--card-bg);color:var(--text-muted);font-size:.82rem;font-weight:600;cursor:pointer;transition:all .2s var(--ease-spring);font-family:inherit}.chip-item.selected{border-color:var(--accent);background:var(--accent);color:#fff;box-shadow:0 4px 10px #3f6d6233}.chip-item:active{transform:scale(.97)}@media(min-width:640px){.chip-item{height:44px;font-size:.88rem}}.home-top-controls{display:flex;justify-content:flex-end;align-items:center;gap:.5rem;margin-bottom:.25rem}.home-help-btn{display:flex;align-items:center;gap:.3rem;background:none;border:1px solid #d2d7d5;border-radius:8px;padding:.3rem .6rem;font-size:.72rem;font-weight:600;color:var(--accent);cursor:pointer;transition:background .2s,border-color .2s;font-family:inherit}.home-help-btn:hover{background:#3f6d620f;border-color:var(--accent-soft)}.home-fab{position:fixed;bottom:calc(1.25rem + var(--safe-bottom));left:50%;transform:translate(-50%);z-index:20;min-width:180px;max-width:calc(100% - 2rem);min-height:48px;padding:.8rem 2rem;background:var(--accent);color:#fff;border:none;border-radius:999px;font-size:1rem;font-weight:700;letter-spacing:.03em;cursor:pointer;box-shadow:0 6px 20px #3f6d624d;transition:transform .15s var(--ease-spring),box-shadow .2s,opacity .2s;font-family:inherit}.home-fab:not(:disabled):hover{box-shadow:0 8px 28px #3f6d6266}.home-fab:not(:disabled):active{transform:translate(-50%) scale(.96)}.home-fab:disabled{opacity:.55;cursor:not-allowed}.home-page{padding-bottom:calc(48px + 1.25rem + 1.25rem + var(--safe-bottom))}@media(min-width:640px){.home-fab{position:static;display:block;transform:none;margin:1.5rem auto 0;box-shadow:0 4px 14px #3f6d6233}.home-fab:not(:disabled):active{transform:scale(.96)}.home-page{padding-bottom:0}}.primary-btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;padding:.85rem 1.1rem;background:var(--accent);color:#fff;border:none;border-radius:12px;font-size:1rem;font-weight:600;letter-spacing:.02em;cursor:pointer;transition:transform .12s var(--ease-spring),opacity .2s;font-family:inherit}.primary-btn:disabled{opacity:.55;cursor:not-allowed}.primary-btn:not(:disabled):active{transform:scale(.97)}.home-lang{display:flex;align-items:center;gap:.25rem;font-size:.72rem;color:var(--accent)}.home-lang select{min-height:32px;border-radius:8px;border:1px solid #d2d7d5;background:#fff;padding:.15rem .35rem;font-size:.75rem;color:#234640;font-weight:600}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--ring);outline-offset:1px}.library-summary-card{display:flex;align-items:center;justify-content:space-between;margin-top:1rem;margin-bottom:1rem;padding:.75rem .9rem;background:var(--card-bg);border:1px solid #cdd7d3;border-radius:12px;box-shadow:0 2px 8px #00000005;cursor:pointer;transition:border-color .2s var(--ease-spring),background .2s,box-shadow .2s var(--ease-spring)}.library-summary-card:hover{border-color:var(--accent-soft);box-shadow:0 4px 12px #3f6d6214}.library-summary-card:active{transform:scale(.98)}.library-summary-info{display:flex;flex-direction:column;gap:.2rem;flex:1;min-width:0}.library-summary-names{font-size:.85rem;font-weight:600;color:var(--text-main);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.library-summary-count{font-size:.75rem;color:var(--text-muted)}.library-summary-chevron{color:var(--text-muted);flex-shrink:0;margin-left:.5rem;transition:color .2s}.library-summary-card:hover .library-summary-chevron{color:var(--accent)}.library-modal-overlay{position:fixed;inset:0;background:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:100;display:flex;flex-direction:column;justify-content:flex-end;padding-top:calc(var(--safe-top) + var(--sheet-mobile-top-gap));overscroll-behavior:contain}.library-modal{position:relative;background:#fbfbf8;width:100%;max-height:min(84dvh,calc(100dvh - var(--safe-top) - 10px));border-radius:20px 20px 0 0;box-shadow:0 -4px 20px #0000001a;overflow:hidden}@media(min-width:640px){.library-modal-overlay{justify-content:center;align-items:center;padding:2rem}.library-modal{max-width:500px;border-radius:20px}}.library-modal-header{display:flex;justify-content:space-between;align-items:center;padding:1.25rem 1.5rem .75rem;border-bottom:1px solid #e1e8e5}.library-modal-header h2{margin:0;font-size:1.1rem;font-weight:700;color:var(--text-main)}.library-modal-close{background:none;border:none;color:var(--text-muted);width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;margin-right:-.5rem;transition:background .2s}.library-modal-close:hover{background:#0000000d;color:var(--text-main)}.library-modal-summary{padding:.75rem 1.5rem;background:#3f6d620d;font-size:.8rem;color:var(--accent);font-weight:600}.library-modal-dedup{font-weight:400;opacity:.8;margin-left:.3rem}.library-modal-tabs{padding:.85rem 1.5rem .5rem;background:#fbfbf8;border-bottom:1px solid #e1e8e5}.library-modal-body{padding:1rem 1.5rem 1.25rem;overflow-y:auto;min-height:0;display:flex;flex-direction:column;gap:.85rem;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch}.library-tabs{display:flex;align-items:center;gap:.35rem;padding:.28rem;border-radius:12px;background:#3f6d6214}.library-tab{flex:1;min-height:36px;border:none;border-radius:10px;background:transparent;color:var(--text-muted);font-size:.78rem;font-weight:700;font-family:inherit;cursor:pointer;transition:all .2s var(--ease-spring)}.library-tab.active{color:var(--accent);background:#fff;box-shadow:0 4px 10px #3f6d6224}.library-tab-panel{display:flex;flex-direction:column;gap:.95rem;min-height:0}.library-tab-panel .practice-settings{gap:.6rem}.practice-settings{display:flex;flex-direction:column}.library-section-header{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--accent);padding-bottom:.5rem;border-bottom:1px solid #e1e8e5;margin-bottom:.75rem;margin-top:.25rem}.library-group{display:flex;flex-direction:column;gap:.5rem}.library-group-label{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:.25rem}.library-row-container{display:flex;flex-direction:column}.library-row{display:flex;align-items:center;padding:.6rem .75rem;background:var(--card-bg);border:1px solid #e1e8e5;border-radius:10px;cursor:pointer;transition:border-color .2s,background .2s;-webkit-user-select:none;user-select:none;min-height:48px;position:relative;z-index:1}.library-row:hover{border-color:#cdd7d3;background:#fff}.library-row.checked{border-color:var(--accent);background:#3f6d6208}.library-row.highlighted{border-color:#3f6d628c;box-shadow:0 0 0 2px #3f6d6229}.library-row-check{width:20px;height:20px;border:2px solid #cdd7d3;border-radius:6px;margin-right:.75rem;display:flex;align-items:center;justify-content:center;transition:all .2s var(--ease-spring);flex-shrink:0}.library-row.checked .library-row-check{background:var(--accent);border-color:var(--accent)}.library-row.checked .library-row-check:after{content:"";width:5px;height:10px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}.library-row-main{flex:1;display:flex;flex-direction:column;justify-content:center;min-width:0;gap:1px}.library-row-name-group{display:flex;align-items:center;gap:.4rem;min-width:0}.library-row-name{font-size:.85rem;font-weight:600;color:var(--text-main);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.library-row.checked .library-row-name{color:var(--accent)}.library-row-info-btn{background:none;border:none;padding:.2rem;color:var(--text-muted);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:color .2s,transform .2s;border-radius:4px}.library-row-info-btn:hover,.library-row-info-btn.active{color:var(--accent);background:#3f6d6214}.library-row-info-btn.active{transform:rotate(180deg)}.library-row-gain{font-size:.68rem;font-weight:600;color:var(--accent);opacity:.8;letter-spacing:.01em}.library-row:not(.checked) .library-row-gain{color:#637f76}.library-row-description{overflow:hidden;background:#f3f5f4;margin-top:-8px;margin-left:1rem;margin-right:1rem;border:1px solid #e1e8e5;border-top:none;border-radius:0 0 10px 10px}.library-row-description-inner{padding:1.25rem .75rem .75rem;font-size:.75rem;line-height:1.5;color:#3f4a47;font-style:italic;word-break:break-all}.library-link{color:var(--accent);text-decoration:underline;text-underline-offset:2px;cursor:pointer}.library-link:hover{color:#2f5f54}.library-row-count{font-size:.75rem;color:var(--text-muted);margin-left:.5rem}.library-row-manage{background:none;border:none;color:var(--text-muted);width:32px;height:32px;min-width:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;margin-left:.5rem;cursor:pointer;transition:background .2s,color .2s}.library-row-manage:hover{background:#0000000d;color:var(--text-main)}.library-manage-popup{position:absolute;bottom:0;left:0;right:0;background:#fff;padding:1.5rem;border-radius:20px 20px 0 0;box-shadow:0 -10px 40px #00000026;z-index:10;display:flex;flex-direction:column;gap:1rem}@media(min-width:640px){.library-manage-popup{border-radius:20px}}.library-manage-popup h3{margin:0;font-size:1rem;color:var(--text-main)}.library-manage-rename,.library-manage-actions{display:flex;gap:.5rem}.library-manage-btn{flex:1;min-height:44px;border-radius:10px;border:1px solid #d2d7d5;background:#fbfbf8;color:#3f4a47;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s}.library-manage-btn:hover{background:#eaeae5}.library-manage-btn.preview{background:#3f6d6214;border-color:transparent;color:var(--accent)}.library-manage-btn.preview:hover{background:#3f6d6226}.library-manage-btn.danger{color:#d14444;border-color:#f0cdcd;background:#fbf2f2}.library-manage-btn.danger:hover{background:#f8e1e1}.library-modal-footer{padding:1rem 1.5rem;padding-bottom:calc(1rem + var(--safe-bottom));border-top:1px solid #e1e8e5;background:#fbfbf8;display:flex;flex-direction:column;gap:.6rem}.library-modal-confirm{width:100%;min-height:48px;border-radius:12px;background:var(--accent);color:#fff;border:none;font-size:.95rem;font-weight:700;cursor:pointer;transition:background .2s}.library-modal-confirm:hover{background:#2f5f54}@media(max-width:430px)and (max-height:760px){.library-modal.sheet-shell--mobile-full{max-height:none;height:calc(100dvh - var(--safe-top) - var(--sheet-mobile-top-gap));border-radius:16px 16px 0 0}.library-modal.sheet-shell--mobile-full .library-modal-header{position:sticky;top:0;z-index:3;padding:1rem 1rem .6rem;padding-top:calc(var(--safe-top) + .55rem);background:#fbfbf8}.library-modal-summary,.library-modal.sheet-shell--mobile-full .library-modal-tabs{position:sticky;top:0;z-index:2;background:#fbfbf8}.library-modal-summary{padding:.65rem 1rem}.library-modal.sheet-shell--mobile-full .library-modal-tabs{padding:.75rem 1rem .45rem}.library-modal.sheet-shell--mobile-full .library-modal-body{padding:.95rem 1rem 1.15rem;gap:.72rem}.library-modal.sheet-shell--mobile-full .library-modal-footer{position:sticky;bottom:0;z-index:3;padding:.8rem 1rem;padding-bottom:calc(.8rem + var(--safe-bottom))}}.browser-page{position:fixed;inset:0;background:var(--bg-main);display:flex;flex-direction:column;z-index:50}.browser-header{display:flex;align-items:center;padding:1rem 1.25rem;gap:1rem;background:#fff;border-bottom:1px solid #e1e8e5}.browser-back{background:none;border:none;color:var(--text-main);padding:.5rem;border-radius:50%;cursor:pointer;display:flex;align-items:center}.browser-title-group h1{margin:0;font-size:1.15rem;font-weight:700;color:var(--text-main)}.browser-subtitle{font-size:.75rem;color:var(--text-muted)}.browser-search-wrapper{padding:.75rem 1.25rem;background:#fff;border-bottom:1px solid #e1e8e5}.browser-search-bar{display:flex;align-items:center;background:#f3f5f4;border-radius:12px;padding:0 .75rem;gap:.5rem}.browser-search-bar input{flex:1;border:none;background:none;height:40px;font-size:.9rem;outline:none;color:var(--text-main)}.search-icon,.clear-icon{color:var(--text-muted)}.browser-content-wrapper{flex:1;display:flex;overflow:hidden;position:relative;overscroll-behavior:none}.browser-main{flex:1;overflow-y:auto;padding:1.25rem 3.5rem 1.25rem 1.25rem;scroll-behavior:smooth;overscroll-behavior-y:contain}.browser-section{margin-bottom:2rem}.browser-section-header{font-size:.8rem;font-weight:700;color:var(--accent);padding-bottom:.5rem;border-bottom:1px solid #e1e8e5;margin-bottom:1rem;position:sticky;top:-1.25rem;background:var(--bg-main);z-index:5}.browser-kanji-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:.6rem}.browser-kanji-card{aspect-ratio:1;background:#fff;border:1px solid #e1e8e5;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:var(--text-main);cursor:pointer;box-shadow:0 1px 3px #00000005;transition:all .2s}.browser-index-bar{position:absolute;right:1rem;top:50%;transform:translateY(-50%);width:32px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:.5rem 0;background:#ffffffd9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:16px;box-shadow:0 2px 8px #0000000f;border:1px solid rgba(0,0,0,.04);z-index:10;touch-action:none;-webkit-user-select:none;user-select:none}.browser-index-bar.is-dragging{background:#fffffff2;box-shadow:0 4px 16px #0000001a}.index-item{background:none;border:none;font-size:.62rem;font-weight:700;color:var(--text-muted);width:100%;height:22px;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-user-select:none;user-select:none;transform-origin:center right;will-change:transform}.index-item.active{color:var(--accent)}.index-item.current{color:var(--accent);font-weight:900}.index-item.disabled{opacity:.15;cursor:default;pointer-events:none}.index-label-bubble{position:absolute;right:3.5rem;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;background:var(--accent);color:#fff;font-size:1.5rem;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px #3f6d624d;z-index:11;animation:bubble-pop .15s ease-out}@keyframes bubble-pop{0%{transform:translateY(-50%) scale(.5);opacity:0}to{transform:translateY(-50%) scale(1);opacity:1}}.library-row-actions{display:flex;align-items:center;gap:.5rem;margin-left:.5rem}.library-row-action-btn{padding:.3rem .6rem;border-radius:6px;background:#3f6d6214;border:none;color:var(--accent);font-size:.7rem;font-weight:700;cursor:pointer;transition:background .2s}.library-row-action-btn:hover{background:#3f6d6226}.browser-bottom-spacer{height:4rem}.kanji-detail-overlay{position:fixed;inset:0;background:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:100;display:flex;align-items:center;justify-content:center;padding:1.5rem}.kanji-detail-card{background:#fff;width:100%;max-width:320px;border-radius:20px;padding:2rem;position:relative;box-shadow:0 20px 40px #0003;display:flex;flex-direction:column;align-items:center}.detail-close{position:absolute;top:1rem;right:1rem;background:#f3f5f4;border:none;border-radius:50%;padding:.4rem;color:var(--text-muted);cursor:pointer}.detail-kanji{font-size:4rem;font-weight:700;color:var(--text-main);margin-bottom:1.5rem;font-family:serif}.detail-info{width:100%;display:flex;flex-direction:column;gap:1.25rem}.detail-section label{display:block;font-size:.65rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:.25rem}.readings{font-size:1rem;font-weight:600;color:var(--text-main);line-height:1.4}.readings-group{display:flex;flex-direction:column;gap:.35rem}.readings-item{font-size:.95rem;font-weight:600;color:var(--text-main);line-height:1.4}.meanings{font-size:.9rem;color:#4a5552;line-height:1.5}.detail-meta{display:flex;gap:.5rem;margin-top:.5rem}.detail-meta span{font-size:.65rem;font-weight:700;padding:.2rem .5rem;background:#f3f5f4;border-radius:4px;color:var(--text-muted)}.detail-no-data{padding:2rem 0;color:var(--text-muted);font-style:italic;font-size:.85rem}.import-panel{display:flex;flex-direction:column;gap:.5rem;padding:.75rem;border:1px dashed #cdd7d3;border-radius:10px;background:#ffffff80;margin-top:.5rem}.import-controls{display:flex;flex-direction:column;gap:.5rem}.import-name-input{flex:1;min-height:44px;border:1px solid #d2d7d5;border-radius:8px;padding:.55rem .7rem;font-size:.84rem;outline:none;background:#fff}.import-name-input:focus{border-color:var(--accent)}.import-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.6rem .9rem;border:1px solid var(--accent);border-radius:8px;background:#3f6d620f;color:var(--accent);font-size:.86rem;font-weight:600;cursor:pointer;transition:background .2s var(--ease-spring)}.import-btn:hover{background:#3f6d621f}.import-btn input{display:none}@media(min-width:640px){.import-controls{flex-direction:row}.import-btn{min-width:120px}}.import-status{margin:0;padding:.5rem .6rem;border-radius:8px;font-size:.78rem;line-height:1.4}.import-status.done{color:#2f6f3f;background:#4d845f1f;border:1px solid rgba(77,132,95,.35)}.import-status.error{color:#8f3030;background:#c744441f;border:1px solid rgba(199,68,68,.35)}.practice-view{position:relative;display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden;background:radial-gradient(circle at top right,rgba(63,109,98,.1),transparent 36%),radial-gradient(circle at bottom left,rgba(141,183,174,.16),transparent 34%),var(--bg-color);--practice-keyboard-inset: 0px;--practice-header-offset: calc(4.6rem + var(--safe-top));--practice-content-gutter: clamp(.9rem, 3vw, 1.4rem);--practice-fab-offset: calc(max(var(--safe-bottom), 0px) + var(--practice-keyboard-inset) + 1rem)}.practice-floating-topbar{position:relative;z-index:18;display:flex;flex-direction:column;gap:.45rem;padding:calc(var(--safe-top) + .1rem) var(--practice-content-gutter) .55rem;background:linear-gradient(180deg,#f5f2ebfa,#f5f2ebe6 72%,#f5f2eb00);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.practice-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;padding:.1rem 0 calc(5.75rem + min(var(--practice-keyboard-inset),1rem));scroll-padding-top:var(--practice-header-offset)}.practice-scroll--locked{overflow-y:hidden;overscroll-behavior-y:none;-webkit-overflow-scrolling:auto}.practice-core{display:flex;flex-direction:column;gap:.75rem;min-height:min-content;padding:0 var(--practice-content-gutter)}.practice-topbar{display:flex;flex-direction:column;gap:.45rem;margin-bottom:0}.status-text{font-size:.8rem;margin:0;padding:.4rem .65rem;border-radius:999px;text-align:center;font-weight:600}.status-text.error{background:#c0392b1f;color:var(--error)}.status-text.done{background:#6b8e6b1f;color:#4b6c4b}.status-text.loading{background:#3f6d6217;color:var(--accent)}.practice-dev-panel{border-radius:12px;background:#2c715d0f;border:1px dashed rgba(44,113,93,.24)}.practice-dev-panel summary{list-style:none;cursor:pointer;font-size:.72rem;font-weight:700;color:#24463fe6;padding:.38rem .62rem;-webkit-user-select:none;user-select:none}.practice-dev-panel summary::-webkit-details-marker{display:none}.practice-dev-panel[open] summary{border-bottom:1px dashed rgba(44,113,93,.18)}.dev-double-check-panel{padding:.45rem .6rem;font-size:.72rem;color:#2c3634e0}.dev-double-check-panel--stats{padding-bottom:.4rem}.practice-dev-panel[open] .dev-double-check-panel+.dev-double-check-panel{border-top:1px dashed rgba(44,113,93,.18)}.dev-stats{display:flex;flex-wrap:wrap;gap:.35rem}.dev-stats__chip{display:inline-flex;align-items:center;min-width:0;padding:.18rem .45rem;border-radius:999px;background:#3f6d6217;border:1px solid rgba(63,109,98,.12);color:#24463feb;line-height:1.3}.dev-double-check-line{line-height:1.35}.question-card-wrap{position:relative;scroll-margin-top:calc(var(--practice-header-offset) + .35rem);overflow:visible}.question-loading-overlay{position:absolute;inset:0 0 .8rem;border-radius:16px;display:flex;align-items:center;justify-content:center;background:#ffffff38;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);pointer-events:none}.question-loading-chip{font-size:.78rem;font-weight:700;color:var(--accent);padding:.36rem .64rem;border-radius:999px;background:#ffffffd1;box-shadow:0 2px 8px #00000014;animation:pulse 1.1s ease-in-out infinite}.question-card{background:var(--card-bg);padding:1rem .9rem;border-radius:16px;box-shadow:0 16px 38px #3f6d621f;text-align:center;margin-bottom:.8rem;display:flex;flex-direction:column;gap:.85rem;border:2px solid transparent;transition:border-color .3s,background .3s}.question-card__hero,.question-card__meta{width:100%;min-width:0}.question-card__hero{display:flex;flex-direction:column;gap:.75rem}.question-card__meta{display:grid;gap:.7rem}.question-card__answer{width:100%}.question-answer-card{display:flex;flex-direction:column;gap:.85rem;width:100%;min-width:0;padding:.95rem 1rem;border-radius:14px;text-align:left;background:linear-gradient(180deg,#5d4e6d14,#3f6d620d);border:1px solid rgba(93,78,109,.16);box-shadow:0 10px 24px #3f6d6214}.question-answer-card--combined{background:radial-gradient(circle at top right,rgba(93,78,109,.08),transparent 42%),linear-gradient(180deg,#3f6d6214,#3f6d620a);border-color:#3f6d622e}.question-answer-card__value{font-size:clamp(1.48rem,4.8vw,1.92rem);line-height:1.12;font-weight:800;letter-spacing:.01em;color:#1f2b28;overflow-wrap:anywhere;word-break:break-word}.question-answer-card__subtitle{font-size:.98rem;line-height:1.45;font-weight:700;color:#2a5347db;overflow-wrap:anywhere}.question-answer-card__hero-summary{display:grid;gap:.22rem;align-items:start}.question-answer-card__hero-main{display:grid;gap:.22rem;min-width:0}.target-kanji-highlight{color:var(--accent);background:#3f6d621f;padding:0 .12rem;border-radius:4px}.question-answer-card__details{display:grid;gap:.34rem .7rem;padding-top:.32rem;border-top:1px solid rgba(93,78,109,.1)}.question-answer-card__details--grid{grid-template-columns:minmax(0,1fr)}.question-answer-card__row{display:grid;grid-template-columns:minmax(3.2rem,auto) minmax(0,1fr);align-items:start;gap:.34rem .48rem;min-width:0;padding:0}.question-answer-card__label,.question-answer-card__detail{min-width:0}.question-answer-card__label{display:inline-flex;align-items:flex-start;padding-top:.06rem}.question-answer-card__detail{width:100%;font-size:.92rem;line-height:1.5;color:#2c3634c2;overflow-wrap:anywhere;word-break:break-word}.question-answer-card__row--meaning .question-answer-card__detail{color:#4a3c24d1}.question-answer-card__row--word-meaning{padding-bottom:.16rem;margin-bottom:.08rem;border-bottom:1px solid rgba(93,78,109,.08)}.question-card__meta-status{display:flex;flex-direction:column;gap:.5rem}.question-card__meta-status>*{width:100%}.question-card.feedback-correct{border-color:var(--success);background:linear-gradient(to bottom,rgba(77,132,95,.08),var(--card-bg))}.question-card.feedback-wrong{border-color:var(--error);background:linear-gradient(to bottom,rgba(192,57,43,.08),var(--card-bg))}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}@media(min-width:640px){.question-card{padding:1.5rem 1.4rem;margin-bottom:1.2rem;gap:1rem}.question-card__meta{gap:.8rem}.question-answer-card{padding:1.05rem 1.1rem;gap:.9rem}.question-answer-card__details--grid{grid-template-columns:repeat(2,minmax(0,1fr))}.question-answer-card__row--word-meaning{grid-column:1 / -1}}.question-card__meta:empty,.question-card__meta-status:empty,.question-card__hero:empty{display:none}.word-display{width:100%;min-width:0;display:flex;flex-direction:column;gap:.45rem}.sentence-display{font-size:1.05rem;text-align:left;line-height:1.8;word-break:break-word}.underlined-target{display:inline-block;border-bottom:2px solid var(--accent);padding:1.2rem .3rem 0;margin:0 .15rem;position:relative;font-weight:600;color:var(--accent)}.type-badge{position:absolute;top:.05rem;left:50%;transform:translate(-50%);background:var(--accent);color:#fff;font-size:.55rem;font-weight:700;padding:.08rem .28rem;border-radius:3px;white-space:nowrap;pointer-events:none}.underlined-target ruby{ruby-position:over}.underlined-target ruby rt{font-size:.52rem;font-weight:600;color:var(--accent);opacity:.8;text-align:center}@media(min-width:640px){.sentence-display{font-size:1.3rem}}.feedback-inline{display:flex;align-items:flex-start;justify-content:flex-start;gap:.35rem;width:100%;min-height:40px;padding:.45rem .65rem;border-radius:10px;font-size:.8rem;font-weight:600;text-align:left;word-break:break-word}.feedback-inline span{overflow-wrap:anywhere}.feedback-inline.success{color:#306642eb;background:#4d845f12;border:1px solid rgba(77,132,95,.12)}.feedback-inline.error{color:#a03a31eb;background:#c0392b12;border:1px solid rgba(192,57,43,.12)}.reading-info-label{display:inline-block;font-size:.64rem;font-weight:700;padding:.1rem .35rem;border-radius:999px;color:#fff;white-space:nowrap;flex-shrink:0}.reading-info-label.onyomi{background:#6b7db3}.reading-info-label.kunyomi{background:#7dad7a}.reading-info-label.meaning{background:#b3936b}.reading-info-values{display:block;width:100%;color:inherit;line-height:1.45;overflow-wrap:anywhere;word-break:break-word}.reading-highlighted{font-weight:700;color:#2a6d5a;white-space:nowrap}.question-answer-card__row--onyomi .reading-highlighted{color:#2a577a}.question-answer-card__row--kunyomi .reading-highlighted{color:#3d7b39}.question-answer-card__row--meaning .reading-highlighted{color:#8a6435}.sentence-meaning-inline{display:flex;align-items:flex-start;gap:.42rem;width:100%;padding:.5rem .65rem;border-radius:10px;border:1px solid rgba(93,78,109,.1);background:#5d4e6d0d;color:#3c3c3cc2;text-align:left;font-size:.78rem;font-weight:500;line-height:1.5;white-space:normal;word-break:normal;overflow-wrap:break-word}.sentence-meaning-inline__content{flex:1;min-width:0;display:block}.sentence-meaning-inline:before{content:"";display:inline-flex;align-items:center;justify-content:center;width:.6rem;min-width:.6rem;height:.6rem;margin-top:.3rem;border-radius:999px;background:#5d4e6d42;flex-shrink:0;-webkit-user-select:none;user-select:none}.sentence-meaning-inline:empty:before{display:none}.sentence-meaning-inline:empty{display:none}.meaning-highlight{background:#5d4e6d21;color:#5d4e6df2;font-weight:600;padding:.05rem .15rem;border-radius:3px}.practice-primary-fab{position:fixed;right:calc(var(--practice-content-gutter) + max(var(--safe-right, 0px),0px));bottom:var(--practice-fab-offset);display:flex;align-items:center;justify-content:center;gap:.45rem;min-height:52px;padding:.8rem 1rem;border-radius:999px;border:none;background:var(--accent);color:#fff;font-size:.92rem;font-weight:700;cursor:pointer;font-family:inherit;box-shadow:0 18px 36px #204e4447;z-index:28;transition:transform .12s var(--ease-spring),opacity .2s ease,box-shadow .2s ease}.practice-primary-fab:active:not(:disabled){transform:scale(.97)}.practice-primary-fab:disabled{cursor:default;transform:none}.practice-primary-fab--retry{background:#3f6d62f5}.hint-toggle-btn{display:inline-flex;align-items:center;gap:.3rem;min-height:44px;background:#3f6d620f;border:1px solid rgba(63,109,98,.15);color:var(--accent);font-size:.78rem;font-weight:600;padding:.35rem .65rem;border-radius:8px;cursor:pointer;font-family:inherit;transition:background .2s var(--ease-spring),color .2s,border-color .2s;align-self:flex-start;-webkit-user-select:none;user-select:none}.hint-toggle-btn.active{background:var(--accent);color:#fff}.hint-wrapper{width:100%;display:flex;flex-direction:column;align-items:flex-start}.hint-inline-motion{width:100%;display:grid;grid-template-rows:0fr;overflow:hidden;opacity:0;transform:translateY(-4px);transition:grid-template-rows .22s cubic-bezier(.25,1,.5,1),opacity .16s cubic-bezier(.22,1,.36,1),transform .16s cubic-bezier(.22,1,.36,1)}.hint-inline-motion--open{grid-template-rows:1fr;opacity:1;transform:translateY(0)}.hint-inline{width:100%;min-height:40px;font-size:.82rem;font-weight:500;color:#234640e6;padding:.5rem .7rem;border-radius:10px;background:#3f6d620d;border:1px solid rgba(63,109,98,.11);text-align:left;overflow:hidden;word-break:break-word;min-height:0}.hint-inline--stacked{margin-top:.6rem}@media(hover:hover){.hint-toggle-btn:hover{border-color:#3f6d6247}.practice-primary-fab:hover:not(:disabled){opacity:.94;box-shadow:0 20px 40px #204e4457}}.hint-toggle-btn:focus-visible,.practice-primary-fab:focus-visible{outline:2px solid rgba(63,109,98,.32);outline-offset:2px}.hw-char-progress{display:flex;justify-content:center;align-items:center;gap:.5rem;padding:.4rem;width:100%}.hw-char{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;font-size:1.2rem;border-radius:8px;border:2px solid transparent;transition:all .2s var(--ease-spring)}.hw-char.done{color:var(--text-main);background:#81e0ac40;border-color:#268d5459;font-weight:700}.hw-char.active{color:var(--accent);background:#5d4e6d14;border-color:var(--accent);font-weight:700}.hw-char.pending{color:#3c3c3c59}.hw-tip{font-size:.8rem;font-weight:600;text-align:center;margin-bottom:.5rem;padding:.35rem .6rem;border-radius:8px;color:var(--accent);background:#5d4e6d0f}.handwriting-section.hw-error .canvas-wrapper{border-color:var(--error);animation:shake .4s ease-in-out}.handwriting-section.hw-error .hw-tip{color:var(--error);background:#c0392b1a}.bottom-bar{display:flex;align-items:center;justify-content:flex-start;gap:.45rem;width:fit-content;padding:.28rem;border-radius:999px;background:#ffffffd1;border:1px solid rgba(63,109,98,.12);box-shadow:0 10px 26px #3f6d621c;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.bottom-bar-btn{display:flex;align-items:center;gap:.3rem;background:#ffffffb8;border:none;color:var(--accent);font-size:.78rem;font-weight:600;cursor:pointer;padding:.55rem .8rem;min-width:48px;min-height:48px;justify-content:center;border-radius:999px;transition:background .2s var(--ease-spring),transform .12s var(--ease-spring);font-family:inherit;box-shadow:0 2px 8px #3f6d6214}.bottom-bar-btn:active{background:#3f6d621f;transform:scale(.97)}.bottom-bar-btn.report-btn{color:#c0392b;background:#c0392b1a}.bottom-bar-btn.report-btn:active{background:#c0392b2e}.bottom-bar-btn__label{white-space:nowrap}.bottom-bar-lang{display:flex;align-items:center;gap:.2rem;color:var(--accent)}.bottom-bar-lang select{min-height:32px;border-radius:8px;border:1px solid #d2d7d5;background:#fff;padding:.1rem .3rem;font-size:.72rem;color:#234640;font-weight:600}.input-container{display:grid;grid-template-rows:0fr;min-height:0;scroll-margin-top:calc(var(--practice-header-offset) + .5rem);opacity:0;transform:translateY(10px);transition:grid-template-rows .24s cubic-bezier(.25,1,.5,1),opacity .16s cubic-bezier(.22,1,.36,1),transform .16s cubic-bezier(.22,1,.36,1)}.input-container--open{grid-template-rows:1fr;opacity:1;transform:translateY(0)}.input-container--closed{pointer-events:none}.input-container__viewport{min-height:0;overflow:hidden}.input-container__content{min-height:0}@media(prefers-reduced-motion:reduce){.hint-inline-motion,.input-container{transition-duration:.01ms;transform:none}}.input-stack{display:flex;flex-direction:column;gap:.55rem}.input-mode-toggle{display:inline-flex;align-items:center;gap:.35rem;background:#5d4e6d14;padding:.2rem;border-radius:999px;width:fit-content}@media(max-width:430px)and (max-height:760px){.practice-floating-topbar{gap:.35rem;padding-bottom:.45rem}.practice-core{gap:.6rem}.practice-topbar{gap:.35rem}.practice-dev-panel summary,.dev-double-check-panel{padding:.38rem .5rem;font-size:.68rem}.dev-stats{gap:.28rem}.dev-stats__chip{padding:.16rem .42rem}.question-card{padding:.75rem;gap:.45rem;margin-bottom:.55rem}.question-card__hero{gap:.55rem}.question-card__meta{gap:.45rem}.question-answer-card{padding:.72rem .78rem;gap:.55rem}.question-answer-card__details{gap:.28rem .56rem}.question-answer-card__row{grid-template-columns:minmax(2.8rem,auto) minmax(0,1fr);gap:.22rem .42rem}.sentence-display{font-size:.98rem;line-height:1.6}.hint-toggle-btn{font-size:.72rem;padding:.28rem .55rem}.hint-inline,.feedback-inline{padding:.42rem .58rem;font-size:.76rem}.bottom-bar-btn{min-width:44px;min-height:44px;padding:.5rem .72rem}.practice-primary-fab{min-height:48px;padding:.72rem .9rem;font-size:.86rem}}@media(max-width:639px){.bottom-bar-btn__label{display:none}}@media(min-width:640px){.practice-view{--practice-header-offset: calc(5.8rem + var(--safe-top))}.practice-floating-topbar{padding-bottom:.7rem}}.practice-view--keyboard-open .practice-floating-topbar{gap:.3rem;padding-bottom:.35rem}.practice-view--keyboard-open .practice-dev-panel{display:none}.practice-view--keyboard-open .status-text{font-size:.74rem;padding:.32rem .55rem}.practice-view--keyboard-open .question-card{padding:.76rem .8rem;gap:.55rem;margin-bottom:.55rem}.practice-view--keyboard-open .question-card__hero,.practice-view--keyboard-open .question-card__meta{gap:.48rem}.practice-view--keyboard-open .sentence-display{font-size:1rem;line-height:1.62}.practice-view--keyboard-open .practice-primary-fab{bottom:calc(max(var(--safe-bottom),0px) + var(--practice-keyboard-inset) + .75rem)}.input-mode-toggle button{border:none;background:transparent;color:var(--text-muted);font-size:.72rem;font-weight:600;padding:.35rem .65rem;border-radius:999px;cursor:pointer;transition:all .2s var(--ease-spring);font-family:inherit}.input-mode-toggle button.active{background:#fff;color:var(--accent);box-shadow:0 4px 10px #3f6d621f}.input-area{display:flex;gap:.5rem;background:#fff;padding:.35rem;border-radius:12px;border:2px solid transparent;box-shadow:var(--shadow)}.input-area input{flex:1;border:none;padding:.75rem;font-size:1rem;outline:none;min-height:44px}.submit-btn{background:var(--accent);color:#fff;border:none;width:48px;min-height:48px;border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .12s var(--ease-spring)}.submit-btn:active{transform:scale(.97)}.kana-input-area{display:flex;flex-direction:column;gap:.5rem}.kana-display{min-height:44px;flex:1;display:flex;align-items:center;padding:.75rem;font-size:1rem;color:var(--text-main);background:#fff;border:none}.handwriting-section{background:var(--card-bg);border-radius:12px;padding:.6rem;box-shadow:var(--shadow)}.handwriting-container{position:relative;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.canvas-wrapper{background:var(--washi);border:1px solid #dcd3c1;border-radius:8px;overflow:hidden;box-shadow:inset 0 2px 4px #00000008;position:relative;touch-action:none;cursor:crosshair}canvas{width:100%;height:280px;display:block;touch-action:none;cursor:crosshair;background-image:linear-gradient(to right,rgba(0,0,0,.05) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,0,0,.05) 1px,transparent 1px);background-size:50px 50px;background-position:center}@media(min-width:640px){canvas{height:300px}}.canvas-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px;align-items:center}.action-btn{padding:.55rem .7rem;border-radius:10px;border:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.3rem;font-size:.8rem;font-weight:600;min-height:44px;transition:transform .12s var(--ease-spring),background .2s,color .2s;font-family:inherit}.action-btn.ghost{background:#f1ece2;color:#5e5a55;border:1px solid rgba(93,78,109,.18)}.action-btn:disabled{opacity:.5;cursor:not-allowed}.recognize-hint{position:absolute;right:8px;bottom:8px;font-size:.7rem;color:#2828288c;padding:2px 6px;border-radius:999px;background:#ffffff8c;pointer-events:none}.recognize-hint.active{color:#282828b3;font-weight:600;background:#ffffffb3}.kana-pad{display:flex;flex-direction:column;gap:.5rem;background:#fffffff5;border-radius:14px;padding:.5rem;border:1px solid rgba(93,78,109,.18);box-shadow:var(--shadow)}.kana-type-toggle{display:inline-flex;align-items:center;gap:.3rem;background:#5d4e6d14;padding:.2rem;border-radius:999px;width:fit-content}.kana-type-toggle button{border:none;background:transparent;color:var(--text-muted);font-size:.7rem;font-weight:600;padding:.28rem .55rem;border-radius:999px;cursor:pointer;transition:all .2s var(--ease-spring);font-family:inherit}.kana-type-toggle button.active{background:#fff;color:var(--accent);box-shadow:0 4px 10px #3f6d621f}.kana-flick-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem}.kana-flick-key{position:relative;height:52px;border-radius:12px;border:1px solid rgba(93,78,109,.14);background:#fff;color:#2f3f3b;font-size:.95rem;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;transition:transform .1s var(--ease-spring),background .2s}.kana-flick-key:active{transform:scale(.97)}.kana-center{font-size:1rem;font-weight:700}.kana-hint{position:absolute;font-size:.55rem;color:var(--text-muted);opacity:.7}.kana-hint.up{top:4px;left:50%;transform:translate(-50%)}.kana-hint.down{bottom:4px;left:50%;transform:translate(-50%)}.kana-hint.left{left:5px;top:50%;transform:translateY(-50%)}.kana-hint.right{right:5px;top:50%;transform:translateY(-50%)}@media(min-width:640px){.kana-flick-key{height:64px;font-size:1.05rem}.kana-hint{font-size:.62rem}.kana-center{font-size:1.1rem}}.kana-flick-overlay{position:absolute;width:120px;height:120px;top:-8px;left:50%;transform:translate(-50%,-100%) scale(.95);border-radius:50%;background:#fffffff5;border:2px solid rgba(93,78,109,.25);box-shadow:0 10px 22px #3f6d6233;display:none;pointer-events:none;z-index:2}.kana-flick-overlay.active{display:block;transform:translate(-50%,-100%) scale(1)}.kana-overlay{position:absolute;font-size:.8rem;font-weight:700;color:var(--accent)}.kana-overlay.active{color:#0f2d26;background:#81e0ac73;border-radius:999px;padding:.1rem .35rem}.kana-overlay.up{top:10px;left:50%;transform:translate(-50%)}.kana-overlay.down{bottom:10px;left:50%;transform:translate(-50%)}.kana-overlay.left{left:12px;top:50%;transform:translateY(-50%)}.kana-overlay.right{right:12px;top:50%;transform:translateY(-50%)}.kana-overlay.center{top:50%;left:50%;transform:translate(-50%,-50%);font-size:.95rem;color:#1f2b28}.kana-actions{display:flex;gap:.4rem}.kana-action-btn{flex:1;height:44px;border-radius:10px;border:1px solid rgba(93,78,109,.2);background:#fff;color:var(--accent);font-weight:600;cursor:pointer;font-size:.82rem;font-family:inherit}.candidates-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px;min-height:48px;align-items:center;justify-content:center;padding:4px;background:#ffffff80;border:1px solid rgba(93,78,109,.08);border-radius:12px}.candidate-btn{min-width:44px;height:44px;padding:0 10px;background:var(--card-bg);border:1px solid var(--accent-soft);border-radius:8px;font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s var(--ease-spring);box-shadow:0 2px 5px #0000000d;color:var(--text-main)}.candidate-btn:active{background:var(--accent);color:#fff;border-color:var(--accent)}.mcq-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;padding:.2rem}.mcq-choice{display:flex;align-items:center;justify-content:center;min-height:56px;padding:.6rem .5rem;border-radius:12px;border:2px solid rgba(63,109,98,.18);background:var(--card-bg);color:var(--text-main);font-size:1.05rem;font-weight:600;cursor:pointer;transition:all .2s var(--ease-spring);font-family:inherit;box-shadow:var(--shadow)}.mcq-choice:active:not(:disabled){transform:scale(.97);background:#3f6d620f}.mcq-choice.correct{border-color:var(--success);background:#4d845f1f;color:var(--success)}.mcq-choice.wrong{border-color:var(--error);background:#c0392b1f;color:var(--error)}.mcq-choice:disabled{cursor:default;opacity:.7}.mcq-choice:disabled:not(.correct):not(.wrong){opacity:.5}@media(min-width:640px){.mcq-choice{min-height:64px;font-size:1.15rem}}.question-card.skeleton{min-height:140px;width:100%}.skeleton-line{height:.9rem;border-radius:6px;background:#3f6d6214;animation:pulse 1.4s ease-in-out infinite}.skeleton-line.w60{width:60%}.skeleton-line.w80{width:80%}.skeleton-line.w40{width:40%}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.skeleton-loading-caption{font-size:.78rem;color:var(--text-muted);margin:.15rem 0 0;animation:pulse 1.4s ease-in-out infinite}.skeleton-center{flex:1;display:flex;align-items:center;justify-content:center;padding:0 var(--practice-content-gutter)}.ocr-panel{gap:.8rem}.ocr-panel-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.ocr-panel-title{font-size:.82rem;font-weight:700;color:var(--accent);letter-spacing:.03em}.ocr-step-label{font-size:.72rem;font-weight:700;color:var(--accent);letter-spacing:.03em;background:#3f6d6214;border-radius:999px;padding:.2rem .52rem}.ocr-step{display:flex;flex-direction:column;min-height:0;gap:.75rem}.ocr-step-scroll{overflow-y:auto;min-height:0}.ocr-step-crop{min-height:0}.ocr-crop-modal-hint{min-height:88px;border-radius:10px;border:1px dashed #cdd7d3;background:#3f6d620a;display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:.82rem;font-weight:600}.ocr-crop-modal-overlay{position:fixed;inset:0;z-index:220;background:#00000085;display:flex;align-items:center;justify-content:center;padding:.85rem}.ocr-crop-modal{width:min(720px,100%);max-height:min(94dvh,760px);background:#fbfbf8;border-radius:16px;box-shadow:0 14px 46px #0000004d;display:flex;flex-direction:column;overflow:hidden}.ocr-crop-modal-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.85rem .95rem;border-bottom:1px solid #e1e8e5}.ocr-crop-modal-title{font-size:.84rem;font-weight:700;color:var(--accent)}.ocr-crop-modal-close{border:none;background:none;width:34px;height:34px;border-radius:50%;color:var(--text-muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.ocr-crop-modal-close:hover{background:#0000000d;color:var(--text-main)}.ocr-crop-modal-body{padding:.75rem .95rem .9rem;min-height:0;flex:1;overflow:auto}.ocr-upload{display:flex;flex-direction:column;align-items:center;gap:.85rem;padding:1.35rem 1rem;border:2px dashed #cdd7d3;border-radius:12px;background:#ffffff80;text-align:center;cursor:pointer;transition:border-color .2s,background .2s}.ocr-upload:hover,.ocr-upload.drag-over{border-color:var(--accent);background:#3f6d620a}.ocr-upload-icon{color:var(--accent);opacity:.7}.ocr-upload-text{font-size:.9rem;font-weight:600;color:var(--text-main)}.ocr-upload-hint{font-size:.75rem;color:var(--text-muted)}.ocr-upload input[type=file]{display:none}.ocr-notices{margin:0;padding:0 0 0 1.1rem;list-style:disc;display:flex;flex-direction:column;gap:.3rem}.ocr-notices li{font-size:.72rem;color:var(--text-muted);line-height:1.4}.ocr-notices-toggle{border:none;background:none;color:var(--accent);font-size:.76rem;font-weight:600;padding:0;align-self:flex-start}.ocr-cropper{display:flex;flex-direction:column;gap:1rem;min-height:0}.ocr-cropper-hint{margin:0;font-size:.8rem;color:var(--text-muted);text-align:center}.ocr-cropper-area{display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:8px;background:#f3f5f4;min-height:clamp(300px,54dvh,560px)}.ocr-crop-modal .ocr-cropper>.ocr-action-btn.primary{position:sticky;bottom:0;z-index:1}.ocr-processing{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:2.4rem 1rem;min-height:220px}.ocr-spinner{width:36px;height:36px;border:3px solid #e1e8e5;border-top-color:var(--accent);border-radius:50%;animation:ocr-spin .8s linear infinite}@keyframes ocr-spin{to{transform:rotate(360deg)}}.ocr-processing-text{font-size:.9rem;color:var(--text-muted);font-weight:600}.ocr-validation{display:flex;flex-direction:column;gap:.75rem}.ocr-validation-header{display:flex;justify-content:space-between;align-items:center}.ocr-validation-header h3{margin:0;font-size:1rem;font-weight:700;color:var(--text-main)}.ocr-validation-count{font-size:.78rem;font-weight:600;color:var(--accent)}.ocr-validation-hint{margin:0;font-size:.75rem;color:var(--text-muted)}.ocr-validation-grid{display:flex;flex-wrap:wrap;gap:.5rem;max-height:240px;overflow-y:auto;padding:.5rem;background:#f3f5f4;border-radius:10px}.ocr-validation-char{width:42px;height:42px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;background:#fff;border:1px solid #e1e8e5;border-radius:8px;cursor:pointer;color:var(--text-main);transition:all .15s;-webkit-user-select:none;user-select:none}.ocr-validation-char:hover{border-color:var(--accent);background:#3f6d620d}.ocr-validation-char.removed{opacity:.3;text-decoration:line-through;background:#f3f5f4;border-color:transparent}.ocr-add-row{display:flex;gap:.5rem}.ocr-add-input{flex:1;min-height:40px;border:1px solid #d2d7d5;border-radius:8px;padding:.5rem .7rem;font-size:.85rem;outline:none;background:#fff}.ocr-add-input:focus{border-color:var(--accent)}.ocr-action-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.6rem 1.2rem;border-radius:10px;border:1px solid var(--accent);background:#3f6d620f;color:var(--accent);font-size:.88rem;font-weight:600;cursor:pointer;transition:background .2s var(--ease-spring)}.ocr-action-btn:hover{background:#3f6d621f}.ocr-action-btn:disabled{opacity:.4;cursor:not-allowed}.ocr-action-btn.primary{background:var(--accent);color:#fff;border-color:transparent}.ocr-action-btn.primary:hover{background:#2f5f54}.ocr-action-btn.small{min-height:40px;padding:.4rem .8rem;font-size:.82rem}.ocr-sticky-actions{display:flex;flex-direction:column;gap:.55rem;position:sticky;bottom:0;padding-top:.6rem;padding-bottom:.25rem;background:linear-gradient(to bottom,#fbfbf800,#fbfbf8 22%)}.ocr-name-input{min-height:44px;border:1px solid #d2d7d5;border-radius:8px;padding:.55rem .7rem;font-size:.84rem;outline:none;background:#fff;width:100%}.ocr-name-input:focus{border-color:var(--accent)}.ocr-error{display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:1.3rem .8rem;text-align:center}.ocr-error-text{font-size:.85rem;color:#8f3030;font-weight:500}.ocr-api-key-notice{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:2rem 1rem;text-align:center;color:var(--text-muted)}.ocr-api-key-notice-title{font-size:.9rem;font-weight:600;color:var(--text-main)}.ocr-api-key-notice-hint{font-size:.75rem;font-family:monospace;background:#f3f5f4;padding:.3rem .6rem;border-radius:6px}@media(max-width:430px)and (max-height:760px){.ocr-panel{gap:.65rem}.ocr-crop-modal-overlay{padding:0;align-items:flex-end}.ocr-crop-modal{width:100%;max-height:calc(100dvh - var(--safe-top));border-radius:16px 16px 0 0}.ocr-crop-modal-header{position:sticky;top:0;z-index:2;background:#fbfbf8}.ocr-crop-modal-body{padding:.65rem .75rem calc(.8rem + var(--safe-bottom))}.ocr-upload{padding:1rem .85rem;gap:.7rem}.ocr-upload-icon{width:32px;height:32px}.ocr-notices li{font-size:.7rem}.ocr-step-validate{min-height:0}.ocr-step-scroll{flex:1}.ocr-sticky-actions{padding-bottom:calc(.2rem + var(--safe-bottom));margin-bottom:-.2rem}.ocr-validation-grid{max-height:min(34dvh,260px)}.ocr-cropper-area{min-height:clamp(280px,50dvh,460px)}}.tour-overlay{position:fixed;inset:0;z-index:1000}.tour-spotlight{position:fixed;z-index:1001;border-radius:12px;box-shadow:0 0 0 9999px #00000080;pointer-events:none}.tour-tooltip{position:fixed;z-index:1002;background:var(--card-bg);border-radius:14px;padding:1rem 1.1rem;box-shadow:0 12px 32px #00000026;width:max-content}.tour-title{margin:0 0 .35rem;font-size:.95rem;font-weight:700;color:var(--text-main)}.tour-body{margin:0 0 .85rem;font-size:.82rem;color:var(--text-muted);line-height:1.55}.tour-footer{display:flex;align-items:center;justify-content:space-between}.tour-dots{display:flex;gap:.35rem}.tour-dot{width:7px;height:7px;border-radius:50%;background:color-mix(in srgb,var(--text-muted) 30%,transparent);transition:background .2s}.tour-dot.active{background:var(--accent)}.tour-actions{display:flex;align-items:center;gap:.65rem}.tour-skip{background:none;border:none;color:var(--text-muted);font-size:.8rem;cursor:pointer;padding:.3rem .4rem;font-family:inherit}.tour-skip:active{opacity:.7}.tour-next{background:var(--accent);color:#fff;border:none;border-radius:8px;padding:.45rem .9rem;font-size:.82rem;font-weight:600;cursor:pointer;font-family:inherit;transition:transform .12s var(--ease-spring)}.tour-next:active{transform:scale(.97)}.tour-help-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;border:1px solid color-mix(in srgb,var(--text-muted) 30%,transparent);background:var(--card-bg);color:var(--accent);cursor:pointer;flex-shrink:0;transition:transform .12s var(--ease-spring)}.tour-help-btn:active{transform:scale(.95)}.tour-overlay--entering{animation:tour-dim-in .4s ease-out forwards}@keyframes tour-dim-in{0%{opacity:0}to{opacity:1}}