/* The hardware and working display share one rigid coordinate system. */
.watch-stage{height:600px;isolation:isolate}
.watch-orbit{width:470px;height:470px;border-color:#e2e3da;opacity:.6;z-index:-1}
.watch-orbit:before,.watch-orbit:after{border-color:#e6e7df}
.watch-product{width:340px;aspect-ratio:560/880;position:relative;transform:none;flex-shrink:0;filter:none}
.watch-hardware{display:block;width:100%;height:100%;position:relative;z-index:1;user-select:none;pointer-events:none}
.watch-display{position:absolute;z-index:2;left:23.6%;top:27.35%;width:44%;height:42.2%;border-radius:20%/16%;color:#f5f5f0;background:#030403;overflow:hidden;isolation:isolate}
.watch-statusbar{position:absolute;left:11%;right:11%;top:6%;display:flex;justify-content:space-between;align-items:baseline;font-size:10px;line-height:1;z-index:2}
.watch-statusbar>span:first-child{font:17px/1 Georgia,serif;letter-spacing:-.8px}
.watch-display canvas{position:absolute;left:0;top:7%;width:100%;height:77%}
.watch-elapsed{position:absolute;left:0;right:0;top:45%;font:25px/1 var(--mono);text-align:center;letter-spacing:-1.8px;font-variant-numeric:tabular-nums;z-index:1;text-shadow:0 1px 9px #000}
.watch-display button{position:absolute;bottom:10%;left:9%;right:9%;min-height:44px;padding:0 10px;display:flex;justify-content:center;align-items:center;gap:7px;background:linear-gradient(180deg,#31342e,#22251f);border:1px solid #4b5043;border-radius:30px;color:#f3f4ee;font-size:9px;box-shadow:inset 0 1px 0 #ffffff0c,0 2px 5px #0006;z-index:3;transition:background .2s,box-shadow .2s}
.watch-display button:hover{background:linear-gradient(180deg,#3f4438,#2d3126);border-color:#7b846c}
.watch-display button:active{box-shadow:inset 0 2px 8px #0007;transform:scale(.98)}
.watch-display button:focus-visible{outline:2px solid #d9e6c4;outline-offset:3px}
.watch-control-dot{width:7px;height:7px;background:#e3e9d9;border-radius:50%;flex-shrink:0}
.watch-recording-indicator{position:absolute;top:17%;left:calc(50% - 2.5px);width:5px;height:5px;border-radius:50%;background:#ff5d52;opacity:0;z-index:3}
.watch-product[data-recording=true] .watch-recording-indicator{opacity:1}
.watch-product[data-recording=true] .watch-control-dot{border-radius:1.5px;background:#ff6b5f}
.watch-page-dots{position:absolute;bottom:4%;left:0;right:0;display:flex;justify-content:center;gap:4px}
.watch-page-dots i{height:3px;width:3px;border-radius:50%;background:#42473b}
.watch-page-dots i:first-child{background:#b8c1ab}
.watch-demo-note{z-index:5;bottom:8px;background:#f4f3efe8;border:1px solid #e0e3d6;border-radius:30px;padding:10px 15px;color:#69765a}
@media(max-width:1050px){.watch-stage{height:560px}.watch-product{width:390px}.watch-orbit{width:390px;height:390px}}
@media(max-width:760px){.watch-stage{height:510px}.watch-product{width:min(100%,370px)}.watch-orbit{width:340px;height:340px}.watch-orbit-label{top:12px}.watch-demo-note{bottom:0;font-size:8px}.watch-statusbar{font-size:8px}.watch-statusbar>span:first-child{font-size:14px}.watch-elapsed{font-size:22px}.watch-display button{font-size:8px;min-height:44px;left:7%;right:7%;padding:0 7px;gap:5px}}
@media(max-width:360px){.watch-stage{height:450px}.watch-elapsed{font-size:19px}.watch-statusbar{font-size:7px}.watch-statusbar>span:first-child{font-size:12px}.watch-display button{font-size:7px;gap:4px}}