:root{--ink:#514c45;--muted:#a19a8e;--olive:#7d8868;--purple:#96839f;--cream:#f6f2e9;--font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#f4f0e8}body{font-family:var(--font);color:var(--ink);-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;touch-action:manipulation}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid #ab98b6;outline-offset:4px}a{color:inherit;text-decoration:none}svg{display:block}button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}button:disabled{opacity:.5;cursor:default}[hidden]{display:none!important}.skip{position:fixed;left:20px;top:-100px;z-index:2000;padding:12px 18px;border-radius:9px;background:#fff}.skip:focus{top:15px}.ambient-grain{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.11;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.2' filter='url(%23n)'/%3E%3C/svg%3E")}.studio-header{position:fixed;top:0;left:0;right:0;height:86px;padding:0 47px;display:flex;align-items:center;justify-content:space-between;z-index:20;pointer-events:none}.studio-header a,.studio-header button{pointer-events:auto}.studio-brand{font-size:27px;letter-spacing:-1.2px;font-weight:750;display:flex;align-items:center;gap:8px}.studio-brand svg{height:29px;width:29px;fill:none;stroke:#9b88a8;stroke-width:3.5;stroke-linecap:round;margin-right:1px}.studio-brand>span{color:#9b88a8;margin-left:-8px}.studio-index{position:absolute;left:50%;transform:translateX(-50%);font-family:ui-monospace,SFMono-Regular,monospace;font-size:8px;letter-spacing:2.7px;color:#b0a79b}.header-actions{display:flex;align-items:center;gap:23px}.subtle-button{display:flex;align-items:center;gap:8px;font-size:10px;color:#9f928c;padding:9px 0}.subtle-button svg{width:13px;height:13px}.enter-button{display:flex;align-items:center;gap:16px;background:#8a7795;color:#fdf9f5;border-radius:10px;padding:12px 16px;font-size:11px;box-shadow:0 4px 12px #7b627b1a;transition:background .15s,transform .15s}.enter-button:hover{background:#7b6589;transform:translateY(-2px)}.enter-button svg{width:13px;height:13px}#workspace{height:100dvh;position:relative;isolation:isolate}.intro{position:absolute;left:54px;top:126px;z-index:10;pointer-events:none}.eyebrow{font-family:ui-monospace,SFMono-Regular,monospace;font-size:8px;letter-spacing:2px;color:#a3988c;display:flex;align-items:center;gap:8px}.eyebrow span{height:1px;width:21px;background:#b9aab6}.intro h1{font-size:25px;font-weight:500;line-height:1.65;letter-spacing:1px;margin:17px 0 11px;color:#6f645e}.intro h1>span{color:#b3a68d}.intro p{font-size:10px;color:#a79a8c;line-height:1.9;letter-spacing:.4px;margin:0}.handwritten{display:block;font-family:Georgia,serif;font-style:italic;font-size:17px;color:#b09c91;margin-top:25px;transform:rotate(-6deg);transform-origin:left center}#scene-stage{position:absolute;inset:0;overflow:hidden;outline:0;touch-action:none;opacity:0;transition:opacity .7s}body.scene-ready #scene-stage{opacity:1}#scene-stage canvas{position:absolute;inset:0;display:block;z-index:0;cursor:grab;touch-action:none}#scene-stage canvas:active{cursor:grabbing}.css3d-layer{position:absolute;inset:0;z-index:2;pointer-events:none}.screen-object{width:1100px;height:619px;overflow:hidden;border-radius:22px;backface-visibility:hidden;box-shadow:inset 0 0 0 2px #54485866;isolation:isolate;background:#e6d6e1}.desktop-frame{width:100%;height:100%;display:block;border:0;pointer-events:none;background:#e6d6e1}.screen-enter-hit{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;padding:0 0 60px;width:100%;height:100%;z-index:4;background:transparent;cursor:pointer}.screen-enter-hit>span{display:flex;align-items:center;gap:16px;font-size:19px;letter-spacing:1px;padding:15px 23px;background:#fffaf0ed;border:1px solid #fff;border-radius:40px;color:#8e779b;box-shadow:0 5px 15px #5a426228;opacity:0;transform:translateY(8px);transition:opacity .15s,transform .15s}.screen-enter-hit:hover>span,.screen-enter-hit:focus-visible>span{opacity:1;transform:none}.screen-enter-hit>span svg{height:20px;width:20px}.scene-loading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;display:flex;align-items:center;gap:11px;color:#9a8e93;font-size:12px;letter-spacing:1px}.loading-flower{font-size:28px;animation:spin 6s linear infinite}.scene-ready .scene-loading{display:none}.plant-panel{position:absolute;top:122px;right:40px;width:225px;border:1px solid #fffc;border-radius:18px;background:#fffcf5d9;backdrop-filter:blur(18px);box-shadow:0 16px 40px -16px #665c4533,0 2px 3px #aea38c09;padding:20px 16px 11px;z-index:25;animation:panel-in .25s ease}.panel-heading{display:flex;justify-content:space-between;align-items:flex-start}.mini-eyebrow{font-family:ui-monospace,monospace;font-size:7px;letter-spacing:1.3px;color:#b6aa97}.panel-heading h2{font-size:14px;font-weight:500;letter-spacing:.2px;margin:7px 0 17px}.round-button{display:flex;align-items:center;justify-content:center;height:25px;width:25px;border-radius:50%;margin:-3px -4px 0 0;color:#b9ab99}.round-button:hover{background:#ece3d8}.round-button svg{width:13px;height:13px}.side-switch{background:#ede8dc;border-radius:8px;display:flex;padding:3px;gap:4px}.side-switch button{width:50%;font-size:10px;padding:7px;border-radius:6px;color:#a29885}.side-switch button[aria-pressed="true"]{background:#fefbf4;box-shadow:0 1px 3px #9888751a;color:#7b8068}.plant-options{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:13px 0 15px}.plant-options button{border:1px solid #e9e2d5;border-radius:10px;display:flex;align-items:center;flex-direction:column;background:#f7f4eb;padding:5px 5px 8px;transition:background .15s,border-color .15s}.plant-options button[aria-pressed="true"]{border-color:#a7b290;background:#eef1e6;box-shadow:inset 0 0 0 .5px #a7b290}.plant-options button:hover{background:#f0efdf}.plant-options svg{width:60px;height:52px;stroke:none;fill:initial}.plant-options span{font-size:10px;letter-spacing:.4px;color:#8e8e77}.placement-label{font-size:9px;color:#ae9f8c;margin-bottom:8px}.position-switch{display:flex;gap:7px}.position-switch button{width:50%;padding:7px 0;font-size:9px;border:1px solid #e7dfd0;border-radius:6px;color:#a79882;background:#faf7ef}.position-switch button[aria-pressed="true"]{border-color:#c3c9af;background:#eef0e4;color:#7c856b}.panel-note{text-align:center;font-size:8px;color:#b9ae9f;margin:13px 0 1px}.scene-bottom{position:absolute;left:46px;right:46px;bottom:39px;display:flex;align-items:center;justify-content:space-between;z-index:21;pointer-events:none}.scene-caption{display:flex;align-items:center;gap:9px;font-size:9px;color:#a49686;letter-spacing:.3px}.tiny-dot{width:5px;height:5px;background:#9aa787;border-radius:50%;box-shadow:0 0 0 3px #9aa78714}.caption-divider{height:10px;width:1px;background:#c7bbab77;margin:0 3px}.drag-hint{font-size:8px;color:#b5aa99}.scene-toolbar{display:flex;align-items:center;gap:9px;padding:8px 11px;border:1px solid #fff8;border-radius:15px;background:#fffaf1c9;box-shadow:0 4px 20px #8e7b5e0a;backdrop-filter:blur(15px);pointer-events:auto}.orbit-buttons{display:flex;align-items:center;gap:2px}.orbit-buttons button{height:31px;width:33px;display:flex;align-items:center;justify-content:center;color:#ac9b85;border-radius:8px}.orbit-buttons button:hover{background:#eae5d9}.orbit-buttons svg{width:16px;height:16px}.toolbar-divider{height:23px;width:1px;background:#ded4c4;margin:0 2px}.toolbar-label{display:flex;align-items:center;gap:7px;color:#8c8b74;font-size:10px;padding:7px 9px;border-radius:7px}.toolbar-label svg{width:15px;height:15px}.toolbar-label:hover,.toolbar-label[aria-expanded="true"]{background:#edf0e3}.toolbar-label[aria-pressed="true"]{background:#f6ead1;color:#b59259}.plant-count{padding:0 5px;border-radius:3px;font-size:8px;background:#e5e9db;color:#8b9478}.scene-label{position:absolute;left:50%;transform:translateX(-50%);bottom:23px;z-index:10;pointer-events:none;font-family:ui-monospace,monospace;font-size:7px;letter-spacing:2px;color:#bba996}.scene-toast{position:fixed;bottom:101px;left:50%;transform:translate(-50%,12px);border-radius:10px;background:#fffaf0ed;box-shadow:0 8px 24px #7e6b5a22;z-index:95;font-size:11px;padding:10px 17px;color:#988296;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}.scene-toast.visible{opacity:1;transform:translate(-50%,0)}.overview-ui{transition:opacity .3s}.computer-focus .overview-ui{opacity:0;pointer-events:none!important}.computer-focus .overview-ui *{pointer-events:none!important}.focus-backdrop{position:fixed;inset:0;background:#ece4dfe3;backdrop-filter:blur(10px);z-index:40}.focus-bar{position:fixed;top:22px;left:max(24px,calc((100vw - 1140px)/2));right:max(24px,calc((100vw - 1140px)/2));display:flex;align-items:center;justify-content:space-between;z-index:70;height:35px;color:#97829d}.focus-bar button{display:flex;align-items:center;gap:8px;font-size:12px;padding:8px 0}.focus-bar button svg{width:16px;height:16px}.focus-bar>span{font-size:9px;letter-spacing:1.6px;display:flex;align-items:center;gap:11px;color:#ab98af}.focus-bar>span i{width:4px;height:4px;border-radius:50%;background:#9aaa86}.computer-focus #scene-stage{overflow:visible}.computer-focus .css3d-layer{position:fixed!important;inset:76px max(24px,calc((100vw - 1140px)/2)) 30px!important;width:auto!important;height:auto!important;z-index:60;pointer-events:auto;perspective:none!important;border:13px solid #fdfbf5;border-bottom-width:21px;border-radius:26px;box-shadow:0 18px 60px -16px #6f5b6d40,inset 0 0 1px #fff}.computer-focus .css3d-view,.computer-focus .css3d-camera{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;transform:none!important;perspective:none!important}.computer-focus .screen-object{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;transform:none!important;border-radius:13px;box-shadow:0 0 0 1px #d3c5d0;pointer-events:auto!important}.computer-focus .desktop-frame{pointer-events:auto}.computer-focus .screen-enter-hit{display:none}.computer-focus .css3d-layer:after{content:"yajune";position:absolute;left:50%;bottom:-18px;transform:translateX(-50%);font-size:9px;letter-spacing:1px;color:#bcacb7}.scene-error{position:fixed;inset:0;z-index:100;background:#f4efe7;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:30px}.scene-error img{height:140px;width:150px}.scene-error h2{font-size:23px;font-weight:500;color:#8a7893;margin:20px 0 8px}.scene-error p{font-size:12px;line-height:1.9;color:#a394a2}.scene-error a{background:#95809f;color:#fff;border-radius:10px;padding:12px 18px;font-size:12px;margin-top:12px}.scene-error a span{margin-left:22px}.no-js{position:fixed;inset:0;background:#faf5eb;z-index:1000;padding:20vh 10vw}.no-js a{display:block;margin-top:20px}.is-orbiting .screen-enter-hit>span{opacity:0}.scene-ready .scene-loading{display:none}@keyframes panel-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}@keyframes spin{to{transform:rotate(360deg)}}
@media(min-width:1600px){.intro{top:160px;left:65px}.intro h1{font-size:29px}.intro p{font-size:11px}.studio-header{padding:0 61px;height:96px}.plant-panel{top:143px;right:59px}.scene-bottom{left:61px;right:61px;bottom:44px}}
@media(max-width:1100px){.studio-header{height:74px;padding:0 28px}.studio-index{display:none}.intro{left:33px;top:103px}.intro h1{font-size:21px}.intro p{max-width:205px}.handwritten{font-size:15px;margin-top:19px}.plant-panel{top:100px;right:26px;width:210px;padding:17px 14px 10px}.scene-bottom{left:28px;right:28px;bottom:32px}.drag-hint,.caption-divider{display:none}.scene-label{bottom:17px;font-size:6px}.scene-toolbar{gap:5px;padding:7px 8px}.toolbar-label{font-size:9px;padding:7px}.header-actions{gap:16px}.subtle-button{font-size:9px}.enter-button{font-size:10px;padding:11px 13px}}
@media(max-width:700px){.studio-header{height:69px;padding:0 22px}.studio-brand{font-size:24px}.studio-brand svg{width:25px;height:25px}.header-actions{gap:12px}.subtle-button{display:none}.enter-button{font-size:10px;padding:10px 12px;gap:10px}.intro{left:26px;top:102px}.eyebrow{font-size:7px;letter-spacing:1.6px}.intro h1{font-size:21px;line-height:1.6;margin:13px 0 8px;letter-spacing:.5px}.intro p{font-size:9px;max-width:300px}.handwritten{font-size:14px;margin-top:13px}.plant-panel{top:auto;bottom:107px;right:20px;width:210px;padding:16px 14px 10px;z-index:30}.panel-heading h2{font-size:13px;margin-bottom:12px}.plant-options{margin:10px 0;gap:7px}.plant-options button{padding:1px 4px 6px}.plant-options svg{height:45px}.plant-options span{font-size:9px}.side-switch button{padding:7px}.placement-label{font-size:8px;margin-bottom:6px}.panel-note{font-size:7px;margin-top:10px}.scene-bottom{left:17px;right:17px;bottom:35px;flex-direction:column-reverse;gap:15px}.scene-caption{font-size:8px;gap:7px}.drag-hint{display:inline;font-size:7px}.caption-divider{display:block;margin:0 1px;height:8px}.scene-toolbar{padding:8px 9px;gap:5px;border-radius:13px;width:max-content;max-width:100%;justify-content:center}.orbit-buttons{gap:0}.orbit-buttons button{width:29px;height:30px}.orbit-buttons svg{width:14px;height:14px}.toolbar-divider{height:20px}.toolbar-label{font-size:9px;gap:5px;padding:7px 6px}.toolbar-label svg{width:13px;height:13px}.plant-count{font-size:7px;padding:0 4px}.scene-label{bottom:12px;letter-spacing:1px;font-size:6px}.screen-enter-hit>span{opacity:1;font-size:21px;padding:14px 24px}.scene-toast{bottom:123px;font-size:10px;max-width:calc(100% - 35px);text-align:center;width:max-content}.focus-bar{top:15px;left:18px;right:18px;height:37px}.focus-bar button{font-size:10px;gap:5px}.focus-bar>span{display:none}.focus-bar button svg{width:14px;height:14px}.computer-focus .css3d-layer{inset:62px 9px max(12px,env(safe-area-inset-bottom))!important;border-width:7px;border-bottom-width:17px;border-radius:18px}.computer-focus .screen-object{border-radius:10px}.computer-focus .css3d-layer:after{font-size:8px;bottom:-15px}.scene-error h2{font-size:21px}}
@media(max-height:700px) and (min-width:701px){.studio-header{height:64px}.intro{top:89px}.intro h1{font-size:20px;margin:12px 0 6px}.handwritten{display:none}.plant-panel{top:84px;padding-top:13px}.plant-options svg{height:43px}.plant-options{margin:8px 0}.scene-bottom{bottom:28px}.scene-label{bottom:12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* The WebGL canvas is the front layer. Its depth-tested transparent display
   aperture reveals the DOM behind it; foreground objects keep real occlusion. */
#scene-stage canvas{z-index:3}
.css3d-layer{z-index:0;pointer-events:none}
.screen-object{pointer-events:none!important}
.computer-focus .css3d-layer{z-index:60;pointer-events:auto}
.computer-focus .screen-object{pointer-events:auto!important;border-radius:13px!important}
body[data-computer-model=retro].computer-focus .css3d-layer{border-width:20px;border-bottom-width:28px;border-color:#e9dfc9;border-radius:35px;box-shadow:0 22px 68px -14px #62574766,inset 0 0 2px #fffdf0}
body[data-computer-model=retro].computer-focus .screen-object{border-radius:22px!important}
body[data-computer-model=retro].computer-focus .css3d-layer:after{content:'yajune · CRT';bottom:-23px;font-family:ui-monospace,monospace;font-size:8px;color:#a49680}
body[data-computer-model=macbook].computer-focus .css3d-layer{border-color:#dad9dc;border-width:9px;border-bottom-width:20px;border-radius:19px;box-shadow:0 19px 65px -15px #51485755,inset 0 0 2px #fff}
body[data-computer-model=macbook].computer-focus .css3d-layer:after{content:'笔记本电脑';font-size:8px;letter-spacing:.8px;color:#918b96}
.reset-objects-button{display:flex;align-items:center;justify-content:center;gap:10px;min-height:43px;padding:12px 17px;border:1px solid #ffffffd9;border-radius:13px;background:#fffaf1e0;backdrop-filter:blur(15px);color:#998574;font-size:10px;box-shadow:0 4px 20px #8e7b5e12;pointer-events:auto;transition:background .15s,transform .15s}
.reset-objects-button svg{width:16px;height:16px}.reset-objects-button:hover{background:#fffdf7;transform:translateY(-2px)}.reset-objects-button:active{transform:translateY(0)}
.scene-bottom{gap:20px}.scene-caption .drag-hint{display:inline}.scene-caption .caption-divider{display:block}.scene-caption #object-hint{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.scene-toast{bottom:98px}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:700px){.scene-bottom{flex-direction:row;align-items:flex-end;left:20px;right:20px;bottom:35px;gap:12px}.scene-caption{display:flex;flex-wrap:wrap;max-width:235px;gap:7px;line-height:1.6}.scene-caption .caption-divider{display:none}.scene-caption .drag-hint{flex-basis:100%;font-size:7px;letter-spacing:0}.reset-objects-button{flex:none;min-height:42px;padding:10px 12px;gap:7px;font-size:9px}.reset-objects-button svg{width:14px;height:14px}.plant-panel{bottom:107px}.scene-toast{bottom:100px}.computer-focus .screen-object,body[data-computer-model=retro].computer-focus .screen-object{border-radius:14px!important}body[data-computer-model=retro].computer-focus .css3d-layer{border-width:10px;border-bottom-width:22px;border-radius:23px}body[data-computer-model=retro].computer-focus .css3d-layer:after{bottom:-18px;font-size:7px}body[data-computer-model=macbook].computer-focus .css3d-layer{border-width:7px;border-bottom-width:18px}.focus-bar>span{display:none}}
@media(max-width:380px){.scene-caption .drag-hint{max-width:175px}.scene-caption{max-width:175px}.reset-objects-button{padding:10px;gap:5px}}

/* A small, renderer-independent wardrobe for the computer. */
.header-actions { gap: 13px; }
.computer-settings-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  gap: 7px;
  min-height: 40px;
  padding: 10px 12px;
  border: 1px solid #e2d8e4;
  border-radius: 10px;
  background: #fffaf1b8;
  color: #8a7594;
  font-size: 10px;
  white-space: nowrap;
  box-shadow: 0 2px 8px #80618c06;
  transition: background .15s, border-color .15s;
}
.computer-settings-trigger > svg { width: 15px; height: 15px; }
.computer-settings-trigger:hover { background: #fffaf6; border-color: #c9b7d3; }
.computer-settings-trigger[aria-expanded="true"] { background: #eee4f3; border-color: #bda1cf; color: #775a89; }
.computer-settings-panel {
  --ws-device-color: #eee2c9;
  position: fixed;
  top: 76px;
  right: 47px;
  z-index: 35;
  display: flex;
  flex-direction: column;
  width: 334px;
  max-width: calc(100vw - 32px);
  max-height: min(520px, calc(100dvh - 104px));
  border: 1px solid #fffdf7;
  border-radius: 19px;
  background: #fffaf4f5;
  backdrop-filter: blur(18px);
  box-shadow: 0 17px 48px -14px #62506e35, 0 2px 6px #9d8b9c12;
  color: #705f79;
  pointer-events: auto;
  overflow: hidden;
}
.ws-settings-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; flex: none; padding: 17px 17px 12px; border-bottom: 1px solid #ece2eb; }
.ws-settings-eyebrow { font: 7px/1.4 ui-monospace, monospace; letter-spacing: 1.6px; color: #b19db9; }
.ws-settings-heading h2 { margin: 5px 0 5px; font-size: 17px; line-height: 1.3; font-weight: 550; letter-spacing: .5px; color: #7c6589; }
.ws-settings-heading p { margin: 0; font-size: 10px; line-height: 1.6; color: #a18caa; }
.ws-settings-close { display: flex; align-items: center; justify-content: center; flex: none; min-width: 34px; min-height: 34px; margin: -5px -6px 0 0; border-radius: 10px; color: #a58eaf; }
.ws-settings-close svg { width: 14px; height: 14px; }
.ws-settings-close:hover { background: #f1e7f3; color: #7e648b; }
.ws-settings-options { min-height: 0; overflow: auto; overscroll-behavior: contain; touch-action: pan-y; padding: 14px 16px 16px; scrollbar-width: thin; scrollbar-color: #cfc0d7 transparent; }
.ws-settings-group { margin: 0; padding: 0; border: 0; min-width: 0; }
.ws-settings-group + .ws-settings-group { margin-top: 16px; }
.ws-settings-group legend { width: 100%; margin: 0 0 9px; padding: 0; font-size: 10px; line-height: 1.4; color: #8e789a; }
.ws-settings-group legend > span { float: right; font-size: 8px; color: #b5a1bd; }
.ws-model-options, .ws-finish-options, .ws-effect-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ws-choice { display: flex; min-width: 0; position: relative; align-items: center; justify-content: center; border: 1px solid #e8deea; border-radius: 10px; background: #fffdf9; cursor: pointer; color: #8a7396; transition: border-color .15s, background .15s; }
.ws-choice:hover { border-color: #c7afd3; background: #fcf7ff; }
.ws-choice.is-selected { border-color: #b095bf; box-shadow: inset 0 0 0 .5px #b095bf; background: #f4edf8; color: #7c5e8b; }
.ws-choice:has(input:focus-visible) { outline: 3px solid #ab98b6; outline-offset: 2px; }
.ws-choice > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 2; }
.ws-choice > strong { font-size: 10px; line-height: 1.45; font-weight: 500; text-align: center; }
.ws-choice-tick { position: absolute; top: 5px; right: 5px; display: flex; align-items: center; justify-content: center; width: 13px; height: 13px; border-radius: 50%; background: #a68ab7; color: #fffafc; opacity: 0; pointer-events: none; }
.ws-choice-tick svg { width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ws-choice.is-selected .ws-choice-tick { opacity: 1; }
.ws-model-choice { flex-direction: column; justify-content: flex-start; padding: 9px 7px 10px; }
.ws-model-picture { display: block; width: 100%; height: 58px; flex: none; margin-bottom: 3px; stroke-width: 1; }
.ws-model-choice > strong { display: flex; align-items: center; justify-content: center; min-height: 29px; }
.ws-finish-choice { min-height: 44px; gap: 7px; padding: 8px 5px; font-size: 9px; white-space: nowrap; }
.ws-finish-swatch { width: 19px; height: 19px; border: 2px solid #fffdf7; border-radius: 50%; flex: none; background: var(--ws-finish); box-shadow: 0 0 0 1px #b7a6bd40; }
.ws-finish-choice .ws-choice-tick { top: 3px; right: 3px; width: 10px; height: 10px; }
.ws-finish-choice .ws-choice-tick svg { width: 7px; height: 7px; }
.ws-effect-choice { flex-direction: column; gap: 7px; padding: 8px 6px 9px; }
.ws-effect-preview { display: flex; align-items: center; justify-content: center; width: 100%; height: 38px; position: relative; overflow: hidden; border: 1px solid #e6d9eb; border-radius: 6px; background: linear-gradient(145deg, #d3c6df 0 48%, #ead3c2 48% 75%, #c9d1b8 75%); }
.ws-effect-preview > span { padding: 3px 8px; border: 1px solid #fff9; border-radius: 3px; background: #fff9ef; color: #927a9e; font: 15px/1.2 Georgia, serif; }
.ws-effect-preview::before, .ws-effect-preview::after { position: absolute; inset: 0; pointer-events: none; }
.ws-effect-preview[data-effect="crt"]::before { content: ""; background: repeating-linear-gradient(to bottom, transparent 0 2px, #244d312b 2px 3px); }
.ws-effect-preview[data-effect="crt"]::after { content: ""; background: radial-gradient(ellipse at 50% 40%, transparent 50%, #193c3026 100%), linear-gradient(115deg, #ffffee44, transparent 45%); box-shadow: inset 0 0 7px #264a3129; }
.ws-effect-preview[data-effect="crt"] > span { text-shadow: -.3px 0 #85daa373, .3px 0 #dc8db557, 0 0 2px #89d2ae70; }
.ws-effect-preview[data-effect="soft"]::after { content: ""; background: #ffe2aa28; box-shadow: inset 0 0 9px #d0ab781c; }
.ws-effect-choice > strong { font-size: 9px; }
.ws-settings-footer { flex: none; padding: 11px 15px 13px; border-top: 1px solid #ece2eb; background: #fbf6fafa; text-align: center; }
.ws-settings-footer p { margin: 0; font-size: 9px; line-height: 1.7; color: #90779c; }
.ws-settings-footer p + p { margin-top: 4px; color: #b09ab8; font-size: 8px; }
.touch-drag-hint { display: none; }
/* Keep HTML settings and the existing desktop fallback reachable without WebGL. */
.workstation-unavailable .studio-header { opacity: 1; pointer-events: none !important; background: linear-gradient(#f4efe7 45%, #f4efe7e8 80%, transparent); }
.workstation-unavailable .studio-header a, .workstation-unavailable .studio-header button { pointer-events: auto !important; }
.workstation-unavailable .computer-settings-panel { opacity: 1; pointer-events: auto !important; }
.workstation-unavailable .computer-settings-panel * { pointer-events: auto !important; }
.workstation-unavailable #social-jump, .workstation-unavailable .intro, .workstation-unavailable .scene-bottom, .workstation-unavailable #scene-stage, .workstation-unavailable .plant-panel { visibility: hidden; pointer-events: none !important; }
.workstation-unavailable #social-jump { display: none; }
@media (min-width: 1600px) {
  .computer-settings-panel { top: 85px; right: 61px; }
}
@media (max-width: 1100px) {
  .computer-settings-panel { top: 68px; right: 28px; max-height: min(520px, calc(100dvh - 92px)); }
  .header-actions { gap: 10px; }
}
@media (max-height: 700px) and (min-width: 701px) {
  .computer-settings-panel { top: 62px; max-height: calc(100dvh - 80px); }
}
@media (max-width: 700px) {
  .studio-header { padding-left: 18px; padding-right: 18px; }
  .header-actions { gap: 7px; }
  .computer-settings-trigger { min-height: 40px; padding: 9px 10px; gap: 6px; font-size: 9px; }
  .computer-settings-trigger > svg { width: 14px; height: 14px; }
  .computer-settings-panel { top: auto; right: 12px; left: 12px; bottom: max(12px, env(safe-area-inset-bottom)); width: auto; max-width: none; max-height: min(44dvh, 386px); border-radius: 18px; }
  .ws-settings-heading { padding: 12px 13px 10px; align-items: center; }
  .ws-settings-eyebrow { display: none; }
  .ws-settings-heading h2 { font-size: 15px; margin: 0 0 3px; }
  .ws-settings-heading p { font-size: 9px; }
  .ws-settings-close { min-height: 40px; min-width: 40px; margin: -3px -5px -3px 0; }
  .ws-settings-options { padding: 11px 12px 12px; }
  .ws-settings-group + .ws-settings-group { margin-top: 12px; }
  .ws-settings-group legend { margin-bottom: 7px; }
  .ws-model-options, .ws-finish-options, .ws-effect-options { gap: 7px; }
  .ws-model-choice { padding: 6px 6px 7px; }
  .ws-model-picture { height: 43px; margin-bottom: 0; }
  .ws-model-choice > strong { font-size: 9px; min-height: 26px; }
  .ws-effect-choice { gap: 5px; padding: 6px; }
  .ws-effect-preview { height: 29px; }
  .ws-settings-footer { padding: 8px 10px 9px; }
  .ws-settings-footer p { font-size: 8px; }
  .ws-settings-footer p + p { margin-top: 2px; font-size: 7px; }
  .pointer-drag-hint { display: none; }
  .touch-drag-hint { display: inline; }
}
@media (max-width: 380px) {
  .studio-header { padding-left: 14px; padding-right: 14px; }
  .studio-brand { font-size: 22px; gap: 6px; }
  .studio-brand svg { width: 23px; height: 23px; }
  .computer-settings-trigger { min-width: 40px; width: 40px; padding: 9px; }
  .computer-settings-trigger > span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (pointer: coarse) {
  .computer-settings-trigger, .enter-button { min-height: 44px; }
  .ws-settings-close { min-width: 44px; min-height: 44px; }
  .pointer-drag-hint { display: none; }
  .touch-drag-hint { display: inline; }
}

/* Enter the OS across the whole webpage. Its own UI provides the way home. */
body.computer-focus .overview-ui,
body.computer-focus .overview-ui * {
  visibility: hidden !important;
  pointer-events: none !important;
}
body.computer-focus #scene-stage {
  position: fixed;
  inset: 0;
  height: 100dvh;
  overflow: hidden;
  visibility: visible !important;
  opacity: 1;
}
body.computer-focus #scene-stage canvas {
  visibility: hidden;
  pointer-events: none !important;
}
body.computer-focus #scene-error,
body.computer-focus .focus-backdrop,
body.computer-focus .focus-bar,
body.computer-focus .ambient-grain,
body.computer-focus .scene-toast,
body.computer-focus .skip { display: none !important; }
body.computer-focus .css3d-layer,
body.computer-focus .desktop-fallback-host {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 60;
  border: 0 !important;
  border-radius: 0 !important;
  background: #e6d6e1;
  box-shadow: none !important;
  overflow: hidden;
  pointer-events: auto !important;
}
body.computer-focus #workspace .screen-object {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backface-visibility: visible;
}
body.computer-focus .css3d-layer::after { display: none; }
/* The live screen expands over the last rendered close-up. Keep its physical
   surroundings until it fills the page; reverse the same handoff on return. */
body.computer-focus[data-desktop-transition] #scene-stage canvas {
  visibility: visible;
}
body.computer-focus[data-desktop-transition] .css3d-layer {
  pointer-events: none !important;
}
body.computer-focus[data-desktop-transition] .desktop-frame {
  pointer-events: none !important;
}