:root{--hh-green:#0b6839;--hh-green-deep:#094f2b;--hh-yellow:#fee101;--hh-cream:#fffbe8;--hh-pink:#ff0080;--hh-red:#e40014;--hh-black:#0a0a0a;--font-display:"Imbue", "Georgia", serif;--font-mono:"Victor Mono", "Courier New", monospace;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body{background:var(--hh-green);color:var(--hh-black);font-family:var(--font-mono);-webkit-tap-highlight-color:transparent;margin:0;padding:0}#root{flex-direction:column;min-height:100dvh;display:flex}button,input,select{font-family:var(--font-mono)}::selection{background:var(--hh-yellow);color:var(--hh-black)}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.app{background:var(--hh-green);flex-direction:column;flex:1;min-height:100dvh;display:flex}.app__header{color:var(--hh-cream);align-items:center;gap:14px;padding:20px 20px 8px;display:flex}.app__logo{border-radius:10px;flex-shrink:0;width:52px;height:52px}.app__header h1{font-family:var(--font-display);color:var(--hh-yellow);margin:0 0 2px;font-size:26px;font-weight:800}.app__header p{color:var(--hh-cream);opacity:.85;margin:0;font-size:13px;line-height:1.4}.format-toggle{gap:8px;padding:12px 20px;display:flex}.format-toggle__btn{border:2px solid var(--hh-yellow);color:var(--hh-yellow);cursor:pointer;background:0 0;border-radius:12px;flex:1;padding:12px 10px;font-size:14px;font-weight:700}.format-toggle__btn.is-active{background:var(--hh-yellow);color:var(--hh-black)}.stage{background:var(--hh-cream);border-radius:24px 24px 0 0;flex-direction:column;flex:1;align-items:center;gap:18px;padding:24px 18px 100px;display:flex}.stage__canvas-wrap{justify-content:center;width:100%;display:flex;position:relative}.stage__canvas{touch-action:none;cursor:grab;background:var(--hh-green);border-radius:20px;box-shadow:0 8px 24px #0000002e}.stage__canvas--square{border-radius:50%;width:min(80vw,380px);height:min(80vw,380px)}.stage__canvas--portrait{aspect-ratio:1080/1350;width:min(84vw,340px);height:auto}.stage__upload-cta{background:var(--hh-yellow);border:3px solid var(--hh-black);color:var(--hh-black);font-family:var(--font-mono);cursor:pointer;border-radius:14px;padding:12px 20px;font-weight:700;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.error-text{color:var(--hh-red);text-align:center;margin:0;font-size:13px;font-weight:600}.hint-text{color:var(--hh-green-deep);text-align:center;margin:0;font-size:13px}.hint-text--muted{opacity:.65}.controls{flex-direction:column;gap:10px;width:100%;max-width:380px;display:flex}.control-row{color:var(--hh-green-deep);align-items:center;gap:12px;font-size:13px;font-weight:600;display:flex}.control-row span{min-width:66px}.control-row input[type=range]{accent-color:var(--hh-green);flex:1}.fields{flex-direction:column;gap:12px;width:100%;max-width:380px;display:flex}.field{flex-direction:column;gap:6px;display:flex}.field span{letter-spacing:.03em;text-transform:uppercase;color:var(--hh-green-deep);font-size:12px;font-weight:700}.field input[type=text]{border:2px solid var(--hh-green);background:#fff;border-radius:10px;padding:10px 12px;font-size:15px}.field input[type=text]:focus{outline:2px solid var(--hh-pink);outline-offset:1px}.title-row{align-items:center;gap:10px;display:flex}.title-pill{background:var(--hh-yellow);border:2px solid var(--hh-black);text-align:center;border-radius:999px;flex:1;padding:8px 14px;font-size:13px;font-weight:700}.btn{font-weight:700;font-family:var(--font-mono);cursor:pointer;border:none;border-radius:12px}.btn--tiny{background:var(--hh-green);color:var(--hh-cream);padding:8px 12px;font-size:12px}.share-bar{width:100%;max-width:380px;margin-top:4px;position:sticky;bottom:12px}.share-bar__buttons{gap:10px;display:flex}.share-bar__buttons .btn{flex:1;padding:15px 10px;font-size:15px}.btn--ghost{color:var(--hh-green);border:2px solid var(--hh-green);background:#fff}.btn--primary{background:var(--hh-pink);color:#fff}.btn--primary:disabled{opacity:.6;cursor:default}.share-bar__hint{text-align:center;color:var(--hh-green-deep);margin:8px 0 0;font-size:12px}@media (width>=520px){.app__header h1{font-size:30px}}