@charset "UTF-8";
:root{--paper:#f5f3ec;--white:#fffefb;--ink:#293e36;--muted:#73796f;--green:#2b6252;--green-dark:#204d40;--mint:#eaf0e7;--line:#e2e2d7;--serif:Georgia,"Songti SC","Noto Serif CJK SC",serif;--sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;color:var(--ink);font-family:var(--sans);font-size:14px;font-synthesis:none;background:var(--paper)}
*{box-sizing:border-box}body{margin:0}button,input,textarea,select{font:inherit}button,a,input,select,textarea,summary{-webkit-tap-highlight-color:transparent}button{color:inherit;cursor:pointer}button:disabled{cursor:default;opacity:.32}a{color:inherit}button,select,textarea,input{outline-offset:4px}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--green);outline-offset:4px}button{border:0;background:none}svg{display:block}svg use{pointer-events:none}button svg,.nav-item svg,.brand svg,.storage-state svg,summary svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}h1,h2,h3,p,figure{margin:0}button:disabled:hover{background:transparent}.icon-library{position:absolute;width:0;height:0;overflow:hidden}.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}[hidden]{display:none!important}.skip-link{position:fixed;top:-60px;left:10px;padding:12px 20px;background:var(--green);color:white;z-index:10}.skip-link:focus{top:10px}.site-header{height:88px;border-bottom:1px solid var(--line);background:rgba(250,249,244,.75)}.header-inner{height:100%;max-width:1280px;padding:0 30px;margin:auto;display:flex;align-items:center;gap:70px}.brand{display:flex;gap:11px;align-items:center;text-decoration:none;flex-shrink:0}.brand-mark{width:39px;height:43px;border:1px solid #416153;border-radius:10px 10px 15px 10px;display:grid;place-items:center;color:var(--green);transform:rotate(-4deg)}.brand-mark svg{width:23px;height:23px;transform:rotate(4deg)}.brand-name{font-family:var(--serif);font-size:28px;font-weight:700;line-height:1.15;letter-spacing:3px}.brand-name>span{font-family:Georgia,serif;display:block;font-weight:400;font-size:8px;letter-spacing:1.8px;margin-top:5px}.header-inner nav{display:flex;align-self:stretch;align-items:stretch;gap:32px}.nav-item{padding:0 2px;display:flex;gap:7px;align-items:center;font-size:14px;text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px;color:#777c71;transition:color .15s}.nav-item svg{width:17px;height:17px}.nav-item.current{color:var(--green);border-color:var(--green);font-weight:600}.nav-item:hover{color:var(--green)}.header-note{display:flex;gap:9px;align-items:center;font-size:12px;color:#818478;margin-left:auto;white-space:nowrap}.status-dot,.small-dot{width:6px;height:6px;border-radius:50%;background:#6d8e70;display:inline-block;flex:none}.count-badge{background:#e3e9dd;border-radius:50%;font-size:10px;min-width:19px;height:19px;display:grid;place-items:center;color:var(--green)}.page-shell{max-width:1280px;margin:auto;padding:0 30px}.intro{display:flex;align-items:center;justify-content:space-between;padding:47px 3px 37px;gap:20px}.eyebrow{font-family:Georgia,serif;letter-spacing:2.05px;font-size:10px;color:#71816c;font-weight:400;display:flex;align-items:center;gap:9px}.eyebrow>span{width:18px;height:1px;background:#7b9274}.intro h1{font-family:var(--serif);font-size:39px;font-weight:600;line-height:1.6;letter-spacing:1.5px;margin:9px 0 6px}.intro h1>span{color:#577252}.intro-copy{color:#818175;font-size:13px;line-height:1.9;letter-spacing:.45px}.intro-note{width:260px;position:relative;align-self:stretch;text-align:center;padding-top:5px;margin-right:50px;transform:rotate(-5deg)}.note-label{font-family:Georgia,serif;font-style:italic;letter-spacing:.5px;font-size:15px;color:#819075}.hero-letter{height:83px;width:190px;margin:0 auto;fill:none;stroke:#426b54;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.hero-letter .doodle{stroke:#9ba58d;stroke-width:1.1}.note-caption{font-family:var(--serif);color:#8e927f;font-size:11px;letter-spacing:2px}.workspace{display:grid;grid-template-columns:320px minmax(0,1fr);gap:27px;scroll-margin-top:20px}.input-column,.lesson-column{min-width:0}.input-card{border:1px solid var(--line);border-radius:13px;background:var(--white);padding:24px}.section-label{display:flex;align-items:center;gap:11px}.section-number{font-family:Georgia,serif;font-size:11px;color:#7e8e76;border:1px solid #d6dfcf;width:24px;height:24px;display:grid;place-items:center;border-radius:50%}.section-label h2{font-weight:500;font-size:16px;letter-spacing:.3px}.textarea-wrap{margin-top:23px;position:relative}textarea{resize:vertical;display:block;width:100%;min-height:142px;max-height:400px;border:1px solid #e6e5db;border-radius:7px;padding:15px 14px 32px;background:#fbfaf5;color:#324b3d;font-family:Georgia,serif;font-size:24px;line-height:1.5}textarea:focus{border-color:#869d80}textarea[aria-invalid=true]{border-color:#b66149}.text-count{position:absolute;bottom:9px;right:11px;font-size:10px;color:#929386;font-variant-numeric:tabular-nums;pointer-events:none}.text-count.over-limit{color:#a3442e}.input-help{font-size:11px;line-height:1.6;color:#8a8b7e;margin-top:9px}.error-message{font-size:12px;color:#a34530;line-height:1.8;background:#fbefe7;border:1px solid #ead5c7;border-radius:6px;padding:9px 11px;margin-top:10px;overflow-wrap:anywhere}.style-field{border:0;padding:0;margin:23px 0 20px}.style-field legend{font-size:12px;font-weight:500;margin-bottom:11px;padding:0}.style-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}.style-option{cursor:pointer;position:relative;min-width:0}.style-option>input{position:absolute;opacity:0;width:1px;height:1px}.style-option>span{border:1px solid #e4e5da;border-radius:7px;padding:11px 11px 12px;position:relative;display:flex;flex-direction:column;min-height:114px;transition:background .15s,border-color .15s}.style-option input:checked+span{background:#f2f6ed;border-color:#758e67;box-shadow:inset 0 0 0 .4px #758e67}.style-option input:focus-visible+span{outline:2px solid var(--green);outline-offset:4px}.style-sample{height:37px;display:flex;align-items:center;width:74px;margin-left:-2px;color:#42654b}.style-sample svg{max-width:100%}.style-option strong{font-size:13px;font-weight:500;margin-top:3px}.style-option small{font-size:9px;color:#8b8e7b;white-space:nowrap;margin-top:5px}.radio-mark{position:absolute;right:11px;top:13px;width:13px;height:13px;border:1px solid #c7cbbd;border-radius:50%;background:#fffef8}.style-option input:checked+span .radio-mark{border-color:#607d53;background:#607d53;box-shadow:inset 0 0 0 3px #f2f6ed}.primary-button{display:flex;align-items:center;justify-content:center;gap:9px;background:var(--green);color:#fffef6;border-radius:7px;min-height:47px;font-size:13px;letter-spacing:.5px;transition:background .15s}.primary-button:hover{background:var(--green-dark)}.generate-button{width:100%;padding:0 13px}.primary-button svg{width:17px;height:17px}.primary-button .button-arrow{margin-left:auto;width:16px}.generate-button>svg:first-child{margin-right:auto}.storage-state{font-size:10px;color:#8c9083;display:flex;justify-content:center;align-items:center;gap:5px;margin-top:13px;line-height:1.8;text-align:center;min-height:20px}.storage-state svg{width:12px;height:12px;flex:none}.storage-state.failed{color:#a34530}.practice-note{padding:26px 11px;position:relative}.tiny-label{font-size:9px;letter-spacing:1.5px;font-family:Georgia,serif;color:#909480}.practice-note p{font-family:var(--serif);font-size:21px;line-height:1.8;letter-spacing:1px;color:#607253;margin:11px 0 10px}.practice-note>span:last-of-type{font-size:11px;color:#929282}.practice-note>svg{position:absolute;right:10px;top:83px;width:85px;height:28px;fill:none;stroke:#aeb797;stroke-width:1.1;transform:rotate(-15deg)}.player-card{border:1px solid #dedfd3;border-radius:13px;overflow:hidden;background:var(--white);box-shadow:0 5px 15px #35473203}.player-heading{padding:22px 25px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #eeeee6}.player-heading .tiny-label{font-size:8px;letter-spacing:1.65px}.player-heading h2{font-size:16px;font-weight:500;letter-spacing:.4px;margin-top:7px;display:flex;align-items:center;gap:10px}.player-heading h2>span{font-size:9px;letter-spacing:.5px;color:#7a8c6c;background:#edf1e7;border-radius:3px;padding:4px 7px;white-space:nowrap}.paper-control{display:flex;align-items:center;gap:8px;font-size:11px;color:#888b7b}.paper-control select{border:1px solid #dedfd4;border-radius:5px;min-height:34px;background:#fffef9;color:#59664e;padding:0 8px;font-size:11px;cursor:pointer}.paper-topline{padding:16px 25px 0;display:flex;gap:14px;align-items:center;font-size:10px;color:#929784;letter-spacing:.2px}.paper-topline>span:first-child{display:flex;align-items:center;gap:6px;color:#6f8064}.small-dot{width:5px;height:5px}.paper-corner{margin-left:auto;font-family:var(--serif);font-size:11px;color:#a0a38f}.paper-scroll{overflow-x:auto;overflow-y:hidden;margin-top:3px;scrollbar-width:thin;scrollbar-color:#c5cdbb transparent;overscroll-behavior-x:contain;background:#fffefb}.paper-scroll svg{height:246px;max-width:none;overflow:visible}.grid-line{stroke:#d9e2df;stroke-width:.65}.grid-line.baseline{stroke:#d7a7a0;stroke-width:.8}.grid-label{font-family:var(--sans);font-size:6px;fill:#a4ada0}.ghost-path{stroke:#c9cfc1;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}.ink-path{stroke:#2c4b3c;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}.glyph-highlight{fill:#dde7d3;opacity:.28}.pen-ring{fill:#f6f8f0;stroke:#537349;stroke-width:1;opacity:.8}.pen-point{fill:#31503c}.letter-track{display:flex;justify-content:flex-start;align-items:center;gap:3px;padding:1px 20px 15px;overflow-x:auto;min-height:45px;scrollbar-width:thin}.letter-chip{font-family:Georgia,serif;font-size:13px;line-height:25px;height:25px;min-width:23px;padding:0 4px;text-align:center;color:#a1a58f;border-bottom:1px solid transparent;flex:none}.letter-chip.active{color:#365b3e;background:#eff3e8;border-color:#94a482;border-radius:3px 3px 0 0}.scroll-hint{font-size:10px;color:#8b927e;text-align:center;padding:0 10px 10px}.player-bottom{padding:1px 25px 19px;background:#fafbf5;border-top:1px solid #eceee4}.timeline{display:flex;align-items:center;gap:14px;padding-top:15px}.timeline input{accent-color:#5e7c51;height:16px;width:100%;min-width:0;margin:0;cursor:pointer}.time-label{font-size:10px;color:#909684;white-space:nowrap;font-variant-numeric:tabular-nums;font-family:var(--sans);min-width:67px}.transport{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-top:12px}.transport-buttons,.playback-options{display:flex;align-items:center;gap:9px}.icon-button{border-radius:6px;min-width:38px;min-height:38px;padding:9px;display:grid;place-items:center;flex-shrink:0;transition:background .15s,color .15s;color:#7b896d}.icon-button svg{width:18px;height:18px}.icon-button:hover{background:#eef1e5;color:var(--green)}.icon-button[aria-pressed=true]{background:#e3ebdb;color:#315c3f;box-shadow:inset 0 0 0 1px #9caf87}.play-button{display:flex;align-items:center;justify-content:center;gap:7px;background:var(--green);color:#fffdf6;min-height:39px;min-width:126px;border-radius:6px;font-size:12px;transition:background .15s}.play-button:hover{background:var(--green-dark)}.play-button svg{width:17px;height:17px;stroke-width:1.6}.play-button use[href="#i-play"]{fill:currentColor;stroke:none}.speed-control{display:flex;align-items:center;gap:7px;font-size:10px;color:#8c9580}.speed-control select{border:1px solid #e0e5d8;border-radius:4px;background:#fafbf6;color:#5f7350;min-height:31px;min-width:58px;padding:0 4px;font-size:11px}.playback-options{gap:8px}.caption-card{margin-top:14px;border:1px solid #e2e6d8;border-radius:10px;padding:16px 20px 14px;background:#eef2e7;position:relative;min-height:126px}.caption-heading{display:flex;justify-content:space-between;align-items:center;gap:10px}.caption-title{display:flex;gap:7px;align-items:center;font-size:12px;color:#596f46;font-weight:500}.caption-icon{font-family:Georgia,serif;border:1px solid #cad4bc;border-radius:3px;padding:2px 3px;font-size:10px;letter-spacing:-.5px;line-height:1.1}.switch-label{position:relative;display:flex;align-items:center;gap:8px;font-size:10px;color:#7e8a70;cursor:pointer;min-height:24px}.switch-label input{position:absolute;opacity:0;width:1px;height:1px}.switch-track{width:26px;height:15px;border-radius:10px;background:#bbc2af;padding:2px;display:block;transition:background .15s}.switch-track:after{content:"";display:block;width:11px;height:11px;border-radius:50%;background:#fffef6;transition:transform .15s}.switch-label input:checked+.switch-track{background:#7f9567}.switch-label input:checked+.switch-track:after{transform:translateX(11px)}.switch-label input:focus-visible+.switch-track{outline:2px solid var(--green);outline-offset:3px}.caption-card>p{font-size:13px;line-height:1.85;color:#526146;min-height:46px;margin:8px 0 2px;padding-right:2px}.caption-card>p.muted{color:#8c947e}.caption-step{font-size:9px;color:#879679;letter-spacing:.2px}.steps-panel{margin-top:13px;font-size:11px;color:#78846d}.steps-panel summary{display:flex;gap:8px;align-items:center;list-style:none;padding:9px 4px;cursor:pointer;min-height:38px}.steps-panel summary::-webkit-details-marker{display:none}.steps-panel summary svg{width:15px;height:15px}.steps-panel summary>span{margin-left:auto;color:#929c86;font-size:10px}.steps-panel summary>span:after{content:' ＋'}.steps-panel[open] summary>span:after{content:' −'}.steps-panel ol{padding:10px 12px 10px 33px;line-height:1.9;max-height:310px;overflow:auto;background:#fffdf7;border:1px solid #e3e6d8;border-radius:8px;margin:5px 0}.steps-panel li{padding:6px 7px;color:#7b836f}.steps-panel li.active{color:#345c3e;background:#eef3e5;border-radius:4px}.overview-card{margin-top:25px;padding:24px 27px 18px;background:rgba(255,254,250,.65);border:1px solid #e0e2d6;border-radius:11px}.overview-heading{display:flex;align-items:center;justify-content:space-between;gap:15px}.overview-heading>span{font-size:10px;letter-spacing:.3px;color:#939784}.word-overview{margin:18px 0 12px;white-space:pre-wrap;line-height:72px;max-height:370px;overflow:auto;padding-bottom:5px;scrollbar-width:thin;font-size:18px;color:#496044;letter-spacing:2px}.word-preview{vertical-align:middle;display:inline-block;padding:5px 5px 0;border-radius:5px;border:1px solid transparent;line-height:0;margin:0 2px;transition:background .15s}.word-preview:hover{background:#f1f3e8}.word-preview.active{background:#eef2e6;border-color:#d9e1cb}.word-preview svg{width:auto;height:72px;overflow:visible}.overview-note{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #e7e8df;padding-top:13px;font-size:10px;color:#939780;line-height:1.9}.overview-note>span{color:#7c8b6b}.grip-banner{display:flex;align-items:center;gap:16px;padding:27px 12px 25px;border-bottom:1px solid var(--line);margin-top:7px}.grip-banner-icon{width:46px;height:46px;display:grid;place-items:center;color:#88916f;background:#eeefe3;border-radius:50%;flex:none}.grip-banner-icon svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round}.grip-banner h2{font-size:14px;letter-spacing:.5px;font-weight:500;color:#6e7b5e}.grip-banner p{font-size:11px;color:#999a87;margin-top:7px}.text-button{display:flex;align-items:center;gap:12px;font-size:11px;color:#6b8055;min-height:44px;margin-left:auto;white-space:nowrap}.text-button svg{width:17px;height:17px}footer{display:flex;justify-content:space-between;align-items:center;padding:22px 2px 32px;font-size:10px;color:#929582;gap:20px}.footer-brand{font-family:var(--serif);font-size:14px;letter-spacing:1px}.footer-brand i{font-family:Georgia,serif;font-size:10px;color:#a0a18c;margin-left:14px;letter-spacing:.2px}footer>button{font-size:10px;color:#919982;min-height:34px}footer>button>span{margin-left:8px}.mobile-only{display:none}dialog{border:1px solid #e2e4d8;border-radius:16px;background:#fffef8;color:var(--ink);width:min(720px,calc(100vw - 32px));max-height:88dvh;padding:29px 31px;box-shadow:0 20px 100px #20362726;overscroll-behavior:contain}dialog::backdrop{background:#263e2c55;backdrop-filter:blur(3px)}.dialog-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:15px}.dialog-heading h2{font-family:var(--serif);font-size:26px;line-height:1.5;font-weight:600;letter-spacing:.5px}.dialog-heading .eyebrow{font-size:8px;margin-bottom:9px}.dialog-heading>.icon-button{margin-top:-4px;margin-right:-9px}.dialog-intro{font-size:12px;line-height:1.9;color:#8a917b;margin:14px 0 20px}.history-empty{border:1px dashed #d5ddc8;border-radius:10px;padding:37px 20px;text-align:center;margin:15px 0;color:#82906f}.history-empty>svg{width:32px;height:32px;margin:0 auto 14px;stroke:currentColor;stroke-width:1;fill:none}.history-empty h3{font-family:var(--serif);font-size:20px;font-weight:500;margin-bottom:10px}.history-empty p{font-size:12px;line-height:1.9}.history-row{border-top:1px solid #e6e8dc;padding:14px 0;display:flex;align-items:center;gap:10px}.history-open{flex:1;text-align:left;min-width:0;display:block;padding:5px 0}.history-open strong{font-family:Georgia,serif;font-size:21px;color:#3e5d42;display:block;font-weight:400;overflow-wrap:anywhere;line-height:1.4}.history-open small{display:block;margin-top:9px;font-size:10px;color:#8c967d;line-height:1.8}.history-row>.icon-button:hover{background:#f7ebe2;color:#a45037}.grip-layout{display:grid;grid-template-columns:1fr 1.1fr;gap:18px;align-items:center}.grip-figure{background:#f3f3e9;border-radius:10px;padding:15px 5px}.grip-figure svg{width:100%}.grip-figure figcaption{text-align:center;font-size:11px;color:#7f886f;line-height:1.9;margin-bottom:12px}.grip-tips article{position:relative;padding:9px 0 10px 31px}.grip-tips article>span{position:absolute;left:0;top:11px;font-family:Georgia,serif;font-size:11px;color:#9da689}.grip-tips h3{font-size:13px;font-weight:500;margin-bottom:6px}.grip-tips p{font-size:11px;line-height:1.9;color:#8a917a}.paper-position{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:20px;border-top:1px solid #e6e8dd;padding-top:15px}.paper-position svg{height:120px;max-width:100%;margin:auto;fill:#fffef9;stroke:#b7c2a5;stroke-width:1}.paper-position svg .position-pen{stroke:#688158;stroke-width:7;stroke-linecap:round}.paper-position figcaption{text-align:center;font-size:11px;color:#8c967b}.source-note{font-size:10px;line-height:1.9;color:#909680;margin-top:22px}.source-note a{color:#70815d;text-underline-offset:3px}.about-copy{font-size:13px;line-height:2;color:#7e8971}.about-copy h3{font-size:15px;font-weight:500;color:#4f6747;margin:22px 0 9px}.about-copy p{margin:9px 0}.about-copy a{color:#496b45;text-underline-offset:3px}.noscript{padding:30px;background:#f5e8d4;text-align:center}
@media(min-width:1450px){.intro{padding-top:55px;padding-bottom:43px}.intro h1{font-size:43px}.paper-scroll svg{height:266px}.workspace{gap:32px;grid-template-columns:330px minmax(0,1fr)}}
@media(max-width:1050px){.header-inner{gap:38px}.header-note{display:none}.workspace{grid-template-columns:290px minmax(0,1fr);gap:20px}.input-card{padding:20px}.intro-note{margin-right:20px}.transport-buttons{gap:3px}.play-button{min-width:104px}.player-bottom{padding-left:17px;padding-right:17px}.player-heading{padding-left:20px;padding-right:20px}.paper-corner{display:none}.style-option>span{padding-left:9px;padding-right:7px}.style-option small{font-size:8px}.overview-note{display:block}.overview-note>span{display:block;margin-top:4px}}
@media(max-width:760px){.site-header{height:74px}.header-inner{padding:0 20px;gap:20px;justify-content:space-between}.brand-name{font-size:24px}.brand-mark{width:33px;height:37px}.brand-name>span{font-size:6px;letter-spacing:1.3px}.header-inner nav{gap:19px}.nav-item{font-size:12px}.nav-item.current{display:none}.nav-item svg{width:15px;height:15px}.page-shell{padding:0 20px}.intro{padding:29px 0 26px}.intro h1{font-size:31px;letter-spacing:.5px;line-height:1.6;margin:9px 0}.eyebrow{font-size:8px;letter-spacing:1.4px}.intro-copy{font-size:11px;letter-spacing:.1px}.intro-note{display:none}.workspace{grid-template-columns:minmax(0,1fr);gap:20px}.input-card{padding:21px}.section-label h2{font-size:15px}.textarea-wrap{margin-top:17px}textarea{min-height:104px;font-size:23px;padding-top:13px;resize:vertical}.style-field{margin:19px 0 17px}.style-options{gap:12px}.style-option>span{min-height:88px;display:grid;grid-template-columns:63px 1fr;grid-template-rows:1fr 1fr;padding:12px 10px;column-gap:7px}.style-sample{grid-row:1/3;width:59px;margin-top:7px}.style-option strong{margin-top:7px;font-size:12px;white-space:nowrap}.style-option small{font-size:8px;margin-top:4px;align-self:start}.radio-mark{width:11px;height:11px;right:7px;top:7px}.style-option input:checked+span .radio-mark{box-shadow:inset 0 0 0 2px #f2f6ed}.storage-state{margin-top:11px}.practice-note{display:none}.lesson-column{scroll-margin-top:15px}.player-heading{padding:20px 19px 17px}.player-heading h2{font-size:15px;gap:7px}.player-heading h2>span{font-size:8px;padding:3px 5px}.paper-control{gap:6px;font-size:10px}.paper-control select{padding:0 5px;font-size:10px}.paper-topline{padding:14px 20px 0;font-size:9px}.paper-scroll svg{height:225px}.letter-track{padding-bottom:13px}.player-bottom{padding:1px 17px 17px}.transport{margin-top:13px}.play-button{min-width:111px;min-height:42px}.icon-button{min-width:38px;min-height:42px}.transport-buttons{gap:4px}.playback-options{gap:3px}.speed-control{gap:3px}.speed-control select{min-width:51px;padding:0 2px}.time-label{font-size:9px;min-width:62px}.caption-card{padding:15px 17px;min-height:133px}.caption-card>p{font-size:12px;min-height:44px}.steps-panel{margin-top:9px}.overview-card{padding:21px 20px 17px;margin-top:20px}.overview-heading{align-items:flex-start;flex-direction:column;gap:10px}.overview-heading>span{padding-left:35px;font-size:9px}.word-overview{margin-top:14px;line-height:65px}.word-preview svg{height:65px}.overview-note{font-size:9px}.grip-banner{padding:24px 2px;gap:12px;flex-wrap:wrap}.grip-banner h2{font-size:12px}.grip-banner p{font-size:10px;line-height:1.8}.grip-banner-icon{width:38px;height:38px}.text-button{margin-left:50px;min-height:24px;margin-top:-3px;font-size:10px}.grip-banner div{flex:1}footer{padding:18px 0 26px;gap:10px}.footer-brand{font-size:13px}.footer-brand i{display:none}footer>button{font-size:9px}.mobile-only{display:block}dialog{padding:23px 21px;width:calc(100vw - 24px);border-radius:13px}.dialog-heading h2{font-size:22px}.dialog-intro{font-size:11px}.dialog-heading .eyebrow{font-size:7px}.grip-layout{grid-template-columns:1fr}.grip-figure{max-width:290px;margin:auto;width:100%}.grip-figure svg{height:190px}.grip-tips article{padding-top:9px;padding-bottom:9px}.paper-position{gap:8px}.paper-position figcaption{font-size:10px}.source-note{font-size:9px}.about-copy{font-size:12px}.history-open strong{font-size:19px}}
@media(max-width:370px){.header-inner{padding:0 14px}.header-inner nav{gap:12px}.nav-item{gap:4px;font-size:11px}.page-shell{padding:0 13px}.intro h1{font-size:28px}.input-card{padding:18px}.style-option>span{grid-template-columns:47px 1fr;gap:3px}.style-sample{width:46px}.style-option small{font-size:7px}.player-heading{padding-left:15px;padding-right:15px}.player-heading h2{font-size:13px}.paper-control label{display:none}.play-button{min-width:99px;font-size:11px}.transport-buttons{gap:0}.speed-control{font-size:0}.icon-button{min-width:33px;padding:8px}.player-bottom{padding-left:13px;padding-right:13px}.caption-card{padding-left:15px;padding-right:15px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

.paper-restart{display:flex;align-items:center;gap:5px;margin-left:auto;font-size:10px;color:#7d8c70;min-height:28px;padding:3px 0 3px 8px}.paper-restart svg{width:13px;height:13px}.paper-restart:hover{color:var(--green)}

.input-help,.storage-state,.overview-note,.overview-note>span{color:#717a66}
.text-count{color:#737b69}
.style-option small{color:#717a66}
.caption-step{color:#647351}
@media(max-width:760px){
  .intro h1>span{display:block}
  textarea{height:120px}
  .style-option>span{display:flex;flex-direction:column;min-height:112px;padding:11px}
  .style-sample{width:70px;height:35px;margin-top:0}
  .style-option strong{margin-top:3px}
  .style-option small{font-size:10px;margin-top:5px;white-space:normal;line-height:1.6}
  .radio-mark{top:13px;right:11px}
}

.letter-chip:first-child{margin-left:auto}.letter-chip:last-child{margin-right:auto}

@media(max-width:760px){
  .transport{flex-wrap:wrap;row-gap:9px}
  .transport-buttons{width:100%;justify-content:center;gap:18px}
  .playback-options{width:100%;justify-content:center;gap:18px}
  .speed-control{font-size:11px;gap:7px}
}
@media(max-width:370px){
  .header-inner{padding:0 12px;gap:6px}
  .header-inner nav{gap:8px}
  .brand{gap:8px}
}

.join-options{margin:-5px 0 18px;padding:12px;background:#f4f6ee;border:1px solid #e2e7d8;border-radius:7px}
.join-options>div{display:flex;align-items:center;justify-content:space-between;gap:12px}
.join-options label{font-size:12px;font-weight:500;color:#4d6545}
.join-options select{min-height:36px;border:1px solid #cdd8bf;border-radius:5px;background:#fffef9;color:#49623e;padding:0 9px;font-size:12px;cursor:pointer}
.join-options p{font-size:11px;line-height:1.8;color:#6b785e;margin-top:8px}