#writingRoot{width:100%;max-width:900px;box-sizing:border-box;margin:0 auto;padding:0 12px 30px;color:#ecf8ff;text-align:center}
.writing-workbench{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.85fr);gap:24px;align-items:center}.writing-tools{min-width:0}
.writing-heading{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}.writing-heading h2{font-size:clamp(24px,4vw,34px);margin:8px 0}.writing-badge{font-size:13px;color:#a9e5d6}
#writingPrompt{margin:8px auto 14px;max-width:48ch;line-height:1.5;font-size:17px}
#writingRoot button,#writingRoot summary{font:inherit;font-weight:700;min-height:48px;border-radius:14px;cursor:pointer}
#writingRoot button{border:2px solid #5685a5;background:#153a58;color:#f4fbff;padding:10px 14px;touch-action:manipulation}
#writingRoot button:focus-visible,#writingRoot summary:focus-visible{outline:3px solid #ffe08a;outline-offset:3px}
#writingRoot button:disabled{opacity:.55;cursor:default}#writingRoot [aria-pressed=true]{border-color:#ffe08a;box-shadow:0 0 0 2px #ffe08a}
.writing-picker,.writing-tips{background:#102f49;border:1px solid #476d88;border-radius:16px;margin:12px 0;text-align:left}
.writing-picker summary,.writing-tips summary{padding:13px 16px}.writing-groups{display:flex;flex-wrap:wrap;gap:9px;padding:6px 14px}
.writing-letters{display:grid;grid-template-columns:repeat(auto-fit,minmax(48px,1fr));gap:9px;padding:12px 14px}.writing-letters button{font-size:25px!important;padding:8px!important}
#writingRoot #traceCanvas{display:block;width:min(100%,380px);height:auto;aspect-ratio:1;margin:8px auto;background:#0c273a;border:3px solid #719db8;border-radius:24px;box-sizing:border-box;touch-action:none;user-select:none}
.writing-colors,.writing-actions,.writing-finish{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:12px 0}
#writingRoot .writing-colors button{width:48px;padding:0;color:var(--crayon);font-size:32px;line-height:1}
#writingRoot .writing-finish button{min-width:165px;background:#155341;border-color:#68c7a5}.writing-finish{margin-top:18px}
#writingStatus{min-height:44px;font-size:16px;line-height:1.5;color:#e7dbaf;margin:12px 0}
.writing-tips p,.writing-tips ol{padding:0 18px;font-size:15px;line-height:1.6}.writing-tips ol{padding-left:40px}
@media(min-width:700px){.writing-heading h2{margin:0;font-size:28px}.writing-heading{justify-content:flex-start}#writingPrompt{text-align:left;margin:5px 0;max-width:none;font-size:16px}.writing-picker{margin:8px 0}.writing-workbench{gap:18px}#writingRoot #traceCanvas{width:min(100%,380px,max(240px,calc(100dvh - 395px)))}.writing-actions,.writing-finish{display:grid;grid-template-columns:1fr 1fr}.writing-actions{margin:10px 0}#writingRoot .writing-finish button{min-width:0}.writing-colors{margin:6px 0}#writingStatus{margin:8px 0;min-height:0}}
@media(max-width:699px){.writing-workbench{display:block}#writingRoot #traceCanvas{width:min(100%,330px)}.writing-heading h2{font-size:26px}#writingPrompt{font-size:16px}.writing-colors{margin:8px 0}.writing-tools{max-width:420px;margin:auto}}
@media(max-width:460px){#writingRoot{padding:0 4px 24px}.writing-badge{display:none}.writing-actions{display:grid;grid-template-columns:1fr 1fr}.writing-finish{display:grid;grid-template-columns:1fr 1fr}#writingRoot .writing-finish button{min-width:0;padding:10px 5px;font-size:15px}.writing-letters{gap:8px;padding:12px}.writing-groups{padding:6px 12px}.writing-groups button{flex:1}}
.writing-paper{min-width:0;scroll-margin-top:8px}.writing-demo{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:8px 0}.writing-demo button{flex:1;max-width:180px}#writingRoot [hidden]{display:none!important}
@media(max-height:500px) and (min-width:700px){#writingRoot #traceCanvas{width:min(100%,max(220px,calc(100dvh - 160px)))}.writing-workbench{align-items:start}}