/* The website is the screen itself, with no device frame or comparison board. */
.notes-page { padding-bottom:110px; }
.note-add-button { position:absolute; right:22px; bottom:22px; z-index:5; display:grid; place-items:center; width:56px; height:56px; border-radius:50%; background:#7893b4; color:#fff; border:1px solid #ffffff90; box-shadow:0 7px 20px #35557830,inset 0 1px 1px #ffffff40; }
.note-add-button>.icon { width:27px; height:27px; stroke-width:1.8; }
.phone-screen[data-current-page="search"] .screen-navigation button::after { background:#222; }
.spotlight-page { padding:20px 22px 35px; color:#222; background:transparent; }
.spotlight-toolbar { display:flex; align-items:center; gap:12px; }
.spotlight-field { display:flex; align-items:center; flex:1; min-width:0; gap:8px; padding:10px 12px; border:1px solid #ffffff80; border-radius:14px; background:#ffffff75; backdrop-filter:blur(24px); }
.spotlight-field>.icon { width:18px; height:18px; color:#666; }
.spotlight-field input { width:100%; min-width:0; padding:0; background:none; border:0; outline:none; color:#222; font-size:16px; }
.spotlight-field input::placeholder { color:#888; }
.spotlight-field>button { padding:0; }
.spotlight-field button>.icon { width:16px; height:16px; opacity:.7; }
.spotlight-cancel { padding:8px 0; color:#444; font-size:14px; }
.spotlight-hint { margin:13px 3px 27px; font-size:11px; color:#777; }
.spotlight-group { margin-bottom:26px; }
.spotlight-group h2 { margin:0 3px 13px; color:#555; font-size:12px; font-weight:500; }
.spotlight-apps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px 12px; padding:5px 0; }
.spotlight-app { display:flex; flex-direction:column; align-items:center; gap:8px; padding:0; }
.spotlight-app>span:last-child { font-size:11px; color:#444; }
.spotlight-list { border:0; border-radius:18px; overflow:hidden; background:#ffffff65; backdrop-filter:blur(24px); }
.spotlight-list>button { display:flex; gap:12px; align-items:center; text-align:left; width:100%; padding:13px 14px; border-bottom:1px solid #00000005; }
.spotlight-list>button:last-child { border:0; }
.spotlight-list .avatar,.spotlight-note { width:40px; height:40px; border-radius:11px; flex-shrink:0; }
.spotlight-note { display:grid; place-items:center; background:#ffffff60; }
.spotlight-list button>span:not(.spotlight-note) { flex:1; min-width:0; }
.spotlight-list b { font-weight:550; font-size:14px; display:block; }
.spotlight-list small { display:block; font-size:11px; color:#888; margin-top:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.spotlight-list button>.icon { width:15px; height:15px; color:#888; }
.spotlight-empty { margin:65px 0; text-align:center; font-size:13px; color:#777; }
:root { background:#d9d9d9; color-scheme:light; }
html,body { width:100%; height:100%; overflow:hidden; overscroll-behavior:none; }
body { min-width:280px; }
#phone { position:relative; width:100%; height:100%; height:100dvh; max-width:none; margin:0; padding:0; }
#phone .phone-screen { position:absolute; inset:0; width:100%; height:100%; transform:none; border-radius:0; }
#phone .phone-content { top:env(safe-area-inset-top,0px); bottom:var(--home-gesture-height); left:0; right:0; }
#phone .phone-content.on-desktop { top:0; bottom:0; }
.screen-navigation { position:absolute; bottom:0; left:0; right:0; height:var(--home-gesture-height); padding:0; display:flex; align-items:center; justify-content:center; background:var(--app-bg,#f7f7f7); border-top:1px solid #8794a21c; }
.screen-navigation button { display:flex; gap:6px; align-items:center; padding:6px 22px; color:#6e7f91; font-size:11px; border-radius:18px; }
.screen-navigation .icon { width:17px; height:17px; }
#phone .home-page { height:100%; width:100%; max-width:560px; margin:auto; padding:calc(clamp(38px,8vh,88px) + env(safe-area-inset-top,0px)) 22px calc(175px + env(safe-area-inset-bottom,0px)); position:relative; overflow:auto; scrollbar-width:none; }
#phone .app-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(24px,4.6vh,46px) 10px; margin:0; }
#phone .app-launch { display:flex; flex-direction:column; align-items:center; gap:9px; min-width:0; padding:0; }
#phone .app-launch .app-icon { width:clamp(58px,16vw,78px); height:clamp(58px,16vw,78px); border-radius:24%; color:#f2f5fb; background:linear-gradient(155deg,#d7e9ff38,#cedef016); border:1px solid #e6f1ff66; box-shadow:inset 0 1px 2px #ffffff52,inset 0 -1px 3px #142c4e16,0 6px 18px #091a3020; }
#phone .app-launch .tile-art { filter:grayscale(1); opacity:.95; }
#phone .app-label { font-size:12px; font-weight:500; letter-spacing:.1px; color:#fff; text-shadow:0 2px 5px #10213e80; }
#phone .app-icon>.badge { background:#f1f5fb; color:#33475f; font-size:12px; font-weight:600; min-width:22px; height:22px; border:0; top:-7px; right:-6px; }
#phone .calendar-face>small { color:#edf2fb; font-size:10px; }
#phone .calendar-face>strong { color:#fff; font-size:40px; line-height:42px; }
#phone .desktop-bottom { position:absolute; left:16px; right:16px; bottom:max(12px,env(safe-area-inset-bottom,0px)); display:flex; flex-direction:column; align-items:center; gap:18px; }
#phone .search-pill { font-size:12px; padding:7px 13px; background:#c2d7ee25; border:1px solid #e1efff24; box-shadow:0 2px 8px #16355612; backdrop-filter:blur(16px); color:#f5f7fb; }
#phone .search-pill .icon { width:13px; height:13px; }
#phone .dock { display:grid; grid-template-columns:repeat(4,1fr); align-items:center; width:100%; gap:14px; padding:16px 14px; border-radius:32px; background:linear-gradient(155deg,#d7e7ff2c,#b7cfee20); border:1px solid #eff7ff55; box-shadow:inset 0 1px 2px #f9fcff38,0 12px 35px #14244115; backdrop-filter:blur(28px); }
.appearance-preview { height:220px; margin:22px; border-radius:24px; background:var(--tomo-wallpaper); }
#phone .phone-toast { max-width:480px; left:50%; right:auto; width:calc(100% - 40px); transform:translate(-50%,10px); }
#phone .phone-toast.show { transform:translate(-50%,0); }
@media(min-width:700px) {
  #phone .phone-content.inside-app { max-width:880px; margin:auto; background:var(--app-bg); }
  #phone .phone-screen:has(.inside-app) { background:var(--app-bg); }
  #phone .wa-bubble { max-width:520px; }
}
@media(max-height:590px) {
  #phone .home-page { padding-top:24px; padding-bottom:12px; }
  #phone .app-grid { gap:20px 10px; }
  #phone .app-launch .app-icon { width:55px; height:55px; }
  #phone .desktop-bottom { position:relative; left:auto; right:auto; bottom:auto; margin-top:40px; }
}

/* Clear home icons and one neutral frosted wallpaper; in-app media keeps its colors. */
#phone .phone-screen:is([data-current-page="home"],[data-current-page="lock"]) { --app-bg:#d9d9d9; background:#d9d9d9; }
#phone .phone-screen:is([data-current-page="home"],[data-current-page="lock"])>.wallpaper { background:var(--tomo-wallpaper); }
#phone .phone-screen:is([data-current-page="home"],[data-current-page="lock"])>.wallpaper>* { display:none; }
#phone :is(.home-page,.spotlight-page) :is(.app-launch,.spotlight-app) .app-icon, #phone :is(.notification-icon,.lock-notification) .app-icon { background:linear-gradient(150deg,#ffffff70,#ffffff24); color:#fafafa; border:1px solid #ffffff80; border-radius:24%; box-shadow:inset 0 1px 2px #ffffff90,0 4px 12px #00000007; backdrop-filter:blur(18px); }
#phone :is(.home-page,.spotlight-page,.notification-icon,.lock-notification) .tile-art { opacity:.82; filter:grayscale(1) brightness(.55); display:block; }

#phone .home-page .app-label { color:#555; text-shadow:none; font-size:11px; font-weight:400; letter-spacing:0; }
#phone .home-page .dock { background:#ffffff45; border:1px solid #ffffff80; border-radius:30px; box-shadow:inset 0 1px 2px #ffffff70; backdrop-filter:blur(24px); }
#phone .home-page .dock .app-icon { background:linear-gradient(150deg,#ffffff70,#ffffff24); }
#phone .home-page .search-pill { color:#858585; background:#f4f4f4; border:0; box-shadow:none; backdrop-filter:none; }
#phone .app-icon>.app-unread-count { display:flex; background:#ff3b30; color:#fff; min-width:20px; height:20px; padding:0 5px; border:0; font-size:11px; font-weight:500; top:-5px; right:-5px; line-height:20px; }

#phone .phone-screen[data-current-page="lock"] .lock-page { color:#222; }
#phone .phone-screen[data-current-page="lock"] .lock-notification { background:#f1f1f2; color:#222; }

:root { --tomo-wallpaper:linear-gradient(180deg,#d9d9d9 0px,#d9d9d9 max(12px,env(safe-area-inset-top,0px)),#d9d9d900 calc(max(12px,env(safe-area-inset-top,0px)) + 160px)),radial-gradient(ellipse at 15% 90%,#f7f7f7 0%,transparent 58%),radial-gradient(ellipse at 95% 10%,#eeeeee 0%,transparent 55%),linear-gradient(155deg,#b9b9b9,#e3e3e3 52%,#bdbdbd); }

#phone .phone-screen[data-current-page="search"] { --app-bg:transparent; background:var(--tomo-wallpaper),#d9d9d9; }