:root{--color-text-primary: #17221f;--color-surface: #ffffff;--color-focus-ring: #2c5b4c;--color-brand: #153f35;--color-brand-pressed: #10352d;--color-brand-secondary: #2c5b4c;--color-brand-wash: #eaf0ec;--color-string-motif: #b9ccc4;--color-text-muted: #65736e;--color-divider: #dce5e0;--color-nav-muted: #53645f;--size-app-max-width: 480px;--size-record-button: clamp(9.5rem, 43vw, 10.75rem);--size-bottom-nav-height: 6.45rem;--size-bottom-nav-safe-area: max(.55rem, env(safe-area-inset-bottom, 0px));--size-nav-icon: 1.8rem;color:var(--color-text-primary);background:var(--color-surface);font-family:PingFang SC,Microsoft YaHei,Noto Sans CJK SC,system-ui,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color-scheme:light}*{box-sizing:border-box}html{min-width:320px;min-height:100%;background:var(--color-surface)}body{min-width:320px;min-height:100%;margin:0;background:var(--color-surface);overscroll-behavior:none}button{font:inherit}button:focus-visible{outline:3px solid var(--color-focus-ring);outline-offset:3px}#root{min-height:100vh;min-height:100dvh}.app-shell{display:grid;grid-template-rows:minmax(0,1fr) auto;width:100%;max-width:var(--size-app-max-width);min-height:100vh;min-height:100dvh;margin:0 auto;overflow:hidden;background:var(--color-surface)}.app-shell__content{min-height:0;overflow-y:auto;padding-top:env(safe-area-inset-top,0px);scrollbar-width:none}.app-shell__content::-webkit-scrollbar{display:none}.practice-idle{display:flex;min-height:100%;flex-direction:column;align-items:center;padding:clamp(4rem,8vh,5rem) 1.5rem 2rem;text-align:center}.practice-idle h1,.placeholder-view h1{margin:0;color:var(--color-text-primary);font-family:Songti SC,STSong,SimSun,"Noto Serif CJK SC",serif;font-size:clamp(2.75rem,12vw,3.25rem);font-weight:600;line-height:1.16;letter-spacing:.08em;text-wrap:nowrap}.practice-idle__strings{width:min(72vw,16rem);height:auto;margin-top:clamp(1.65rem,4vh,2.25rem);color:var(--color-string-motif);stroke-width:1.05}.practice-idle__date{margin-top:clamp(2rem,5vh,2.6rem);color:var(--color-text-muted);font-size:1.18rem;font-weight:400;line-height:1.5;letter-spacing:.04em}.practice-idle__record-button{display:inline-flex;width:var(--size-record-button);height:var(--size-record-button);flex:0 0 auto;align-items:center;justify-content:center;margin-top:clamp(4rem,9vh,5rem);border:1px solid var(--color-brand-pressed);border-radius:50%;background:var(--color-brand);color:var(--color-surface);font-size:1.42rem;font-weight:650;line-height:1;letter-spacing:.04em;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.practice-idle__record-button:active{background:var(--color-brand-pressed)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.recording-view,.recording-completed,.recording-progress{min-height:100%;padding-right:max(1.5rem,env(safe-area-inset-right,0px));padding-left:max(1.5rem,env(safe-area-inset-left,0px))}.recording-view,.recording-completed{display:flex;flex-direction:column;align-items:center}.recording-view{padding-top:clamp(3rem,8vh,4.5rem);padding-bottom:2rem}.recording-view h1,.recording-completed h1{margin:0;color:var(--color-text-primary);font-family:Songti SC,STSong,SimSun,"Noto Serif CJK SC",serif;font-weight:600;letter-spacing:.08em}.recording-view h1{font-size:clamp(2.25rem,10vw,2.8rem)}.recording-timer{margin-top:clamp(1.5rem,4vh,2rem);color:var(--color-brand);font-size:clamp(3.3rem,16vw,4.5rem);font-variant-numeric:tabular-nums;font-weight:350;letter-spacing:.02em;line-height:1}.recording-waveform{display:block;width:100%;height:clamp(7.5rem,21vh,10rem);margin-top:clamp(2rem,5vh,3rem);background:var(--color-surface)}.recording-waveform--interactive{height:clamp(6.5rem,18vh,8.5rem);margin-top:1.5rem;cursor:pointer;touch-action:none}.recording-waveform--interactive:focus-visible{outline:3px solid var(--color-focus-ring);outline-offset:3px}.recording-stop-button{display:grid;width:6.5rem;height:6.5rem;flex:0 0 auto;place-items:center;margin-top:auto;border:0;border-radius:50%;background:var(--color-brand);color:var(--color-surface);font-size:1.1rem;font-weight:650;letter-spacing:.06em;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.recording-progress{display:grid;place-items:center;color:var(--color-brand);font-family:Songti SC,STSong,SimSun,"Noto Serif CJK SC",serif;font-size:1.5rem;letter-spacing:.05em;text-align:center}.recording-error{width:min(100%,21rem);margin-top:2rem;padding:1rem 1.1rem;border-radius:.85rem;background:var(--color-brand-wash);color:var(--color-text-primary)}.recording-error p{margin:0;color:var(--color-brand);font-weight:650}.recording-error span{display:block;margin-top:.35rem;color:var(--color-text-muted);line-height:1.45}.recording-error button{min-width:6.5rem;min-height:2.75rem;margin-top:.8rem;border:0;border-radius:1.4rem;background:var(--color-brand);color:var(--color-surface)}.recording-error+.practice-idle__record-button{display:none}.recording-completed{padding-top:clamp(2.2rem,6vh,3.5rem);padding-bottom:1.5rem}.recording-completed h1{color:var(--color-text-primary);font-size:clamp(2.25rem,10vw,2.75rem)}.recording-completed__interrupted{margin:.8rem 0 0;color:var(--color-text-muted);font-size:.95rem}.recording-completed__time{display:flex;width:100%;justify-content:space-between;margin-top:.6rem;color:var(--color-text-muted);font-size:.95rem;font-variant-numeric:tabular-nums}.recording-play-button{display:grid;width:3.75rem;height:3.75rem;place-items:center;margin-top:.9rem;border:0;border-radius:50%;background:var(--color-brand);color:var(--color-surface);cursor:pointer;touch-action:manipulation}.recording-play-button svg{width:1.5rem;height:1.5rem;fill:currentColor}.recording-completed__piece{display:flex;width:100%;min-height:3.75rem;align-items:center;justify-content:space-between;margin-top:clamp(1rem,3vh,1.5rem);border-top:1px solid var(--color-divider);border-bottom:1px solid var(--color-divider);color:var(--color-text-muted)}.recording-completed__piece select{min-width:8rem;min-height:3rem;border:0;background:transparent;color:var(--color-text-primary);font:inherit;font-size:1rem;text-align:right}.recording-completed__piece strong{color:var(--color-text-primary);font-weight:550}.recording-note{width:100%;min-height:4.25rem;padding:1rem 0;resize:none;border:0;border-bottom:1px solid var(--color-divider);border-radius:0;outline-offset:3px;background:transparent;color:var(--color-text-primary);font:inherit;font-size:1rem}.recording-note::placeholder{color:var(--color-text-muted)}.recording-completed audio{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0}.recording-done-button{width:100%;min-height:3.25rem;margin-top:auto;border:0;border-radius:.75rem;background:var(--color-brand);color:var(--color-surface);font-weight:650;cursor:pointer;touch-action:manipulation}.recording-done-button:disabled,.inline-form button:disabled{opacity:.55;cursor:default}.inline-error{width:100%;margin:.75rem 0 0;color:var(--color-brand-secondary);font-size:.95rem;line-height:1.45}.library-view,.history-view{min-height:100%;padding-right:max(1.25rem,env(safe-area-inset-right,0px));padding-bottom:2rem;padding-left:max(1.25rem,env(safe-area-inset-left,0px));background:var(--color-surface)}.library-header,.history-header{display:grid;min-height:6.5rem;align-items:center;border-bottom:1px solid var(--color-divider)}.library-header{grid-template-columns:1fr auto}.library-header h1,.history-header h1{margin:0;color:var(--color-text-primary);font-family:Songti SC,STSong,SimSun,"Noto Serif CJK SC",serif;font-size:2.4rem;font-weight:600;letter-spacing:.08em}.library-header button,.history-header button,.back-button{min-width:3rem;min-height:3rem;padding:0;border:0;background:transparent;color:var(--color-brand);cursor:pointer;touch-action:manipulation}.library-list,.history-list{border-top:1px solid var(--color-divider)}.library-list{margin-top:1.35rem}.library-row{display:grid;width:100%;min-height:4rem;grid-template-columns:minmax(0,1fr) auto 1.5rem;align-items:center;gap:.65rem;padding:.55rem 0;border:0;border-bottom:1px solid var(--color-divider);background:transparent;color:var(--color-text-primary);font-family:Songti SC,STSong,SimSun,"Noto Serif CJK SC",serif;font-size:1.22rem;text-align:left;cursor:pointer;touch-action:manipulation}.library-row__meta{color:var(--color-text-muted);font-family:PingFang SC,Microsoft YaHei,sans-serif;font-size:1rem}.library-row__chevron{width:1.35rem;height:1.35rem;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.library-status,.history-empty{margin:3rem 0 0;color:var(--color-text-muted);text-align:center}.library-status p{margin:0 0 .75rem}.library-status button{min-width:6rem;min-height:3rem;border:1px solid var(--color-brand);background:var(--color-surface);color:var(--color-brand)}.inline-form{padding:1rem 0;border-bottom:1px solid var(--color-divider)}.inline-form label{display:grid;gap:.45rem;color:var(--color-text-muted);font-size:.9rem}.inline-form input,.inline-form select,.inline-form textarea{width:100%;min-height:3rem;padding:.65rem .75rem;border:1px solid var(--color-divider);border-radius:0;background:var(--color-surface);color:var(--color-text-primary);font:inherit;font-size:1rem}.inline-form textarea{resize:vertical}.inline-form__actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}.inline-form button,.inline-confirm button{min-height:3rem;padding:0 1rem;border:1px solid var(--color-brand);background:var(--color-surface);color:var(--color-brand);cursor:pointer;touch-action:manipulation}.inline-form button[type=submit],.inline-form button:first-child{background:var(--color-brand);color:var(--color-surface)}.inline-form .danger-button{margin-left:auto;border-color:var(--color-brand-secondary);background:var(--color-surface);color:var(--color-brand-secondary)}.inline-confirm{width:100%;margin-top:.75rem;padding:.85rem;background:var(--color-brand-wash)}.inline-confirm p{margin:0 0 .75rem;line-height:1.5}.history-header{grid-template-columns:3rem minmax(0,1fr) auto;gap:.4rem}.history-header h1{overflow:hidden;font-size:2.1rem;text-align:center;text-overflow:ellipsis;white-space:nowrap}.history-header .back-button{font-family:serif;font-size:2.5rem;line-height:1}.history-list{margin-top:1rem}.history-row{border-bottom:1px solid var(--color-divider);background:var(--color-surface)}.history-row--selected{background:var(--color-brand-wash)}.history-row__summary{display:grid;min-height:5.4rem;grid-template-columns:minmax(0,1fr) 3rem auto;align-items:center;gap:.65rem;padding:.65rem 0}.history-row__summary time{color:var(--color-text-primary);font-variant-numeric:tabular-nums}.history-row__duration{margin-left:.7rem;color:var(--color-text-muted);font-variant-numeric:tabular-nums}.history-row__summary p{margin:.4rem 0 0;overflow:hidden;color:var(--color-text-muted);font-size:.92rem;text-overflow:ellipsis;white-space:nowrap}.history-play-button{display:grid;width:3rem;height:3rem;place-items:center;padding:0;border:1px solid var(--color-brand);border-radius:50%;background:var(--color-surface);color:var(--color-brand)}.history-play-button svg{width:1.25rem;height:1.25rem;fill:currentColor}.history-edit-button{min-width:3rem;min-height:3rem;padding:0 .25rem;border:0;background:transparent;color:var(--color-brand-secondary)}.history-player{padding:0 0 .9rem}.history-player .recording-waveform{height:6rem;margin-top:0}.history-view>audio{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0}.recording-edit{border-top:1px solid var(--color-divider)}.recording-edit label+label{margin-top:.75rem}.history-playback-error{text-align:center}.settings-view{min-height:100%;padding-right:max(1.25rem,env(safe-area-inset-right,0px));padding-bottom:2rem;padding-left:max(1.25rem,env(safe-area-inset-left,0px));background:var(--color-surface)}.settings-header{display:grid;min-height:6.5rem;align-items:center;border-bottom:1px solid var(--color-divider)}.settings-header h1{margin:0;color:var(--color-text-primary);font-family:Songti SC,STSong,SimSun,"Noto Serif CJK SC",serif;font-size:2.4rem;font-weight:600;letter-spacing:.08em}.settings-section{padding:1.35rem 0;border-bottom:1px solid var(--color-divider)}.settings-section h2{margin:0;color:var(--color-text-primary);font-family:Songti SC,STSong,SimSun,"Noto Serif CJK SC",serif;font-size:1.35rem;font-weight:600;letter-spacing:.04em}.settings-section p{margin:.65rem 0 0;color:var(--color-text-muted);line-height:1.5}.settings-section strong{color:var(--color-text-primary);font-weight:600}.settings-origin{overflow-wrap:anywhere;font-size:.9rem}.settings-section>button,.settings-restore-confirm button{width:100%;min-height:3rem;margin-top:1rem;padding:.65rem 1rem;border:1px solid var(--color-brand);border-radius:0;background:var(--color-surface);color:var(--color-brand);font:inherit;font-size:1rem;font-weight:600;cursor:pointer;touch-action:manipulation}.settings-section>button:disabled,.settings-restore-confirm button:disabled,.settings-file-picker input:disabled{opacity:.55;cursor:default}.settings-section .settings-feedback{color:var(--color-brand-secondary)}.settings-file-picker{display:grid;gap:.45rem;margin-top:1.25rem;color:var(--color-text-muted);font-size:.95rem}.settings-file-picker input{width:100%;min-height:3rem;border:1px solid var(--color-divider);border-radius:0;background:var(--color-surface);color:var(--color-text-primary);font:inherit;font-size:1rem}.settings-file-picker input::file-selector-button{min-height:3rem;margin-right:.75rem;padding:0 .85rem;border:0;border-right:1px solid var(--color-divider);background:var(--color-brand-wash);color:var(--color-brand);font:inherit;cursor:pointer}.settings-restore-confirm{margin-top:1rem;padding:.9rem;background:var(--color-brand-wash)}.settings-restore-confirm .settings-selected-file{margin-top:0;overflow-wrap:anywhere;color:var(--color-text-primary);font-weight:600}.settings-restore-confirm .settings-warning{color:var(--color-brand-secondary)}.settings-restore-confirm button{background:var(--color-brand);color:var(--color-surface)}.placeholder-view{min-height:100%;padding:clamp(3rem,8vh,5rem) 1.25rem 2rem}.placeholder-view h1{text-align:center}.placeholder-view__list{margin-top:clamp(2.6rem,7vh,4rem);border-top:1px solid var(--color-divider)}.placeholder-view__list span{display:block;min-height:4.8rem;border-bottom:1px solid var(--color-divider)}.bottom-nav{position:relative;z-index:1;border-top:1px solid var(--color-divider);background:var(--color-surface);padding-bottom:var(--size-bottom-nav-safe-area)}.bottom-nav__items{display:grid;grid-template-columns:repeat(3,1fr);min-height:calc(var(--size-bottom-nav-height) - var(--size-bottom-nav-safe-area))}.bottom-nav__item{display:flex;min-width:4rem;min-height:calc(var(--size-bottom-nav-height) - var(--size-bottom-nav-safe-area));align-items:center;justify-content:center;flex-direction:column;gap:.2rem;border:0;background:transparent;color:var(--color-nav-muted);font-size:.9rem;font-weight:450;line-height:1.2;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.bottom-nav__item[aria-current=page]{color:var(--color-brand)}.bottom-nav__item:disabled{opacity:1;cursor:default}.bottom-nav__icon{display:grid;width:var(--size-nav-icon);height:var(--size-nav-icon);place-items:center}.bottom-nav__icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}@media(max-height:700px){.practice-idle__strings{margin-top:1.25rem}.practice-idle__date{margin-top:1.4rem}.practice-idle__record-button{width:9.25rem;height:9.25rem;margin-top:3.3rem}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important}}