@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Instrument+Serif:ital@0;1&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#2c302a;background:#eeede7;font-synthesis:none;--muted:#85877d;--accent:#777e62;--line:#d9dacf}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer;color:inherit}button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid #899474;outline-offset:5px}header{height:104px;display:flex;align-items:center;justify-content:space-between;margin:0 4.6%;border-bottom:1px solid var(--line)}.brand{display:flex;gap:13px;align-items:center;text-decoration:none;color:inherit;font-size:23px;letter-spacing:5px;font-weight:550}.brand-mark{font-family:serif;font-size:37px;letter-spacing:0;border-right:1px solid #bbbdb1;padding-right:17px;line-height:45px}.brand small{display:block;font-size:8px;letter-spacing:2px;margin-top:4px}.header-note{font-family:'Instrument Serif',Georgia,serif;font-style:italic;color:#85877b;font-size:19px}.export{background:#333b30;color:#f4f3ed;border:0;border-radius:5px;padding:13px 20px;font-size:12px}.export span{margin-left:26px;font-size:18px}.export:hover{background:#505d47}main{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:270px minmax(0,1fr);gap:68px;padding:42px 5% 26px}aside{padding-top:6px}.eyebrow{font-size:9px;letter-spacing:2px;color:#787e68;font-weight:600}h1{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:58px;line-height:1.02;letter-spacing:-1px;margin:20px 0 15px}.intro p{font-size:12px;line-height:1.8;color:#85867c;margin-bottom:31px}section{border-top:1px solid var(--line);padding:22px 0 23px}.section-heading{display:flex;gap:14px;align-items:center;font-size:9px;color:#909481;margin-bottom:19px;letter-spacing:1px}h2{font-size:12px;font-weight:550;letter-spacing:0;margin:0;color:#41463a}.brushes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:22px}.brush{height:91px;border:1px solid var(--line);border-radius:5px;background:transparent;font-size:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}.brush.active{background:#e2e5d8;border-color:#969e83}.brush:hover{background:#e5e6dc}.brush small{font-size:8px;color:#8b8c80;font-family:serif}.brush-sample{height:22px;width:30px;display:block;transform:rotate(-25deg);margin-bottom:5px}.round{background:#353b30;border-radius:100% 10% 70% 30%;width:34px;height:17px}.dry{background:repeating-linear-gradient(0deg,#343a2f 0 2px,transparent 2px 3px);border-radius:80% 15% 70% 30%;height:17px}.fine{height:3px;background:#353b30;border-radius:100%;margin:9px 0 15px;width:34px}.range-label{display:flex;justify-content:space-between;font-size:11px;margin:17px 0 10px}.range-label output{font-size:10px;color:#898d80;font-variant-numeric:tabular-nums}input[type=range]{appearance:none;width:100%;height:3px;background:linear-gradient(to right,#81896b var(--progress,40%),#d7dacd var(--progress,40%));display:block;margin:12px 0 5px;cursor:pointer}input[type=range]::-webkit-slider-thumb{appearance:none;height:11px;width:11px;border-radius:50%;background:#737e60;border:2px solid #eeede7;box-shadow:0 0 0 1px #737e60}input[type=range]::-moz-range-thumb{height:8px;width:8px;border-radius:50%;background:#737e60;border:2px solid #eeede7}.ink-row{display:flex;align-items:center;justify-content:space-between}.control-name,.select-label{font-size:11px}.swatches{display:flex;gap:12px}.swatch{width:19px;height:19px;border:0;background:var(--swatch);border-radius:50%}.swatch.active{outline:1px solid var(--swatch);outline-offset:3px}.select-label{display:block;margin-top:21px}select{display:block;width:100%;background:transparent;border:1px solid #d2d6c7;border-radius:4px;padding:10px 9px;font-size:11px;color:#5d6354;margin-top:9px}.toggle-row{display:flex;align-items:center;justify-content:space-between;font-size:11px;margin-top:24px;position:relative;cursor:pointer}.toggle-row input{position:absolute;right:0;opacity:0;width:29px;height:18px}.toggle{width:29px;height:17px;background:#d3d7cb;border-radius:12px;padding:3px}.toggle:before{content:'';display:block;width:11px;height:11px;background:#fafaf5;border-radius:50%;transition:transform .2s}.toggle-row input:checked+.toggle{background:#7c8768}.toggle-row input:checked+.toggle:before{transform:translateX(12px)}.toggle-row input:focus-visible+.toggle{outline:2px solid #737e60;outline-offset:4px}.brush-note{display:flex;border-top:1px solid var(--line);padding-top:21px;gap:15px;align-items:center}.brush-note>span{font-family:serif;font-size:29px;color:#a2a68e}.brush-note p{font-size:9px;line-height:1.9;color:#929487}.workspace{min-width:0}.canvas-heading{display:flex;justify-content:space-between;color:#858a7a;font-size:8px;letter-spacing:1.4px;height:34px;align-items:flex-start}.canvas-heading i{display:inline-block;width:5px;height:5px;background:#7d8c68;border-radius:50%;margin-right:7px;vertical-align:1px}.paper-wrap{position:relative;aspect-ratio:4/5;max-height:780px;margin:auto;background:#f8f6ec;box-shadow:0 6px 12px #343b2510,0 25px 55px #343b250c;overflow:hidden;cursor:none;isolation:isolate}.paper-wrap canvas{position:absolute;width:100%;height:100%;inset:0}#ink{touch-action:none;z-index:2}.practice-grid{position:absolute;inset:0;z-index:1;pointer-events:none;display:none;background:linear-gradient(to right,transparent calc(50% - .5px),#8b847128 50%,transparent calc(50% + .5px)),linear-gradient(to bottom,transparent calc(50% - .5px),#8b847128 50%,transparent calc(50% + .5px));background-size:50% 50%;border:1px solid #8b847115}.practice-grid.visible{display:block}#empty-hint{position:absolute;top:38%;width:100%;text-align:center;pointer-events:none;color:#a8aa99;z-index:3;transition:opacity .35s}#empty-hint>span{font-family:serif;font-size:67px;color:#b1b4a23d}#empty-hint p{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:23px;margin:17px 0 12px;color:#929885}#empty-hint small{font-size:9px;letter-spacing:1.1px;color:#a7ac9c}#empty-hint.hidden{opacity:0}#cursor{display:none;position:absolute;pointer-events:none;border:1px solid #50583c65;border-radius:50%;z-index:4;transform:translate(-50%,-50%)}.canvas-toolbar{display:flex;justify-content:space-between;align-items:center;padding:17px 0;border-bottom:1px solid var(--line)}.history{display:flex;align-items:center;gap:20px}.history button{border:0;background:transparent;font-size:19px;padding:0;color:#676e5b}.history button span{font-size:10px;vertical-align:2px;margin-left:4px}.history button:disabled{opacity:.35;cursor:default}.history button:hover:enabled{color:#202c18}.divider{height:15px;width:1px;background:var(--line)}.stroke-counter{font-size:9px;color:#8b907f}.workspace-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:22px;font-size:8px;letter-spacing:1px;color:#8d927f}.workspace-bottom>span:last-child{font-size:12px;font-family:serif}.translation{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:14px;letter-spacing:0;margin-left:9px}footer{display:flex;justify-content:space-between;margin:12px 4.6% 0;padding:24px 0;border-top:1px solid var(--line);font-size:8px;letter-spacing:1.2px;color:#9b9e90}footer span:nth-child(2){font-family:'Instrument Serif',Georgia,serif;letter-spacing:0;font-style:italic;font-size:13px}#toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);background:#343d30;color:white;padding:12px 22px;font-size:12px;border-radius:5px;opacity:0;pointer-events:none;transition:all .2s;z-index:10}#toast.show{opacity:1;transform:translate(-50%,0)}@media(min-width:1450px){main{gap:90px;grid-template-columns:270px minmax(0,1fr)}.paper-wrap{max-width:624px}.canvas-heading,.canvas-toolbar,.workspace-bottom{max-width:624px;margin-left:auto;margin-right:auto}}@media(max-width:900px){main{gap:30px;grid-template-columns:210px minmax(0,1fr);padding:30px 4%}h1{font-size:48px}.header-note{display:none}.canvas-heading{letter-spacing:.4px;font-size:7px}.workspace-bottom{flex-direction:column;gap:12px;align-items:flex-start}.history{gap:13px}.history button span{font-size:9px}.stroke-counter{font-size:8px}}@media(max-width:620px){header{height:80px}.brand{font-size:19px}.brand-mark{font-size:30px}.export{padding:9px 12px;font-size:10px}.export span{margin-left:9px}main{display:flex;flex-direction:column;gap:25px}.workspace{order:-1}.paper-wrap{max-height:none}.canvas-heading{font-size:7px;height:25px}.workspace-bottom{flex-direction:row;align-items:center}.workspace-bottom>span:first-child{font-size:6px}.translation{font-size:11px}.intro{display:none}aside{display:grid;grid-template-columns:1fr 1fr;gap:25px}section{padding:18px 0}.brush-note{grid-column:1/-1;padding-top:12px}.brush-note p{font-size:10px}footer{margin-top:0}footer span:last-child{display:none}.brush{height:82px}#empty-hint p{font-size:21px}}

