.screen-ui{position:absolute;top:0;left:0;width:360px;height:780px;overflow:hidden;border-radius:46px;transform-origin:0 0;background:var(--paper);color:var(--ink);font-family:var(--body);text-align:left;pointer-events:none;box-sizing:border-box;will-change:transform;isolation:isolate;font-size:14px}
.screen-ui *{box-sizing:border-box}.phone-status{height:48px;display:flex;justify-content:space-between;align-items:center;padding:0 27px;font-size:12px;font-weight:600;position:relative}.island{position:absolute;left:50%;top:10px;transform:translateX(-50%);width:102px;height:27px;background:#080a07;border-radius:20px}.app-heading{display:flex;align-items:center;justify-content:space-between;padding:12px 24px 22px}.app-brand{font-size:24px;font-weight:500;letter-spacing:-1.5px;text-decoration:underline;text-underline-offset:5px}.avatar{border-radius:50%;background:#dce2ce;display:grid;place-items:center;width:32px;height:32px;font-size:12px}.app-date{display:flex;justify-content:space-between;margin:0 24px;font-size:9px;letter-spacing:1px;color:#73786a}.app-date span{font-size:8px}.app-greeting{font-size:24px;letter-spacing:-1px;line-height:1.15;margin:10px 24px 22px}.app-tabs{display:flex;gap:20px;font-size:11px;padding:0 24px 12px;border-bottom:1px solid #dfe2d8;color:#6b7162}.app-tabs .selected{color:var(--ink);position:relative}.app-tabs .selected:after{content:'';position:absolute;bottom:-13px;left:0;width:100%;height:2px;background:var(--ink)}.app-overview,.app-detail{position:absolute;left:0;right:0;top:249px;padding:16px 20px;transition:none;opacity:1}.app-feature{border-radius:22px;background:#d6ff62;padding:20px;position:relative;overflow:hidden}.app-label{font-size:9px;letter-spacing:1.1px;font-weight:500}.app-feature h3{font-size:27px;line-height:1.05;letter-spacing:-1.2px;font-weight:400;margin:20px 0 14px;position:relative;z-index:1}.app-feature p{font-size:11px;color:#394625;line-height:1.5;margin:0;position:relative;z-index:1}.app-orbit{position:absolute;right:-40px;top:40px;width:195px;opacity:.3}.app-orbit path{stroke:#254810;fill:none;stroke-width:17px;stroke-linecap:round}.app-feature-footer{display:flex;justify-content:space-between;padding-top:18px;margin-top:18px;border-top:1px solid #b5d94f;font-size:10px}.app-metrics{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}.app-metrics>div{border:1px solid #dfe2d8;border-radius:19px;padding:15px;min-width:0}.app-metrics span{font-size:10px;color:#67705c}.app-metrics strong{display:block;font-size:22px;font-weight:400;margin-top:8px;letter-spacing:-1px}.app-metrics small{font-size:12px;letter-spacing:0}.mini-bars{display:flex;align-items:flex-end;gap:6px;height:35px;margin-top:6px}.mini-bars i{flex:1;background:#a8bb91;border-radius:3px;height:70%}.mini-bars i:nth-child(2n){height:50%}.mini-bars i:nth-child(3n){height:95%}.app-metrics svg{width:100%;height:35px;margin-top:6px}.app-metrics svg path{fill:none;stroke:#76915b;stroke-width:2}.app-note{display:flex;gap:10px;margin:20px 3px}.app-note>span{font-size:22px}.app-note strong{font-size:10px;font-weight:500}.app-note p{font-size:9px;color:#6b7162;line-height:1.5;margin:5px 0}.app-detail{opacity:0;transform:translateY(24px);background:var(--paper);padding:23px 24px}.app-detail h3{font-size:32px;font-weight:400;line-height:1.02;letter-spacing:-1.4px;margin:14px 0 10px}.detail-lead{font-size:12px;line-height:1.5;color:#626b56;margin:0}.app-chart{margin:20px 0;background:#e4e9d8;padding:16px;border-radius:17px}.chart-label{display:flex;justify-content:space-between;font-size:9px;color:#616b50}.sleep-bars{display:flex;align-items:flex-end;gap:10px;height:94px;padding-top:18px}.sleep-bars>div{height:var(--v);flex:1;background:#97b372;border-radius:5px 5px 0 0;position:relative}.sleep-bars>div:nth-child(4),.sleep-bars>div:nth-child(5){background:#465b31}.sleep-bars span{position:absolute;top:-14px;font-size:8px;width:100%;text-align:center}.day-labels{display:flex;justify-content:space-between;font-size:8px;margin-top:8px;padding:0 9px}.app-observation>span{font-size:9px;letter-spacing:1px}.app-observation p{font-size:12px;line-height:1.5;color:#555f49;margin:7px 0}.app-takeaway{font-size:10px;line-height:1.5;border-top:1px solid #d4dac9;margin-top:13px;padding-top:12px;color:#627052}.app-bottom{position:absolute;bottom:16px;left:0;right:0;height:54px;display:flex;justify-content:space-around;align-items:center;border-top:1px solid #dce1d1;background:var(--paper);font-size:20px;color:#868c7c}.app-bottom span{text-align:center}.app-bottom .active{color:#24351b}.app-bottom small{display:block;font-size:8px;margin-top:3px}.home-indicator{position:absolute;bottom:7px;left:50%;transform:translateX(-50%);width:108px;height:4px;border-radius:9px;background:#11140e}

.app-detail{padding:18px 24px}.app-detail h3{font-size:30px;margin:12px 0 9px}.app-detail .app-chart{margin:14px 0}.app-observation p{font-size:11px;line-height:1.5}

.app-detail{opacity:1;transform:translateX(100%);height:calc(100% - 249px);background:var(--paper);box-shadow:-6px 0 14px #10120f08}