.hero-editor{position:fixed;z-index:975;right:max(20px,env(safe-area-inset-right));bottom:calc(max(20px,env(safe-area-inset-bottom)) + 162px);color:#171717;font:400 14px/1.4 Selecta,Arial,sans-serif;letter-spacing:0}
body:has(.glass-studio) .hero-editor{bottom:calc(max(20px,env(safe-area-inset-bottom)) + 220px)}
.hero-editor button,.hero-widget-picker button{font:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.hero-edit-trigger{height:44px}
.hero-edit-icon{display:grid;place-items:center;width:25px;height:25px;border-radius:9px;background:linear-gradient(145deg,#fff,#ddd);box-shadow:inset 0 0 0 1px #fff,0 2px 5px #0002;font-size:22px}
body:has(.button-studio.is-open,.glass-studio.is-open,.use-case-studio.is-open,.hover-studio.is-open) .hero-editor:not(:has(.hero-edit-bar:not([hidden]))){visibility:hidden}
body.is-hero-editing :is(.button-studio,.glass-studio,.use-case-studio,.hover-studio,#dock){visibility:hidden}
.hero-edit-bar{position:fixed;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);width:max-content;max-width:calc(100vw - 24px);padding:8px 10px 10px;border:1px solid #fff;border-radius:26px;background:#ffffffed;box-shadow:inset 0 0 0 1px #00000006,0 10px 40px #0002;backdrop-filter:blur(18px)}
.hero-edit-profiles,.hero-edit-actions{display:flex;justify-content:center;gap:4px}
.hero-edit-actions{flex-wrap:wrap}
.hero-edit-bar button{border:0;border-radius:999px;background:transparent;color:#555;min-height:44px;padding:9px 18px}
.hero-edit-profiles button[aria-pressed=true]{background:#ededed;color:#171717;box-shadow:inset 0 1px 3px #0001}
.hero-edit-actions .hero-edit-done{color:white;background:radial-gradient(ellipse at 50% -20%,#555,#171717 75%);box-shadow:inset 0 1px 1px #fff4,0 2px 5px #0002}
.hero-edit-bar button:disabled{opacity:.35;cursor:default}
.hero-edit-status{font-size:12px;color:#737373;text-align:center;margin:5px 10px 0}
.hero-edit-copy-fallback{box-sizing:border-box;display:block;width:100%;height:160px;max-height:25dvh;margin-top:10px;padding:12px;border:1px solid #ddd;border-radius:14px;background:#f6f6f6;color:#171717;font:400 16px/1.4 monospace;resize:none}
.hero-editor [hidden],.hero-slot[hidden],.hero-widget-picker [hidden]{display:none!important}
.deck[data-hero-editing=true] .phone{pointer-events:auto}
.deck[data-hero-editing=true] .screen.hero-home,.deck[data-hero-editing=true] .hh-rail,.deck[data-hero-editing=true] .hero-slot{pointer-events:auto}
.deck[data-hero-editing=true] .hh-rail{overflow-x:auto;mask-image:none;scrollbar-width:thin;scrollbar-color:#c8c8c8 transparent;overscroll-behavior-x:contain;touch-action:pan-x pan-y;scroll-snap-type:x proximity;scroll-padding-inline:5cqw;padding-right:5cqw}
.deck[data-hero-editing=true] .hh-cell{scroll-snap-align:start}
.hero-slot{position:absolute;z-index:6;inset:0;width:100%;height:100%;border:0;border-radius:16.67%;background:transparent;padding:0;cursor:pointer;touch-action:pan-x pan-y;-webkit-tap-highlight-color:transparent}
.hero-slot::after{content:'✎';display:grid;place-items:center;position:absolute;right:5%;top:5%;width:22%;height:22%;min-width:20px;min-height:20px;border-radius:50%;background:#fffffff2;box-shadow:0 1px 5px #0003;font:400 16px/1 Arial,sans-serif;color:#171717;pointer-events:none}
.hero-slot:active{background:#0000000a}
.hero-editor :is(button,textarea):focus-visible,.hero-slot:focus-visible,.hero-widget-picker :is(button,input,select):focus-visible{outline:2px solid #246BFE;outline-offset:3px}
.hero-widget-picker{box-sizing:border-box;width:min(720px,calc(100vw - 32px));max-height:min(760px,calc(100dvh - 40px));padding:0;border:1px solid #fff;border-radius:30px;background:#fafafa;color:#171717;box-shadow:inset 0 0 0 1px #00000006,0 24px 80px #0003;overflow:hidden;font:400 15px/1.4 Selecta,Arial,sans-serif;letter-spacing:0;transition:opacity 180ms cubic-bezier(.23,1,.32,1),transform 180ms cubic-bezier(.23,1,.32,1)}
.hero-widget-picker[open]{display:flex;flex-direction:column}
.hero-widget-picker::backdrop{background:#0005}
@starting-style{.hero-widget-picker[open]{opacity:0;transform:translateY(8px) scale(.98)}}
.hero-picker-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 22px 10px;flex:none}
.hero-picker-header h2{font:500 23px/1.2 Selecta,Arial,sans-serif;letter-spacing:-.035em;margin:0}
.hero-picker-close{border:0;width:44px;height:44px;border-radius:50%;color:#555;background:linear-gradient(#fff,#e7e7e7);box-shadow:inset 0 0 0 1px #fff,0 2px 5px #0001;font-size:26px!important}
.hero-picker-controls{display:flex;gap:10px;padding:4px 22px 16px;flex:none}
.hero-picker-controls :is(input,select){box-sizing:border-box;font:400 16px/1.3 Selecta,Arial,sans-serif;color:#171717;min-height:44px;background:#eee;border:1px solid #e5e5e5;border-radius:14px;padding:10px 12px;min-width:0}
.hero-picker-controls input{flex:1;width:100%}
.hero-picker-controls select{max-width:160px}
.hero-picker-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px 12px;padding:6px 22px 22px;overflow:auto;overscroll-behavior:contain;min-height:0}
.hero-picker-option{display:flex;flex-direction:column;gap:8px;text-align:left;min-width:0;background:none;border:0;padding:0;color:#555;border-radius:20px}
.hero-picker-option img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;border-radius:20%;filter:drop-shadow(0 4px 5px #00000016)}
.hero-picker-option span{font-size:12px;line-height:1.3;padding:0 4px;overflow-wrap:anywhere}
.hero-picker-option[aria-pressed=true]{color:#246BFE}
.hero-picker-option[aria-pressed=true] img{outline:2px solid #246BFE;outline-offset:3px}
.hero-picker-option:active{opacity:.7}
.hero-picker-status{flex:none;min-height:0;padding:0 22px 16px;margin:0;color:#737373;font-size:13px}
.hero-picker-status:empty{display:none}
.hero-widget-picker[data-instant=true]{transition:none}
@media(hover:hover) and (pointer:fine){.hero-edit-bar button:not(:disabled):hover{background-color:#e8e8e8}.hero-picker-option:hover{color:#171717}.hero-slot:hover::after{background:#fff;box-shadow:0 2px 8px #0004}}
@media(max-width:650px){
 .hero-editor{right:max(12px,env(safe-area-inset-right));bottom:calc(max(12px,env(safe-area-inset-bottom)) + 138px)}
 body:has(.glass-studio) .hero-editor{bottom:calc(max(12px,env(safe-area-inset-bottom)) + 190px)}
 .hero-edit-trigger{height:38px}
 .hero-widget-picker{width:calc(100vw - 20px);max-height:calc(100dvh - 24px);border-radius:26px}
 .hero-picker-header{padding:14px 16px 8px}.hero-picker-controls{padding:4px 16px 14px;gap:8px}
 .hero-picker-controls select{max-width:132px}.hero-picker-grid{grid-template-columns:repeat(3,minmax(0,1fr));padding:6px 16px 20px;gap:18px 12px}
}
@media(prefers-reduced-motion:reduce){.hero-widget-picker{transition:none}}
@media(max-width:480px){.hero-edit-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-transparency:reduce){.hero-edit-bar{background:#fff;backdrop-filter:none}}
@media(forced-colors:active){.hero-slot::after,.hero-edit-bar,.hero-widget-picker,.hero-picker-option[aria-pressed=true]{border:1px solid ButtonText}}
