:root{color-scheme:light;background:#f1ecdf;color:#183773;font:14px Arial,Helvetica,sans-serif;--blue:#183773;--line:#c0c5bd;--orange:#e95535}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer;color:inherit}a{color:inherit;text-decoration:none}header{margin:0 4vw;height:115px;display:flex;align-items:center;justify-content:space-between;gap:30px;border-bottom:1px solid var(--line)}.brand{font:54px Georgia,serif;letter-spacing:-4px;font-weight:bold}.brand span{color:var(--orange);margin-left:4px}.edition{font:9px/1.6 ui-monospace,monospace;letter-spacing:.12em;margin-right:auto}header button{background:var(--blue);color:#faf1db;border:0;border-radius:0;padding:18px 22px;display:flex;gap:32px;font-size:12px}header button span{font:10px ui-monospace,monospace}main{display:grid;grid-template-columns:300px minmax(0,1fr);gap:6vw;max-width:1540px;margin:0 auto;padding:34px 4vw 30px}aside{padding-top:23px;min-width:0}.eyebrow,legend,.palette-heading>label,.paper-top,.paper-bottom,footer{font:9px/1.6 ui-monospace,monospace;letter-spacing:.1em}h1{font-size:66px;line-height:.94;letter-spacing:-.065em;font-weight:400;margin:24px 0}h1 em{font-family:Georgia,serif;letter-spacing:-.06em;color:var(--orange)}.introduction>p:last-child{font:17px/1.5 Georgia,serif;margin:24px 0 33px}fieldset{border:0;border-top:1px solid var(--line);padding:22px 0 0;min-width:0;margin:0}legend{padding:0 12px 0 0}.tool-list{display:flex;gap:8px}.tool-list button{display:grid;place-items:center;gap:9px;flex:1;border:1px solid var(--line);background:transparent;padding:15px 5px;font-size:11px}.tool-list svg{width:27px;height:27px}.tool-list button[aria-pressed=true]{background:var(--blue);color:#f1ecdf;border-color:var(--blue)}.size-label{font:11px ui-monospace,monospace;display:flex;justify-content:space-between;margin-top:25px}#size{width:100%;margin:12px 0 25px;height:24px;accent-color:var(--blue);cursor:ew-resize}.palette-heading{border-top:1px solid var(--line);padding-top:20px}.palette-heading label{display:block;margin-bottom:12px}select{width:100%;padding:10px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;color:inherit;font-family:Georgia,serif;font-size:18px}#pigments{display:flex;gap:13px;margin:20px 0 12px}#pigments button{width:42px;height:42px;min-width:42px;border:1px solid #26385e33;border-radius:50%;position:relative}#pigments button[aria-pressed=true]:after{content:'';position:absolute;inset:-5px;border:1px solid var(--blue);border-radius:50%}.small{font-size:10px;line-height:1.6;color:#58697c}.edit-actions{display:flex;justify-content:space-between;flex-wrap:wrap;gap:18px;border-block:1px solid var(--line);padding:18px 0;margin-top:24px}.edit-actions button{background:none;border:0;padding:6px 0;font-size:11px}.edit-actions button:disabled{opacity:.4;cursor:default}.tip{font:13px/1.6 Georgia,serif}.status{font:10px/1.6 ui-monospace,monospace;min-height:36px}.work{min-width:0}.paper-top,.paper-bottom{display:flex;justify-content:space-between;padding:10px 0;gap:15px}.paper{position:relative;aspect-ratio:5/6;max-height:1000px;box-shadow:0 4px 10px #313a3620,0 16px 45px #53584218;background:#fbf3d8;border:10px solid #faf5e8}.paper:after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 3px #92897145}canvas,#still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}canvas{opacity:0;touch-action:none;cursor:crosshair}.live canvas{opacity:1}.live #still{visibility:hidden}#keyboard{font:9px/1.6 ui-monospace,monospace;max-width:450px;margin-top:12px;color:#5b697b}footer{margin:0 4vw;border-top:1px solid var(--line);padding:22px 0;display:flex;justify-content:space-between;gap:20px;font-size:8px}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,canvas:focus-visible{outline:3px solid var(--orange);outline-offset:6px}button:hover:not(:disabled){filter:brightness(.95)}@media(max-width:1050px){main{grid-template-columns:245px minmax(0,1fr);gap:4vw}h1{font-size:55px}.paper{border-width:7px}.edition{font-size:8px}}@media(max-width:700px){header{height:85px;margin:0 20px;gap:14px}.brand{font-size:40px}.edition{display:none}header button{font-size:10px;padding:14px;gap:12px}header button span{font-size:9px}main{display:flex;flex-direction:column;padding:20px;gap:0}aside{display:contents}.introduction{padding:0 0 18px}.eyebrow{font-size:8px;margin-top:0}.introduction h1{font-size:54px;margin:10px 0 0;line-height:.94}.introduction h1 br{display:none}.introduction h1 em{display:block}.introduction>p:last-child{font-size:13px;margin:14px 0 0}.introduction>p:last-child br{display:none}.work{order:1;min-width:0}#tools{order:2;margin-top:24px;display:grid;grid-template-columns:1fr 1fr;column-gap:20px;padding-top:15px}.tool-list{grid-column:1/-1}.size-label{grid-column:1/-1;margin-top:18px}#size{grid-column:1/-1;margin-bottom:15px}.palette-heading{grid-column:1/-1;padding-top:14px}.palette-heading label{margin-bottom:3px;font-size:8px}.palette-heading select{font-size:16px}#pigments{grid-column:1/-1;gap:18px;margin-top:20px}.small{grid-column:1/-1;margin:0}.edit-actions{grid-column:1/-1;margin-top:18px}.tip{order:3;margin-bottom:0}.status{order:4;min-height:20px}.paper{border-width:6px}.paper-top,.paper-bottom{font-size:7px}#keyboard{font-size:8px}footer{flex-wrap:wrap;gap:7px;margin:0 20px;font-size:7px}footer span:nth-child(2){order:3;width:100%}}