.enso-button{width:100%;padding:12px 16px;border:1px solid #b9bfac;border-radius:4px;background:#e2e5d8;color:#4b5740;font-size:12px;margin:0 0 20px;text-align:left}.enso-button:hover{background:#d8ddcc}.enso-button:disabled{opacity:.5;cursor:wait}@media(max-width:620px){.enso-button{grid-column:1/-1;margin:0}}

.stroke-preview{position:relative;background:#f8f6ed;border:1px solid #dedfd4;border-radius:4px;margin-bottom:20px;height:127px;overflow:hidden}.stroke-preview canvas{display:block;width:100%;height:100%;object-fit:contain}.stroke-preview>span{position:absolute;bottom:7px;left:10px;font-size:7px;letter-spacing:1.4px;color:#a0a48f}.dynamics{border-top:1px solid #d9dacf;border-bottom:1px solid #d9dacf;padding:12px 0;margin:22px 0}.dynamics summary{font-size:11px;color:#69735c;cursor:pointer}.dynamics[open]{padding-bottom:19px}#cursor{border:0;border-radius:0;background:linear-gradient(#5c654a88,#5c654a88) center/1px 7px no-repeat,linear-gradient(#5c654a88,#5c654a88) center/7px 1px no-repeat}#cursor.outline{border:1px dashed #737c5e88;border-radius:50%;background:none}.workspace{position:sticky;top:24px;align-self:start}.paper-wrap{max-height:min(780px,calc(100vh - 200px))}@media(max-width:620px){.workspace{position:static;align-self:stretch}.paper-wrap{max-height:none}.stroke-preview{height:105px}}

#ink:focus-visible{outline:1px solid #8d997c;outline-offset:-2px}

.control-help{font-size:9px;line-height:1.65;color:#8a907e;margin:9px 0 17px}