:root{--ui-bg:#18181b9e;--ui-bg-strong:#18181bd1;--ui-border:#ffffff24;--ui-text:#ffffffeb;--ui-accent:#e83c3cd8;--ui-accent-text:#14141a;--ui-radius:12px}html,body{width:100%;height:100%;margin:0;padding:0;overflow:hidden}.viewer-ui{z-index:100;pointer-events:none;position:fixed;inset:0}.viewer-ui,.viewer-ui button{cursor:default}.viewer-ui button{cursor:pointer}.space-drawer{z-index:250;align-items:stretch;display:flex;position:fixed;top:50%;left:0;transform:translateY(-50%)}.space-drawer-panel{background:var(--ui-bg-strong);-webkit-backdrop-filter:blur(16px);pointer-events:none;width:0;max-height:64vh;transition:width .35s;position:relative;overflow:hidden;box-shadow:4px 0 25px #00000040}.space-drawer.open .space-drawer-panel{pointer-events:auto;width:180px}.space-drawer-tab{writing-mode:vertical-rl;text-orientation:mixed;border:1px solid var(--ui-border);border-radius:0 var(--ui-radius) var(--ui-radius) 0;background:var(--ui-accent);-webkit-backdrop-filter:blur(16px);color:var(--ui-text);letter-spacing:3px;cursor:pointer;pointer-events:auto;border-left:none;flex-shrink:0;padding:24px 11px;font-size:13px;font-weight:700;transition:background .2s,border-color .2s;box-shadow:3px 0 18px #0000004d}.space-drawer-tab:hover{background:#28282dd9}.space-drawer-list{overscroll-behavior:contain;scrollbar-width:none;flex-direction:column;gap:8px;max-height:64vh;padding:10px;display:flex;overflow-y:auto}.space-drawer-list::-webkit-scrollbar{display:none}.space-name-button{box-sizing:border-box;border:1px solid var(--ui-border);width:100%;color:var(--ui-text);letter-spacing:.01em;text-align:left;white-space:nowrap;text-overflow:ellipsis;cursor:pointer;background:#ffffff0d;border-radius:9px;flex-shrink:0;padding:12px 14px;font-size:14px;font-weight:500;transition:background .2s,border-color .2s;overflow:hidden}.space-name-button:hover{background:#ffffff1a}.space-name-button.is-active{background:var(--ui-accent);border-color:var(--ui-accent);color:var(--ui-accent-text);font-weight:700}.space-drawer-scroll-hint{text-align:center;color:var(--ui-text);opacity:0;pointer-events:none;background:linear-gradient(#0000,#18181be6);padding:6px 0 8px;font-size:16px;transition:opacity .2s;animation:1.4s ease-in-out infinite space-scroll-hint-bounce;position:absolute;bottom:0;left:0;right:0}.space-drawer-scroll-hint.show{opacity:1}@keyframes space-scroll-hint-bounce{0%,to{transform:translateY(0)}50%{transform:translateY(4px)}}@media (width<=600px){.space-drawer-tab{letter-spacing:2px;padding:16px 8px;font-size:11px}.space-drawer.open .space-drawer-panel{width:145px}}.pattern-bar{box-sizing:border-box;border-radius:var(--ui-radius);background:var(--ui-bg);-webkit-backdrop-filter:blur(16px);pointer-events:auto;width:min(90vw,1100px);padding:15px 18px;position:absolute;bottom:22px;left:50%;transform:translate(-50%);box-shadow:0 8px 35px #00000040}.pattern-list{scrollbar-width:thin;align-items:flex-start;gap:14px;padding:3px;display:flex;overflow-x:auto}.pattern-button{cursor:pointer;background:#ffffff0f;border:2px solid #0000;border-radius:7px;flex:none;width:105px;padding:0;transition:transform .2s,border-color .2s,box-shadow .2s;overflow:hidden}.pattern-thumbnail{object-fit:cover;width:105px;height:105px;display:block}.pattern-name{box-sizing:border-box;width:100%;color:var(--ui-text);text-align:center;white-space:nowrap;text-overflow:ellipsis;padding:8px 4px;font-size:13px;font-weight:500;line-height:1.2;display:block;overflow:hidden}.pattern-button:hover{transform:translateY(-4px)}.pattern-button.is-active{border-color:var(--ui-accent);box-shadow:0 0 0 2px #7c8cf859,0 5px 20px #0000004d}@media (width<=600px){.pattern-bar{width:94vw;padding:9px 10px;bottom:10px}.pattern-list{gap:8px}.pattern-button{width:75px}.pattern-thumbnail{width:75px;height:75px}.pattern-name{padding:5px 2px;font-size:10px}}.pattern-detail-button{background:var(--ui-bg-strong);-webkit-backdrop-filter:blur(16px);color:var(--ui-text);border:1px solid var(--ui-border);letter-spacing:1px;cursor:pointer;pointer-events:auto;z-index:200;border-radius:8px;padding:11px 22px;font-size:13px;font-weight:600;transition:background .2s,border-color .2s;position:fixed;bottom:210px;left:50%;transform:translate(-50%)}.pattern-detail-button:hover{border-color:var(--ui-accent);background:#28282dd9}.pattern-detail-overlay{cursor:default;opacity:0;pointer-events:none;z-index:300;background:#0a0a0cb3;justify-content:center;align-items:center;transition:opacity .2s;display:flex;position:fixed;inset:0}.pattern-detail-overlay.show{opacity:1;pointer-events:auto}.pattern-detail-image{cursor:pointer;object-fit:contain;cursor:pointer;max-width:90vw;max-height:90vh;display:block}.right-control-panel{box-sizing:border-box;-webkit-backdrop-filter:blur(18px);border-radius:var(--ui-radius);pointer-events:auto;z-index:200;background:#18181b94;border:1px solid #ffffff24;flex-direction:column;gap:0;width:82px;padding:12px 10px 13px;display:flex;position:absolute;top:50%;left:auto;right:24px;transform:translateY(-50%);box-shadow:0 8px 28px #00000038}.brightness-control{box-sizing:border-box;flex-direction:column;align-items:center;gap:7px;width:100%;display:flex}.brightness-icon{color:#fffffff0;opacity:.9;flex:none;justify-content:center;align-items:center;width:15px;height:15px;display:flex}.brightness-icon svg{width:100%;height:100%;display:block}.brightness-slider{writing-mode:vertical-lr;width:3px;min-width:3px;height:86px;accent-color:var(--ui-accent);cursor:pointer;direction:rtl;flex:none;margin:0}.color-control{box-sizing:border-box;pointer-events:auto;border-top:1px solid #ffffff1c;width:100%;margin-top:12px;padding-top:12px}.color-title{color:#ffffffeb;letter-spacing:2px;text-align:center;text-shadow:0 1px 4px #0006;margin-bottom:9px;font-size:12px;font-weight:700;line-height:1}.color-list{flex-flow:column;justify-content:center;align-items:center;gap:9px;display:flex}.color-button{box-sizing:border-box;cursor:pointer;pointer-events:auto;background:0 0;border:1px solid #ffffff47;border-radius:50%;flex:none;width:40px;height:40px;padding:2px;transition:transform .18s,border-color .18s,box-shadow .18s}.color-button:hover{transform:scale(1.08)}.color-button.is-active{border-color:#fff;box-shadow:0 0 0 1px #ffffffa6,0 2px 8px #0000002e}.color-swatch{border-radius:50%;width:100%;height:100%;display:block;box-shadow:inset 0 0 0 1px #00000024}@media (width<=900px) and (orientation:landscape){.right-control-panel{width:58px;padding:8px 7px 9px;top:50%;left:auto;right:8px;transform:translateY(-50%)}.brightness-control{gap:5px}.brightness-icon{width:12px;height:12px}.brightness-slider{width:2px;min-width:2px;height:58px}.color-title{letter-spacing:1.4px;margin-bottom:6px;font-size:8px}.color-list{gap:6px}.color-button{width:25px;height:25px;padding:1.5px}}@media (width<=900px) and (orientation:portrait){body:before{content:"Please rotate your device";z-index:11000;box-sizing:border-box;color:#fff;letter-spacing:.08em;text-align:center;background:#111214;justify-content:center;align-items:center;padding:24px;font-size:14px;font-weight:600;display:flex;position:fixed;inset:0}}.plank-size-control{background:var(--ui-bg);border-radius:var(--ui-radius);border:1px solid var(--ui-border);-webkit-backdrop-filter:blur(16px);pointer-events:auto;z-index:200;align-items:center;gap:6px;padding:6px;display:flex;position:absolute;top:24px;left:50%;transform:translate(-50%);box-shadow:0 4px 15px #0003}.plank-size-btn{color:var(--ui-text);border:1px solid var(--ui-border);cursor:pointer;background:#ffffff0d;border-radius:8px;padding:10px 18px;font-size:13px;font-weight:500;transition:background .2s,border-color .2s}.plank-size-btn:hover{background:#ffffff1f}.plank-size-btn.is-active{background:var(--ui-accent);border-color:var(--ui-accent);color:var(--ui-accent-text);font-weight:700}.rotate-button{color:#fff;border:1px solid var(--ui-border);cursor:pointer;pointer-events:auto;background:#ffffff0d;border-radius:8px;flex:none;justify-content:center;align-items:center;width:42px;height:42px;padding:0;transition:background .2s,border-color .2s,transform .15s;display:flex}.rotate-button:hover{background:#ffffff1f}.rotate-button:active{transform:scale(.95)}.rotate-button.is-active{background:var(--ui-accent);border-color:var(--ui-accent);color:var(--ui-accent-text)}.rotate-icon{width:25px;height:25px;display:block}@media (width<=900px) and (orientation:landscape){.space-drawer-tab{letter-spacing:1.5px;padding:14px 7px;font-size:10px}.space-drawer.open .space-drawer-panel{width:135px}.space-drawer-list{gap:5px;max-height:62vh;padding:7px}.space-name-button{border-radius:7px;padding:8px 9px;font-size:11px}.pattern-bar{border-radius:9px;width:78vw;max-width:700px;padding:6px 8px;bottom:6px;left:50%}.pattern-list{gap:6px;padding:2px}.pattern-button{border-width:1px;border-radius:5px;width:52px}.pattern-thumbnail{width:52px;height:52px}.pattern-name{padding:4px 2px;font-size:8px}.pattern-detail-button{letter-spacing:.7px;border-radius:6px;padding:7px 12px;font-size:9px;bottom:91px}.brightness-control{border-radius:9px;gap:4px;padding:7px 6px;top:8px;right:8px}.brightness-icon{width:13px;height:13px}.brightness-slider-wrap{width:22px;height:78px}.brightness-slider{width:78px;height:3px}.color-title{letter-spacing:1.4px;margin-bottom:6px;font-size:8px}.color-list{gap:6px}.color-button{width:19px;height:19px;padding:1.5px}.plank-size-control{scrollbar-width:none;border-radius:9px;gap:4px;max-width:calc(100vw - 110px);padding:4px;top:8px;overflow-x:auto}.plank-size-control::-webkit-scrollbar{display:none}.plank-size-btn{border-radius:6px;flex:none;padding:7px 9px;font-size:9px}.rotate-button{border-radius:6px;width:30px;height:30px}.rotate-icon{width:19px;height:19px}}@media (width<=900px) and (orientation:portrait){body:before{content:"Please rotate your device";z-index:11000;box-sizing:border-box;color:#fff;letter-spacing:.08em;text-align:center;background:#111214;justify-content:center;align-items:center;padding:24px;font-size:14px;font-weight:600;display:flex;position:fixed;inset:0}}.viewer-cursor{pointer-events:none;z-index:9999;opacity:0;border:1px solid #ffffffe6;border-radius:50%;width:42px;height:42px;transition:opacity .15s;position:fixed;transform:translate(-50%,-50%)}.viewer-cursor.is-visible{opacity:1}.loading-overlay{z-index:10000;-webkit-backdrop-filter:blur(3px);opacity:0;pointer-events:none;background:#0a0a0a73;flex-direction:column;justify-content:center;align-items:center;gap:16px;transition:opacity .25s;display:flex;position:fixed;inset:0}.loading-overlay.show{opacity:1;pointer-events:auto}.loading-spinner{border:3px solid #ffffff40;border-top-color:var(--ui-accent);border-radius:50%;width:44px;height:44px;animation:.8s linear infinite loading-spin}.loading-text{color:#fff;letter-spacing:.02em;font-size:14px;font-weight:500}@keyframes loading-spin{to{transform:rotate(360deg)}}