:root{--ink:#342548;--muted:#78698d;--paper:#f9f1df;--red:#f14d98;--line:#b9a7cf;--yellow:#fff19a;--blue:#bde4f1;--white:#fffdf5;--purple:#7953a9;--lavender:#d7c4ed;--aqua:#72d7d0}
.topbar{background:#fff9ec;border-bottom:3px double #a98bbf;box-shadow:0 2px 0 rgba(121,83,169,.09)}
.brand{gap:12px;color:var(--purple);font-family:"Comic Sans MS","Comic Sans",cursive;font-size:22px;letter-spacing:-1px;text-shadow:1px 1px 0 #fff}
.brand-mark{width:37px;height:31px;position:relative;display:block;transform:rotate(-5deg);filter:drop-shadow(2px 2px 0 #e9b6d2)}
.brand-mark .cloud-puff{display:block;position:absolute;background:var(--lavender);border:2px solid var(--purple);border-radius:50%}
.brand-mark .one{width:19px;height:19px;left:2px;top:8px}.brand-mark .two{width:22px;height:22px;left:10px;top:2px}.brand-mark .three{width:17px;height:17px;right:0;top:10px}
.brand-mark b{position:absolute;width:8px;height:16px;background:#ffe04b;left:17px;top:22px;clip-path:polygon(48% 0,100% 0,69% 42%,100% 42%,20% 100%,38% 55%,0 55%);z-index:2}
.board-title{font-family:"Comic Sans MS","Comic Sans",cursive;color:var(--purple);font-size:15px}.save-state{color:var(--red);font-family:"Comic Sans MS","Comic Sans",cursive;text-transform:none;letter-spacing:.2px}
.share-button{background:var(--red);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);transform:rotate(1deg);border-radius:3px}.share-button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.viewport{background-color:#fffaf0;background-image:linear-gradient(90deg,transparent 40px,rgba(241,77,152,.25) 41px,transparent 42px),repeating-linear-gradient(0deg,transparent 0,transparent 21px,rgba(114,175,210,.25) 22px,rgba(114,175,210,.25) 23px);background-size:auto}
.canvas-note{font-family:"Comic Sans MS","Comic Sans",cursive;color:#9b6bb1;letter-spacing:.5px;transform:rotate(-1deg)}
.canvas:after{content:'♥  call jen  ★  buy glitter pens  ☺';position:absolute;left:75px;top:89px;font-family:"Comic Sans MS","Comic Sans",cursive;color:rgba(241,77,152,.48);font-size:12px;transform:rotate(-3deg);pointer-events:none}
.item{filter:drop-shadow(4px 5px 0 rgba(83,56,109,.18))}.item.selected{outline:3px dashed var(--red);outline-offset:5px}
.note{border:1px solid rgba(95,75,52,.18);font-family:"Comic Sans MS","Comic Sans",cursive;box-shadow:inset 0 -20px 30px rgba(225,187,35,.08)}.note.blue{background:#c7eef3}.note.white{background:#f5e5ff}.note .eyebrow{color:var(--red);font-family:"Comic Sans MS","Comic Sans",cursive;font-weight:bold;text-transform:lowercase;font-size:11px}.note [contenteditable]{font-size:16px}
.image-card{border:1px solid #d6c2df;padding:10px 10px 33px;transform:rotate(1.5deg)}.image-card .caption{font-family:"Comic Sans MS","Comic Sans",cursive;color:var(--purple)}
.link-card{border:2px solid var(--purple);border-left:7px solid var(--red);background:#fff6fb;box-shadow:5px 5px 0 #c6e8eb}.link-card .link-domain{color:var(--red)}
.links .link-line{stroke:var(--purple);stroke-width:2;stroke-dasharray:3 5;fill:none;pointer-events:none;vector-effect:non-scaling-stroke;stroke-linecap:round}.links .link-hit{stroke:transparent;stroke-width:24;fill:none;pointer-events:stroke;cursor:pointer;vector-effect:non-scaling-stroke}.links .link-line.selected-link{stroke:var(--red);stroke-width:4;stroke-dasharray:none;filter:drop-shadow(0 0 3px rgba(241,77,152,.45))}.links .link-endpoint{fill:#ffe04b;stroke:var(--red);stroke-width:2;pointer-events:none;vector-effect:non-scaling-stroke}
.toolbar{background:var(--purple);border:2px solid var(--ink);border-radius:4px;box-shadow:6px 6px 0 rgba(52,37,72,.35);transform:translateX(-50%) rotate(-.4deg)}.tool{color:#f4eafd;border-radius:2px}.tool:hover,.tool.active{background:var(--red);color:white}.tool kbd{color:#e7d9ef}.toolbar-divider{background:#bba2d5}
.zoom-panel{background:#fff5fb;border:2px solid var(--purple);border-radius:4px;box-shadow:3px 3px 0 #c9b5df}.paste-hint{font-family:"Comic Sans MS","Comic Sans",cursive;color:var(--purple);transform:rotate(-2deg)}.paste-hint kbd{background:#fff3a8;border:2px solid var(--purple);box-shadow:2px 2px 0 #cbb5dd}.toast{background:var(--red);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);font-family:"Comic Sans MS","Comic Sans",cursive}.item .delete{background:var(--red);border:2px solid var(--ink)}
.card-menu{position:fixed;z-index:100;width:190px;padding:13px;background:#fff9ec;border:2px solid var(--purple);box-shadow:6px 6px 0 rgba(52,37,72,.3);display:none;transform:rotate(-1deg);font-family:"Comic Sans MS","Comic Sans",cursive}.card-menu.open{display:block}.menu-label{font-size:12px;font-weight:bold;color:var(--purple);margin-bottom:9px}.colour-wheel{display:flex;align-items:center;justify-content:center;width:52px;height:52px;margin:0 auto 10px;border-radius:50%;background:conic-gradient(#f14d98,#ffe04b,#72d7d0,#768ee7,#b76ddb,#f14d98);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);cursor:pointer;position:relative}.colour-wheel input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.colour-wheel span{display:grid;place-items:center;width:29px;height:29px;border-radius:50%;background:#fff;color:var(--purple);font-size:17px;pointer-events:none}.colour-swatches{display:flex;justify-content:center;gap:7px}.colour-swatches button{width:22px;height:22px;padding:0;border-radius:50%;border:1.5px solid var(--ink);background:var(--swatch);cursor:pointer}.colour-swatches button:hover{transform:scale(1.18)}.reset-colour{display:block;margin:11px auto 0;border:0;background:none;color:#8b769c;text-decoration:underline;font:10px "Comic Sans MS","Comic Sans",cursive;cursor:pointer}
.board-library{position:fixed;z-index:15;inset:68px 0 0;background-color:#fffaf0;background-image:linear-gradient(90deg,transparent 40px,rgba(241,77,152,.22) 41px,transparent 42px),repeating-linear-gradient(0deg,transparent 0,transparent 21px,rgba(114,175,210,.22) 22px,rgba(114,175,210,.22) 23px);overflow:auto;display:none}.board-library.open{display:block}.library-inner{max-width:1050px;margin:0 auto;padding:72px 44px 100px}.library-heading{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:43px}.library-kicker{display:inline-block;color:var(--red);font:14px "Comic Sans MS","Comic Sans",cursive;transform:rotate(-3deg)}.library-heading h1{margin:3px 0 2px;color:var(--purple);font:700 46px/1 "Comic Sans MS","Comic Sans",cursive;letter-spacing:-2px;text-shadow:2px 2px 0 #efbad5}.library-heading p{margin:10px 0 0;color:#8b769c;font:14px "Comic Sans MS","Comic Sans",cursive}.new-board{padding:13px 19px;background:var(--red);color:#fff;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);font:700 14px "Comic Sans MS","Comic Sans",cursive;cursor:pointer;transform:rotate(1deg)}.new-board:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}.board-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(245px,1fr));gap:30px}.board-tile{position:relative;min-height:190px;padding:22px;background:#fff19a;border:2px solid var(--ink);box-shadow:7px 8px 0 rgba(74,52,92,.25);cursor:pointer;text-align:left;transform:rotate(-.8deg);transition:.15s}.board-tile:nth-child(3n+2){background:#c7eef3;transform:rotate(.7deg)}.board-tile:nth-child(3n+3){background:#f5e5ff;transform:rotate(-.2deg)}.board-tile:hover{transform:translateY(-5px) rotate(0);box-shadow:8px 13px 0 rgba(74,52,92,.22)}.tile-doodle{font-size:28px;color:var(--red);margin-bottom:35px}.board-tile h2{font:700 20px/1.2 "Comic Sans MS","Comic Sans",cursive;color:var(--ink);margin:0 52px 8px 0}.board-meta{font:10px DM Mono,monospace;color:#78698d;text-transform:uppercase}.tile-actions{position:absolute;right:10px;top:10px;display:flex;gap:4px}.tile-actions button{width:28px;height:28px;border:1.5px solid var(--ink);background:#fff9ec;color:var(--purple);cursor:pointer;font-weight:bold}.tile-actions button:hover{background:var(--red);color:#fff}.empty-boards{grid-column:1/-1;padding:60px;text-align:center;border:2px dashed #a98bbf;color:#8b769c;font:16px "Comic Sans MS","Comic Sans",cursive}@media(max-width:650px){.library-inner{padding:42px 22px}.library-heading{align-items:flex-start;gap:20px}.library-heading h1{font-size:34px}.new-board{white-space:nowrap}.board-grid{grid-template-columns:1fr}}

/* editing controls */
.history-button{width:34px;height:34px;border:1.5px solid var(--purple);background:#fff9ec;color:var(--purple);font-size:18px;cursor:pointer;box-shadow:2px 2px 0 #d8c2ea}.history-button:disabled{opacity:.28;box-shadow:none;cursor:default}.menu-rule{height:1px;background:#d8c6df;margin:12px 0}.rotation-controls{display:flex;justify-content:center;gap:7px}.rotation-controls button{border:1.5px solid var(--ink);background:#fff;color:var(--purple);height:28px;min-width:35px;cursor:pointer}.resize-handle{display:none;position:absolute;right:-9px;bottom:-9px;width:21px;height:21px;border:2px solid var(--ink);background:#ffe04b;border-radius:50%;cursor:nwse-resize;z-index:8;padding:0}.resize-handle:after{content:'↘';font-size:11px;color:var(--ink);position:absolute;inset:1px}.item.selected .resize-handle{display:block}.image-card img{max-height:none}.item.resizing{outline:3px solid var(--aqua);outline-offset:5px}

/* connector editor */
.connector-menu{position:fixed;z-index:105;width:226px;padding:14px;background:#fff9ec;border:2px solid var(--purple);box-shadow:6px 6px 0 rgba(52,37,72,.3);display:none;font-family:"Comic Sans MS","Comic Sans",cursive;transform:rotate(.6deg)}.connector-menu.open{display:block}.connector-row{display:flex;gap:9px;align-items:center;margin-bottom:10px}.connector-menu select,.connector-menu input[type=text]{width:100%;border:1.5px solid var(--purple);background:#fff;padding:7px;color:var(--ink);font:12px "Comic Sans MS","Comic Sans",cursive}.mini-colour{display:block;width:34px;height:34px;flex:0 0 34px;border-radius:50%;background:conic-gradient(#f14d98,#ffe04b,#72d7d0,#7953a9,#f14d98);border:2px solid var(--ink);position:relative;cursor:pointer}.mini-colour input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}.mini-colour span{position:absolute;inset:7px;border-radius:50%;background:var(--connector-preview,#7953a9);pointer-events:none}.connector-field{display:block;color:#78698d;font-size:10px;margin:9px 0}.connector-field select,.connector-field input{display:block;margin-top:4px}.danger-button{width:100%;margin-top:9px;padding:8px;border:1.5px solid var(--ink);background:var(--red);color:#fff;font:700 11px "Comic Sans MS","Comic Sans",cursive;cursor:pointer}.links .link-label-bg{fill:#fff9ec;stroke:var(--purple);stroke-width:1;pointer-events:none}.links .link-label{fill:var(--ink);font:11px "Comic Sans MS","Comic Sans",cursive;text-anchor:middle;dominant-baseline:central;pointer-events:none}

/* 90s decoration tray */
.decor-panel{position:fixed;z-index:40;right:24px;bottom:91px;width:310px;padding:16px;background:#fff9ec;border:3px solid var(--ink);box-shadow:8px 8px 0 var(--red);display:none;transform:rotate(.4deg);font-family:"Comic Sans MS","Comic Sans",cursive}.decor-panel.open{display:block}.decor-heading{display:flex;justify-content:space-between;align-items:center;color:var(--purple);font-weight:700;font-size:18px}.decor-heading button{border:0;background:none;color:var(--red);font-size:25px;cursor:pointer}.decor-section{margin-top:14px}.decor-label{font-size:10px;color:#8b769c;text-transform:uppercase;letter-spacing:.8px;margin-bottom:7px}.decor-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.sticker-preview{height:48px;border:1.5px solid var(--ink);background:#fff;cursor:pointer;overflow:hidden}.sticker-preview:hover{transform:rotate(-4deg) scale(1.08)}.sticker-preview.word{background:#000;color:#ffe04b;font-weight:900;font-size:18px;text-shadow:2px 2px 0 var(--red)}.sticker-preview.script{color:var(--red);font:700 16px "Comic Sans MS",cursive;text-shadow:1px 1px white}.sticker-preview.icon{color:var(--red);font-size:25px}.sticker-preview.smile{background:#ffe04b;color:#000;font-size:25px;border-radius:50%}.tape-check{background:repeating-conic-gradient(#f14d98 0 25%,#fff 0 50%) 0/14px 14px}.tape-zebra{background:repeating-linear-gradient(65deg,#111 0 5px,#fff 5px 9px)}.paper-options{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.paper-choice{height:48px;border:1.5px solid var(--ink);color:var(--ink);font:10px "Comic Sans MS",cursive;cursor:pointer}.paper-choice.active{outline:3px solid var(--red);outline-offset:2px}.paper-choice.lined{background:repeating-linear-gradient(#fffaf0 0 10px,#bde4f1 11px)}.paper-choice.composition{color:#fff;background-color:#111;background-image:radial-gradient(#fff 1px,transparent 1px);background-size:5px 5px}.paper-choice.memphis{background:linear-gradient(135deg,#000 0 35%,#f14d98 35% 53%,#72d7d0 53% 72%,#ffe04b 72%)}
.viewport.paper-composition{background-color:#111;background-image:radial-gradient(rgba(255,255,255,.7) .8px,transparent 1px),radial-gradient(rgba(255,255,255,.35) .8px,transparent 1px);background-position:0 0,4px 4px;background-size:8px 8px}.viewport.paper-composition .canvas-note{color:#fff}.viewport.paper-memphis{background-color:#0d0d0f;background-image:linear-gradient(35deg,transparent 70%,rgba(241,77,152,.28) 71% 77%,transparent 78%),radial-gradient(circle at 20% 30%,rgba(114,215,208,.4) 0 6px,transparent 7px),linear-gradient(120deg,transparent 80%,rgba(255,224,75,.25) 81% 84%,transparent 85%);background-size:130px 95px,85px 85px,170px 120px}.viewport.paper-memphis .canvas-note{color:#ffe04b}
.sticker{min-width:70px;min-height:55px;background:transparent;filter:none;display:grid;place-items:center;padding:8px;font-family:"Comic Sans MS","Comic Sans",cursive}.sticker .sticker-art{white-space:nowrap;line-height:1}.sticker.sticker-90s{background:#0d0d0f;border:3px solid #fff;color:#ffe04b;font-size:36px;font-weight:900;font-style:italic;text-shadow:3px 3px 0 var(--red),-2px -2px 0 var(--aqua);padding:17px 22px}.sticker.sticker-angel{color:var(--red);font-size:36px;font-weight:900;text-shadow:3px 3px 0 #fff,-2px -2px 0 #fff,4px 5px 0 var(--ink)}.sticker.sticker-heart,.sticker.sticker-flower,.sticker.sticker-sparkles{color:var(--red);font-size:58px;text-shadow:3px 3px 0 #fff,5px 5px 0 var(--ink)}.sticker.sticker-flower{color:#fff;background:var(--red);border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 3px var(--ink)}.sticker.sticker-smiley{width:78px;height:78px;min-width:78px;min-height:78px;border-radius:50%;background:#ffe04b;border:3px solid var(--ink);font-size:54px;color:#111}.sticker.sticker-tape-check,.sticker.sticker-tape-zebra{width:180px;height:38px;min-height:38px;min-width:120px;border:0;opacity:.83}.sticker.sticker-tape-check{background:repeating-conic-gradient(#f14d98 0 25%,#fff 0 50%) 0/20px 20px}.sticker.sticker-tape-zebra{background:repeating-linear-gradient(65deg,#111 0 8px,#fff 8px 14px);border:1px solid #555}
@media(max-width:720px){.history-button{display:none}.decor-panel{right:12px;left:12px;width:auto}.toolbar .tool{width:49px}}

/* original MindStorm 90s sticker pack */
.decor-panel{max-height:calc(100vh - 180px);overflow-y:auto;overscroll-behavior:contain}
.raster-preview,.raster-sticker .raster-art{background-image:url('assets/mindstorm-sticker-pack.png');background-repeat:no-repeat;background-size:400% 300%;background-color:transparent}
.raster-preview{border-color:#d8c5dd;background-color:#fffdf7}
.raster-sticker{width:124px;min-width:70px;min-height:70px;aspect-ratio:1;padding:0;border:0;background:transparent;filter:drop-shadow(3px 4px 2px rgba(40,20,50,.18))}
.raster-sticker .raster-art{width:100%;height:100%;pointer-events:none}
.sticker-roller-skate.raster-preview,.sticker-roller-skate .raster-art{background-position:0 0}
.sticker-boombox.raster-preview,.sticker-boombox .raster-art{background-position:33.333% 0}
.sticker-flip-phone.raster-preview,.sticker-flip-phone .raster-art{background-position:66.667% 0}
.sticker-cassette.raster-preview,.sticker-cassette .raster-art{background-position:100% 0}
.sticker-lava-lamp.raster-preview,.sticker-lava-lamp .raster-art{background-position:0 50%}
.sticker-controller.raster-preview,.sticker-controller .raster-art{background-position:33.333% 50%}
.sticker-lips.raster-preview,.sticker-lips .raster-art{background-position:66.667% 50%}
.sticker-lightning.raster-preview,.sticker-lightning .raster-art{background-position:100% 50%}
.sticker-high-top.raster-preview,.sticker-high-top .raster-art{background-position:0 100%}
.sticker-compact-disc.raster-preview,.sticker-compact-disc .raster-art{background-position:33.333% 100%}
.sticker-floppy-disk.raster-preview,.sticker-floppy-disk .raster-art{background-position:66.667% 100%}
.sticker-doodle-star.raster-preview,.sticker-doodle-star .raster-art{background-position:100% 100%}

/* board backup controls */
.library-actions{display:flex;align-items:center;gap:14px}
.backup-actions{display:flex;gap:7px}
.backup-button{padding:10px 12px;border:1.5px solid var(--purple);background:#fff9ec;color:var(--purple);box-shadow:3px 3px 0 #d8c2ea;font:700 11px "Comic Sans MS","Comic Sans",cursive;cursor:pointer}
.backup-button:hover{background:#f5e5ff;transform:translateY(-2px)}
.backup-button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #d8c2ea}
@media(max-width:760px){.library-heading{flex-direction:column;align-items:flex-start}.library-actions{width:100%;flex-wrap:wrap}.backup-actions{order:2;width:100%}.backup-button{flex:1}.new-board{order:1}}

/* supplied pattern papers */
.paper-options{grid-template-columns:repeat(2,1fr);gap:8px}.paper-choice{height:54px;background-size:cover;background-position:center;text-shadow:1px 1px 0 #fff,-1px -1px 0 #fff}.paper-choice.composition{text-shadow:none}.paper-choice.photo-paper{color:#111;font-weight:700}.paper-choice.school-supplies{background-image:linear-gradient(rgba(255,255,255,.12),rgba(255,255,255,.12)),url('assets/school-supplies.png')}.paper-choice.purple-party{background-image:linear-gradient(rgba(255,255,255,.12),rgba(255,255,255,.12)),url('assets/purple-memphis.png')}.paper-choice.electric-confetti{background-image:linear-gradient(rgba(255,255,255,.12),rgba(255,255,255,.12)),url('assets/electric-confetti.png')}.paper-choice.teal-geometry{background-image:linear-gradient(rgba(255,255,255,.12),rgba(255,255,255,.12)),url('assets/teal-geometry.png')}
.viewport.paper-school-supplies,.viewport.paper-purple-party,.viewport.paper-electric-confetti,.viewport.paper-teal-geometry{background-repeat:repeat;background-position:0 0}.viewport.paper-school-supplies{background-color:#4560a8;background-image:url('assets/school-supplies.png');background-size:270px 150px}.viewport.paper-purple-party{background-color:#9c58e9;background-image:url('assets/purple-memphis.png');background-size:270px 150px}.viewport.paper-electric-confetti{background-color:#fff;background-image:url('assets/electric-confetti.png');background-size:270px 150px}.viewport.paper-teal-geometry{background-color:#22babf;background-image:url('assets/teal-geometry.png');background-size:270px 150px}.viewport.paper-school-supplies .canvas-note,.viewport.paper-purple-party .canvas-note,.viewport.paper-electric-confetti .canvas-note,.viewport.paper-teal-geometry .canvas-note{color:#fff;background:rgba(30,20,40,.72);padding:5px 8px;border-radius:3px;text-shadow:none}