:root{--eraser-colour:#f4a6c0}:root[data-theme=dark]{--eraser-colour:#a9ada6}.scribble-surface{pointer-events:none}.scribble-surface.is-active{pointer-events:auto;touch-action:none}.scribble-surface__svg{width:100%;height:100%;display:block;overflow:visible}.scribble-surface__ring{fill:color-mix(in srgb, var(--eraser-colour) 12%, transparent);stroke:var(--ink-soft);stroke-width:1px;stroke-dasharray:3 3;pointer-events:none}.scribble-surface--page{z-index:45;width:100%;position:absolute;top:0;left:0}.scribble-toggle{right:max(12px, calc(var(--gutter) / 2));z-index:40;border:2px solid color-mix(in srgb, var(--crayon-red) 70%, transparent);background:color-mix(in srgb, var(--paper) 92%, transparent);color:var(--ink);font:inherit;border-radius:4px 14px 5px 12px/12px 5px 14px 4px;padding:.15rem .7rem;font-size:.95rem;position:fixed;bottom:52px}.scribble-toggle:hover{color:var(--ink-red)}.scribble-dock{z-index:70;justify-items:center;gap:.25rem;width:max-content;max-width:calc(100vw - 24px);display:grid;position:fixed;bottom:12px;left:50%;translate:-50%}.scribble-dock__hint{background:color-mix(in srgb, var(--paper) 90%, transparent);color:var(--ink-soft);border-radius:8px;margin:0;padding:0 .6rem;font-size:.9rem}.scribble-toolbar{border:2px solid var(--crayon-graphite);background:var(--paper);border-radius:16px 6px 14px 8px/8px 14px 6px 16px;align-items:center;gap:.5rem;max-width:100%;padding:.45rem .7rem;display:flex;overflow-x:auto;box-shadow:0 6px 18px #4632142e}:root[data-theme=dark] .scribble-toolbar{box-shadow:0 6px 18px #0006}.scribble-toolbar__group{flex:none;align-items:center;gap:.3rem;display:flex}.scribble-toolbar__group+.scribble-toolbar__group{border-left:2px dashed color-mix(in srgb, var(--ink-soft) 45%, transparent);padding-left:.5rem}.scribble-toolbar button,.scribble-toolbar a{font:inherit}.scribble-toolbar__crayon{border:1.5px solid var(--crayon-graphite);background:linear-gradient(#ffffff8c, #ffffff8c) 0 58% / 100% 28% no-repeat, var(--c);clip-path:polygon(50% 0,100% 22%,100% 100%,0 100%,0 22%);border-radius:7px 7px 2px 2px;width:14px;height:30px;padding:0;transition:transform .15s;transform:translateY(4px)}.scribble-toolbar__crayon[aria-checked=true]{transform:translateY(-3px)}:root[data-theme=dark] .scribble-toolbar__crayon{background:linear-gradient(90deg, #ffffff73 0 22%, transparent 45%, #00000024 88%), var(--c);clip-path:none;border:1px solid #00000059;border-radius:3px 7px 5px 5px/2px 7px 4px 4px;width:12px;height:28px}.scribble-toolbar__size{background:0 0;border:2px solid #0000;border-radius:50%;place-items:center;width:28px;height:28px;padding:0;display:grid}.scribble-toolbar__size[aria-checked=true]{border-color:var(--ink-soft)}.scribble-toolbar__size span{border-radius:50%}.scribble-toolbar__text{color:var(--ink);white-space:nowrap;background:0 0;border:0;border-radius:8px;flex:none;padding:.1rem .5rem;font-size:1rem;text-decoration:none}.scribble-toolbar__text:hover,.scribble-toolbar__text[aria-pressed=true]{background:color-mix(in srgb, var(--crayon-yellow) 30%, transparent)}.scribble-toolbar__modes{border:1.5px solid color-mix(in srgb, var(--ink-soft) 50%, transparent);border-radius:10px;flex:none;padding:2px;display:flex}.scribble-toolbar__mode{color:var(--ink-soft);white-space:nowrap;background:0 0;border:0;border-radius:8px;padding:0 .45rem;font-size:.92rem}.scribble-toolbar__mode[aria-checked=true]{background:color-mix(in srgb, var(--eraser-colour) 45%, transparent);color:var(--ink)}.scribble-toolbar__text:disabled{opacity:.4}.scribble-toolbar__done{color:var(--ink-green)}@media (prefers-reduced-motion:reduce){.scribble-toolbar__crayon{transition:none}}.sketchpad{grid-template-rows:auto minmax(0,1fr);height:100svh;display:grid}.sketchpad__top{padding:.75rem var(--gutter) 0;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.5rem 1.5rem;display:flex}.sketchpad__title{font-size:inherit;margin:0}.sketchpad__links{align-items:center;gap:.75rem;display:flex}.sketchpad__theme{background:0 0;border:0;padding:.3rem}.sketchpad__theme svg{width:28px}.sketchpad__back{color:var(--ink);-webkit-text-decoration:underline wavy var(--crayon-red);text-decoration:underline wavy var(--crayon-red);text-underline-offset:5px}.sketchpad__sheet{margin:.75rem var(--gutter) 6.5rem;border:2px dashed color-mix(in srgb, var(--ink-soft) 40%, transparent);border-radius:10px;position:relative;overflow:hidden}.sketchpad__sheet .scribble-surface{pointer-events:auto;touch-action:none;position:absolute;inset:0}.scribble-surface__layer{transform-origin:0 0;width:100%;height:100%}.scribble-surface__layer.is-moving{will-change:transform}.sketchpad__view{z-index:1;border:2px solid color-mix(in srgb, var(--ink-soft) 45%, transparent);background:color-mix(in srgb, var(--paper) 92%, transparent);border-radius:12px 5px 10px 6px/6px 10px 5px 12px;align-items:center;gap:.1rem;padding:.1rem .3rem;display:flex;position:absolute;top:8px;right:8px}.sketchpad__view button{min-width:32px;color:var(--ink);font:inherit;background:0 0;border:0;border-radius:8px;padding:.1rem .4rem;font-size:1rem}.sketchpad__view button:hover,.sketchpad__view button[aria-pressed=true]{background:color-mix(in srgb, var(--crayon-yellow) 30%, transparent)}.sketchpad__zoom{text-align:center;min-width:3.4em}.scribble-surface__editor{outline:1.5px dashed color-mix(in srgb, var(--ink-soft) 60%, transparent);outline-offset:4px;min-width:2ch;font-family:var(--font-hand);white-space:pre;resize:none;cursor:text;background:0 0;border:0;border-radius:3px;margin:0;padding:0;position:absolute;overflow:hidden}.sketchpad__starters{z-index:1;width:min(30rem,100% - 2rem);color:var(--ink-soft);font-family:var(--font-hand);text-align:center;pointer-events:none;font-size:1.15rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.sketchpad__starters p{margin:0 0 .6rem}.sketchpad__starters ul{flex-wrap:wrap;justify-content:center;gap:.5rem .7rem;margin:0 0 .6rem;padding:0;list-style:none;display:flex}.sketchpad__starters button{border:2px dashed color-mix(in srgb, var(--crayon-purple) 70%, transparent);background:color-mix(in srgb, var(--paper) 85%, transparent);color:var(--ink);font:inherit;pointer-events:auto;cursor:pointer;border-radius:14px 6px 12px 8px/8px 12px 6px 14px;padding:.2rem .85rem}.sketchpad__starters button:hover,.sketchpad__starters button:focus-visible{background:color-mix(in srgb, var(--crayon-purple) 14%, var(--paper));border-style:solid}.sketchpad__starters-or{opacity:.8;font-size:1rem}.sketchpad__thinking{z-index:1;border:2px solid color-mix(in srgb, var(--crayon-purple) 55%, transparent);background:color-mix(in srgb, var(--paper) 92%, transparent);color:var(--ink-soft);font-family:var(--font-hand);white-space:nowrap;pointer-events:none;border-radius:16px 8px 14px 10px/10px 14px 8px 16px;align-items:center;gap:.4rem;padding:.2rem .7rem .2rem .3rem;font-size:1.05rem;display:flex;position:absolute}.sketchpad__thinking-doodle{width:38px;height:38px;display:inline-block}.sketchpad__thinking-doodle svg{width:100%;height:100%}.scribble-surface__link{font-family:var(--font-hand);white-space:nowrap;text-underline-offset:.25em;cursor:pointer;line-height:1.2;-webkit-text-decoration:underline wavy;text-decoration:underline wavy;text-decoration-thickness:1px;animation:.4s ease-out backwards answer-link-in;position:absolute}.scribble-surface__link:hover,.scribble-surface__link:focus-visible{text-decoration-style:solid}@keyframes answer-link-in{0%{opacity:0}}.scribble-surface__extras{display:contents}.scribble-surface__picture{box-sizing:border-box;padding:calc(5px * var(--z,1)) calc(5px * var(--z,1)) calc(14px * var(--z,1));box-shadow:0 calc(2px * var(--z,1)) calc(8px * var(--z,1)) #00000038;cursor:pointer;background:#fffdf8;transition:rotate .2s;animation:.5s ease-out backwards answer-picture-in;display:block;position:absolute;rotate:-2deg}.scribble-surface__picture:hover{rotate:0deg}.scribble-surface__picture img{object-fit:cover;object-position:top;width:100%;height:100%;display:block}.scribble-surface__picture:before{content:"";top:calc(-9px * var(--z,1));width:34%;height:calc(20px * var(--z,1));background:#f0e2b4bf;position:absolute;left:50%;translate:-50%;rotate:3deg;box-shadow:0 1px 2px #00000014}@keyframes answer-picture-in{0%{opacity:0;translate:0 calc(-10px * var(--z,1));rotate:-8deg}}@media (prefers-reduced-motion:reduce){.scribble-surface__picture{animation:none}}