:root{font-family:'Segoe UI',Arial,sans-serif;color:#3c3833;background:#f1eee8;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit;background:none;border:0}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid #91764e;outline-offset:4px}.studio-header{height:78px;border-bottom:1px solid #ded9d0;display:flex;align-items:center;justify-content:space-between;padding:0 4.2%;gap:24px}.studio-brand{font:17px 'Segoe UI',Arial,sans-serif;letter-spacing:2px;display:flex;align-items:center;gap:14px;white-space:nowrap}.studio-mark{display:flex;flex-direction:column;align-items:center;gap:3px;color:#9d845b}.studio-mark i{display:block;height:5px;border-radius:50%;background:currentColor;width:12px;transform:rotate(-7deg)}.studio-mark i:nth-child(2){width:19px;transform:rotate(7deg)}.studio-mark i:nth-child(3){width:26px}.edition{font-size:10px;letter-spacing:1.8px;color:#7d7870;display:flex;gap:9px;align-items:center}.edition i,.local-label i{height:5px;width:5px;border-radius:100%;background:#a79d8f;display:inline-block}.studio-header button{font-size:12px;border:1px solid #d7d1c5;border-radius:6px;padding:10px 15px;white-space:nowrap}.studio-header button span{padding-left:16px}.studio{min-height:calc(100dvh - 78px);display:grid;grid-template-columns:minmax(160px,270px) minmax(0,420px) minmax(160px,270px);justify-content:center;align-items:center;gap:clamp(28px,5vw,90px);padding:34px 34px 20px;background:radial-gradient(ellipse at 48% 46%,#fffdf9 0,#f3f0ea 45%,#efebe3 100%)}.overline{font-size:9px;letter-spacing:2px;color:#8d7e62;font-weight:600}.studio-note h1{font:44px/1.17 'Segoe UI',Arial,sans-serif;letter-spacing:-1.5px;margin:23px 0 19px}.studio-note p,.screen-note p{font-size:13px;line-height:1.8;color:#858478}.material-line{width:38px;height:1px;background:#bba789;margin:29px 0}.material-samples{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.material-samples i{height:17px;width:17px;background:#fbf8f1;border:1px solid #d8d1c3;border-radius:50%}.material-samples i:nth-child(2){background:#d3bea1}.material-samples i:nth-child(3){background:#938a7d}.material-samples span{display:block;flex-basis:100%;font-size:10px;color:#8a8579;margin-top:8px}.voice-shortcut{margin-top:42px;display:flex;gap:11px;font-size:12px;align-items:center;border-bottom:1px solid #b8ab93;padding:0 0 9px}.voice-shortcut span:first-child{font-size:16px;color:#a18a66}.voice-shortcut span:last-child{margin-left:20px}.studio-note small{font-size:10px;color:#979084;display:block;margin-top:9px}.device-area{display:flex;flex-direction:column;align-items:center;min-width:0}.phone{position:relative;width:402px;height:min(842px,calc(100dvh - 188px));min-height:610px;border-radius:54px;padding:8px;background:linear-gradient(115deg,#a29683,#e0d9cd 22%,#aaa08e 52%,#f4eee3 77%,#aa9c87);box-shadow:0 30px 70px #71604625,0 4px 10px #5b4d3220,inset 0 0 0 1px #8f826d;flex-shrink:0}.phone-display{border:4px solid #272522;height:100%;width:100%;border-radius:47px;overflow:hidden;background:#fbf9f4;display:flex;flex-direction:column;position:relative}.device-status{height:43px;min-height:43px;display:flex;align-items:center;justify-content:space-between;padding:0 25px;position:relative;color:#35322e;background:#fbf9f4}.device-status b{font-size:12px;letter-spacing:-.4px}.camera-island{height:22px;width:81px;position:absolute;top:6px;left:50%;transform:translateX(-50%);border-radius:30px;background:#252320}.camera-island:after{content:'';height:5px;width:5px;border-radius:50%;background:#344046;position:absolute;right:8px;top:8px;box-shadow:inset 0 0 2px #000}.status-icons{display:flex;align-items:center;gap:5px}.status-icons svg{height:10px;width:14px;fill:currentColor}.battery{height:10px;width:21px;border-radius:3px;border:1px solid #716a5f;position:relative}.battery:before{content:'';position:absolute;inset:1px;background:#413b33;border-radius:1px}.battery:after{content:'';position:absolute;right:-3px;width:2px;height:4px;top:2px;background:#888278;border-radius:1px}.phone iframe{border:0;display:block;width:100%;flex:1;min-height:0;background:#fbf9f4}.home-indicator{height:19px;min-height:19px;display:grid;place-items:center;background:#fbf9f4}.home-indicator span{width:109px;height:4px;background:#37332e;border-radius:20px}.side-key{position:absolute;right:-2px;top:167px;width:3px;height:63px;border-radius:0 3px 3px 0;background:#a29784}.phone:before{content:'';position:absolute;left:-2px;top:157px;width:3px;height:40px;background:#aa9e8a;border-radius:3px 0 0 3px;box-shadow:0 51px #aa9e8a}.screen-control{display:flex;gap:18px;align-items:center;margin-top:17px}.screen-control button{height:30px;width:30px;border-radius:50%;border:1px solid #d1c9bb;font-size:16px}.screen-control div{display:flex;gap:13px;align-items:center;min-width:175px;justify-content:center}.screen-control span{font-size:9px;color:#928875;letter-spacing:1px}.screen-control strong{font-size:11px;font-weight:500}.screen-note h2{font:28px/1.3 'Segoe UI',Arial,sans-serif;max-width:235px;letter-spacing:-.6px;margin:18px 0}.journey-links{margin-top:30px;border-top:1px solid #dcd5c9}.journey-links a{display:flex;justify-content:space-between;align-items:center;font-size:11px;padding:15px 0;border-bottom:1px solid #dcd5c9;color:#807a72}.journey-links a.active{color:#4c453b;font-weight:600}.journey-links a span{font-size:9px;color:#a39173}.local-label{font-size:8px;letter-spacing:1.1px;display:flex;gap:7px;align-items:center;color:#969084;margin-top:29px}#drawer-shade{position:fixed;inset:0;background:#3b37302c;backdrop-filter:blur(4px);z-index:5}#screen-drawer{position:fixed;right:0;top:0;bottom:0;width:min(400px,100%);z-index:6;background:#fbf9f4;padding:27px;box-shadow:-15px 0 60px #3332;overflow-y:auto}.drawer-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.drawer-heading h2{font:30px 'Segoe UI',Arial,sans-serif;margin:12px 0 0}.drawer-heading button{font-size:27px;min-height:44px;min-width:44px}.screen-link{display:flex;gap:17px;align-items:center;padding:12px;border-bottom:1px solid #e9e4db;border-radius:6px}.screen-link:hover,.screen-link.active{background:#eee9de}.screen-link span{font:19px 'Segoe UI',Arial,sans-serif;color:#a18b64}.screen-link div{font-size:12px}.screen-link small{font-size:10px;display:block;color:#949081;margin-top:3px}.drawer-foot{font-size:10px;color:#928977;margin-top:25px}[hidden]{display:none!important}
@media(max-width:1150px){.studio{grid-template-columns:minmax(140px,220px) 402px;gap:50px}.screen-note{display:none}.studio-note h1{font-size:39px}}
@media(max-width:800px){.studio{display:flex;justify-content:center;padding:20px 12px}.studio-note{display:none}.studio-header{height:61px;padding:0 22px}.edition{display:none}.studio-brand{font-size:14px;letter-spacing:1.4px}.studio-header button{font-size:10px;padding:8px 11px}.studio{min-height:calc(100dvh - 61px)}.phone{height:calc(100dvh - 143px);min-height:560px}}
@media(max-width:450px){.studio-header{height:51px;padding:0 15px}.studio-brand{font-size:12px}.studio-mark{transform:scale(.8);width:18px}.studio-header button span{padding-left:7px}.studio{padding:0;display:block;min-height:0}.phone{width:100%;height:calc(100dvh - 92px);min-height:440px;border:0;border-radius:0;padding:0;background:#fbf9f4;box-shadow:none}.phone-display{border:0;border-radius:0}.phone:before,.side-key{display:none}.device-status{height:36px;min-height:36px;padding:0 23px}.camera-island{height:19px;width:69px;top:5px}.camera-island:after{top:7px}.home-indicator{height:15px;min-height:15px}.screen-control{margin:0;height:41px;background:#eee9e0;width:100%;justify-content:center}.screen-control button{border:0}.screen-control div{min-width:180px}.device-area{width:100%}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
/* Fit a complete handset in short preview panels; full-size mode remains available. */
.phone{height:804px;min-height:0;transform:scale(var(--phone-scale,1));transform-origin:top center;margin-bottom:calc(804px * (var(--phone-scale,1) - 1))}.studio{min-height:calc(100dvh - 78px);padding-top:20px;padding-bottom:10px}.view-actions{display:flex;gap:9px;align-items:center}.studio-header #fit-toggle{font-size:10px;color:#8d816b;padding:9px 11px}.studio-note h1{font-size:39px}.screen-control{margin-top:12px}
@media(max-width:800px){.studio{min-height:calc(100dvh - 61px);padding-top:16px;padding-bottom:8px}}
@media(max-width:450px){.phone{height:calc(100dvh - 92px);min-height:0;transform:none;margin-bottom:0}.studio{padding:0;min-height:0}#fit-toggle{display:none}.studio-header{gap:8px}.studio-brand{gap:8px}.view-actions{gap:0}}

@media(max-width:450px){.studio{display:flex;justify-content:center;padding:12px 0 8px}.phone{width:402px;height:804px;transform:scale(var(--phone-scale,1));transform-origin:top center;margin-bottom:calc(804px * (var(--phone-scale,1) - 1));padding:8px;border-radius:54px;background:linear-gradient(115deg,#a29683,#e0d9cd 22%,#aaa08e 52%,#f4eee3 77%,#aa9c87);box-shadow:0 12px 35px #71604620}.phone-display{border:4px solid #272722;border-radius:47px}.screen-control{margin-top:12px;height:30px;background:transparent;gap:8px}.screen-control div{min-width:150px}#fit-toggle{display:inline-block}.studio-header{padding:0 10px}.studio-brand{font-size:10px;gap:5px;letter-spacing:1px}.studio-header button{font-size:9px;padding:7px}.view-actions{gap:4px}.studio-header #fit-toggle{font-size:9px;padding:7px}}