body.app{background:#1a140d;color:#e8dcc4}.hp-page{min-height:100vh;display:grid;grid-template-rows:auto 1fr}.hp-nav{display:grid;grid-template-columns:auto 1fr auto;gap:1.5rem;align-items:center;padding:.8rem 1.2rem;border-bottom:1px solid #3a2e22;background:#14100b}.hp-back{font-family:ui-monospace,IBM Plex Mono,monospace;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:#c8b88a;text-decoration:none}.hp-back:hover{color:#ffd66b}.hp-title{font-family:Fraunces,serif;font-style:italic;font-size:1.1rem;color:#f1e7cd}.hp-controls{display:inline-flex;gap:1rem;align-items:center}.hp-field{display:inline-flex;flex-direction:column;gap:.2rem;font-family:ui-monospace,IBM Plex Mono,monospace;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:#9b8c6a}.hp-field select,.hp-field input{font-family:ui-monospace,IBM Plex Mono,monospace;font-size:.85rem;color:#f1e7cd;background:#221b13;border:1px solid #3a2e22;border-radius:3px;padding:.35rem .55rem;min-width:180px;text-transform:none;letter-spacing:0}.hp-zoom-controls{display:inline-flex;gap:.3rem;align-items:center}.hp-zoom-controls button{width:30px;height:30px;border-radius:3px;border:1px solid #3a2e22;background:#221b13;color:#c8b88a;cursor:pointer}.hp-zoom-controls button:hover{color:#ffd66b;border-color:#5a4632}#zoom-level{font-family:ui-monospace,IBM Plex Mono,monospace;font-size:.72rem;color:#9b8c6a;min-width:3.5em;text-align:center}.hp-main{display:grid;grid-template-columns:1fr 360px;min-height:0}@media(max-width:900px){.hp-main{grid-template-columns:1fr;grid-template-rows:60vh auto}}.hp-stage{position:relative;overflow:hidden;background:#0c0905;touch-action:none;cursor:crosshair;user-select:none}.hp-canvas{position:absolute;inset:0;transform-origin:0 0;will-change:transform;display:flex;align-items:center;justify-content:center}.hp-img{max-width:100%;max-height:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none}.hp-fx{position:absolute;pointer-events:none}.hp-rect{position:absolute;border:2px solid var(--c, #ffd66b);background:var(--c, rgba(255,200,80,.15));background-color:color-mix(in srgb,var(--c) 18%,transparent);box-shadow:0 0 0 1px #00000080;pointer-events:none}.hp-rect-label{position:absolute;left:-2px;top:-22px;white-space:nowrap;font-family:ui-monospace,IBM Plex Mono,monospace;font-size:.6rem;letter-spacing:.1em;color:#fff;background:var(--c);padding:2px 6px;border-radius:2px 2px 0 0;text-transform:uppercase}.hp-ghost-rect{position:absolute;border:2px dashed #fff;background:#ffffff14;pointer-events:none}.hp-sidebar{padding:1rem 1.2rem;border-left:1px solid #3a2e22;background:#14100b;overflow-y:auto;display:flex;flex-direction:column;gap:.6rem}.hp-sidebar h3{font-family:ui-monospace,IBM Plex Mono,monospace;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:#9b8c6a;margin:.4rem 0 .2rem;font-weight:500}.hp-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.25rem}.hp-list li{display:grid;grid-template-columns:14px auto 1fr auto;gap:.5rem;align-items:center;padding:.35rem .55rem;background:#221b13;border-radius:3px;font-family:ui-monospace,IBM Plex Mono,monospace;font-size:.75rem}.hp-list code{color:#f1e7cd}.hp-list .hp-coords{color:#9b8c6a;font-size:.7rem;text-align:right}.hp-swatch{width:12px;height:12px;border-radius:50%;background:var(--c);border:1px solid #fff3}.hp-del{width:22px;height:22px;border:1px solid #3a2e22;background:transparent;color:#9b8c6a;border-radius:3px;cursor:pointer}.hp-del:hover{color:#ff6b6b;border-color:#ff6b6b}.hp-empty{color:#6b5e44;font-style:italic;grid-template-columns:1fr!important;background:transparent!important}.hp-actions{display:inline-flex;gap:.4rem;flex-wrap:wrap}.hp-btn,.hp-btn-ghost{font-family:ui-monospace,IBM Plex Mono,monospace;font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;padding:.45rem .7rem;border-radius:3px;cursor:pointer;border:1px solid #3a2e22}.hp-btn{background:#ffd66b;color:#1a140d;border-color:#ffd66b}.hp-btn:hover{background:#ffe39a}.hp-btn-ghost{background:transparent;color:#c8b88a}.hp-btn-ghost:hover{color:#ffd66b;border-color:#5a4632}#json-out{font-family:ui-monospace,IBM Plex Mono,monospace;font-size:.72rem;color:#e8dcc4;background:#0c0905;border:1px solid #3a2e22;border-radius:3px;padding:.6rem;resize:vertical;width:100%}.hp-hint{font-size:.72rem;color:#6b5e44;font-style:italic;line-height:1.45;margin:0}.hp-hint kbd{font-family:ui-monospace,IBM Plex Mono,monospace;font-size:.68rem;padding:1px 5px;border:1px solid #3a2e22;border-radius:3px;color:#c8b88a;background:#221b13;font-style:normal}.hp-code{font-family:ui-monospace,IBM Plex Mono,monospace;font-size:.7rem;color:#ffd66b;background:#221b13;padding:1px 5px;border-radius:3px;font-style:normal;user-select:all}