:root{
  --cream:#f6ecd9; --cream2:#efe0c3; --ink:#2b2320; --graphite:#6b5f57;
  --coral:#e8836b; --sage:#a9c9b4; --mustard:#f4d67a; --blue:#7fa6c9; --lilac:#c9a0c9; --pink:#f2b8a2;
  --wood:#d9b27c;
  --hand:'Caveat Brush','Bradley Hand','Segoe Print',cursive;
  --body:'Patrick Hand','Bradley Hand','Segoe Print',sans-serif;
  --wob:255px 15px 225px 15px/15px 225px 15px 255px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:#d9cbb0}
body{font-family:var(--body);color:var(--ink);font-size:16px;line-height:1.25}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
#app{max-width:480px;margin:0 auto;min-height:100vh;background:var(--cream);position:relative;padding-bottom:84px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .35  0 0 0 0 .25  0 0 0 .1 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  box-shadow:0 0 40px rgba(0,0,0,.18)}
h1,h2,h3{font-family:var(--hand);font-weight:400;margin:0}
.top{padding:14px 16px 4px;display:flex;align-items:baseline;justify-content:space-between}
.logo{font-family:var(--hand);font-size:28px;letter-spacing:.5px}
.logo small{font-family:var(--body);font-size:13px;color:var(--graphite);margin-left:6px}
.hint{font-size:14px;color:var(--graphite);padding:0 16px 8px}
.wobbly{border:2px solid var(--ink);border-radius:var(--wob)}

/* chips */
.chips{display:flex;gap:8px;overflow-x:auto;padding:8px 16px 4px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;border:2px solid var(--ink);border-radius:var(--wob);padding:6px 12px;background:var(--cream);font-size:16px;white-space:nowrap;transition:transform .15s}
.chip:hover{transform:rotate(-2deg) scale(1.04)}
.chip.on{background:var(--mustard);box-shadow:2px 2px 0 var(--ink)}
.sub{display:flex;gap:6px;flex-wrap:wrap;padding:6px 16px 2px}
.pill{border:1.5px dashed var(--ink);border-radius:20px;padding:3px 10px;font-size:14px;background:transparent}
.pill.on{background:var(--sage);border-style:solid}
.sec{padding:6px 16px}
.sec h2{font-size:22px}
.sec .cnt{font-family:var(--body);font-size:14px;color:var(--graphite);margin-left:6px}

/* rows */
.row{display:flex;gap:10px;align-items:center;padding:8px;margin:8px 16px;border:2px solid var(--ink);border-radius:var(--wob);background:#fff9;text-align:left;width:calc(100% - 32px)}
.row .t{font-size:17px}
.row .n{font-size:14px;color:var(--graphite)}
.row .tag{font-size:12px;border:1.5px solid var(--ink);border-radius:10px;padding:0 6px;margin-left:4px;white-space:nowrap}
.thumb{flex:none;width:52px;height:62px}

/* sketch paper */
.sketch{position:relative;background:#fffdf6;border:1.5px solid var(--ink);border-radius:3px;
  background-image:repeating-linear-gradient(#fffdf6 0 9px,#b8d4e655 9px 10px);box-shadow:1px 2px 0 #0002;overflow:hidden;aspect-ratio:5/6}
.sketch .doodle{position:absolute;inset:8% 8%;width:84%;height:84%}
.spark{aspect-ratio:5/6;border:1.5px solid var(--ink);border-radius:3px;display:grid;place-items:center;font-family:var(--hand);font-size:26px;position:relative;box-shadow:1px 2px 0 #0002}
.spark::after{content:"";position:absolute;inset:4px;border:1.5px dashed #fff9}
.doodle{filter:url(#wob)}

/* clothesline */
.line{position:relative;margin:2px 10px 18px;padding-top:6px}
.line .wire{position:absolute;left:-4px;right:-4px;top:2px;height:26px;width:calc(100% + 8px);overflow:visible;pointer-events:none}
.pegs{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;position:relative}
.peg{position:relative;display:block;text-align:center;padding:0 2px;transform-origin:50% 0;transition:transform .2s}
.peg:nth-child(1){margin-top:9px;transform:rotate(-2deg)}
.peg:nth-child(2){margin-top:13px;transform:rotate(1.5deg)}
.peg:nth-child(3){margin-top:15px;transform:rotate(-1deg)}
.peg:nth-child(4){margin-top:13px;transform:rotate(2deg)}
.peg:nth-child(5){margin-top:9px;transform:rotate(-1.5deg)}
.peg:hover{transform:rotate(4deg)}
.peg .pin{position:absolute;top:-10px;left:50%;margin-left:-5px;width:10px;height:24px;background:var(--wood);border:1.5px solid var(--ink);border-radius:3px;z-index:2}
.peg .pin::after{content:"";position:absolute;left:3px;top:10px;width:2px;height:12px;background:var(--ink);opacity:.5}
.peg .nm{font-size:12px;line-height:1.05;margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:25px}
.dots{display:flex;justify-content:center;gap:2px;margin-top:2px}
.dots i{width:6px;height:6px;border:1.2px solid var(--ink);border-radius:50%;background:transparent}
.dots i.c{background:var(--ink)}
.dots i.na{border-style:dotted;opacity:.4}
.more{display:grid;place-items:center;aspect-ratio:5/6;margin-top:6px;background:var(--wood);border:2px solid var(--ink);border-radius:4px 14px 14px 4px;font-family:var(--hand);font-size:18px;transform:rotate(3deg);clip-path:none;position:relative}
.more::before{content:"";position:absolute;left:6px;top:50%;width:7px;height:7px;border:2px solid var(--ink);border-radius:50%;background:var(--cream);transform:translateY(-50%)}
.linehead{display:flex;justify-content:space-between;align-items:baseline;padding:0 16px}
.linehead h2{font-size:24px}
.linehead span{font-size:14px;color:var(--graphite)}
.linehead .why{font-size:13px}

/* sheet */
#back{position:fixed;inset:0;background:#2b232066;display:none;z-index:20}
#sheet{position:fixed;left:50%;bottom:0;transform:translateX(-50%) translateY(100%);width:100%;max-width:480px;max-height:90vh;overflow:auto;background:var(--cream);border:2px solid var(--ink);border-bottom:0;border-radius:24px 24px 0 0;padding:16px 16px 40px;z-index:30;transition:transform .25s;
  background-image:inherit}
#sheet.open{transform:translateX(-50%) translateY(0)}
.x{position:absolute;right:14px;top:10px;font-family:var(--hand);font-size:26px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 10px;margin-top:12px}
.gate{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:6px 8px;margin:4px 0;border:1.5px dashed var(--ink);border-radius:10px}
.gate .box{width:20px;height:20px;border:2px solid var(--ink);border-radius:5px;display:grid;place-items:center;font-size:15px;background:#fff9}
.gate.na{opacity:.45}
.next{font-family:var(--hand);font-size:24px;line-height:1.1;margin:6px 0 4px;padding:8px 10px;background:var(--mustard);border:2px solid var(--ink);border-radius:var(--wob);transform:rotate(-.6deg)}
.lbl{font-size:13px;color:var(--graphite);text-transform:lowercase;letter-spacing:.5px;margin-top:12px}
.stagebadge{display:inline-block;font-family:var(--hand);font-size:17px;border:2px solid var(--ink);border-radius:var(--wob);padding:0 10px;background:var(--sage)}

/* quilt */
.quilt-wrap{margin:8px 14px;padding:10px;border:2px solid var(--ink);border-radius:10px;background:#8a5f6a;box-shadow:3px 3px 0 var(--ink);background-image:repeating-linear-gradient(45deg,#ffffff14 0 4px,transparent 4px 8px)}
.quilt{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;grid-auto-flow:dense}
.patch{position:relative;aspect-ratio:1;border:0;overflow:hidden;transition:transform .2s;display:block;width:100%}
.patch.big{grid-column:span 2;grid-row:span 2}
.patch:hover{transform:rotate(-2deg) scale(1.04);z-index:3}
.patch .doodle{position:absolute;inset:14%;width:72%;height:72%}
.patch svg.st{position:absolute;inset:0;width:100%;height:100%}
.patch:hover svg.st rect{animation:stitch .8s linear infinite}
@keyframes stitch{to{stroke-dashoffset:-14}}
.patch .cap{position:absolute;left:0;right:0;bottom:0;padding:2px 4px;font-size:12px;background:#fffdf6dd;border-top:1.5px solid var(--ink);text-align:center;transform:translateY(100%);transition:transform .2s}
.patch:hover .cap,.patch:focus .cap{transform:none}
.draw{position:absolute;right:5px;top:3px;font-size:13px;color:#fff;font-family:var(--hand)}
.pat-plaid{background-image:linear-gradient(90deg,#ffffff47 28%,transparent 28%),linear-gradient(#ffffff47 28%,transparent 28%);background-size:22px 22px}
.pat-dots{background-image:radial-gradient(#ffffffaa 2.2px,transparent 2.8px);background-size:13px 13px}
.pat-stripe{background-image:repeating-linear-gradient(45deg,#ffffff50 0 6px,transparent 6px 12px)}
.pat-denim{background-image:repeating-linear-gradient(0deg,#0000001a 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,#ffffff1c 0 1px,transparent 1px 3px)}
.pat-solid{background-image:repeating-linear-gradient(0deg,#0000000f 0 1px,transparent 1px 4px)}

/* tabs */
#tabs{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;display:flex;justify-content:space-around;padding:8px 8px 14px;background:var(--cream2);border-top:2px solid var(--ink);z-index:10}
#tabs button{font-family:var(--hand);font-size:20px;padding:2px 12px;border-radius:var(--wob);border:2px solid transparent}
#tabs button.on{border-color:var(--ink);background:var(--mustard)}
#fab{position:fixed;bottom:74px;right:max(14px,calc(50% - 226px));width:54px;height:54px;border-radius:50%;background:var(--coral);border:2px solid var(--ink);font-family:var(--hand);font-size:34px;line-height:1;box-shadow:2px 3px 0 var(--ink);z-index:15;display:grid;place-items:center;transition:transform .2s}
#fab:hover{transform:rotate(90deg)}
.field{width:100%;border:2px solid var(--ink);border-radius:10px;padding:8px;font:inherit;background:#fffdf6;margin-top:6px}
.btn{font-family:var(--hand);font-size:20px;border:2px solid var(--ink);border-radius:var(--wob);padding:4px 16px;background:var(--sage);box-shadow:2px 2px 0 var(--ink);margin-top:10px}
#toast{position:fixed;left:50%;bottom:130px;transform:translateX(-50%);background:var(--ink);color:var(--cream);padding:6px 14px;border-radius:20px;font-size:15px;opacity:0;transition:opacity .3s;z-index:40;pointer-events:none}
#toast.on{opacity:1}
.empty{padding:20px 16px;color:var(--graphite);text-align:center;font-family:var(--hand);font-size:20px}
.callout{margin:8px 16px;padding:8px 10px;border:2px dashed var(--ink);border-radius:var(--wob);background:#fff8;font-size:15px}
.grp{margin:10px 16px 2px;font-family:var(--hand);font-size:22px;display:flex;justify-content:space-between;align-items:baseline}
.grp small{font-family:var(--body);font-size:14px;color:var(--graphite)}
.tick{display:flex;gap:10px;align-items:center;margin:4px 16px;padding:6px 8px;border:1.5px dashed var(--ink);border-radius:10px;width:calc(100% - 32px);text-align:left}
.tick.done{opacity:.45;text-decoration:line-through}
.tick .box{flex:none;width:20px;height:20px;border:2px solid var(--ink);border-radius:5px;display:grid;place-items:center;background:#fff9}
.swatches{display:flex;gap:6px;margin-top:6px}
.swatches i{width:30px;height:30px;border:1.5px solid var(--ink);border-radius:3px}

/* ---- app additions ---- */
.sketch img,.spark img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.patch .patch-img{position:absolute;inset:7%;width:86%;height:86%;object-fit:cover;border:0}
.field,select.field,textarea.field{font-size:16px}
textarea.field{min-height:64px;resize:vertical}
.fr{display:flex;gap:8px;align-items:center}
.fr>*{flex:1;min-width:0}
.btn.sm{font-size:16px;padding:2px 12px;margin-top:6px}
.btn.ghost{background:transparent;box-shadow:none}
.btn.danger{background:var(--pink)}
.rm{font-family:var(--hand);font-size:20px;padding:0 6px}
.chk{display:flex;gap:8px;align-items:center;padding:3px 0}
.chk input{width:18px;height:18px}
.savebadge{font-size:13px;color:var(--graphite)}
.imgpick{position:relative;cursor:pointer}
.imgpick::after{content:"📷";position:absolute;right:3px;bottom:3px;font-size:16px;background:#fffdf6;border:1.5px solid var(--ink);border-radius:50%;width:24px;height:24px;display:grid;place-items:center}
.pickrow{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.stat{font-size:14px;color:var(--graphite);padding:0 16px}