/* The user's three-page desktop reference, with live movable elements. */
.screen[data-wallpaper="bunny"] .wallpaper{background:#080809 url("assets/reference/bunny-wallpaper.jpg") center/100% 100% no-repeat}
.home{touch-action:pan-y}
.status-bar{padding:15px 27px 0;font-size:14px;height:46px;align-items:flex-start}
.status-leading{display:flex;align-items:center;gap:3px;line-height:17px}
.status-paw{fill:currentColor;stroke:none;width:12px;height:13px;margin-top:1px}
.status-icons{padding-top:3px;gap:5px}.status-icons .battery{background:#6ac48a;color:white;font-size:9px;padding:0 3px;line-height:11px;border-radius:4px}.charge{font-size:9px;margin-left:0}
.desktop-grid{top:63.7px;left:23.5px;right:20.8px;height:539.6px;column-gap:17.7px;row-gap:16px;grid-template-rows:repeat(6,76.6px)}
.desktop-item{justify-content:flex-start;border-radius:15px;overflow:visible}
.desktop-item .app-icon,.dock .app-icon{height:60px;width:60px;border-radius:14px;box-shadow:none}
.reference-icon{background:none!important;overflow:visible}.reference-icon:after{display:none}.reference-icon img{width:100%;height:100%;border-radius:inherit;object-fit:fill;pointer-events:none}
.icon-wrap{position:relative;display:grid;place-items:center;width:60px;height:60px;flex:none;text-shadow:none}
.app-badge{position:absolute;right:-8px;top:-7px;min-width:23px;height:23px;border-radius:14px;background:#ff3b40;color:white;font-size:15px;line-height:23px;text-align:center;letter-spacing:-.5px;padding:0 6px;z-index:2;box-shadow:0 1px 1px #0002;font-weight:400}
.app-label{font-size:10.5px;letter-spacing:0;line-height:15px;margin-top:4px;max-width:calc(100% + 14px);flex:none;overflow:visible;white-space:nowrap;font-weight:400;text-shadow:0 1px 4px #000b}
.reference-widget{width:100%;height:auto;display:flex;align-items:center;flex-direction:column;pointer-events:none}
.reference-widget>img{height:152.5px;width:100%;border-radius:25px;object-fit:fill}
.reference-widget.ref-photo>img{object-fit:cover}
.photo-placeholder{height:152.5px;width:100%;border-radius:25px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;background:#e5e6e4;color:#858b87;text-shadow:none}
.photo-placeholder svg{width:33px;height:33px;stroke-width:1.4}.photo-placeholder span{font-size:11px;letter-spacing:.4px}
.photo-empty{min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--muted);gap:9px;text-align:center}.photo-empty svg{width:33px;height:33px;stroke-width:1.3}.photo-empty p{font-size:13px;margin:0}.photo-empty small{font-size:10px}
.reference-widget .app-label{margin-top:4px}
.widget-item:has(.reference-widget){border-radius:25px}
.dock{left:12px;right:12px;bottom:12px;height:90px;border-radius:27px;padding:0 14px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(130deg,#bdbdbb42,#e3e3df38);border:1px solid #c4c4c23b;box-shadow:inset 0 1px 1px #fff2;backdrop-filter:blur(23px);-webkit-backdrop-filter:blur(23px)}
.dock>button{padding:0;position:relative;height:60px;width:60px;flex:none;display:grid;place-items:center}
.home-search{position:absolute;bottom:119px;left:50%;transform:translateX(-50%);height:28px;padding:0 10px;border-radius:18px;display:flex;align-items:center;gap:3px;font-size:10px;color:#f7f7f8!important;background:#c8c7cc30;backdrop-filter:blur(13px);box-shadow:inset 0 0 0 .5px #fff1}
.home-search svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:1.8}
.page-controls{bottom:118px;display:none;background:#c8c7cc30;border-radius:18px;height:29px;align-items:center;padding:0 8px;backdrop-filter:blur(13px)}
.editing .page-controls{display:flex}.editing .home-search{display:none}
.home-indicator{display:none}.app-open .home-indicator{display:block}
.edit-banner{top:29px;left:24px;right:24px;height:27px;background:#222b;border:0;backdrop-filter:blur(16px);border-radius:20px;font-size:10px;padding:0 9px;z-index:28}.edit-banner button{font-size:10px}
.app-icon.message{display:grid;place-items:center;line-height:0}.app-icon.message svg{display:block;margin:0;align-self:center;justify-self:center;width:44px;height:36px}
.desktop-pagination{display:flex;gap:5px;margin-top:15px;align-items:center;height:22px}.desktop-pagination button{font-size:10px;letter-spacing:1px;color:var(--muted);padding:4px 12px;border-radius:20px}.desktop-pagination button.active{color:var(--ink);background:var(--line)}
.phone-hint{margin-top:8px!important}.theme-preview.bunny{background:#121113 url('assets/reference/bunny-wallpaper.jpg') center 65%/cover}
.phone-search-field{display:flex;align-items:center;padding:11px 12px;gap:9px;background:var(--soft);border-radius:12px;margin-bottom:14px;color:var(--muted)}.phone-search-field svg{height:17px;width:17px}.phone-search-field input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:var(--ink);font-size:12px}
.shortcut-row{display:flex;align-items:center;gap:12px;text-align:left;width:100%;padding:10px 0;border-bottom:1px solid var(--line)}.shortcut-row>img{width:40px;height:40px;border-radius:9px}.shortcut-row>span{flex:1}.shortcut-row b{font-size:12px;font-weight:500;display:block}.shortcut-row small{font-size:10px;color:var(--muted);display:block;margin-top:4px}.shortcut-row>svg{width:14px;height:14px;color:var(--muted)}.search-empty{font-size:12px;color:var(--muted);padding:30px 0;line-height:1.8}
.weather-detail{margin:15px 0 30px;padding:30px 20px;background:linear-gradient(#8995a1,#556576);border-radius:24px;color:white;display:flex;flex-direction:column;align-items:center;gap:8px}.weather-detail strong{font-size:78px;font-weight:250;line-height:1.1}.weather-detail small{margin-top:8px}
.battery-detail{display:flex;flex-direction:column;align-items:center;gap:15px;margin:15px 0 30px;padding:30px;background:#222;color:white;border-radius:24px}.battery-detail svg{width:48px;height:48px;color:#55d778}.battery-detail strong{font-size:60px;font-weight:300}.battery-detail span{font-size:12px;color:#ccc}
.focus-mode .desktop-pagination{position:fixed;right:24px;bottom:24px;z-index:100;margin:0}
@media(max-width:650px){.desktop-pagination{margin-top:11px}.phone-hint{display:none}.phone-stage{padding-bottom:8px}}
/* On a real phone, the desktop itself fills the available browser area. */
@media(max-width:650px), (pointer:coarse){
  :root{--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--grid-height:min(539.6px,calc(var(--phone-height,812px) - 245px))}
  html,body{margin:0;min-height:100%;background:#080809}
  body{min-width:0;overflow:hidden}
  .site-header,.intro-panel,.inspector,.site-footer,.mobile-toolbar,.desktop-pagination,.phone-hint,.phone-aura,.exit-focus{display:none!important}
  .workspace,.focus-mode .workspace{display:flex;align-items:center;justify-content:center;width:100%;height:100dvh;min-height:0;max-width:none;padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);margin:0}
  .phone-stage{padding:0;flex:none}
  .phone-holder{height:calc(var(--phone-height,812px) * var(--phone-scale))}
  .phone{height:var(--phone-height,812px);padding:0;border-radius:0;background:none;box-shadow:none}
  .phone:before,.side-button{display:none}
  .screen{border-radius:0}
  .desktop-grid{height:var(--grid-height);grid-template-rows:repeat(6,minmax(0,1fr))}
  .desktop-item .app-icon,.desktop-item .icon-wrap{width:min(60px,calc((var(--grid-height) - 80px) / 6 - 19px));height:min(60px,calc((var(--grid-height) - 80px) / 6 - 19px))}
  .reference-widget>img,.photo-placeholder{height:calc((var(--grid-height) - 80px) / 3 - 3px)}
  .page-controls,.editing .page-controls{display:flex;left:50%;right:auto;bottom:150px;transform:translateX(-50%);height:24px;gap:0;padding:0;background:none;backdrop-filter:none}
  .page-dot,.page-dot.active{position:relative;width:20px;height:24px;padding:0;background:none}
  .page-dot:after{content:'';position:absolute;top:9px;left:7px;width:6px;height:6px;border-radius:50%;background:#ffffff75}
  .page-dot.active:after{background:#fff}
  .toast{bottom:20px}
}