.ht-hero{padding:40px 0 8px}.ht-hero h1{font-size:clamp(2.2rem,6vw,4rem)}
.ht{padding:16px 0 56px}.ht-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:20px;align-items:start}
@media(max-width:860px){.ht-grid{grid-template-columns:1fr}}
.ht-stage{padding:16px;background:repeating-conic-gradient(#eee 0 25%,#fff 0 50%) 0 0/20px 20px;min-height:280px;display:flex;flex-direction:column;justify-content:center}
.ht-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:260px;border:2px dashed var(--magenta);border-radius:var(--radius);background:rgba(255,255,255,.9);cursor:pointer;text-align:center;padding:20px}
.ht-drop.over{background:#fff0f8}
.ht-stage canvas{width:100%;height:auto;max-height:70vh;object-fit:contain;display:block}
.ht-stage canvas[hidden]{display:none}#info{margin:8px 0 0;background:rgba(255,255,255,.85);border-radius:8px;padding:2px 8px;align-self:flex-start}
.ht-controls .lbl,.ht-controls label{font-weight:700;font-size:.92rem}
.ht-controls output{color:var(--magenta);float:right}
.ht-controls input[type=range]{width:100%;accent-color:var(--magenta)}
.seg{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:6px;margin-top:6px}
.seg label{display:block}.seg input{position:absolute;opacity:0}
.seg span{display:block;text-align:center;padding:10px 4px;border:2px solid var(--line);border-radius:999px;font-size:.85rem;cursor:pointer}
.seg input:checked+span{background:var(--grad);color:#fff;border-color:transparent}
.seg input:focus-visible+span{outline:2px solid var(--ink)}
.row2{display:flex;flex-wrap:wrap;gap:16px}.chk,.clr{display:flex;align-items:center;gap:8px}
.clr input{width:44px;height:32px;border:1px solid var(--line);border-radius:8px;padding:0;background:none}
.btn-row{display:flex;gap:10px;flex-wrap:wrap}
.ht-drop[hidden]{display:none}
.ht-modal{border:0;border-radius:var(--radius);padding:0;max-width:440px;width:calc(100% - 32px);box-shadow:0 24px 60px rgba(11,11,13,.35)}
.ht-modal::backdrop{background:rgba(11,11,13,.55)}
.ht-modal .in{padding:24px}.ht-modal h2{font-size:1.6rem;margin:0 0 6px}
.ht-modal .field{margin:12px 0}.ht-modal input[type=text],.ht-modal input[type=email]{width:100%}
.ht-modal .x{position:absolute;top:10px;right:12px;background:none;border:0;font-size:1.4rem;cursor:pointer}
.ht-msg{margin-top:10px;font-weight:600}.ht-msg.err{color:#b00020}
.ht-acct{margin-top:6px}.ht-hp{position:absolute;left:-9999px}