:root{--paper:#f2efe8;--ink:#2b00ff;--pink:#b929d6;color:var(--ink);background:var(--paper);font-family:Arial,sans-serif;color-scheme:light}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,input{-webkit-tap-highlight-color:transparent}button{color:inherit;cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid var(--pink);outline-offset:5px}#experience{position:relative;width:100%;height:100svh;min-height:320px;isolation:isolate}#scene{display:block;width:100%;height:100%;touch-action:none;outline:none}.page-frame{position:absolute;inset:10px;border:1px solid color-mix(in srgb,var(--ink) 62%,transparent);border-radius:19px;pointer-events:none;z-index:1}.dock{position:absolute;bottom:25px;right:25px;z-index:3;border:1px solid var(--ink);border-radius:32px;padding:5px;display:flex;align-items:center;gap:3px;background:color-mix(in srgb,var(--paper) 94%,transparent);backdrop-filter:blur(12px);box-shadow:0 3px 18px #170b5820}.icon-button,.small-icon{border:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;transition:background .18s,color .18s;padding:0;flex-shrink:0}.icon-button{width:37px;height:37px}.icon-button.active{color:var(--paper);background:var(--ink)}.icon-button:hover,.small-icon:hover{background:color-mix(in srgb,var(--ink) 12%,var(--paper));color:var(--ink)}.icon-button.active:hover{background:color-mix(in srgb,var(--ink) 83%,var(--pink));color:var(--paper)}svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}.dock-divider{height:19px;width:1px;background:var(--ink);opacity:.22;margin:0 6px}#style-panel{position:absolute;right:25px;bottom:86px;width:272px;padding:16px 18px 15px;z-index:3;border:1px solid var(--ink);border-radius:18px;background:color-mix(in srgb,var(--paper) 97%,transparent);box-shadow:0 9px 40px #170b581a;backdrop-filter:blur(12px)}.panel-tools{display:flex;align-items:center;gap:8px;padding:0 0 13px;border-bottom:1px solid color-mix(in srgb,var(--ink) 18%,transparent);margin-bottom:8px}.palette{display:flex;align-items:center;gap:7px;margin-right:auto}.palette input{appearance:none;-webkit-appearance:none;width:24px;height:24px;border:1px solid color-mix(in srgb,var(--ink) 30%,transparent);border-radius:50%;background:none;padding:2px;cursor:pointer;overflow:hidden}.palette input::-webkit-color-swatch-wrapper{padding:0}.palette input::-webkit-color-swatch{border:none;border-radius:50%}.palette input::-moz-color-swatch{border:0;border-radius:50%}.small-icon{width:26px;height:26px}.small-icon svg{width:15px;height:15px}.slider-row{display:flex;align-items:center;gap:18px;height:37px}.slider-row>svg{width:19px;height:19px;flex-shrink:0}.slider-row>input{--fill:50%;appearance:none;-webkit-appearance:none;width:100%;height:3px;border-radius:3px;cursor:ew-resize;margin:0;background:linear-gradient(to right,var(--ink) 0%,var(--ink) var(--fill),color-mix(in srgb,var(--ink) 19%,var(--paper)) var(--fill),color-mix(in srgb,var(--ink) 19%,var(--paper)) 100%);touch-action:none}.slider-row>input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:12px;height:18px;border-radius:2px;background:var(--paper);border:1px solid var(--ink);box-shadow:2px 2px 0 color-mix(in srgb,var(--pink) 65%,transparent)}.slider-row>input::-moz-range-thumb{width:10px;height:16px;border-radius:2px;background:var(--paper);border:1px solid var(--ink)}#loading{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;background:var(--paper);transition:opacity .6s,visibility .6s}#loading.loaded{opacity:0;visibility:hidden}.loading-orbit{width:41px;height:41px;border:1px solid color-mix(in srgb,var(--ink) 20%,var(--paper));border-radius:50%;border-top-color:var(--ink);animation:spin 1.6s linear infinite;position:relative}.loading-orbit:after{content:'';position:absolute;width:13px;height:13px;border:1px solid var(--pink);left:12px;top:12px;transform:rotate(45deg)}@keyframes spin{to{transform:rotate(360deg)}}#error{position:absolute;inset:0;background:var(--paper);z-index:15;display:flex;align-items:center;justify-content:center}#error button{border:1px solid var(--ink);width:55px;height:55px}[hidden]{display:none!important}@media(max-width:600px){.page-frame{inset:6px;border-radius:15px}.dock{right:15px;bottom:16px;padding:4px;gap:2px}.icon-button{width:35px;height:35px}#fullscreen{display:none}#style-panel{right:15px;bottom:72px;width:248px;padding:13px 16px}.slider-row{height:36px;gap:16px}.palette{gap:6px}.palette input{width:22px;height:22px}}@media(max-height:540px){#style-panel{bottom:73px;padding-top:10px;padding-bottom:10px}.slider-row{height:29px}.panel-tools{padding-bottom:7px;margin-bottom:4px}.dock{bottom:15px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important}}
.page-frame{display:none}

#style-panel{max-height:calc(100svh - 110px);overflow-y:auto;scrollbar-width:thin}

.target-tabs{display:flex;gap:7px;border-bottom:1px solid color-mix(in srgb,var(--ink) 18%,transparent);padding-bottom:9px;margin-bottom:7px}.target-tabs button{flex:1;border-radius:6px;height:29px}.target-tabs button.active{background:var(--ink);color:var(--paper)}

#scene{cursor:grab;user-select:none;-webkit-user-select:none}.dock{gap:2px}@media(max-width:600px){.dock .icon-button{width:33px;height:33px}}

#detail-frame{position:absolute;z-index:3;left:55%;right:auto;top:7%;width:clamp(190px,37vw,390px);aspect-ratio:1.4;background:none;padding:0;border:0;box-shadow:none;transform:translate(var(--detail-shift-x,0px),var(--detail-shift-y,0px)) rotate(var(--detail-tilt,-7deg)) scale(var(--detail-scale,1));transform-origin:center;pointer-events:none;clip-path:polygon(9% 0,100% 9%,91% 100%,0 85%)}
#detail-frame[data-view="tile-macro"]{left:55%;right:auto;top:66%;width:clamp(190px,38vw,390px);aspect-ratio:1.65;clip-path:polygon(0 13%,94% 0,100% 86%,8% 100%)}
#detail-frame canvas{display:block;width:100%;height:100%;position:static;}
@media(max-width:650px){#detail-frame{left:55%;right:auto;top:7%;width:38vw;min-width:140px}#detail-frame[data-view="tile-macro"]{left:55%;right:auto;top:66%;width:38vw;min-width:155px}}

#scene{position:relative;z-index:2}
#detail-frame{z-index:1;left:53%;top:6%;width:clamp(190px,34vw,390px);aspect-ratio:1.31}
#detail-frame[data-view="tile-macro"]{z-index:3}
#composition-card{position:absolute;z-index:0;left:22%;top:5%;width:75%;height:80%;pointer-events:none;transform-origin:center}
#composition-card canvas{display:block;width:100%;height:100%}
.dock,#style-panel{z-index:5}
@media(max-width:650px){#detail-frame{left:53%;top:6%;width:34vw;min-width:130px}#detail-frame[data-view="tile-macro"]{left:55%;top:66%;width:38vw;min-width:155px}}


html.map-embedded,html.map-embedded body{background:transparent!important}html.map-embedded .dock,html.map-embedded #style-panel{display:none!important}