:root{font-family:"Microsoft YaHei",sans-serif;color:#164d36;font-size:18px}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:#f5f5e9 url('assets/bg-2.png') center/cover fixed}header{display:flex;align-items:center;justify-content:space-between;padding:14px 26px;background:#f7f5e7ed;position:relative;z-index:5}a{color:inherit;text-decoration:none}header>a{font-size:26px;font-weight:bold}nav{display:flex;gap:10px}button,select,input,textarea{font:inherit}button{cursor:pointer;border:0;color:#164d36;background:#fff8e7;border-radius:12px;padding:12px 18px;min-height:48px;box-shadow:0 2px 8px #133e2318}button:hover{filter:brightness(1.04)}button:focus-visible,a:focus-visible{outline:3px solid #edac28}button:active{transform:scale(.98)}h1{text-align:center;font-size:34px;margin:20px 0 10px}p{line-height:1.7}main{max-width:1400px;margin:auto;padding:0 28px 28px}.lead{text-align:center;margin:6px 0 24px}.grid{display:grid;gap:18px}.two{grid-template-columns:1fr 1fr}.three{grid-template-columns:repeat(3,1fr)}.four{grid-template-columns:repeat(4,1fr)}.paper{background:#fffbeded;padding:24px;border-radius:16px;box-shadow:0 3px 14px #244d2520}.btn{background:#36865c;color:white;font-weight:bold}.orange{background:#ed943c;color:white}.bottom{display:flex;justify-content:center;gap:14px;margin-top:20px}.sceneimg{width:100%;height:290px;object-fit:contain}.small{font-size:15px;color:#566e60}.action{position:relative;padding:0;background:none;box-shadow:none;overflow:hidden;min-width:0}.action img{display:block;width:100%;height:310px;object-fit:fill}.action span{position:absolute;top:8%;left:8%;right:8%;text-align:center;font-weight:bold;color:white;font-size:22px}.action[aria-pressed=true]{outline:5px solid #f2ac23;border-radius:18px;transform:translateY(-5px)}.result{font-size:23px;text-align:center;background:#fffbed;border-radius:16px;padding:18px;margin-top:16px}.group{display:flex;align-items:center;gap:10px;justify-content:center;margin:12px}select,input,textarea{color:#164d36;border:1px solid #9cba9d;background:#fffff7;border-radius:8px;padding:10px;max-width:100%;width:100%}label{display:block;font-weight:bold;margin:0 0 8px}textarea{min-height:92px;resize:vertical}.suggestion{font-size:15px;padding:6px 10px;margin:8px 0}.bucket{min-height:180px;background:#f3ead7;border:2px dashed #a0bba1;border-radius:12px;padding:12px}.bucket.over{background:#d8efd4}.bucket h3{margin:4px 0 12px}.timechip{display:inline-block;background:#e8d6ef;font-weight:bold;margin:4px;padding:10px 12px;touch-action:manipulation}.bucket[data-kind=move] .timechip{background:#c1e8bc}.bucket[data-kind=rest] .timechip{background:#f8d6a9}.hint{margin-top:12px;padding:15px;background:#e5f2de;border-radius:12px}.versions{display:flex;gap:14px}.versions>div{flex:1;white-space:pre-wrap;line-height:1.8;background:#fff;padding:15px;border-radius:12px}.record{margin-bottom:15px}.record h3{margin-top:0}.tag{background:#e3f2df;padding:3px 8px;border-radius:7px;font-size:15px}.teacher{max-width:1500px}#toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);opacity:0;transition:.25s;background:#164d36;color:#fff;padding:12px 25px;border-radius:12px;z-index:20;pointer-events:none}#toast.show{opacity:1;transform:translate(-50%,0)}.vrbody{background:#132e25;overflow:hidden}.vrbody main{padding:0;max-width:none}.vr-stage{position:relative;height:calc(100vh - 78px);overflow:hidden;background:#0e2926}.vr-stage canvas{width:100%;height:100%;touch-action:none;display:block}.vr-ui{position:absolute;inset:18px 20px auto;display:flex;justify-content:space-between;pointer-events:none}.vr-ui>*{pointer-events:auto;background:#fff9e9ed;border-radius:12px;padding:10px 18px}.vr-ui h2{margin:0}.vr-nav{display:flex;gap:8px}.hotspot{position:absolute;transform:translate(-50%,-50%);border:3px solid #e2b749;background:#fff9e5f5;animation:breathe 2.2s ease-in-out infinite;font-weight:bold;white-space:nowrap}.vr-footer{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);padding:10px 22px;background:#fff9e9ed;border-radius:12px;text-align:center;white-space:nowrap}.modal{position:fixed;inset:0;background:#112a2266;z-index:12;display:grid;place-items:center}.modal article{max-width:740px;width:90%;background:#fffbed;border-radius:20px;padding:25px;box-shadow:0 10px 50px #0006;text-align:center}.modal img{width:100%;height:280px;object-fit:contain}.modal h2{margin:5px 0}.modal .bottom{flex-wrap:wrap}.fade{animation:fadein .55s ease-out}.flash{animation:flash .5s ease-out}@keyframes fadein{from{opacity:0;filter:blur(8px)}to{opacity:1;filter:blur(0)}}@keyframes flash{50%{filter:brightness(1.25)}}@keyframes breathe{50%{box-shadow:0 0 22px #f4e29b}}@media(max-width:900px){.four{grid-template-columns:repeat(2,1fr)}.three,.two{grid-template-columns:1fr}.action img{height:280px}h1{font-size:28px}.vr-nav{flex-wrap:wrap}.vr-ui{inset:10px}.vr-ui h2{font-size:21px}main{padding:0 14px 20px}.versions{flex-direction:column}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.hotspot:active{transform:translate(-50%,-50%) scale(.98)}

/* confirmed 3D fantasy garden */
header{background:linear-gradient(180deg,#f9fffafa,#d8f5ebed);box-shadow:0 3px 14px #00393030;border-bottom:2px solid #80c9aa}
.paper{background:linear-gradient(135deg,#fffffff5,#ecfff6f0);border:2px solid #ccecd9;box-shadow:0 8px 24px #074c3540,inset 0 2px 8px #fff;border-radius:22px}
button{background:linear-gradient(#fffdf5,#f5e9cc);border:1px solid #ddc89b;box-shadow:0 3px 9px #0c48282d,inset 0 2px 2px #fff}
.btn{background:linear-gradient(#20c26b,#008f41);border:2px solid #cfffcf;box-shadow:0 3px 10px #00643244,inset 0 2px 4px #eeffee;color:white}
.orange{background:linear-gradient(#ffba25,#ed7c05);color:white}
h1{text-shadow:0 2px 1px #fff,0 0 10px #ffffffcc;font-weight:900;color:#064c32}
.action img{height:310px;object-fit:contain}.action span{top:auto;bottom:14%;color:#653a1c;font-size:23px;text-shadow:0 1px #fff}
.action{background:linear-gradient(#ffffffe8,#dff8ee);border:2px solid #c0e9d4;border-radius:22px;padding:12px}
.action:nth-child(4) img{padding:35px 50px 90px}.action[aria-pressed=true]{border-color:#eeae12;box-shadow:0 0 18px #ffd469;background:#fff3ca}
.result{background:#ebfff2}.vr-ui>*,.vr-footer{background:linear-gradient(#ffffffed,#e5fff3ed);border:1px solid #a4d8c3;box-shadow:0 4px 18px #07503955}
.hotspot{background:linear-gradient(#fffefa,#ffedca);border-color:#b7e99a}.modal article{background:linear-gradient(#fffffff9,#e6fff0);border:2px solid #b5e2c7}
@media(max-width:600px){header{padding:10px;gap:8px}header>a{font-size:20px}nav{gap:5px}nav button{padding:8px;font-size:15px}.vr-ui{flex-direction:column;align-items:flex-start;gap:8px}.vr-nav button{padding:8px}.vr-stage{height:calc(100vh - 75px)}.bottom{flex-wrap:wrap}.action span{font-size:19px}}

/* teacher data summary */
.summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-top:24px}.stat h3{margin:0 0 10px}.bar{display:grid;grid-template-columns:9.5em 1fr 2.5em;align-items:center;gap:10px;margin:8px 0}.bar span{font-size:16px}.bar i{height:18px;border-radius:9px;background:linear-gradient(90deg,#20c26b var(--w),#e4efe6 var(--w))}.bar b{text-align:right}.two-bar{row-gap:4px}.bar i.first{background:linear-gradient(90deg,#f0b65a var(--w),#f3ecdc var(--w))}

/* thin original reference panels */
header{background:#f5fff6ed;border-bottom:1px solid #d0e4db;box-shadow:0 2px 8px #173d211c}.paper{border:1px solid #d3e4d6;border-radius:14px;box-shadow:0 3px 12px #16482a20;background:#fffef2f5}button{border:1px solid #dddbc4;box-shadow:0 2px 6px #14462b22}.btn{border:1px solid #d1ebd2;box-shadow:0 2px 5px #00643230}h1{text-shadow:0 1px 5px #fff}.action{border:1px solid #d5e6d6;border-radius:14px;background:#fffdf6f0;padding:12px}.action img{height:270px;object-fit:contain}.action span{position:static;display:block;margin-top:8px;font-size:23px;text-shadow:none}.action[aria-pressed=true]{border-color:#e8a838;box-shadow:0 0 0 3px #eecb633f;transform:translateY(-3px)}.action:nth-child(4) img{padding:30px 60px}.result{border:1px solid #d6e8d5}.vr-ui>*,.vr-footer{box-shadow:0 2px 10px #07483435;border:1px solid #c6ded1;background:#fffef4ef}.hotspot{border:2px solid #c8a56b;background:#fff9e8f5}.modal article{background:#fffdf4;border:1px solid #d4e7d6}

/* Explicit round trip from a hotspot's task to its originating VR scene. */
.vr-return-footer{padding:8px 0 18px}
@media(max-width:600px){body:not(.vrbody) header{flex-wrap:wrap}body:not(.vrbody) header nav{flex-wrap:wrap;justify-content:flex-end;max-width:100%}#returnVR{white-space:nowrap}}

/* VR导入：三处名字标签（只显示，不可点） */
.hotspot.vr-name{pointer-events:none;animation:none;font-size:30px;padding:10px 26px;border:3px solid #fff;border-radius:999px;background:linear-gradient(#2fb35d,#0b7a3a);color:#fff;box-shadow:0 6px 18px #0006;text-shadow:0 2px 2px #0005;letter-spacing:2px}

/* 10/8 客户：网页背景的生态园稍微弱化，突出内容 */
body:not(.vrbody)::before{content:'';position:fixed;inset:0;background:rgba(246,246,236,.30);backdrop-filter:saturate(.72);-webkit-backdrop-filter:saturate(.72);pointer-events:none;z-index:0}
body:not(.vrbody)>main{position:relative;z-index:1}
body:not(.vrbody)>header{position:relative;z-index:5}