:root{--bg: #0c0c0f;--fg: #ecebe6;--dim: rgba(236, 235, 230, .55);--glass: rgba(20, 20, 26, .62);--line: rgba(236, 235, 230, .14);--accent: #f2efe6;color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Inter,Roboto,sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);overflow:hidden}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}[hidden]{display:none!important}#view{position:fixed;top:0;right:0;bottom:0;left:0;cursor:grab;touch-action:none;transition:opacity .22s ease}#view:active{cursor:grabbing}#view.away{opacity:0}#view canvas{display:block;width:100%!important;height:100%!important}#loading{position:fixed;left:50%;top:50%;width:96px;height:2px;margin:-1px 0 0 -48px;border-radius:1px;background:var(--line);overflow:hidden;pointer-events:none;transition:opacity .4s ease}#loading.gone{opacity:0}#loading-fill{width:100%;height:100%;background:var(--dim);transform-origin:left;transform:scaleX(0);transition:transform .25s ease}#message{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;padding:0 24px;text-align:center;font-size:13px;letter-spacing:.04em;color:var(--dim);pointer-events:none}#message p{margin:0}#message button{pointer-events:auto;padding:6px 14px;border-radius:999px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg);box-shadow:inset 0 0 0 .5px #ffffff40}#title{position:fixed;top:max(18px,env(safe-area-inset-top));left:22px;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);pointer-events:none}#hint{position:fixed;left:0;right:0;top:max(46px,calc(env(safe-area-inset-top) + 28px));margin:0;text-align:center;font-size:12px;letter-spacing:.06em;color:var(--dim);transition:opacity 1s ease;pointer-events:none}#hint.gone{opacity:0}#bar{position:fixed;z-index:5;left:50%;bottom:max(20px,calc(env(safe-area-inset-bottom) + 8px));transform:translate(-50%);display:flex;align-items:center;gap:0;height:44px;padding:0 6px;border-radius:999px;background:#1212168c;backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);box-shadow:inset 0 0 0 .5px #ffffff1f,0 10px 40px #00000073;white-space:nowrap;user-select:none;-webkit-user-select:none}#bar button{display:inline-flex;align-items:center;justify-content:center;height:32px;padding:0 12px;border-radius:999px;font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);transition:color .25s ease,background-color .25s ease}#bar button:hover{color:var(--fg)}#bar button:disabled{opacity:.3;cursor:default}#bar .icon{width:34px;padding:0}#bar svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}#bar #count{min-width:46px;padding:0 2px;font-variant-numeric:tabular-nums;letter-spacing:.06em}#bar .looks{display:inline-flex;gap:2px}#bar .look{position:relative}#bar .look:after{content:"";position:absolute;left:50%;bottom:3px;width:14px;height:1.5px;margin-left:-7px;border-radius:1px;background:currentColor;opacity:0;transform:scaleX(.3);transition:opacity .25s ease,transform .25s ease}#bar .look.on{color:var(--fg)}#bar .look.on:after{opacity:.9;transform:none}#bar .sep{width:12px}#grid{position:fixed;top:0;right:0;bottom:0;left:0;z-index:4;overflow-y:auto;background:#0c0c0fe6;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:70px 22px 110px}#grid[hidden]{display:none}#thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;max-width:1200px;margin:0 auto}#thumbs button{padding:0;border-radius:10px;overflow:hidden;aspect-ratio:.93;background:#18181d;outline:2px solid transparent;outline-offset:2px;transition:transform .2s,outline-color .2s}#thumbs button:hover{transform:translateY(-2px)}#thumbs button.current{outline-color:var(--accent)}#thumbs img{display:block;width:100%;height:100%;object-fit:cover}#thumbs button:focus-visible{outline-color:var(--dim);transform:translateY(-2px)}#grid-close{position:fixed;z-index:6;top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;color:var(--fg);background:#1212168c;box-shadow:inset 0 0 0 .5px #ffffff24}#grid-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}@media (max-width: 520px){#bar{padding:0 4px}#bar button{padding:0 10px}#bar .icon{width:32px;padding:0}#bar .sep{width:6px}#thumbs{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px}}@media (max-width: 359px){#bar{padding:0 2px;height:40px}#bar button{padding:0 7px;letter-spacing:.05em}#bar .icon{width:28px}#bar #count{min-width:38px}#bar .sep{width:0}}@media (hover: none){#bar button:hover{color:var(--dim)}#bar .look.on:hover{color:var(--fg)}}#secret{position:fixed;z-index:3;top:0;right:0;width:calc(64px + env(safe-area-inset-right));height:calc(64px + env(safe-area-inset-top));padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 0;display:flex;align-items:center;justify-content:center;cursor:default}#secret svg{width:16px;height:16px;fill:none;stroke:var(--fg);stroke-width:1.3;stroke-linecap:round;opacity:0;transition:opacity .5s ease 0s}@media (hover: hover){#secret:hover svg{opacity:.4;transition-delay:.7s}#secret:hover{cursor:pointer}}#secret.on svg{opacity:.6;transition-delay:0s}#secret:focus-visible svg{opacity:.6}#secret-menu{position:fixed;z-index:6;top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));width:min(310px,calc(100vw - 32px));max-height:calc(100dvh - 110px);display:flex;flex-direction:column;border-radius:16px;background:#121216c7;backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);box-shadow:inset 0 0 0 .5px #ffffff1f,0 10px 40px #00000080;font-size:12px;color:var(--fg)}#secret-menu>header{display:flex;align-items:center;justify-content:space-between;padding:8px 6px 4px 16px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}#secret-menu .icon{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;color:var(--dim)}#secret-menu .icon:hover{color:var(--fg)}#secret-menu .icon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}#secret-body{overflow-y:auto;padding:0 16px 14px;overscroll-behavior:contain}.s-sec{padding:10px 0 8px;border-top:.5px solid var(--line)}.s-sec:first-child{border-top:0}.s-sec h2{margin:0 0 8px;font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}.s-row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:32px}.s-label{color:var(--fg);opacity:.85;white-space:nowrap}.s-note{margin:0 0 8px;color:var(--dim);line-height:1.45}.s-seg{display:inline-flex;padding:2px;border-radius:999px;background:#ffffff0f}.s-seg button{height:26px;padding:0 10px;border-radius:999px;font-size:11px;letter-spacing:.04em;color:var(--dim)}.s-seg button.on{color:var(--bg);background:var(--fg)}.s-row input[type=range]{flex:1;max-width:170px;accent-color:var(--fg)}.s-switch{position:relative;width:34px;height:20px;border-radius:999px;background:#ffffff24;transition:background-color .2s}.s-switch:after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:var(--fg);transition:transform .2s}.s-switch.on{background:#ecebe68c}.s-switch.on:after{transform:translate(14px);background:var(--bg)}.s-swatches{display:inline-flex;gap:6px}.s-swatch{width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 .5px #ffffff4d}.s-swatch.on{outline:1.5px solid var(--fg);outline-offset:2px}.s-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.s-btn{height:28px;padding:0 12px;border-radius:999px;font-size:11px;letter-spacing:.04em;color:var(--fg);box-shadow:inset 0 0 0 .5px #ffffff40}.s-btn:hover,.s-btn.on{background:#ffffff14}.s-end{padding-top:10px;border-top:.5px solid var(--line)}.s-list{margin:10px 0 0;padding:0;list-style:none;max-height:180px;overflow-y:auto}.s-list li{display:flex;align-items:center;gap:2px;min-height:28px}.s-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dim)}.s-mini{width:26px;height:26px;border-radius:50%;color:var(--dim)}.s-mini:hover{color:var(--fg);background:#ffffff0f}.s-mini:disabled{opacity:.25;cursor:default}#ab{position:fixed;z-index:3;top:max(18px,env(safe-area-inset-top));right:calc(64px + env(safe-area-inset-right));display:inline-flex;padding:2px;border-radius:999px;background:#1212168c;box-shadow:inset 0 0 0 .5px #ffffff1f}#ab button{width:30px;height:26px;border-radius:999px;font-size:11px;font-weight:500;color:var(--dim)}#ab button.on{color:var(--bg);background:var(--fg)}#thumbs button.extra{position:relative}#thumbs button.extra:after{content:"";position:absolute;top:8px;right:8px;width:6px;height:6px;transform:rotate(45deg);background:var(--fg);opacity:.55}
