.explorer{margin-top:clamp(8px,2vw,24px)}.explorer-scale{color:var(--text-muted);grid-template-columns:auto 1fr auto;align-items:center;gap:16px;margin-bottom:28px;font-size:.85rem;display:grid}.explorer-track{background:var(--surface);border-radius:999px;height:6px;overflow:hidden}.explorer-fill{border-radius:inherit;background:var(--accent);height:100%;transition:width .5s cubic-bezier(.2,.8,.2,1);display:block}.explorer-scale[data-span=all] .explorer-fill{background:repeating-linear-gradient(90deg, var(--accent) 0 10px, transparent 10px 16px)}.explorer-scale[data-span=all]>span:first-child{color:var(--accent-text);font-weight:500}.explorer-body{grid-template-columns:minmax(260px,2fr) 3fr;gap:10px;min-height:480px;display:grid;position:relative}.explorer-tabs,.explorer-detail-box{z-index:1;border-radius:24px;position:relative}.explorer-tabs{background:var(--surface);flex-direction:column;gap:4px;padding:12px;display:flex}.explorer-detail-box{background:var(--panel);box-shadow:inset 0 0 0 1px var(--panel-edge);color:var(--on-dark);overflow:hidden}.explorer-mark-liquid{pointer-events:none}.explorer-mark{border-radius:16px;transition:transform .45s cubic-bezier(.2,.8,.2,1),height .3s;position:absolute;top:0;left:12px;right:12px}.explorer-mark--plain{background:var(--accent-soft)}.explorer-tab{z-index:1;text-align:left;cursor:pointer;font:500 1.05rem/1.35 var(--font-body);color:var(--text-muted);background:0 0;border:0;border-radius:16px;align-items:baseline;gap:14px;padding:18px;transition:color .25s;display:flex;position:relative}.explorer-tab:hover{color:var(--text)}.explorer-tab[aria-selected=true]{color:var(--obsidian)}.explorer-tab-num{color:var(--accent-text);font-size:.85rem;font-weight:600}.explorer-tab[aria-selected=true] .explorer-tab-num{color:var(--lavender-deep)}.explorer-loader{z-index:2;pointer-events:none;transition:opacity .2s;position:absolute;inset:0}.explorer-loader .image-gen-root.explorer-fx{width:100%;height:100%;display:block;position:absolute;inset:0}.explorer-fx-card{border-radius:24px;width:100%;height:100%}.explorer-sweep{z-index:2;pointer-events:none;background-size:22px 22px,300% 300%;border-radius:24px;animation:.55s linear infinite explorer-sweep;position:absolute;inset:0}.explorer-sweep[data-preset=sweep-gradient]{background-image:linear-gradient(color-mix(in srgb, var(--obsidian) 35%, transparent) 1px, transparent 1px), linear-gradient(120deg, var(--obsidian) 20%, var(--lavender) 45%, var(--lavender-soft) 50%, var(--lavender) 55%, var(--obsidian) 80%)}.explorer-sweep[data-preset=pixels-organic]{background-image:radial-gradient(circle, color-mix(in srgb, var(--lavender-soft) 55%, transparent) 0 30%, transparent 32%), radial-gradient(60% 60% at 50% 50%, var(--ink-soft), var(--obsidian));background-size:18px 18px,100% 100%;animation-name:explorer-pulse}.explorer-sweep[data-preset=pixels-mechanic]{background-image:linear-gradient(90deg, color-mix(in srgb, var(--lavender-soft) 40%, transparent) 50%, transparent 50%), linear-gradient(var(--ink), var(--obsidian));background-size:16px 16px,100% 100%;animation-name:explorer-tick;animation-timing-function:steps(6,end)}@keyframes explorer-sweep{0%{background-position:0 0,100% 0}to{background-position:0 0,0 100%}}@keyframes explorer-pulse{50%{background-size:26px 26px,100% 100%}}@keyframes explorer-tick{to{background-position:96px 0,0 0}}.explorer-detail-box{position:relative}.explorer-panel{transition:opacity .25s}.explorer[data-generating=true] .explorer-panel{opacity:0;transition:opacity .12s}.explorer-detail{min-height:100%;padding:clamp(28px,4vw,56px)}.explorer-num{color:var(--accent-soft);margin-bottom:10px;font-size:.85rem;font-weight:600}.explorer-title{font:var(--title-weight) clamp(1.6rem, 2.6vw, 2.2rem)/1.1 var(--font-head);letter-spacing:-.03em;color:var(--on-dark)}.explorer-summary{color:var(--on-dark-muted);max-width:46ch;margin-top:12px}.explorer-chips{flex-wrap:wrap;gap:8px;margin-top:28px;display:flex}.explorer-chip{border:1px solid var(--on-dark-line);color:var(--on-dark);border-radius:999px;padding:10px 14px;font-size:.9rem}.explorer[data-generating=false] .explorer-panel[data-shown=true] .explorer-chip{animation:.45s cubic-bezier(.2,.8,.2,1) both explorer-chip-in;animation-delay:calc(var(--i) * 45ms)}@keyframes explorer-chip-in{0%{opacity:0;transform:translateY(8px)}}.js .explorer[data-hydrated=false] .explorer-panel:not(:first-child){display:none}html:not(.js) .explorer[data-hydrated=false] .explorer-panel+.explorer-panel{border-top:1px solid var(--on-dark-line);margin-top:40px;padding-top:40px}@media (width<=819px){.explorer-body{grid-template-columns:1fr}}
