:root{color-scheme:light;--bg: #f2f8fc;--paper: #ffffff;--paper-soft: #f5fafc;--ink: #153649;--muted: #657f8e;--line: #c9dfe9;--line-strong: #86bfd3;--accent: #3186b1;--accent-deep: #1e668c;--accent-soft: #e4f3f9;--teal: #3d9797;--error: #b84a4a;--shadow: 0 14px 34px rgba(53, 95, 118, .11);--radius: 10px;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}html,body,#root{width:100%;min-width:0;min-height:100%;height:100%;margin:0}body{overflow:hidden;color:var(--ink);background:radial-gradient(circle at 15% 4%,rgba(184,221,238,.32),transparent 30%),linear-gradient(180deg,#eef7fc 0,#f8fbfd,#f4f9fc)}button,input,select,textarea{font:inherit}button{border:0;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.42}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(49,134,177,.24);outline-offset:2px}.app-shell{width:100%;height:100dvh;min-height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr);gap:16px;padding:max(16px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left))}.topbar{min-width:0;min-height:78px;display:flex;align-items:center;gap:13px;padding:12px 14px;background:#fffffff0;border:1px solid rgba(173,205,220,.82);border-radius:var(--radius);box-shadow:0 9px 26px #416b8217;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px)}.brand-block{flex:0 0 auto;display:flex;align-items:center;gap:10px;min-width:153px}.brand-icon{width:38px;height:38px;display:grid;place-items:center;color:var(--accent-deep);background:#edf7fb;border:1px solid #d5e8f0;border-radius:9px}.brand-title{font-size:18px;line-height:1.08;font-weight:850;letter-spacing:.01em}.mode-switch{flex:0 0 auto;height:44px;display:inline-flex;align-items:stretch;overflow:hidden;background:#f9fcfd;border:1px solid #bfd9e5;border-radius:8px}.mode-switch button{min-width:108px;padding:0 18px;color:#29495c;background:transparent;font-size:14px;font-weight:800;transition:color .15s ease,background .15s ease}.mode-switch button+button{border-left:1px solid #d4e5ed}.mode-switch button.active{color:#fff;background:linear-gradient(135deg,#3c92bd,#2879a5);box-shadow:inset 0 0 0 1px #18678f24}.select-shell{flex:0 1 245px;height:44px;min-width:190px;max-width:280px;display:flex;align-items:center;gap:8px;padding:0 11px;color:var(--muted);background:#f8fbfd;border:1px solid #c7dce6;border-radius:8px;font-size:13px;font-weight:750;white-space:nowrap}.select-shell select{min-width:0;flex:1;appearance:none;overflow:hidden;color:var(--ink);background:transparent;border:0;outline:0;text-overflow:ellipsis;font-size:14px;font-weight:780}.toolbar-spacer{min-width:0;flex:1}.toggle-button,.icon-button,.stepper button,.primary-button,.bounds-toggle{min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:8px;font-size:14px;font-weight:800;transition:transform .15s ease,background .15s ease,color .15s ease,border-color .15s ease}.toggle-button:active,.icon-button:active,.stepper button:active,.primary-button:active,.bounds-toggle:active{transform:translateY(1px)}.toggle-button{flex:0 0 auto;padding:0 13px;color:var(--accent-deep);background:#fff;border:1px solid #91c4d5;white-space:nowrap}.toggle-button.is-on{color:#fff;background:linear-gradient(135deg,#429b99,#398d90);border-color:#398d90}.stepper{flex:0 0 auto;height:44px;display:inline-flex;align-items:center;gap:7px;padding:0 6px;color:var(--ink);background:#f8fbfd;border:1px solid #c7dce6;border-radius:8px;font-size:14px;font-weight:850;white-space:nowrap}.stepper button{min-width:34px;min-height:34px;padding:0 7px;color:var(--accent-deep);background:#fff;border:1px solid #c7dce6}.stepper .random-button{padding:0 10px}.icon-button{width:40px;flex:0 0 40px;color:var(--accent-deep);background:#fff;border:1px solid #c4dae5}.icon-button.quiet{color:var(--muted);background:transparent;border-color:transparent}.is-spinning{animation:spin .85s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.display-grid{min-width:0;min-height:0;display:grid;grid-template-columns:minmax(230px,296px) minmax(0,1fr);gap:16px;overflow:hidden}.side-panel{min-width:0;min-height:0}.sentence-rail{display:grid;grid-template-rows:auto minmax(0,1fr);gap:12px}.rail-search{height:55px;display:flex;align-items:center;gap:10px;padding:0 15px;color:var(--muted);background:#ffffffeb;border:1px solid var(--line);border-radius:var(--radius)}.rail-search input{width:100%;min-width:0;color:var(--ink);background:transparent;border:0;outline:0;font-size:14px;font-weight:650}.rail-search input::placeholder{color:#78909d}.sentence-list{min-height:0;display:flex;flex-direction:column;gap:10px;overflow-y:auto;overscroll-behavior:contain;padding:1px 4px 2px 1px;scrollbar-width:thin;scrollbar-color:#a9cbd9 transparent}.sentence-row{width:100%;min-height:68px;display:grid;grid-template-columns:38px minmax(0,1fr);align-items:center;gap:12px;padding:11px 13px;color:var(--ink);text-align:left;background:#ffffffe8;border:1px solid #cfe1e9;border-radius:var(--radius);box-shadow:0 4px 13px #466c7e08;transition:border-color .15s ease,background .15s ease,transform .15s ease}.sentence-row:hover{border-color:#91c3d5;transform:translateY(-1px)}.sentence-row.active{padding-left:9px;background:linear-gradient(90deg,#e7f5fb,#f7fbfd);border-color:var(--accent);border-left-width:5px;box-shadow:0 7px 18px #307ea514}.sentence-order{width:36px;height:34px;display:grid;place-items:center;color:#205b7d;background:#f0f8fc;border:1px solid #cfe3ec;border-radius:7px;font-size:13px;font-variant-numeric:tabular-nums;font-weight:900}.sentence-preview{min-width:0;overflow:hidden;color:#18394b;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:760}.rail-message{margin:0;padding:18px 14px;color:var(--muted);text-align:center;background:#ffffffd1;border:1px solid var(--line);border-radius:var(--radius);font-size:14px;line-height:1.6;font-weight:700}.rail-message--error{color:var(--error);background:#fff6f6;border-color:#efcaca}.practice-display{min-width:0;min-height:0;display:grid;grid-template-rows:minmax(190px,.66fr) minmax(320px,2fr);gap:16px;overflow:hidden}.sentence-stage,.handwriting-stage{min-width:0;min-height:0;background:#fffffff7;border:1px solid rgba(167,204,220,.78);border-radius:var(--radius);box-shadow:var(--shadow)}.sentence-stage{position:relative;display:flex;align-items:center;justify-content:center;padding:clamp(22px,3vw,42px) clamp(92px,10vw,138px);text-align:center;overflow:hidden}.sentence-content{width:100%;min-width:0}.sentence-meta{margin-bottom:clamp(10px,1.5vh,16px);color:#285f7d;font-size:15px;line-height:1;font-weight:850}.sentence-stage h1{margin:0;color:#15384c;font-family:Georgia,Times New Roman,serif;font-size:clamp(43px,5.7vw,84px);line-height:1.08;font-weight:700;overflow-wrap:anywhere;text-wrap:balance}.stage-nav-button{position:absolute;top:50%;width:clamp(62px,6.2vw,88px);height:clamp(62px,6.2vw,88px);display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#3c92bd,#297aa6);border:1px solid rgba(30,102,140,.22);border-radius:9px;box-shadow:0 12px 25px #3186b138;transform:translateY(-50%);transition:transform .15s ease,background .15s ease,box-shadow .15s ease}.stage-nav-button.previous{left:clamp(16px,2vw,26px)}.stage-nav-button.next{right:clamp(16px,2vw,26px)}.stage-nav-button:hover:not(:disabled){box-shadow:0 16px 30px #27749c4d}.stage-nav-button:active:not(:disabled){transform:translateY(calc(-50% + 1px))}.stage-nav-button:disabled{color:#47738c;background:#f4f8fa;border-color:#c7dce6;box-shadow:none;opacity:1}.handwriting-stage{position:relative;display:grid;place-items:center;overflow:hidden;padding:clamp(25px,3vw,45px) clamp(22px,3vw,42px) 76px;background:radial-gradient(circle at 50% 45%,rgba(236,247,251,.3),transparent 66%),#fffffffa}.writing-svg{display:block;width:min(100%,1080px);max-width:100%;max-height:100%;overflow:visible;color:#092f68}.writing-svg__guide{stroke:#103f73;stroke-width:1.4px}.writing-svg__guide--2,.writing-svg__guide--3{stroke:#174f83;stroke-width:1.5px}.writing-svg__outline{color:#092f68}.writing-svg__bounds{opacity:.72}.writing-svg-error{max-width:620px;padding:15px 18px;color:var(--error);text-align:center;background:#fff5f5;border:1px solid #efc9c9;border-radius:9px;font-size:15px;line-height:1.55;font-weight:750}.canvas-empty{display:grid;justify-items:center;gap:11px;color:var(--muted);text-align:center}.canvas-empty p{margin:0;font-size:16px;font-weight:750}.bounds-toggle{position:absolute;right:18px;bottom:16px;min-height:42px;padding:0 10px 0 12px;color:#365d73;background:#fffffff0;border:1px solid #c6dce6;box-shadow:0 6px 15px #416a7e14}.bounds-toggle>span{position:relative;width:38px;height:22px;margin-left:3px;background:#b4c8d1;border-radius:999px;transition:background .15s ease}.bounds-toggle>span:after{position:absolute;top:3px;left:3px;width:16px;height:16px;content:"";background:#fff;border-radius:50%;box-shadow:0 1px 3px #1e445638;transition:transform .15s ease}.bounds-toggle.is-on>span{background:var(--teal)}.bounds-toggle.is-on>span:after{transform:translate(16px)}.generator-panel{display:flex;flex-direction:column;gap:18px;overflow-y:auto;padding:20px;background:#fffffff0;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);scrollbar-width:thin}.generator-intro{display:flex;align-items:flex-start;gap:11px}.panel-icon{width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;color:var(--accent-deep);background:var(--accent-soft);border-radius:9px}.generator-intro h2{margin:1px 0 4px;font-size:20px;line-height:1.15}.generator-intro p{margin:0;color:var(--muted);font-size:13px;line-height:1.5;font-weight:650}.generator-form{position:relative;display:grid;gap:9px}.generator-form>label{color:#315365;font-size:13px;font-weight:820}.generator-form textarea{width:100%;min-height:122px;resize:vertical;padding:12px 13px 28px;color:var(--ink);background:#fbfdfe;border:1px solid #bfd8e3;border-radius:8px;outline:0;font-size:15px;line-height:1.55;font-weight:680}.generator-form textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px #3186b11f}.input-count{position:absolute;top:139px;right:10px;color:#78909c;font-size:11px;font-variant-numeric:tabular-nums;font-weight:750}.input-count.is-over{color:var(--error)}.input-help,.input-error{margin:0;font-size:12px;line-height:1.5;font-weight:650}.input-help{color:var(--muted)}.input-error{padding:9px 10px;color:var(--error);background:#fff4f4;border:1px solid #efcdcd;border-radius:7px}.primary-button{width:100%;min-height:44px;color:#fff;background:linear-gradient(135deg,#3c92bd,#2879a5);box-shadow:0 8px 17px #3186b133}.primary-button:hover{background:linear-gradient(135deg,#347fa5,#226b91)}.recent-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;padding-top:2px;border-top:1px solid #e0ebf0}.recent-heading>div{display:grid;gap:3px;padding-top:15px}.recent-heading span{color:#294d60;font-size:14px;font-weight:850}.recent-heading small{color:var(--muted);font-size:11px;font-weight:650}.recent-heading button{display:inline-flex;align-items:center;gap:5px;padding:6px 7px;color:#8c5b5b;background:transparent;border-radius:6px;font-size:12px;font-weight:750}.recent-list{display:flex;flex-direction:column;gap:8px}.recent-list button{width:100%;min-height:40px;overflow:hidden;padding:9px 11px;color:#294c60;text-align:left;text-overflow:ellipsis;white-space:nowrap;background:#f5fafc;border:1px solid #d4e5ec;border-radius:7px;font-size:13px;font-weight:720}.recent-list button:hover{color:var(--accent-deep);background:#ebf7fb;border-color:#a8cfde}.recent-empty{margin:0;padding:12px;color:var(--muted);text-align:center;background:#f8fbfc;border:1px dashed #d1e2e9;border-radius:7px;font-size:12px;font-weight:650}@media(max-width:1240px){.app-shell{gap:12px;padding:12px}.topbar{min-height:70px;gap:9px;padding:9px 10px}.brand-block{min-width:126px}.mode-switch button{min-width:92px;padding:0 12px}.select-shell{flex-basis:195px;min-width:160px}.stepper{gap:4px}.stepper .random-button span{display:none}.display-grid{grid-template-columns:minmax(215px,250px) minmax(0,1fr);gap:12px}.practice-display{gap:12px}.sentence-row{min-height:59px}}@media(max-width:930px){.topbar--library{display:grid;grid-template-columns:auto minmax(190px,1fr) auto;grid-template-areas:"brand mode standard" "select stepper refresh"}.topbar--library .brand-block{grid-area:brand}.topbar--library .mode-switch{grid-area:mode;justify-self:start}.topbar--library .library-select{grid-area:select;width:100%;max-width:none}.topbar--library .standard-toggle{grid-area:standard}.topbar--library .stepper{grid-area:stepper;justify-self:end}.topbar--library .refresh-button{grid-area:refresh;justify-self:end}.topbar--library .toolbar-spacer{display:none}.topbar--free .toolbar-spacer{flex:1}.display-grid{grid-template-columns:215px minmax(0,1fr)}.sentence-stage{padding-inline:70px}.sentence-stage h1{font-size:clamp(38px,6vw,62px)}.stage-nav-button{width:52px;height:64px}.stage-nav-button svg{width:32px}.handwriting-stage{padding-inline:18px}}@media(max-width:640px){.app-shell{height:100dvh;min-height:100dvh;display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;padding:max(9px,env(safe-area-inset-top)) max(9px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(9px,env(safe-area-inset-left))}.topbar,.topbar--library,.topbar--free{display:grid;grid-template-columns:1fr auto;grid-template-areas:"brand standard" "mode mode" "select select" "stepper refresh";align-items:center}.topbar .brand-block{grid-area:brand}.topbar .standard-toggle{grid-area:standard}.topbar .mode-switch{grid-area:mode;width:100%}.topbar .mode-switch button{flex:1}.topbar .library-select{grid-area:select;width:100%;max-width:none}.topbar .stepper{grid-area:stepper;justify-self:stretch;justify-content:space-between}.topbar .refresh-button{grid-area:refresh}.topbar .toolbar-spacer{display:none}.topbar--free{grid-template-areas:"brand standard" "mode mode"}.brand-block{min-width:0}.brand-title{font-size:17px}.display-grid{flex:none;display:flex;flex-direction:column;overflow:visible}.sentence-rail{min-height:248px;max-height:300px}.generator-panel{max-height:none;overflow:visible}.practice-display{min-height:650px;grid-template-rows:minmax(190px,auto) minmax(430px,1fr);overflow:visible}.sentence-stage{min-height:190px;padding:28px 58px}.sentence-stage h1{font-size:clamp(34px,10vw,52px)}.stage-nav-button{width:42px;height:58px}.stage-nav-button.previous{left:8px}.stage-nav-button.next{right:8px}.stage-nav-button svg{width:27px}.handwriting-stage{min-height:430px;padding:22px 12px 72px}.bounds-toggle{right:10px;bottom:10px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}