:root{font-family:Songti SC,"Noto Serif CJK SC",SimSun,serif;color:#334338;background:#f4f3ed;font-synthesis:none;font-size:15px}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button,select{cursor:pointer}button{border:1px solid #53684e;background:#53684e;color:#fff;border-radius:5px;padding:11px 20px}button:hover{filter:brightness(.94)}button:disabled{opacity:.45;cursor:default}.quiet{background:transparent;border-color:transparent;color:#6b7b65;padding:8px 10px}select{color:inherit;background:transparent;border:0;border-bottom:1px solid #cbd1c3;padding:5px}header{height:91px;margin:0 3.5vw;border-bottom:1px solid #d8ddce;display:flex;align-items:center;justify-content:space-between}.brand{font-size:38px;font-style:italic;color:inherit;text-decoration:none}.brand span{font-size:12px;font-style:normal;margin-left:24px;letter-spacing:2px;color:#809078}.controls{display:flex;gap:28px;align-items:center}.controls button span{margin-left:20px}main{max-width:1530px;margin:27px auto 0;padding:0 3.5vw;display:grid;grid-template-columns:1fr 1fr;gap:44px}.section-top,.section-bottom{display:flex;align-items:center;justify-content:space-between;color:#89927c;font-size:13px;height:38px;letter-spacing:1px}.drawing{position:relative;aspect-ratio:1;background:#fff;border:1px solid #e0e4d8;border-radius:4px;overflow:hidden}canvas{width:100%;height:100%;display:block}#introduction{position:absolute;inset:0;background:#fff;padding:8% 9%;display:flex;flex-direction:column;justify-content:center}#introduction[hidden]{display:none}.eyebrow{letter-spacing:2.5px;font:10px Arial,sans-serif;color:#89927c}h1{font-size:clamp(25px,2.7vw,40px);font-weight:400;line-height:1.6;margin:14px 0 20px}p{line-height:1.9}#introduction p:not(.eyebrow){font-size:14px;color:#7d8874;margin:6px 0}.character-list{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:25px 0 12px}.character{display:flex;flex-direction:column;text-align:left;background:#f9faf5;border:1px solid #dde3d4;color:#4e6349;padding:12px}.character small{font-size:10px;margin-top:7px;letter-spacing:1px;color:#8a967f}.character[aria-pressed=true]{border-color:#718769;background:#edf1e5}.footnote{font-size:11px!important}#error{position:absolute;left:5%;right:5%;top:8%;padding:18px;background:#fff5edee;color:#8b493c;border:1px solid #d9b8a5;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere;max-height:70%;overflow:auto}.notebook{display:flex;flex-direction:column;min-width:0}.notebook .section-top{padding:0 12px}.notebook textarea{resize:none;border:0;outline:none;color:#40513d;padding:16px 20px 32px;width:100%;flex:1;min-height:540px;line-height:36px;font-size:19px;background:repeating-linear-gradient(to bottom,transparent 0,transparent 35px,#dbe0d1 35px,#dbe0d1 36px);background-origin:content-box;background-clip:content-box;caret-color:#53684e}.notebook textarea:disabled{opacity:.6}.notebook textarea::placeholder{color:#a2ac96}.notebook-footer{padding:16px 12px;color:#8d987f;font-size:11px;display:flex;justify-content:space-between;gap:15px}.exports{border-top:1px solid #dce0d3;margin-top:12px;padding:15px 0;display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-size:12px;color:#6e7d65}.exports select{max-width:210px}.exports button{margin-left:auto;padding:8px 15px}.check{display:flex;align-items:center;gap:4px}.exports small{width:100%;line-height:1.5;overflow-wrap:anywhere}dialog{border:1px solid #d4dbcb;border-radius:8px;padding:30px;max-width:470px;color:#41523c;background:#fdfdf8}dialog::backdrop{background:#26332366;backdrop-filter:blur(3px)}dialog h2{font-weight:400;font-size:24px}dialog p{color:#7d8773;font-size:14px}.dialog-actions{display:flex;justify-content:flex-end;gap:15px;margin-top:25px}#password{padding:10px;width:100%;border:1px solid #cdd5c4;border-radius:4px}#test-panel{position:fixed;bottom:20px;left:20px;width:min(570px,calc(100vw - 40px));max-height:60vh;overflow:auto;background:#fffffff5;border:1px solid #ccd4c2;box-shadow:0 12px 50px #26332333;padding:20px;z-index:5}#test-panel button{font-size:12px;padding:8px;margin:5px}pre{white-space:pre-wrap;overflow-wrap:anywhere;font:11px/1.6 monospace}button:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #8a9c71;outline-offset:3px}[hidden]{display:none!important}@media(max-width:900px){header{height:auto;min-height:85px;gap:12px;flex-wrap:wrap;padding:12px 0}.brand span{display:none}.controls{gap:10px;font-size:12px}main{gap:22px;padding:0 18px}#introduction{padding:6%}h1{font-size:24px;margin:5px 0}#introduction p:not(.eyebrow){font-size:11px}.character-list{margin:12px 0 5px;gap:5px}.character{padding:8px;font-size:12px}.character small{font-size:9px}.notebook textarea{font-size:17px;padding:16px 5px 25px}.notebook-footer{flex-direction:column}.exports{font-size:11px}}@media(max-width:650px){main{grid-template-columns:1fr;margin-top:10px;gap:12px}.notebook textarea{min-height:400px}.brand{font-size:30px}.controls button{padding:10px}#introduction{padding:7% 9%}h1{font-size:28px;margin:8px 0 16px}#introduction p:not(.eyebrow){font-size:12px}.notebook-footer{padding-bottom:30px}header{margin:0 18px}.character-list{margin:18px 0 8px}.character{padding:10px}.exports select{max-width:195px}}.start-options{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:#708164}.secondary{background:transparent;color:#53684e;border-color:#bbc7b1}.notebook-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px}.notebook-actions button{font-size:12px;padding:9px 12px}.notebook-actions small{width:100%;color:#708164}.exports button{margin-left:0}.exports #share{margin-left:auto}dialog{width:calc(100% - 32px)}.dialog-actions{flex-wrap:wrap}@media(max-width:650px){.atelier{grid-row:1;min-width:0}.notebook{grid-row:2}.notebook textarea{min-height:45svh}.exports #share{margin-left:0}.exports button{flex:1}.notebook-actions{padding:10px 5px}.dialog-actions{gap:8px}#introduction .footnote{font-size:10px!important}}@media(max-width:650px){.drawing:has(#introduction:not([hidden])){aspect-ratio:auto}.drawing:has(#introduction:not([hidden]))>canvas{display:none}#introduction:not([hidden]){position:relative;inset:auto}}#keyboard-dismiss{display:none}#share-dialog{max-height:calc(100dvh - 24px);overflow-y:auto;padding:22px}#share-dialog h2{margin:0 0 12px}#share-message{margin:8px 0 12px}.share-preview img,.share-preview video{display:block;width:100%;max-height:40dvh;object-fit:contain;background:#fff;border:1px solid #e0e4d8;border-radius:4px;-webkit-touch-callout:default;user-select:auto}#share-format,#share-hint{font-size:12px;margin:8px 0;line-height:1.6}.share-alternatives{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px}.share-alternatives a{color:#53684e;text-decoration:underline;padding:8px 0}.share-alternatives button{font-size:12px}#share-dialog .dialog-actions{margin-top:14px;gap:8px}#share-dialog .dialog-actions button{padding:10px 12px}@media(max-width:650px){html.mobile-writing,html.mobile-writing body{overflow:hidden;overscroll-behavior:none}.mobile-writing header,.mobile-writing .exports,.mobile-writing .notebook-actions,.mobile-writing .notebook-footer{display:none}.mobile-writing main{position:fixed;top:var(--writing-top,0px);left:var(--writing-left,0px);width:var(--writing-width,100vw);height:var(--writing-height,100dvh);max-width:none;margin:0;padding:8px 12px max(8px,env(safe-area-inset-bottom));gap:6px;grid-template-rows:calc(var(--writing-canvas) + 48px) minmax(0,1fr);background:#f4f3ed;z-index:3;overflow:hidden}.mobile-writing .atelier{display:grid;grid-template-rows:24px var(--writing-canvas) 24px;min-height:0;gap:0}.mobile-writing .section-top,.mobile-writing .section-bottom{height:24px;min-width:0;font-size:11px;letter-spacing:0}.mobile-writing #artist-label,.mobile-writing #phase{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mobile-writing #clock{flex-shrink:0;margin-left:8px}.mobile-writing .drawing{width:var(--writing-canvas);height:var(--writing-canvas);aspect-ratio:1;justify-self:center}.mobile-writing .drawing canvas{width:100%;height:100%;object-fit:contain}.mobile-writing .notebook{display:grid;grid-template-rows:28px minmax(0,1fr);min-height:0;overflow:hidden}.mobile-writing .notebook .section-top{height:28px;padding:0 4px;gap:8px}.mobile-writing #word-count{margin-left:auto;white-space:nowrap}.mobile-writing #keyboard-dismiss{display:block;padding:4px;font-size:12px;white-space:nowrap}.mobile-writing #test-open{padding:3px 8px;font-size:11px}.mobile-writing .notebook textarea{min-height:0;height:100%;width:100%;padding:4px 5px 12px;font-size:17px;line-height:30px;overflow-y:auto;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;outline-offset:-2px;background:repeating-linear-gradient(to bottom,transparent 0,transparent 29px,#dbe0d1 29px,#dbe0d1 30px);background-origin:content-box;background-clip:content-box}}