.hat-editor{color:#173c34;background:#f4efdf;border-radius:18px;padding:16px;position:relative;box-shadow:0 12px 32px #0002}.hat-stage{aspect-ratio:1;touch-action:none;-webkit-user-select:none;user-select:none;background:#e9e1c8;border-radius:16px;outline:none;width:100%;position:relative;overflow:hidden}.hat-stage:focus-visible{box-shadow:0 0 0 3px #f4efdf, 0 0 0 5px var(--gold)}.hat-stage.has-photo{cursor:default;background:repeating-conic-gradient(#e6dec4 0 25%, #efe8d2 0 50%) 0 0 / 22px 22px}.hat-stage.has-photo.is-selected{cursor:grab}.hat-stage.is-dragging{cursor:grabbing}.hat-stage__canvas{width:100%;height:100%;display:block}.hat-drop{color:inherit;font:inherit;text-align:center;cursor:pointer;background:#fffaf066;border:2px dashed #173c3440;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:24px;display:flex;position:absolute;inset:0}.hat-drop:hover{border-color:#ad414599}.hat-drop:focus-visible{outline:3px solid var(--gold);outline-offset:-6px}.hat-drop img{filter:drop-shadow(0 8px 10px #173c3426);width:min(46%,190px);height:auto}.hat-drop strong{margin-top:6px;font-size:19px;line-height:1.3}.hat-drop>span:not(.btn){color:#526c5e;font-size:13px;line-height:1.5}.hat-drop__cta{pointer-events:none;margin-top:8px}.hat-editor__file{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute}.hat-stage__scan{color:var(--text);background:#0b2522e6;border-radius:12px;align-items:center;gap:10px;padding:10px 14px;font-size:13px;line-height:1.4;display:flex;position:absolute;inset:auto 12px 12px}.hat-stage__spinner{border:2px solid #f5f8f455;border-top-color:var(--gold);border-radius:50%;flex:none;width:18px;height:18px;animation:.8s linear infinite hat-spin}@keyframes hat-spin{to{rotate:360deg}}.hat-editor__status{color:#526c5e;text-align:center;min-height:20px;margin-top:12px;font-size:13px;line-height:1.5}.hat-picker{border:0;min-width:0;margin:12px 0 0;padding:0}.hat-picker legend{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.hat-picker__grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;display:grid}.hat-option{aspect-ratio:1;cursor:pointer;background:#fffaf0;border-radius:12px;place-items:center;padding:6px;transition:box-shadow .15s,transform .15s;display:grid;position:relative;box-shadow:inset 0 0 0 1px #173c341a}.hat-option:hover{transform:translateY(-2px)}.hat-option.is-selected{background:#fff;box-shadow:inset 0 0 0 2px #ad4145,0 4px 10px #173c341f}.hat-option input{opacity:0;pointer-events:none;margin:0;position:absolute;inset:0}.hat-option:has(input:focus-visible){outline:3px solid var(--gold);outline-offset:2px}.hat-option img{object-fit:contain;width:100%;height:100%}.hat-controls{gap:10px;margin-top:14px;display:grid}.hat-tools{overscroll-behavior-x:contain;scrollbar-width:thin;flex-wrap:nowrap;gap:6px;min-width:0;padding-block:2px;display:flex;overflow-x:auto}.hat-tool{white-space:nowrap;color:#173c34;min-height:36px;font:600 13px var(--font);cursor:pointer;background:#173c340f;border:0;border-radius:18px;flex:none;align-items:center;gap:5px;padding:0 12px;display:inline-flex}.hat-tool:hover{background:#173c341c}.hat-tool[aria-pressed=true]{color:#f4efdf;background:#173c34}.hat-tool:disabled{cursor:default;opacity:.4}.hat-tool--icon{justify-content:center;width:36px;padding:0}.hat-tool .icon{flex:none;font-size:18px}.hat-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:4px;display:grid}.hat-actions .btn{justify-content:center;width:100%;min-width:0;height:auto;min-height:48px;padding-inline:20px;font-size:15px}.hat-actions .btn--outline{color:#173c34;border-color:#173c3440}.hat-actions .btn--outline:hover:not(:disabled){background:#173c340d}.hat-actions .btn--link{color:#526c5e}.hat-actions .btn--link:hover:not(:disabled){color:#173c34;background:#173c340a}.hat-editor__privacy{color:#526c5e;text-align:start;grid-template-columns:16px minmax(0,1fr);align-items:start;gap:6px;width:fit-content;max-width:100%;margin:14px auto 0;font-size:12px;line-height:1.4;display:grid}.hat-editor__privacy .icon{color:#2f6b4f;margin-top:.4px;font-size:16px;line-height:1}.hat-editor__privacy>span{min-width:0}@media (width<=699px){.hat-editor{border-radius:20px;padding:12px}.hat-stage:not(.has-photo){aspect-ratio:4/3}.hat-drop{gap:6px;padding:16px}.hat-drop img{width:min(34%,130px)}.hat-drop strong{font-size:17px}.hat-picker__grid{gap:4px}.hat-option{border-radius:8px;padding:4px}.hat-actions{grid-template-columns:1fr}}@media (prefers-reduced-motion:reduce){.hat-stage__spinner{animation:none}}.hat-stage__scan>span[role=status]{flex:1;min-width:0}.hat-stage__scan button{min-height:40px;color:inherit;font:600 12px var(--font);cursor:pointer;background:0 0;border:1px solid #f4efdf66;border-radius:8px;flex:none;padding:6px 10px}.hat-selection{pointer-events:none;position:absolute;inset:0}.hat-selection__frame{border:1.5px solid #f4efdf;position:absolute;box-shadow:0 0 0 1px #173c3499}.hat-selection__frame:before,.hat-selection__frame:after{content:"";background:#173c34;border:1px solid #f4efdf;border-radius:50%;width:7px;height:7px;position:absolute;left:-4px}.hat-selection__frame:before{top:-4px}.hat-selection__frame:after{bottom:-4px}.hat-handle{color:#173c34;pointer-events:auto;touch-action:none;cursor:grab;background:0 0;border:0;place-items:center;width:44px;height:44px;padding:0;display:grid;position:absolute;transform:translate(-50%,-50%)}.hat-handle:before{content:"";background:#fffaf0;border:1px solid #173c3466;border-radius:50%;position:absolute;inset:6px;box-shadow:0 2px 6px #0003}.hat-handle .icon{font-size:19px;line-height:1;position:relative}.hat-handle--resize{cursor:nwse-resize}.hat-handle:focus-visible{outline:none}.hat-handle:focus-visible:before{outline:3px solid var(--gold);outline-offset:2px}.hat-handle:disabled{pointer-events:none;opacity:.5}.hat-crop-dialog.modal--paper .modal__body{width:min(480px,100%)}.hat-crop-dialog .modal__title{padding-inline:28px}.hat-crop-dialog .modal__sub{color:#526c5e;padding-inline:8px;font-size:13px}.hat-crop__frame{aspect-ratio:1;touch-action:none;-webkit-user-select:none;user-select:none;cursor:grab;background:#e9e1c8;border-radius:12px;width:min(100%,340px,44dvh);margin:20px auto 12px;position:relative;overflow:hidden}.hat-crop__frame:active{cursor:grabbing}.hat-crop__frame:focus-visible{outline-offset:3px;outline:3px solid #ad4145}.hat-crop__frame canvas{pointer-events:none;width:100%;height:100%;display:block}.hat-crop__grid{pointer-events:none;border-radius:inherit;background:linear-gradient(90deg,#0000 33.15%,#fff7 33.15% 33.45%,#0000 33.45% 66.45%,#fff7 66.45% 66.75%,#0000 66.75%),linear-gradient(#0000 33.15%,#fff7 33.15% 33.45%,#0000 33.45% 66.45%,#fff7 66.45% 66.75%,#0000 66.75%);border:1px solid #fff8;position:absolute;inset:0}.hat-crop__tools{justify-content:center;align-items:center;gap:16px;display:flex}.hat-crop__tools .icon-btn{color:#173c34}.hat-crop__tools .icon-btn:disabled{opacity:.35}.hat-crop__actions{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:10px;margin-top:18px;display:grid}.hat-crop__actions .btn{white-space:normal;height:auto;min-height:48px;padding:12px 16px}.hat-crop__actions .btn--outline{color:#173c34;border-color:#173c3440}@media (width<=380px){.hat-crop__actions{grid-template-columns:1fr}}