.playground{max-width:1600px;margin:0 auto;padding:70px 4.5% 100px}.playground .section-heading h2{line-height:1.35}.playground .section-heading h2 span{color:#9fafff}.demo-shell{display:grid;grid-template-columns:340px 1fr;border:1px solid #333a51;border-radius:14px;overflow:hidden;background:#0d1120}.demo-menu{display:flex;flex-direction:column;border-right:1px solid #333a51}.demo-menu>button{flex:1;text-align:left;border:0;border-bottom:1px solid #293048;padding:27px 25px;color:#bec7da;background:transparent;position:relative;font-family:inherit}.demo-menu>button:last-child{border-bottom:0}.demo-menu>button[aria-selected=true]{background:#202c56;color:#fff}.demo-menu>button>span{display:block;font-size:10px;letter-spacing:1.5px;color:#859aca}.demo-menu b{display:block;font-size:20px;letter-spacing:-.8px;margin:9px 0}.demo-menu small{font-size:12px;color:#a5b1c9}.demo-menu i{background:none;position:absolute;right:18px;top:29px;color:#a0b3ff;font-style:normal;font-size:18px;margin:0}.demo-window{min-width:0;background:radial-gradient(ellipse at top right,#172654,#0c1020 70%)}.demo-window-top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #30394d;padding:17px 25px;font-size:9px;letter-spacing:1px;color:#8294b9}.demo-window-top>span:last-child{font-family:'Nanum Gothic',sans-serif;color:#b4c5f8}.demo-panel{padding:36px 40px;min-height:520px}.demo-panel[hidden]{display:none}.demo-label{font-size:10px;letter-spacing:1.5px;color:#94aaff}.demo-panel h3{font-size:clamp(19px,2vw,28px);line-height:1.5;letter-spacing:-1px;margin:16px 0 26px}.ai-intro{display:flex;align-items:center;gap:20px}.ai-spark{font-size:55px;color:#a4b6ff}.ai-intro p{font-size:15px;line-height:1.7;color:#a2afc9}.ai-options{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0}.ai-options button,.slot-options button{border:1px solid #4e608d;color:#cdd9f6;background:#26345b55;border-radius:6px;padding:10px 12px;font-size:12px}.ai-options button:hover,.slot-options button[aria-pressed=true]{background:#b1c0ff;color:#10192b}.ai-answer{background:#1e2a49aa;border:1px solid #425480;border-radius:9px;padding:22px;font-size:14px;line-height:1.8;min-height:140px}.ai-answer b{color:#c7d5ff}.ai-answer p{color:#b0bed8;margin:8px 0 0;white-space:pre-line;font-size:13px}.demo-note{font-size:11px!important;line-height:1.6;color:#7f8da8!important;margin-top:20px}.demo-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.demo-panel select{font-family:inherit;background:#18223e;color:#d1dfff;border:1px solid #52648f;border-radius:6px;padding:9px 12px;font-size:13px}.metric-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:5px 0 30px}.metric-row>div{border-left:1px solid #354264;padding-left:15px}.metric-row span{display:block;font-size:12px;color:#a6b4ce}.metric-row strong{display:block;font-size:clamp(22px,3vw,40px);letter-spacing:-1px;margin:8px 0;color:#e5eaff}.metric-row small{font-size:10px;color:#6f819f}.chart-caption{display:flex;justify-content:space-between;font-size:12px;color:#a5b5d4;margin-bottom:15px}.chart-caption span{font-size:9px}.demo-chart{height:160px;display:flex;gap:10px;border-bottom:1px solid #435273;padding:0 6px 22px;align-items:end}.chart-column{flex:1;position:relative;background:linear-gradient(#9aaeff,#4b65c9);border-radius:4px 4px 0 0;min-height:4px;transition:height .35s}.chart-column span{position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);font-size:9px;color:#869abb}.chart-column b{position:absolute;top:-20px;left:50%;transform:translateX(-50%);font-size:9px;font-weight:400;color:#c4d2f1}.sim-status{font-size:8px;letter-spacing:1px;color:#93a6d8;border:1px solid #384569;padding:6px;border-radius:4px}.iot-status{display:flex;justify-content:space-between;align-items:center;padding:25px;border:1px solid #495e93;border-radius:12px;background:linear-gradient(125deg,#324c8e,#12213e);margin-bottom:18px;transition:background .3s}.iot-status.off{background:#101521;border-color:#283047}.light-status>span{font-size:9px;letter-spacing:2px;color:#90a8da}.light-status>b{display:block;font-size:23px;letter-spacing:-1px;margin:12px 0}.light-status p{font-size:11px;color:#a8b9d8;margin:0}.temp-display{display:flex;flex-direction:column;text-align:center;margin-left:15px}.temp-display strong{font-size:45px;font-weight:400}.temp-display span{font-size:9px;color:#a6b6d6}.switch-row{display:flex;justify-content:space-between;align-items:center;padding:13px 0;border-bottom:1px solid #303a52;font-size:13px}.switch-row button{width:42px;height:25px;border:0;border-radius:20px;background:#343d51;padding:3px}.switch-row button span{display:block;width:19px;height:19px;border-radius:50%;background:#c6d1e5;transition:transform .2s}.switch-row button[aria-checked=true]{background:#a2b7ff}.switch-row button[aria-checked=true] span{background:#182442;transform:translateX(17px)}.temperature{display:flex;align-items:center;gap:14px;margin-top:23px;font-size:12px}.temperature input{accent-color:#a1b7ff;flex:1;min-width:50px}.temperature>span{font-size:10px;color:#98a9c6}.temperature input:disabled{opacity:.35}#booking-form{display:flex;flex-direction:column;gap:13px}#booking-form>label{font-size:12px;color:#a1b3d3}.slot-options{display:flex;gap:10px}.slot-options button{flex:1}.booking-summary{border:1px solid #3e4c70;background:#202e4e;padding:18px;border-radius:8px;margin:6px 0}.booking-summary span{display:block;font-size:10px;color:#94a9cf;margin-bottom:8px}.booking-summary b{font-size:14px;font-weight:400}.demo-submit{border:0;background:#b1c0ff;color:#0e1938;border-radius:6px;padding:14px;display:flex;justify-content:space-between;font-size:13px;font-weight:700}.booking-result{font-size:13px;line-height:1.6;color:#c8ff6b;margin-bottom:0}.booking-result:empty{display:none}
@media(max-width:1000px){.demo-shell{grid-template-columns:270px 1fr}.demo-panel{padding:27px}.demo-menu>button{padding:23px 18px}.demo-menu b{font-size:18px}.demo-menu small{font-size:11px}}
@media(max-width:760px){.playground{padding:20px 4.5% 60px}.demo-shell{display:block}.demo-menu{display:grid;grid-template-columns:1fr 1fr;border:0}.demo-menu>button{padding:17px 12px;border-bottom:1px solid #293048!important}.demo-menu>button>span{font-size:7px;letter-spacing:.4px}.demo-menu b{font-size:13px;letter-spacing:-.5px;margin:7px 0 0}.demo-menu small,.demo-menu i{display:none}.demo-window-top{padding:12px;font-size:7px}.demo-panel{padding:24px 17px;min-height:480px}.demo-panel h3{font-size:18px;letter-spacing:-.8px}.demo-label{font-size:8px;letter-spacing:.8px}.ai-intro p{font-size:13px}.ai-options{gap:5px}.ai-options button{font-size:10px;padding:8px}.ai-answer{padding:15px}.ai-answer p{font-size:12px}.demo-note{font-size:10px!important}.metric-row{gap:6px}.metric-row>div{padding-left:10px}.metric-row strong{font-size:26px}.metric-row span{font-size:10px}.demo-chart{gap:7px}.iot-status{padding:18px 13px}.light-status>b{font-size:20px}.light-status p{font-size:10px}.temp-display strong{font-size:34px}.temperature{gap:8px;font-size:10px}.temperature>span{font-size:8px}.demo-row select{font-size:11px;padding:7px}.demo-window-top>span:nth-child(2){font-size:6px}.booking-summary b{font-size:12px}}