#drawing-room{min-height:100svh;padding:110px 24px 65px;display:flex;justify-content:center;align-items:flex-start;color:#30362b;font-family:'Courier New',monospace}.drawing-desk{width:min(980px,100%);padding:32px;background:#b5b6a3;border:2px solid #7e8571;border-radius:7px;box-shadow:inset 0 2px #e0decb,inset 0 -5px 7px #686e5b,0 18px 50px #000}.drawing-desk header{display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:1px solid #8c927c;padding-bottom:22px}.drawing-desk header small,#drawing-round{font-size:10px;letter-spacing:.1em}.drawing-desk h1{font-size:25px;margin:9px 0 0;letter-spacing:.08em}#drawing-prompt{font-size:20px;line-height:1.5;min-height:30px;margin:26px 0}.drawing-tools{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-bottom:18px}.drawing-desk button{color:#e6e4d0;background:linear-gradient(#626f58,#3a4832);border:1px solid #4c5941;box-shadow:inset 0 1px #ffffff30,0 2px #66735b;border-radius:2px;padding:11px 15px;font:11px 'Courier New',monospace;cursor:pointer}.drawing-desk button:hover{filter:brightness(1.12)}.drawing-desk button:disabled{opacity:.45;cursor:default}.drawing-desk button[aria-pressed=true]{border-color:#e4d79f}.drawing-tools label{font-size:10px;display:flex;align-items:center;gap:8px;margin:0 13px}.drawing-tools input{width:85px;accent-color:#32452c}.drawing-paper{position:relative;background:#f3f0e4;border:1px solid #939884;box-shadow:0 4px 10px #41483330;line-height:0}.drawing-paper canvas{display:block;width:100%;height:auto}#drawing-canvas{touch-action:none;cursor:crosshair}#drawing-mask{position:absolute;inset:0;pointer-events:none}.drawing-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px;margin-top:22px}#drawing-hint{font-size:11px;line-height:1.6;color:#4d5b42;max-width:75%}#drawing-status{font-size:12px;min-height:18px;margin:20px 0 0}.drawing-comparison{display:grid;grid-template-columns:1fr 1fr;gap:24px}.drawing-comparison figure{margin:0}.drawing-comparison figcaption{font-size:11px;letter-spacing:.1em;margin-bottom:13px}.drawing-comparison img{display:block;width:100%;background:#f3f0e4;border:1px solid #939884}.drawing-timeline{display:flex;align-items:center;gap:14px;margin-top:24px}.drawing-timeline input{flex:1;min-width:0;accent-color:#36472f}#drawing-frame-prompt{font-size:14px;line-height:1.6;min-height:24px}.drawing-thumbnail{display:grid;place-items:center;background:#f3f0e4;color:#263e51;font:22px/1.2 'Courier New',monospace;border:1px solid #9e9d8b}.drawing-thumbnail span{width:65px;height:80px;border:2px solid currentColor;transform:rotate(8deg);position:relative}.drawing-thumbnail span:after{content:'';position:absolute;width:46px;height:5px;background:currentColor;transform:rotate(-45deg);left:22px;top:32px}.drawing-thumbnail span:before{content:'';position:absolute;left:12px;top:20px;width:30px;height:27px;border:2px dashed currentColor}
@media(max-width:560px){#drawing-room{padding:95px 12px 35px}.drawing-desk{padding:22px 15px}.drawing-desk h1{font-size:22px}.drawing-desk header{align-items:flex-start;flex-direction:column;gap:12px}#drawing-prompt{font-size:17px}.drawing-tools{gap:8px}.drawing-tools label{margin:0 5px}.drawing-tools button{padding:10px 12px}.drawing-comparison{grid-template-columns:1fr;gap:24px}.drawing-timeline{gap:9px}.drawing-timeline button{padding:10px}#drawing-hint{max-width:100%}}

img.drawing-thumbnail{object-fit:cover;background:#fff;border:1px solid #9e9d8b}
/* Revisions: ink, registration marks, and a working print sheet. */
#drawing-room{background:#191b26;color:#172b68;padding-top:105px;font-family:'Courier New',monospace}
#drawing-room>.leave{color:#ddd5bd}
.drawing-desk{position:relative;width:min(980px,100%);padding:38px;background:#e9dcba;border:0;border-radius:0;box-shadow:12px 12px 0 #101322}
.drawing-desk:before,.drawing-desk:after{content:'+';position:absolute;font:bold 28px/1 monospace;color:#b23d2d;pointer-events:none}
.drawing-desk:before{left:10px;top:8px}.drawing-desk:after{right:10px;bottom:8px}
.drawing-desk header{align-items:flex-end;border-bottom:4px solid #172b68;padding-bottom:19px;gap:16px}
.drawing-desk header small{font-weight:bold;font-size:11px;letter-spacing:.17em}
.drawing-desk h1{font-family:Impact,'Arial Black',sans-serif;font-size:clamp(44px,7vw,76px);letter-spacing:-.035em;line-height:.95;margin:15px 0 0;font-weight:900}
#drawing-round{border:2px solid #b23d2d;color:#b23d2d;padding:9px 11px;transform:rotate(-3deg);font-weight:bold;font-size:11px;white-space:nowrap}
#drawing-prompt{font-size:19px;line-height:1.5;margin:24px 0;max-width:740px;font-weight:bold}
.drawing-tools{gap:8px;margin-bottom:15px}
.drawing-desk button{background:transparent;border:2px solid #172b68;border-radius:0;box-shadow:none;color:#172b68;font:bold 11px 'Courier New',monospace;padding:11px 15px;letter-spacing:.07em}
.drawing-desk button:hover{background:#172b68;color:#f7edd7;filter:none}
.drawing-desk button[aria-pressed=true]{background:#172b68;border-color:#172b68;color:#f7edd7}
.drawing-desk button:disabled{opacity:.35}
.drawing-desk button:focus-visible{outline:3px solid #b23d2d;outline-offset:4px}
#drawing-submit,#drawing-new{background:#b23d2d;border-color:#b23d2d;color:#fff3da;box-shadow:3px 3px 0 #172b68}
#drawing-submit:hover,#drawing-new:hover{background:#8e3024;border-color:#8e3024}
.drawing-paper{border:1px solid #172b68;background:#f3f0e4;box-shadow:6px 6px 0 #172b6820}
#drawing-hint{color:#172b68;font-size:11px}
.drawing-bottom{margin-top:24px}
.drawing-comparison figcaption{font-weight:bold;color:#b23d2d;font-size:12px}
.drawing-comparison img{border:1px solid #172b68;box-shadow:4px 4px 0 #172b6820}
.drawing-timeline{border-top:2px solid #172b68;padding-top:22px;margin-top:28px}
.drawing-timeline input{accent-color:#b23d2d}
#drawing-frame-prompt{font-weight:bold;font-size:15px}
@media(max-width:560px){.drawing-desk{padding:29px 19px;box-shadow:5px 5px 0 #101322}.drawing-desk header{flex-direction:row;align-items:flex-end;flex-wrap:wrap}.drawing-desk h1{font-size:44px}#drawing-round{font-size:9px}#drawing-prompt{font-size:16px}.drawing-tools button{padding:10px 12px}}
/* Revisions: glossy sky, water, and glass. */
#drawing-room{background:radial-gradient(ellipse at 18% 9%,#ffffffdb 0,transparent 32%),radial-gradient(ellipse at 85% 70%,#74d9b47a,transparent 40%),linear-gradient(160deg,#6ec6ec 0%,#b5e7f4 40%,#55afd9 73%,#327fab 100%);color:#174e70}
#drawing-room>.leave{color:#164f70;text-shadow:0 1px #fff9;font-family:Arial,sans-serif;font-size:12px}
.drawing-desk{padding:35px;background:linear-gradient(140deg,#ffffffb8,#e5f7ffad 52%,#c1e7f4b8);border:1px solid #ffffffd9;border-radius:24px;box-shadow:inset 0 2px 0 #fff,inset 0 -1px 0 #3684ae55,0 15px 40px #18598355,0 0 0 1px #4c9bbc66;backdrop-filter:blur(14px)}
.drawing-desk:before,.drawing-desk:after{content:none}
.drawing-desk header{border-bottom:1px solid #6daec58c;padding-bottom:22px;box-shadow:0 1px #ffffff9c;align-items:center}
.drawing-desk header small{font:11px Arial,sans-serif;font-weight:normal;letter-spacing:.15em;color:#4082a0;text-shadow:0 1px #fff}
.drawing-desk h1{font:normal clamp(35px,6vw,58px)/1.1 'Segoe UI',Arial,sans-serif;letter-spacing:-.045em;text-transform:lowercase;color:#176293;text-shadow:0 2px #fff9;margin:8px 0 0}
#drawing-round{transform:none;border:1px solid #8cb9cf;border-radius:30px;padding:10px 16px;background:linear-gradient(#ffffffbd,#c9e9f6a6);box-shadow:inset 0 1px #fff,0 2px 5px #28638418;color:#34728f;font:10px Arial,sans-serif;letter-spacing:.08em}
#drawing-prompt{font:normal 20px/1.5 'Segoe UI',Arial,sans-serif;color:#235777;text-shadow:0 1px #fff;margin:25px 0}
.drawing-tools{gap:10px;margin-bottom:17px}
.drawing-desk button{font:12px 'Segoe UI',Arial,sans-serif;letter-spacing:.02em;text-transform:lowercase;color:#235c7d;background:linear-gradient(#fff 0%,#f0fbff 47%,#ceeaf6 49%,#e1f4fc 100%);border:1px solid #83b7d0;border-radius:8px;padding:10px 18px;box-shadow:inset 0 1px #fff,0 2px 4px #1b66892b;text-shadow:0 1px #fff}
.drawing-desk button:hover{color:#144f76;background:linear-gradient(#fff,#def5ff 47%,#abdff5 49%,#c9efff);border-color:#4d9bc2;filter:none}
.drawing-desk button[aria-pressed=true],#drawing-submit,#drawing-new{color:#fff;border:1px solid #287fa8;background:linear-gradient(#91dcf8 0%,#48b4e4 46%,#1686bd 49%,#2ca7da 100%);box-shadow:inset 0 1px #d6f7ff,inset 0 -1px #ffffff30,0 3px 7px #13638d40;text-shadow:0 1px #145880}
.drawing-desk button[aria-pressed=true]:hover,#drawing-submit:hover,#drawing-new:hover{background:linear-gradient(#b6ecff,#64c7ee 46%,#259acf 49%,#48bae8);border-color:#267b9f;color:#fff}
.drawing-desk button:disabled{opacity:.45;box-shadow:none}
.drawing-desk button:focus-visible{outline:3px solid #3b9ece;outline-offset:4px}
.drawing-paper{background:#f3f0e4;border:6px solid #f4fcff;border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px #91bfd2,inset 0 2px 8px #19465b22,0 5px 13px #2a6a8d24}
.drawing-bottom{margin-top:23px}#drawing-hint{font:12px/1.6 'Segoe UI',Arial,sans-serif;color:#467c98;text-shadow:0 1px #fff}
#drawing-status{font:13px 'Segoe UI',Arial,sans-serif;color:#235777}
.drawing-comparison figcaption{font:12px 'Segoe UI',Arial,sans-serif;color:#34728f;letter-spacing:.08em}
.drawing-comparison img{border:5px solid #f4fcff;border-radius:9px;box-shadow:0 0 0 1px #91bfd2,0 4px 10px #28698b22}
.drawing-timeline{border-top:1px solid #8cb9cf;box-shadow:0 -1px #fff9;padding-top:23px}.drawing-timeline input{accent-color:#249ed2}
#drawing-frame-prompt{font:15px/1.6 'Segoe UI',Arial,sans-serif;color:#235777}
@media(max-width:560px){.drawing-desk{padding:25px 18px;border-radius:18px}.drawing-desk header{flex-direction:row;flex-wrap:wrap;gap:16px}.drawing-desk h1{font-size:39px}#drawing-prompt{font-size:17px}.drawing-tools button{padding:10px 14px}.drawing-paper{border-width:4px}#drawing-round{font-size:9px}}
/* The green pen has its own enamel finish. */
.drawing-desk #drawing-pencil{position:relative;padding-left:34px;color:#24613b;border-color:#79b68c;background:linear-gradient(#f2fff5,#dff5e5 47%,#b9dfc5 49%,#d4eedc);text-shadow:0 1px #fff}
.drawing-desk #drawing-pencil:before{content:'';position:absolute;left:14px;top:50%;width:5px;height:17px;border:1px solid #276c3d;border-radius:2px 2px 0 0;background:linear-gradient(90deg,#bce999,#4ba756 55%,#2c8641);transform:translateY(-50%) rotate(32deg);box-shadow:inset 1px 0 #ffffff8c}
.drawing-desk #drawing-pencil[aria-pressed=true]{color:#fff;border-color:#318346;background:linear-gradient(#a9e69a,#63c16a 46%,#2c954c 49%,#49b25d);box-shadow:inset 0 1px #e3ffdc,0 3px 7px #22683340;text-shadow:0 1px #2d743d}
.drawing-desk #drawing-pencil:hover{background:linear-gradient(#c3f3b8,#80d882 46%,#3daa58 49%,#65c777);border-color:#318346;color:#fff;text-shadow:0 1px #2d743d}
#drawing-canvas{cursor:url('../assets/images/green-pencil.svg') 7 27,crosshair}
#drawing-canvas[data-tool=eraser]{cursor:crosshair}
#drawing-square{position:absolute;width:37.5%;height:53.5714%;z-index:2;background:#f3f0e4;border:2px dashed #2f9a78;box-shadow:0 0 0 2px #fff9,0 6px 15px #165e6040;cursor:grab;touch-action:none;display:flex;align-items:flex-start;justify-content:center}
#drawing-square:active{cursor:grabbing}
#drawing-square:focus-visible{outline:3px solid #1686bd;outline-offset:3px}
#drawing-square span{background:#d7f4ea;color:#26795e;padding:5px 10px;border:1px solid #8ac9b5;border-top:0;border-radius:0 0 8px 8px;font:10px 'Segoe UI',Arial,sans-serif;letter-spacing:.09em;pointer-events:none}
#drawing-place{color:#fff;border-color:#318346;background:linear-gradient(#a9e69a,#63c16a 46%,#2c954c 49%,#49b25d);text-shadow:0 1px #2d743d}
@media(max-width:560px){#drawing-square span{font-size:8px;padding:3px 6px}}