:root{--cream: #fffbf5;--cream-dark: #f5ede3;--parchment: #ede0d0;--chocolate: #2d1b0e;--chocolate-light: #6b5344;--terracotta: #c4572a;--terracotta-light: #e07b55;--raspberry: #b5636a;--font: system-ui, "Segoe UI", sans-serif}*{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%}body{font-family:var(--font);background:var(--cream);color:var(--chocolate);line-height:1.5}button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.35}input{font:inherit}#app{max-width:80rem;margin:0 auto;padding:1.5rem 1rem 3rem}.heading{display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap}.top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.25rem}h1{font-size:1.75rem;font-weight:650;letter-spacing:-.01em}h1 a{color:inherit;text-decoration:none}.tagline{font-size:.9rem;color:var(--chocolate-light)}.lang-nav{display:flex;gap:.25rem;flex-shrink:0;border:1px solid var(--parchment);border-radius:999px;padding:.15rem;background:#fff}.lang-nav a{padding:.25rem .7rem;border-radius:999px;font-size:.75rem;font-weight:600;text-decoration:none;color:var(--chocolate-light)}.lang-nav a.active{background:var(--terracotta);color:#fff}.layout{display:flex;flex-direction:column;gap:1.5rem}.stage-wrap{position:relative}.stage{position:relative;overflow:hidden;aspect-ratio:3 / 2;min-height:400px;max-width:100%;border:1px solid var(--parchment);border-radius:1rem;background:#fffdf9}.stage-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}.legend-overlay{position:absolute;left:1.25rem;top:1.25rem;z-index:2;pointer-events:none;-webkit-user-select:none;user-select:none;font-size:13px;font-weight:500;line-height:18px;color:var(--chocolate-light);white-space:pre}.callout-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;transition:opacity .15s}.reset-view-btn[hidden]{display:none}.reset-view-btn{position:absolute;right:1rem;top:1rem;z-index:2;display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border:1px solid var(--parchment);border-radius:999px;background:#fffbf5e6;color:var(--chocolate-light);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:color .15s,border-color .15s}.reset-view-btn:hover{border-color:var(--terracotta);color:var(--terracotta)}.mode-toggle{position:absolute;left:1rem;bottom:1rem;z-index:2;display:flex;gap:.125rem;padding:.125rem;border:1px solid var(--parchment);border-radius:999px;background:#fffbf5e6;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);box-shadow:0 1px 2px #2d1b0e0f}.mode-toggle button{padding:.25rem .75rem;border-radius:999px;font-size:.75rem;font-weight:600;letter-spacing:.02em;color:var(--chocolate-light)}.mode-toggle button.active{background:var(--terracotta);color:#fff}.sidebar{display:flex;flex-direction:column;gap:.75rem}.btn{display:flex;align-items:center;justify-content:center;gap:.4rem;padding:.65rem .75rem;border-radius:.75rem;font-size:.875rem;font-weight:500;white-space:nowrap;transition:color .15s,border-color .15s,background .15s}.btn-primary{background:var(--terracotta);color:#fff;font-weight:600}.btn-primary:hover{background:var(--terracotta-light)}.btn-outline{border:1px solid var(--parchment);background:#fffc;color:var(--chocolate-light)}.btn-outline:hover{border-color:var(--terracotta);color:var(--terracotta)}.action-row{display:flex;gap:.5rem}.action-row .btn{flex:1}.tier-list{display:flex;flex-direction:column;gap:.5rem}.tier-item{flex-shrink:0;border:1px solid var(--parchment);border-radius:.75rem;background:#fffc;padding:.75rem}.tier-head{display:flex;align-items:center;gap:.4rem;margin-bottom:.5rem}.drag-handle{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border-radius:.5rem;color:#6b534466;cursor:grab;touch-action:none;transition:color .15s,background .15s}.drag-handle:hover{background:#ede0d080;color:var(--chocolate-light)}.drag-handle:active{cursor:grabbing}.tier-item.dragging{opacity:.5;transform:scale(.97);border-color:#c4572a66}.drop-indicator{flex-shrink:0;height:3px;margin:.15rem 0;border-radius:999px;background:var(--terracotta)}.tier-name{font-size:.875rem;font-weight:600;margin-right:.25rem}.spacer{flex:1}.icon-btn{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border:1px solid var(--parchment);border-radius:.5rem;background:#f5ede380;color:var(--chocolate-light);transition:color .15s,border-color .15s}.icon-btn:hover:enabled{border-color:var(--terracotta);color:var(--terracotta)}.icon-btn.danger{border:none;background:none}.icon-btn.danger:hover:enabled{color:var(--raspberry)}.tier-inputs{display:flex;align-items:center;gap:.35rem}.input-sep{color:var(--chocolate-light);opacity:.5;font-size:.875rem}.dim-input{display:flex;flex:1;align-items:center;overflow:hidden;border:1px solid var(--parchment);border-radius:.5rem;transition:border-color .15s}.dim-input:focus-within{border-color:var(--terracotta)}.dim-input.error{border-color:var(--raspberry);background:#b5636a0d}.dim-input input{width:100%;min-width:0;padding:.35rem .4rem;border:none;outline:none;background:transparent;text-align:center;font-size:.875rem;color:var(--chocolate)}.dim-unit{padding:.35rem .4rem;border-left:1px solid var(--parchment);background:#f5ede380;font-size:.75rem;color:var(--chocolate-light);opacity:.8}.panel-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.4rem .75rem;border:1px solid var(--parchment);border-radius:.75rem;background:#fffc}.row-label{font-size:.7rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#6b534499}.check-label{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.7rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#6b534499}.check-label input{accent-color:var(--terracotta)}.swatch-group{display:flex;gap:.375rem;transition:opacity .15s}.swatch-group.dimmed{opacity:.4;pointer-events:none}.swatch{position:relative;display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:999px;overflow:hidden;transition:transform .15s}.swatch:hover{transform:scale(1.1)}.swatch.active{transform:none;box-shadow:0 0 0 1px #fff,0 0 0 3px var(--terracotta)}.swatch-bordered{border:1px solid rgba(237,224,208,.6)}.swatch .rainbow{width:100%;height:100%}.swatch-color-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:none;padding:0;cursor:pointer}.custom-dot{position:absolute;width:.75rem;height:.75rem;border-radius:999px;box-shadow:0 0 0 1px #fffc}.segmented{display:flex;gap:.125rem;padding:.125rem;border-radius:999px;background:#f5ede399}.segmented button{line-height:1;padding:.25rem .65rem;border-radius:999px;font-size:.7rem;font-weight:600;letter-spacing:.02em;color:var(--chocolate-light)}.segmented button.active{background:var(--terracotta);color:#fff}.add-dialog{margin:auto;width:min(24rem,calc(100vw - 2rem));border:1px solid var(--parchment);border-radius:1rem;background:var(--cream);color:var(--chocolate);padding:1.5rem;box-shadow:0 20px 40px #2d1b0e26}.add-dialog::backdrop{background:#2d1b0e33;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.dialog-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem}.dialog-head h3{font-size:1.2rem;font-weight:600}.dialog-head .icon-btn{border:none;background:none}.shape-row{display:flex;gap:.5rem;margin-bottom:1.25rem}.shape-row button{flex:1;padding:.6rem 1rem;border:1px solid var(--parchment);border-radius:.75rem;font-size:.875rem;font-weight:500;color:var(--chocolate-light);transition:color .15s,border-color .15s,background .15s}.shape-row button.active{border-color:var(--terracotta);background:#c4572a1a;color:var(--terracotta)}.dialog-fields{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1.5rem}.dialog-field label{display:block;font-size:.875rem;font-weight:500;color:var(--chocolate-light)}.dialog-field input{width:100%;margin-top:.25rem;padding:.6rem .75rem;border:1px solid var(--parchment);border-radius:.75rem;background:#fff;font-size:.875rem;color:var(--chocolate);outline:none;transition:border-color .15s}.dialog-field input:focus{border-color:var(--terracotta)}.dialog-field.error input{border-color:var(--raspberry);background:#b5636a0d}.share-preview{display:block;width:100%;aspect-ratio:1200 / 630;margin-bottom:.75rem;border:1px solid var(--parchment);border-radius:.75rem;background:var(--cream-dark);object-fit:cover}.dialog-options{display:flex;flex-direction:column;gap:.5rem}.dialog-foot{display:flex;gap:.75rem}.dialog-foot .btn{flex:1}@media(min-width:1024px){html,body{height:100%;overflow:hidden}#app{height:100%;display:flex;flex-direction:column;padding-bottom:1.5rem}.layout{flex:1;min-height:0;flex-direction:row;align-items:stretch}.stage-wrap{flex:1;min-width:0}.stage{height:100%;aspect-ratio:auto;min-height:0}.sidebar-root{position:relative;width:21rem;flex-shrink:0}.sidebar{position:absolute;inset:0;overflow:hidden}.tier-list{flex:1;min-height:0;overflow-y:auto}.btn{padding:.5rem .75rem}}