@font-face{font-family:Studio;src:url('../fonts/dd.woff2') format('woff2');font-display:swap}
:root{font-family:Studio,-apple-system,BlinkMacSystemFont,sans-serif;color:#2c2b25;background:#d7ccba;color-scheme:light;--paper:#f1ecdf;--ink:#2c2b25;--red:#a53523}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}body{font-size:13px}button,input,textarea,select{font:inherit}button,a,textarea,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:0;background:transparent;color:inherit}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,canvas:focus-visible{outline:2px solid #345691;outline-offset:4px}a{color:inherit}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}button svg,a svg{pointer-events:none}[hidden]{display:none!important}.icon-definitions{position:absolute;width:0;height:0;overflow:hidden}.desk{position:relative;isolation:isolate;width:100%;height:var(--desk-height,100dvh);overflow:hidden}.desk-scene{position:absolute;inset:0;z-index:-3;background:url('art/desk.webp') center/cover no-repeat;pointer-events:none}.desk-fragments{position:absolute;inset:0;z-index:-1;pointer-events:none}.desk-fragment{position:absolute;object-fit:contain;filter:drop-shadow(2px 4px 2px #382b2433)}.face-fragment{left:5%;top:15%;width:20%;height:57%;transform:rotate(-14deg)}.flower-fragment{right:3%;top:25%;width:22%;height:58%;transform:rotate(17deg)}.offcuts-fragment{left:12%;bottom:0%;width:40%;height:25%;transform:rotate(-6deg)}
.back-link{position:absolute;top:25px;left:27px;display:flex;align-items:center;gap:10px;padding:12px 17px;z-index:2;text-decoration:none;font:17px/1.1 Georgia,serif;transform:rotate(-3deg);isolation:isolate;filter:drop-shadow(1px 2px 2px #42362130)}
.back-link::before{content:'';position:absolute;inset:0;z-index:-1;background:#f6f1e6 url('art/paper-grain.svg');clip-path:polygon(1% 5%,12% 2%,26% 4%,39% 0,54% 3%,68% 1%,83% 4%,98% 1%,100% 19%,98% 37%,100% 56%,98% 78%,99% 97%,84% 95%,70% 100%,53% 97%,37% 99%,21% 96%,2% 99%,0 77%,2% 60%,0 41%,2% 24%)}
.back-link svg{width:17px;height:17px}.back-link:hover{transform:rotate(-1deg)}
.download-tools{display:flex;align-items:stretch;background:var(--red);color:#fff7e8;margin-left:5px}
.download-button{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 12px;min-height:40px;font-size:12px}
.download-button small{font-size:9px;letter-spacing:.5px;opacity:.72}.formats-button{display:grid;place-items:center;padding:8px 5px;border-left:1px solid #ffffff35}.formats-button svg{width:13px;height:13px}.desk-tools .download-tools button:hover{background:#722b2140}.download-button>svg{width:17px;height:17px}
.paper{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%) rotate(-1deg);width:min(74vw,1120px);height:min(69dvh,730px);min-height:180px;background:var(--paper);box-shadow:2px 4px 1px #4b3b251a,4px 9px 16px #4b3b2520;display:flex;flex-direction:column;padding:23px 30px 20px}.paper::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.1;background-image:url('art/paper-grain.svg')}.paper-tape{position:absolute;top:-12px;left:38%;width:108px;height:29px;z-index:1;background:#d9cda898;transform:rotate(5deg);clip-path:polygon(2% 2%,98% 0,100% 15%,98% 32%,100% 50%,98% 73%,100% 94%,0 100%,2% 75%,0 44%,2% 20%);pointer-events:none}.writing-line{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:9px;flex-shrink:0;max-width:760px;width:100%;margin:0 auto;border-bottom:1px solid #a79c814f;padding-bottom:15px}.writing-line label{display:flex;align-items:center;gap:8px;white-space:nowrap;font:italic 14px Georgia,serif;color:#836851;cursor:text}.writing-line label svg{width:17px;height:17px}.writing-line textarea{width:100%;min-width:0;border:0;border-radius:0;padding:0;background:transparent;resize:none;outline-offset:5px;line-height:1.25;font-size:clamp(22px,2vw,30px);color:var(--ink);height:1.25em;overflow:hidden}.writing-line textarea::placeholder{color:#8e887b}.canvas-space{position:relative;flex:1;min-width:0;min-height:0;display:grid;place-items:center}.canvas-space canvas{display:block;touch-action:none;cursor:grab;max-width:100%;max-height:100%}#canvas-message{position:absolute;left:10%;right:10%;top:50%;transform:translateY(-50%);text-align:center;font:italic 22px/1.4 Georgia,serif;color:#827969;pointer-events:none;margin:0}.paper-hint{position:absolute;bottom:15px;left:0;right:0;text-align:center;font-size:10px;letter-spacing:.1px;color:#8c8374;margin:0;pointer-events:none}.paper[data-color=ink]{--paper:#282826;--ink:#f5eddb;color:var(--ink)}.paper[data-color=ink] .writing-line label,.paper[data-color=ink] .paper-hint{color:#c9bfa9}.paper[data-color=white]{--paper:#faf9f5}.paper:has(.writing-line textarea:focus){box-shadow:2px 4px 1px #4b3b251a,4px 9px 16px #4b3b2520}
.desk-tools{position:absolute;left:50%;bottom:7%;transform:translateX(-50%) rotate(.7deg);display:flex;align-items:stretch;padding:6px 10px;gap:4px;background:#f4f0e5;box-shadow:2px 3px 4px #46372230;white-space:nowrap}.desk-tools>button,.motion-tool>button{min-height:40px;display:flex;align-items:center;justify-content:center;gap:9px;padding:8px 13px;font-size:12px}.desk-tools button:hover{background:#e5decf}.desk-tools button:active{transform:translateY(1px)}.style-sample{font:bold 22px/1 Georgia,serif;letter-spacing:-2px}.motion-tool{display:flex;border-left:1px solid #cfc7b4;border-right:1px solid #cfc7b4;margin:0 4px;padding:0 3px}.motion-tool>button:last-child{padding:6px 3px}.motion-tool>button:last-child svg{width:13px}.motion-tool button[aria-pressed=true]{color:#a53523}.motion-tool button[aria-pressed=true]>svg{fill:#a5352319}.letter-tools{position:absolute;z-index:3;bottom:-13px;left:50%;transform:translateX(-50%) rotate(1deg);display:flex;align-items:center;gap:3px;background:#fffaf0;border:1px solid #ded5c2;box-shadow:2px 3px 4px #49301e29;margin:0;padding:5px 7px;white-space:nowrap}.letter-tools button{height:31px;min-width:30px;display:grid;place-items:center;font-size:20px;padding:0 5px}.letter-tools button:hover{background:#e8dfcb}.letter-tools svg{width:16px}.letter-tools #selected-letter{font:bold 24px Georgia,serif;min-width:27px;border-right:1px solid #dbd0b9}.letter-tools #pin-letter{font-size:11px}.letter-tools #pin-letter[aria-pressed=true]{background:#e1d2b1}
.tool-popover{position:fixed;inset:auto auto 115px 50%;transform:translateX(-50%) rotate(-.5deg);margin:0;width:320px;max-width:calc(100vw - 28px);max-height:calc(var(--desk-height,100dvh) - 160px);overflow-y:auto;overscroll-behavior:contain;border:1px solid #d6ccb6;padding:18px 20px 20px;background:#f6f0e0;color:#302d26;box-shadow:3px 6px 20px #43372540;font-size:12px}.tool-popover::backdrop{background:transparent}.popover-heading{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #c6bca5;padding-bottom:10px;margin-bottom:16px;font-size:14px}.popover-heading button{padding:0 0 0 8px;display:flex}.popover-heading svg{width:17px;height:17px}.style-options{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.style-options button{padding:8px 3px;font-size:10px;border:1px solid transparent}.style-options button[aria-pressed=true]{border-color:#a53523}.style-options b{display:table;font:bold 34px/.9 Georgia,serif;letter-spacing:-3px;margin:1px auto 13px;padding:5px;transform:rotate(-5deg)}.sample-editorial{background:#2a2c27;color:#eee6d4}.sample-newsprint{background:#e5decf;color:#2a2c27}.style-options .sample-color{background:#ad3828;color:#f5d568;transform:rotate(7deg)}.source-drawer{margin-top:17px;border-top:1px solid #cfc6b1;padding-top:12px}.source-drawer summary{cursor:pointer}.source-drawer>div{max-height:175px;overflow:auto;margin-top:12px;display:grid;gap:8px}.source-drawer label{display:flex;align-items:center;gap:8px;font-size:11px}.source-drawer input{accent-color:#a53523}.control-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:17px 0}.control-row select{min-width:0;max-width:190px;background:#fffaed;border:1px solid #d8cdb8;padding:7px 3px;color:inherit}.range-control{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:17px}.range-control input{width:150px;accent-color:#a53523;margin:0}.backgrounds{display:flex;gap:15px;padding:4px 1px 9px}.swatch{height:22px;width:22px;border-radius:50%;border:1px solid #9c917c}.swatch[aria-pressed=true]{outline:1px solid #302d26;outline-offset:3px}.swatch.warm{background:#eee8dc}.swatch.white{background:#fff}.swatch.ink{background:#282826}.letter-strip{display:flex;gap:2px;overflow:auto;margin:20px 0 8px;padding-bottom:5px}.letter-strip button{padding:3px 5px;font:19px Georgia,serif}.letter-strip button[aria-pressed=true]{background:#dbcba9}.text-button{padding:4px 0;font-size:11px;text-decoration:underline;text-underline-offset:3px}.download-menu{left:calc(50% + 235px);width:260px}.download-menu>button{display:flex;justify-content:space-between;align-items:center;width:100%;padding:12px 2px;border-bottom:1px solid #e0d5bf;font-size:14px}.download-menu>button:hover{color:#a53523}.download-menu small{font-size:10px;color:#817967}.export-progress-box{position:fixed;left:50%;bottom:17px;transform:translateX(-50%);display:flex;align-items:center;gap:13px;padding:10px 16px;background:#f7efdd;z-index:10;box-shadow:1px 3px 8px #41322238}.export-progress-box progress{width:200px;accent-color:#a53523}.export-progress-box button{font-size:11px}.status{position:absolute;left:72px;bottom:18px;margin:0;color:#554c40;font-size:11px;max-width:calc(100% - 144px);background:#f6efdfeb;padding:4px 7px}.status:empty{display:none}.status.error{color:#9c291d}.credits-button{position:absolute;bottom:16px;left:27px;width:23px;height:23px;border:1px solid #766851;color:#685a43;border-radius:50%;font:italic 13px Georgia,serif}.credits-menu{left:24px;bottom:50px;transform:rotate(-1deg);width:285px;font-size:11px;line-height:1.6}.credits-menu p{margin:0 0 12px}.credits-menu a{text-underline-offset:3px}.noscript-note{position:fixed;inset:35% 15% auto;background:#f6efdf;padding:30px;text-align:center}
@media(min-width:1600px){.paper{height:70dvh;top:47%;width:min(70vw,1330px)}.desk-tools{bottom:7%}.writing-line{max-width:900px}.writing-line textarea{font-size:30px}}
@media(max-width:800px){.paper{width:86vw;height:68dvh;padding:20px 22px 18px}.desk-tools{bottom:6%;gap:0;padding:4px 6px}.desk-tools>button,.motion-tool>button{padding:8px 10px}.face-fragment{left:-7%;width:33%;height:55%}.flower-fragment{right:-5%;width:32%}.offcuts-fragment{left:5%;width:50%}.writing-line{gap:9px}.writing-line textarea{font-size:23px}.tool-popover{bottom:100px}.download-menu{left:calc(50% + 210px)}.credits-menu{bottom:50px}.writing-line label{font-size:12px}}
@media(max-width:700px){
  .desk-tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:min(420px,calc(100vw - 30px));padding:6px;gap:3px;bottom:35px}
  .desk-tools>button,.motion-tool>button{min-height:37px;padding:7px 8px;font-size:11px;gap:6px}
  .desk-tools>button svg,.motion-tool svg{width:17px;height:17px}
  .motion-tool{margin:0;padding:0;border:0;justify-content:center}.motion-tool>button:last-child{padding:3px}.motion-tool>button:last-child svg{width:12px}
  .download-tools{margin:0;min-width:0}.download-button{flex:1;min-width:0;min-height:37px;gap:5px;padding:7px 5px;font-size:11px}.download-button>svg,.download-button small{display:none}.formats-button{padding:7px 5px}
  .tool-popover{bottom:135px;max-height:calc(var(--desk-height,100dvh) - 165px)}.download-menu{left:50%}.credits-menu{bottom:49px;left:17px}
}
@media(max-width:480px){
  .back-link{top:18px;left:17px;padding:10px 13px;gap:8px;font-size:15px}
  .desk-scene{background-position:45% center}.paper{width:calc(100vw - 30px);height:calc(var(--desk-height,100dvh) - 225px);top:calc((var(--desk-height,100dvh) - 225px) / 2 + 80px);padding:18px 16px 22px;transform:translate(-50%,-50%) rotate(-.6deg)}
  .paper-tape{width:80px;height:25px;top:-11px}.writing-line{padding-bottom:12px;gap:9px}.writing-line label{gap:6px;font-size:12px}.writing-line label svg{width:14px;height:14px}.writing-line textarea{font-size:22px}.paper-hint{font-size:9px;bottom:13px}
  .style-sample{font-size:19px}.letter-tools{bottom:-22px;gap:1px;padding:4px}.letter-tools button{min-width:29px}
  .credits-button{bottom:8px;left:18px}.status{bottom:8px;left:51px;font-size:10px;max-width:calc(100% - 70px)}.export-progress-box{bottom:15px}.export-progress-box progress{width:160px}
  .flower-fragment{right:-8%;top:22%;height:55%}.face-fragment{left:-11%;top:18%;height:51%}.offcuts-fragment{width:75%;left:3%;bottom:5%}
}
@media(max-height:500px){.paper{height:calc(var(--desk-height,100dvh) - 132px);width:74vw;top:43%;padding:12px 20px}.writing-line{padding-bottom:6px}.writing-line label{font-size:11px}.writing-line textarea{font-size:17px}.paper-hint{display:none}.desk-tools{bottom:19px}.credits-button{bottom:12px}.status{bottom:11px}.tool-popover{bottom:77px;max-height:calc(var(--desk-height,100dvh) - 94px)}.credits-menu{bottom:42px}}
/* The letter's handles provide the focus cue once a clipping is selected. */
.paper:has(#letter-tools:not([hidden])) canvas:focus-visible{outline:none}

@media(max-width:700px) and (max-height:500px){.paper{width:calc(100vw - 30px);height:calc(var(--desk-height,100dvh) - 182px);min-height:110px;top:calc((var(--desk-height,100dvh) - 182px) / 2 + 60px);padding:10px 16px}.back-link{top:9px}.writing-line{gap:5px;padding-bottom:7px}.writing-line label{display:none}.desk-tools{bottom:24px}.tool-popover{bottom:119px;max-height:calc(var(--desk-height,100dvh) - 133px)}.credits-menu{bottom:42px}.credits-button,.status{bottom:1px}}