.jss-app{height:100%;padding-top:max(56px, env(safe-area-inset-top,0px));padding-bottom:calc(env(safe-area-inset-bottom,0px) + 88px);background:var(--jss-paper);color:var(--jss-ink);font-family:var(--font-sans), Inter, system-ui, sans-serif;flex-direction:column;display:flex;position:relative;inset:0;overflow:hidden auto}.jss-heading{font-family:var(--font-heading), "Space Grotesk", Inter, sans-serif;letter-spacing:-.03em}.jss-shapes{pointer-events:none;z-index:0;position:absolute;inset:0;overflow:hidden}.jss-shapes i{animation:jss-float 7s var(--jss-ease) infinite alternate;opacity:.9;position:absolute}.jss-shapes .s-a{background:var(--jss-red);clip-path:polygon(0 0,100% 0,100% 100%);width:120px;height:120px;top:96px;right:-22px}.jss-shapes .s-b{background:var(--jss-indigo);border-radius:0 0 0 100%;width:76px;height:76px;animation-delay:-2s;top:22px;right:60px}.jss-shapes .s-c{background:var(--jss-green);border-radius:50%;width:84px;height:84px;animation-delay:-1s;bottom:120px;left:-28px}.jss-shapes .s-d{background:var(--jss-yellow);clip-path:polygon(0 0,100% 0,0 100%);width:52px;height:52px;animation-delay:-3s;bottom:70px;left:50%}.jss-shell{z-index:1;flex-direction:column;flex:1;width:min(100vw,980px);min-height:0;margin:0 auto;display:flex;position:relative}.jss-topbar{justify-content:space-between;align-items:flex-start;gap:14px;padding:16px 16px 6px;display:flex}.jss-mark{text-transform:uppercase;letter-spacing:.08em;align-items:center;gap:8px;margin-bottom:4px;font-size:11px;font-weight:800;display:inline-flex}.jss-mark i{background:var(--jss-red);width:10px;height:10px;box-shadow:6px 0 0 var(--jss-yellow);border-radius:50%}.jss-title{max-width:9ch;margin:0;font-size:clamp(30px,9vw,52px);line-height:.92}.jss-stage{border:3px solid var(--jss-ink);background:linear-gradient(90deg, var(--jss-paper) 0 54%, var(--jss-peach) 54% 72%, var(--jss-surface) 72%);min-height:340px;box-shadow:var(--jss-shadow-md);touch-action:none;border-radius:4px;flex:1;margin:4px 14px 10px;position:relative;overflow:hidden}.jss-tracks{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.jss-track{fill:none;stroke:var(--jss-ink);stroke-width:3px;stroke-linecap:round;stroke-dasharray:4 12;opacity:.55}.jss-track.is-active{stroke:var(--jss-red);stroke-dasharray:none;opacity:1;animation:1.4s ease-in-out infinite jss-pulse}.jss-piece{touch-action:none;cursor:grab;z-index:5;transition:left var(--motion-dur,.22s) var(--jss-ease), top var(--motion-dur,.22s) var(--jss-ease), filter .18s var(--jss-ease);background:0 0;border:none;place-items:center;padding:0;display:grid;position:absolute;transform:translate(-50%,-50%)}.jss-piece svg{filter:drop-shadow(3px 3px #1a1a1a38);pointer-events:none}.jss-piece.is-selected svg{filter:drop-shadow(0 0 0 var(--jss-ink)) drop-shadow(5px 5px 0 var(--jss-ink))}.jss-piece.is-dragging{z-index:20;cursor:grabbing;transition:none}.jss-piece.is-dragging svg{filter:drop-shadow(8px 8px #1a1a1a47)}.jss-piece:not(.is-dragging){animation:jss-pop .24s var(--jss-ease)}.jss-spark{background:var(--jss-yellow);border:1.5px solid var(--jss-ink);pointer-events:none;z-index:30;border-radius:50%;width:11px;height:11px;animation:.6s ease-out forwards jss-spark;position:absolute;transform:translate(-50%,-50%)}.jss-palette{border:3px solid var(--jss-ink);background:var(--jss-indigo);box-shadow:var(--jss-shadow-md);border-radius:4px;grid-template-columns:repeat(5,1fr);gap:8px;margin:0 14px 10px;padding:10px;display:grid}.jss-swatch{border:2px solid var(--jss-ink);background:var(--jss-paper);min-height:62px;box-shadow:var(--jss-shadow-sm);touch-action:none;cursor:grab;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:2px;padding:6px 2px;display:flex;position:relative}.jss-swatch:active{box-shadow:1px 1px 0 var(--jss-ink);transform:translate(2px,2px)}.jss-swatch svg{pointer-events:none}.jss-swatch-label{text-transform:uppercase;letter-spacing:.04em;font-size:9px;font-weight:800}.jss-toolbar{grid-template-columns:repeat(4,1fr);gap:7px;margin:0 14px 12px;display:grid}.jss-tool{border:2px solid var(--jss-ink);background:var(--jss-paper);min-height:52px;box-shadow:var(--jss-shadow-sm);text-align:center;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:3px;padding:6px 3px;font-size:10.5px;font-weight:800;line-height:1.05;display:flex}.jss-tool.is-primary{background:var(--jss-red);color:#fff}.jss-tool:active:not(:disabled){box-shadow:1px 1px 0 var(--jss-ink);transform:translate(2px,2px)}.jss-tool:disabled{opacity:.4;box-shadow:none;cursor:not-allowed}.jss-btn{border:2px solid var(--jss-ink);min-height:44px;box-shadow:var(--jss-shadow-sm);background:var(--jss-paper);border-radius:12px;justify-content:center;align-items:center;gap:8px;padding:12px 16px;font-weight:800;display:inline-flex}.jss-btn:active:not(:disabled){box-shadow:1px 1px 0 var(--jss-ink);transform:translate(2px,2px)}.jss-btn.is-red{background:var(--jss-red);color:#fff}.jss-btn.is-yellow{background:var(--jss-yellow)}.jss-btn.is-indigo{background:var(--jss-indigo);color:#fff}.jss-btn:disabled{opacity:.5}.jss-palette-row{flex-wrap:wrap;gap:8px;padding:0 14px 12px;display:flex}.jss-palette-chip{border:2px solid var(--jss-ink);background:var(--jss-surface);box-shadow:var(--jss-shadow-sm);border-radius:999px;align-items:center;gap:7px;padding:7px 12px;font-size:12px;font-weight:800;display:inline-flex}.jss-palette-chip.is-active{background:var(--jss-yellow)}.jss-palette-chip:active{box-shadow:1px 1px 0 var(--jss-ink);transform:translate(2px,2px)}.jss-chip-dots{gap:2px;display:inline-flex}.jss-chip-dots span{border:1px solid var(--jss-ink);border-radius:50%;width:10px;height:10px}.jss-sheet-scrim{z-index:40;background:#1a1a1a73;justify-content:center;align-items:flex-end;animation:.2s jss-fade;display:flex;position:fixed;inset:0}.jss-sheet{background:var(--jss-surface);border:3px solid var(--jss-ink);width:min(100vw,560px);max-height:88svh;padding:18px 16px calc(18px + env(safe-area-inset-bottom,0px));animation:jss-rise .24s var(--jss-ease);border-bottom:none;border-radius:18px 18px 0 0;overflow-y:auto;box-shadow:0 -10px #1a1a1a1a}.jss-sheet h2{font-family:var(--font-heading), "Space Grotesk", sans-serif;margin:0 0 4px;font-size:26px;line-height:1}@media (min-width:700px){.jss-sheet-scrim{align-items:center}.jss-sheet{border-bottom:3px solid var(--jss-ink);border-radius:18px}}.jss-cover{z-index:1;text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:18px;padding:24px 20px;display:flex;position:relative}.jss-cover-title{margin:0;font-size:clamp(40px,13vw,84px);line-height:.9}.jss-cover-sub{max-width:32ch;color:var(--jss-muted);font-size:15px;font-weight:600}.jss-cover-preview{aspect-ratio:5/4;border:3px solid var(--jss-ink);width:min(88vw,420px);box-shadow:var(--jss-shadow-md);background:linear-gradient(120deg, var(--jss-paper) 0 55%, var(--jss-peach) 55% 74%, var(--jss-surface) 74%);border-radius:6px}.jss-guide-scrim{z-index:60;background:#1a1a1a80;justify-content:center;align-items:center;padding:20px;animation:.2s jss-fade;display:flex;position:fixed;inset:0}.jss-guide-card{background:var(--jss-surface);border:3px solid var(--jss-ink);width:min(92vw,460px);box-shadow:var(--jss-shadow-md);border-radius:18px;padding:20px 18px}.jss-guide-demo{border:2px solid var(--jss-ink);background:var(--jss-paper);border-radius:10px;height:180px;margin:12px 0 16px;position:relative;overflow:hidden}.jss-guide-hand{width:46px;height:46px;animation:jss-drag 3.2s var(--jss-ease) infinite;place-items:center;display:grid;position:absolute}.jss-guide-arc{fill:none;stroke:var(--jss-red);stroke-width:3px}.jss-recipe-list{flex-wrap:wrap;gap:8px;margin:10px 0;display:flex}.jss-recipe-pill{border:2px solid var(--jss-ink);background:var(--jss-paper);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:700}.jss-try{border:2px dashed var(--jss-ink);background:var(--jss-paper);border-radius:12px;margin:12px 0;padding:12px;font-size:14px}.jss-field{flex-direction:column;gap:4px;margin-bottom:12px;display:flex}.jss-field label{text-transform:uppercase;letter-spacing:.05em;font-size:11px;font-weight:800}.jss-input,.jss-textarea{border:2px solid var(--jss-ink);background:var(--jss-paper);border-radius:10px;width:100%;padding:10px 12px;font-family:inherit;font-size:14px}.jss-textarea{resize:vertical;min-height:120px;font-family:SFMono-Regular,Consolas,monospace;font-size:12px;line-height:1.5}.jss-error{color:var(--jss-red);margin-top:4px;font-size:12px;font-weight:700}@keyframes jss-float{to{transform:translateY(14px)rotate(2deg)}}@keyframes jss-pop{0%{transform:translate(-50%,-50%)scale(.7)}70%{transform:translate(-50%,-50%)scale(1.12)}to{transform:translate(-50%,-50%)scale(1)}}@keyframes jss-spark{to{transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.1);opacity:0}}@keyframes jss-rise{0%{opacity:0;transform:translateY(20px)}}@keyframes jss-fade{0%{opacity:0}}@keyframes jss-pulse{50%{opacity:.6}}@keyframes jss-drag{0%{top:30%;left:20%}40%{top:58%;left:62%}55%{top:58%;left:62%}70%{top:52%;left:62%}to{top:30%;left:20%}}@media (prefers-reduced-motion:reduce){.jss-shapes i,.jss-track.is-active,.jss-guide-hand{animation:none}}.jss-spin{animation:.9s linear infinite jss-rotate}@keyframes jss-rotate{to{transform:rotate(360deg)}}.jss-share-note{text-align:center;color:var(--jss-muted);margin:8px 0 0;font-size:12px;font-weight:700;line-height:1.4}@media (prefers-reduced-motion:reduce){.jss-spin{animation-duration:2.4s}}