*{box-sizing:border-box}body{margin:0;color:#292735;background:#eeedf1;font-family:Arial,'PingFang SC',sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #ffa629;outline-offset:3px}button:disabled{cursor:default} .studio-header{height:100px;display:flex;align-items:center;justify-content:space-between;margin:0 5%;border-bottom:1px solid #d9d7df}.brand{font-size:42px;font-weight:bold;letter-spacing:-3px;color:#343039;text-decoration:none}.brand span{font-size:14px;vertical-align:top;letter-spacing:0}.studio-header>div{font-size:11px;letter-spacing:2px;color:#777280}.divider{padding:0 18px;color:#b1acba}.studio-header>button{border:0;background:transparent;font-size:18px}.studio-header>button span{font-size:12px;margin-left:6px}.stage{max-width:1200px;margin:auto;display:grid;grid-template-columns:1fr 450px 1fr;align-items:center;min-height:calc(100vh - 154px);gap:38px;padding:24px}.eyebrow{font-size:10px;font-weight:600;letter-spacing:2px;color:#827c90}h1{font-weight:500;font-size:43px;letter-spacing:-1px;line-height:1.35;margin:22px 0}.guide>p,.context>p{font-size:13px;line-height:1.9;color:#8c8594}.guide nav{margin-top:35px;width:215px}.guide nav button{display:flex;width:100%;align-items:center;gap:16px;border:0;border-bottom:1px solid #dedbe4;background:transparent;padding:15px 3px;color:#9c95a5;font-size:11px}.guide nav button span{font-size:13px;color:#6b6475}.guide nav button b{margin-left:auto;font-size:17px;opacity:0}.guide nav button.active{color:#7463d5}.guide nav button.active span{color:#5c4bb7}.guide nav button.active b{opacity:1}.hint{font-size:12px;line-height:1.8;margin-top:30px;color:#7f788c}.hint-icon{float:left;margin-right:10px;color:#7162d2;font-size:26px}.hint>span:last-child{margin-left:33px;font-size:11px;color:#a39cab}.phone-wrap{width:360px;height:738px;position:relative;margin:auto}.phone{position:absolute;width:360px;height:738px;padding:10px;border-radius:53px;background:linear-gradient(110deg,#777780,#d8d7db 15%,#66656c 35%,#b8b7be 65%,#45434b);box-shadow:0 30px 50px -18px #29223466,0 8px 12px -8px #17121f55,inset 0 0 0 1px #bab8bf}.phone:before{content:'';position:absolute;inset:3px;border:5px solid #141316;border-radius:50px;pointer-events:none}.screen{position:relative;height:100%;border-radius:43px;background:#f8f9fe;overflow:hidden;border:2px solid #08090c;color:#121525}.side{position:absolute;background:linear-gradient(90deg,#514e58,#b3b0b8,#4a4850);width:3px;left:-2px;border-radius:3px}.silent{height:22px;top:105px}.volume{height:44px}.v1{top:148px}.v2{top:206px}.power{left:auto;right:-2px;top:173px;height:72px}.status{height:50px;display:flex;align-items:center;justify-content:space-between;padding:9px 22px 0;font-size:12px;position:relative;z-index:3}.status>span{font-size:12px;letter-spacing:-1px}.island{position:absolute;background:#08080b;border-radius:20px;width:103px;height:28px;top:9px;left:50%;transform:translateX(-50%)}.island:after{content:'';width:8px;height:8px;position:absolute;right:10px;top:10px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#122141,#0b0c12 65%)}.home-bar{position:absolute;bottom:9px;width:110px;height:4px;background:#121423;border-radius:10px;left:50%;transform:translateX(-50%);z-index:30;pointer-events:none}#app{height:calc(100% - 50px);overflow:auto;scrollbar-width:none;padding-bottom:30px}.app-header{height:46px;display:flex;align-items:center;justify-content:center;font-size:15px;position:relative;margin-bottom:10px}.back{position:absolute;left:17px;top:10px;border:1px solid #7362d3;width:26px;height:26px;padding:0;border-radius:6px;color:white;background:linear-gradient(130deg,#7361d8,#9596ff);font-size:23px;line-height:20px}.card{margin:0 16px 14px;padding:17px;border-radius:18px;background:white;box-shadow:0 1px 0 #d9dbe7}.room{display:flex;gap:15px;align-items:center}.room-photo{width:74px;height:74px;flex:none;border-radius:14px;background:url('assets/details.png') -28px -220px / 1586px 1408px}.room-info{font-size:16px;line-height:1.6}.room-info strong{font-weight:500;color:#08090b}.room-info p{margin:0;color:#3c4058;font-size:15px}.room-info small{font-size:10px;white-space:nowrap}.credit{display:flex;justify-content:space-between;font-size:10px;align-items:center;border-top:1px solid #f1f1f6;margin:15px 0 12px;padding-top:12px}.credit b{font-size:17px;color:#7664ee;font-weight:500}.credit b span{color:#bebddb}.primary{width:100%;border:1px solid #7564e3;border-radius:24px;background:linear-gradient(110deg,#7360d9,#8e8dff);color:white;padding:13px 10px;font-size:13px;box-shadow:0 2px 1px #00000008}.primary:disabled{background:#d0d2e4;border-color:#d0d2e4}.buy{padding:10px;font-size:12px}.calendar{padding:16px 10px 18px}.month-head{display:flex;align-items:center;justify-content:space-between;padding:0 7px 18px;color:#4431bf;font-size:15px}.month-head button{border:0;background:#8478ef;border-radius:4px;color:white;width:17px;height:17px;font-size:12px;padding:0}.month-head button:disabled{background:#d1d1d8}.week,.days{display:grid;grid-template-columns:repeat(7,1fr);gap:7px 2px;text-align:center}.week{font-size:10px;color:#4b35c8;margin-bottom:13px}.days button,.days .empty{width:29px;height:29px;margin:auto;border:0;background:transparent;border-radius:50%;font-size:11px;color:#242944;padding:0;position:relative}.days button.past{color:#c0c1df}.days button.done{background:linear-gradient(135deg,#6154d7,#9390ff);color:white;font-size:17px;width:24px;height:24px;margin:2.5px auto}.days button.booked{background:#64b943;color:white;width:24px;height:24px;margin:2.5px auto}.days button.selected{background:#8477ef!important;color:white!important;outline:2px solid #c2b9ff;outline-offset:2px}.days button.unavailable{color:#c8c8dd;background:#f0f1f9}.days button.today{outline:1px solid #a59aff;color:#8b7ee9}.calendar-bottom{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:13px;position:relative;height:33px}.legend{font-size:8px;color:#7d7b90;display:flex;gap:8px;justify-content:center;align-items:center}.dot{display:inline-flex;align-items:center;justify-content:center;background:#8170ef;width:12px;height:12px;border-radius:50%;color:white;margin-right:3px}.dot.green{background:#64b943}.dot.grey{background:#edf0f8;color:#c8cbdc}.add{background:linear-gradient(135deg,#7563d9,#9194ff);border:1px solid #6856d9;width:45px;height:45px;border-radius:50%;color:white;font-size:24px;position:absolute;right:-3px;bottom:-11px;box-shadow:0 2px 8px #7968df24}.device-caption{font-size:9px;letter-spacing:1.5px;color:#9b93a7;display:flex;align-items:center;justify-content:center;gap:9px;margin-top:22px}.device-caption>span{width:5px;height:5px;background:#7c6bd8;border-radius:50%}.device-caption i{font-style:normal}.context{padding-left:20px;align-self:center}.context h2{font-size:20px;font-weight:500;margin-top:16px}.context-line{height:1px;background:#d9d5df;width:35px;margin:26px 0}.flow-label{font-size:11px;color:#777082}.flow-copy{font-size:11px!important;line-height:2.2!important}.reference-note{font-size:10px;color:#a19baa;display:block;margin-top:45px}.studio-footer{height:54px;margin:0 5%;display:flex;justify-content:space-between;align-items:center;color:#9c95a5;font-size:9px;letter-spacing:1px}.date-block{border-top:1px solid #f0f0f6;border-bottom:1px solid #f0f0f6;margin-top:17px;padding:17px 0}.small-label{font-size:10px;margin-bottom:14px}.date-line{display:flex;justify-content:space-between;color:#6350d9;font-size:23px;font-weight:600;letter-spacing:-.7px}.task-header{display:flex;justify-content:space-between;align-items:center;margin:18px 0 13px;font-size:10px}.mini{border:1px solid #76798b;background:white;border-radius:12px;font-size:9px;padding:2px 6px;color:#494b63}.tasks{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.task{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;background:#f7f8fc;border:0;border-radius:7px;padding:12px 3px 9px;color:#666a80;font-size:11px;min-height:70px}.task-icon{width:32px;height:31px;background-image:url('assets/details.png');background-size:1586px 1408px}.task:nth-child(1) .task-icon{background-position:-44px -424px}.task:nth-child(2) .task-icon{background-position:-116px -424px}.task:nth-child(3) .task-icon{background-position:-189px -424px}.task:nth-child(4) .task-icon{background-position:-44px -492px}.task:nth-child(5) .task-icon{background-position:-116px -492px}.task:nth-child(6) .task-icon{background-position:-189px -492px}.task.unchecked{filter:grayscale(1);opacity:.65}.task.checkable{color:#5040d4;padding:13px 3px}.check{width:17px;height:17px;border:1.5px solid currentColor;border-radius:50%;font-size:12px;line-height:15px;margin:3px}.detail-footer{position:absolute;bottom:29px;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:18px 16px;background:white;border-radius:20px 20px 0 0}.round{background:linear-gradient(130deg,#7662dc,#9295ff);color:white;border:1px solid #7464dd;border-radius:50%;width:41px;height:41px;flex:none;font-size:20px}.action{border:1px solid #8678ec;border-radius:24px;padding:13px 9px;background:white;color:#4f3ac4;font-size:10px}.action.filled{background:linear-gradient(110deg,#7865df,#9292ff);color:white}.detail-footer .spacer{flex:1}#overlay:empty{display:none}#overlay{position:absolute;inset:0;z-index:10;background:#171b2b77;display:flex;align-items:center;justify-content:center;animation:fade .15s ease}.modal{background:white;border-radius:20px;padding:22px 19px 14px;width:calc(100% - 32px);max-height:93%;overflow:auto;animation:rise .22s ease}.modal h3{text-align:center;font-size:16px;margin:0 0 22px;color:#41465c;font-weight:600}.modal .support{text-align:center;color:#797a8e;font-size:11px;line-height:1.5;margin:17px 0 20px}.text-button{border:0;background:transparent;width:100%;font-size:12px;color:#51546d;padding:18px 0 5px}.sheet{align-self:flex-end;width:100%;border-radius:21px 21px 0 0;padding:20px 22px 34px}.sheet h3{color:#10111b;margin-bottom:25px}.close{position:absolute;right:19px;top:16px;border:0;background:none;font-size:23px}.sheet{position:relative}.sheet .calendar{box-shadow:0 1px 0 #dadce8;padding:14px 2px;margin-bottom:17px}.sheet .days{row-gap:10px}.sheet .calendar-bottom{margin-top:14px}.credit-note{text-align:center;font-size:9px;color:#858298;margin:5px 0 4px}.illustration{width:170px;height:143px;margin:0 auto 15px;background-image:url('assets/details.png');background-size:1586px 1408px;background-position:-1071px -295px}.illustration.error{background-position:-1379px -1011px;height:143px}.illustration.cancel{background-position:-787px -430px;height:120px}.modal .message{text-align:center;font-size:12px;line-height:1.6;margin:12px 0 24px}.alert-icon{width:56px;height:56px;line-height:56px;color:white;text-align:center;border-radius:50%;background:linear-gradient(135deg,#aaa4ff,#6f5cdd);font-size:35px;margin:5px auto 20px}.alert-copy{text-align:center;font-size:16px;line-height:1.3;color:#464a5f;margin:0 0 23px}.toast{position:absolute;bottom:65px;left:25px;right:25px;padding:13px;background:#292435ed;color:white;border-radius:12px;z-index:40;text-align:center;font-size:12px;animation:fade .2s}.service-heading{font-size:15px;margin:28px 17px 20px}.service-heading span{color:#6951dc}.section-label{font-size:10px;margin:17px}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 16px}.service-grid button{border:0;background:white;border-radius:17px;padding:14px 3px;box-shadow:0 1px 0 #dedde7;color:#535269;font-size:9px}.service-grid button b{display:block;font-size:28px;color:#7b68df;font-weight:400;margin-bottom:10px}.service-grid button.primary-service{background:#eeebff;outline:1px solid #c9c0fa}.steyplus{margin:20px 16px;background:linear-gradient(120deg,#7360d6,#a199ff);padding:21px;border-radius:15px;font-size:27px;font-style:italic;color:white}.bottom-nav{display:flex;justify-content:space-around;padding:14px 0 20px;background:white;margin-top:20px}.bottom-nav button{border:0;background:none;color:#858194;font-size:9px}.bottom-nav button b{display:block;font-size:20px;margin-bottom:4px}.bottom-nav .active{color:#6751da}@keyframes fade{from{opacity:0}to{opacity:1}}@keyframes rise{from{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}@media(max-height:890px) and (min-width:800px){.phone-wrap{width:324px;height:664px}.phone{transform:scale(.9);transform-origin:top left}.studio-header{height:76px}.stage{min-height:calc(100vh - 120px);padding:18px}.studio-footer{height:44px}.device-caption{margin-top:15px}}@media(max-width:1050px){.stage{grid-template-columns:1fr 380px;max-width:830px;gap:15px}.context{display:none}}@media(max-width:700px){.studio-header{height:65px;margin:0 22px}.studio-header>div{display:none}.brand{font-size:32px}.stage{display:block;padding:22px 10px;min-height:0}.guide{display:none}.phone-wrap{width:342px;height:701px}.phone{transform:scale(.95);transform-origin:top left}.studio-footer{font-size:8px;margin:0 20px}.device-caption{margin-top:20px}}@media(max-width:370px){.phone-wrap{width:310px;height:636px}.phone{transform:scale(.86)}}
/* Resident service screen: supplied artwork with semantic interactive regions. */
#app.service-page{padding-bottom:102px;background:#f7f8fc}.service-reference{position:relative;width:100%;aspect-ratio:878 / 1690;overflow:hidden}.service-reference>img{position:absolute;width:100%;height:auto;left:0;top:-7.100592%;pointer-events:none;user-select:none}.service-hotspot{position:absolute;border:0;background:transparent;padding:0;border-radius:18px;cursor:pointer;transition:background .15s,box-shadow .15s}.service-hotspot:hover{background:#7968e909}.service-hotspot:active{background:#7968e919;box-shadow:inset 0 0 0 2px #8b7de82b}.service-hotspot:focus-visible{outline:2px solid #7861de;outline-offset:-2px}.service-tabbar{position:absolute;bottom:0;left:0;width:100%;height:87px;padding:0 0 25px;background:white;border-radius:19px 19px 0 0;box-shadow:0 -1px 3px #e5e5ed;display:flex;z-index:4;overflow:hidden}.service-tab-art{position:absolute;left:0;top:0;width:100%;aspect-ratio:878 / 160;overflow:hidden;pointer-events:none}.service-tab-art img{position:absolute;width:100%;height:auto;left:0;top:-1140.625%;user-select:none}.service-tabbar .service-hotspot{position:relative;width:20%;height:62px;border-radius:12px}
#app.service-page{padding-bottom:0;overflow:hidden}.service-page .service-reference{height:calc(100% - 87px);aspect-ratio:auto}.service-page .service-reference>img{height:121.183432%;object-fit:fill}

/* Shared portfolio embed: retain the new phone UI at its native proportions. */
.demo-shell .phone{position:relative!important;margin:0!important;top:auto!important;left:auto!important}.demo-shell .demo-phone{position:relative}.demo-shell .demo-tools button{cursor:pointer}