@font-face{font-family:Inter;src:url('./assets/inter.woff') format('woff');font-style:normal;font-weight:100 900;font-display:swap}
:root{color-scheme:light;--ink:#291b3d;--accent:#7142ad;--accent-hover:#5b3093;--accent-shadow:#7142ad24;--focus-ring:#ad88e7c9;--glass:rgba(222,201,249,.34);--rim:rgba(244,232,255,.65);font-family:-apple-system,BlinkMacSystemFont,Inter,'Segoe UI',sans-serif;font-synthesis:none;--light-x:25%;--light-y:12%}
*{box-sizing:border-box}
html{min-width:320px;scroll-behavior:smooth}
body{margin:0;min-height:100svh;background:#100918;-webkit-font-smoothing:antialiased}
a{-webkit-tap-highlight-color:transparent;color:inherit;text-decoration:none;touch-action:manipulation;-webkit-user-drag:none}
img,svg{display:block;max-width:100%}
img{user-select:none;-webkit-user-drag:none}
a:focus-visible{outline:3px solid #fff;outline-offset:8px;border-radius:12px;box-shadow:0 0 0 7px var(--focus-ring)}
.skip-link{position:fixed;z-index:9;left:20px;top:16px;padding:12px 20px;background:#fff;color:#3d2457;transform:translateY(-180%);border-radius:14px}
.skip-link:focus{transform:translateY(0)}
.screen{isolation:isolate;position:relative;min-height:100svh;overflow:hidden;padding-bottom:166px;background:#100918}
.wallpaper{z-index:-3;position:fixed;inset:-3%;background:url('./assets/lavender-wallpaper.png') center center/cover no-repeat;animation:wallpaper-drift 28s ease-in-out infinite alternate;will-change:transform}
.wallpaper-shade{z-index:-2;position:fixed;inset:0;background:linear-gradient(180deg,#00000002 10%,#14092126 100%)}
.status-bar{position:relative;min-height:50px;display:flex;align-items:center;justify-content:space-between;padding:12px 32px;color:#f3e9ff;text-shadow:0 1px 4px #11051e66;font-size:.875rem;line-height:1.3}
.status-name{font-weight:600;letter-spacing:-.015em}
.status-symbols{display:flex;align-items:center;gap:10px}
.wifi{width:20px;height:16px;stroke:currentColor;stroke-width:2;stroke-linecap:round;fill:none}
.wifi circle{fill:currentColor;stroke:none}
.battery{width:28px;height:15px;fill:none;stroke:currentColor;stroke-width:1.4}
.battery path{stroke-width:2.4;stroke-linecap:round}
.battery-fill{fill:currentColor;stroke:none}
.home-content{width:100%;max-width:1440px;margin:0 auto;display:grid;grid-template-columns:minmax(306px,.87fr) minmax(530px,1.63fr);column-gap:clamp(64px,7vw,116px);align-items:start;padding:clamp(35px,6vh,78px) clamp(44px,5vw,80px) 45px}
.clock-widget{color:#f0e3ff;margin:0 0 32px 3px;text-shadow:0 2px 12px #9f72d02b}
.clock{display:block;font-size:clamp(5.75rem,7.6vw,7.7rem);font-weight:230;font-variation-settings:'wght' 230,'opsz' 32;line-height:1.04;letter-spacing:-.065em;font-variant-numeric:tabular-nums;white-space:nowrap}
.date{font-size:clamp(1rem,1.45vw,1.23rem);font-weight:500;letter-spacing:-.025em;margin:7px 0 0;line-height:1.4}
.glass{border:1px solid var(--rim);background:linear-gradient(135deg,#ffffff42,#ffffff12),var(--glass);-webkit-backdrop-filter:blur(26px) saturate(1.3);backdrop-filter:blur(26px) saturate(1.3);box-shadow:inset 1px 1px 1px #ffffff91,inset -1px -1px 1px #ffffff32,0 12px 25px -10px #0e031f55}
.calendar-widget{position:relative;overflow:hidden;border-radius:29px;padding:23px 21px;display:grid;grid-template-columns:.8fr 1.35fr;column-gap:18px;min-height:187px;color:var(--ink);--glass:#eadcffce}
.calendar-widget:before,.profile-widget:before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at var(--light-x) var(--light-y),#ffffff35,transparent 68%)}
.calendar-today,.calendar-month{position:relative}
.today-weekday{font-size:.75rem;letter-spacing:.025em;color:#542b7b;font-weight:650;margin:1px 0 4px}
.today-number{font-size:4.4rem;font-weight:350;line-height:1.12;letter-spacing:-.065em;display:block}
.today-month{font-size:.875rem;line-height:1.35;margin:5px 0 0;color:#4e385f}
.month-title{margin:2px 0 11px;font-size:.75rem;font-weight:650;letter-spacing:.025em;color:#542b7b}
.weekdays,.month-grid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;gap:3px 1px;font-size:.75rem;line-height:1.5}
.weekdays{margin-bottom:4px;font-weight:650;color:#4c365f}
.month-grid span{display:grid;place-items:center;min-height:19px;aspect-ratio:1;line-height:1;max-height:24px;font-weight:500}
.month-grid .is-today{border-radius:50%;background:#7044a5;color:white;font-weight:700;box-shadow:0 2px 4px #663a9e38}
.month-grid .is-weekend:not(.is-today){color:#533b69}
.profile-widget{position:relative;overflow:hidden;display:flex;align-items:center;gap:16px;border-radius:27px;padding:21px;margin-top:20px;color:var(--ink);--glass:#e6d7fac9}
.avatar{width:68px;height:68px;flex:none;border-radius:20px;box-shadow:0 1px 2px #3b15542e,0 0 0 1px #ffffff54;object-fit:cover;position:relative}
.profile-copy{position:relative;min-width:0}
h1{font-size:clamp(1.3rem,2vw,1.65rem);letter-spacing:-.05em;line-height:1.15;margin:0 0 7px;font-weight:650}
.profile-copy p{font-size:.875rem;color:#4b365d;line-height:1.4;margin:0;letter-spacing:-.02em}
.app-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:clamp(24px,4vw,60px);row-gap:66px;padding-top:21px;scroll-margin-top:25px}
.app-grid:focus{outline:none}
.app{display:flex;flex-direction:column;align-items:center;position:relative;min-width:0}
.app-icon{display:grid;place-items:center;position:relative;isolation:isolate;width:94px;height:94px;flex:none;border-radius:24px;box-shadow:inset 0 1px 1px #ffffff80,inset 0 -2px 3px #0000000d,0 7px 14px -5px #09011380,0 1px 2px #18052240;transition:transform .24s cubic-bezier(.2,.7,.2,1),box-shadow .24s ease,filter .24s ease;overflow:hidden}
.app-icon:after{content:'';position:absolute;inset:0;border:1px solid #ffffff38;border-radius:inherit;pointer-events:none;background:linear-gradient(140deg,#ffffff12,transparent 58%);z-index:2}
.youtube-icon{background:linear-gradient(155deg,#ff454b,#ff2636 62%,#e41c2d)}
.tiktok-icon,.x-icon{background:linear-gradient(155deg,#282a30,#0c0d12 72%)}
.twitch-icon{background:linear-gradient(155deg,#a866ff,#9146ff 60%,#7039d7)}
.instagram-icon{background:radial-gradient(ellipse at 25% 108%,#ffda75 3%,#ff923c 30%,#f43f62 57%,#c52cb4 78%,#7e42c9 100%)}
.safari-icon,.photos-icon{background:#fafbfc}.mail-icon{background:#168cf1}
.brand-mark{filter:brightness(0) invert(1);position:relative;z-index:1;object-fit:contain;width:56%;height:56%}
.tiktok-icon .brand-mark,.x-icon .brand-mark{width:50%;height:50%}
.full-icon{width:100%;height:100%;object-fit:contain}
.app-name{font-size:1rem;font-weight:500;color:#f3eaff;margin-top:12px;line-height:1.4;letter-spacing:-.015em;text-shadow:0 1px 7px #0d041bcc;text-align:center;max-width:100%;overflow-wrap:anywhere}
@media(hover:hover){.app:hover .app-icon,.dock-app:hover .app-icon{transform:translateY(-5px) scale(1.035);filter:brightness(1.035);box-shadow:inset 0 1px 1px #ffffff80,0 13px 22px -6px #29103980}}
.app:active .app-icon,.dock-app:active .app-icon{transform:scale(.91);filter:brightness(.93)}
.dock{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);z-index:3;display:flex;align-items:center;gap:21px;padding:14px 20px;border-radius:30px;--glass:#ad85dc38;box-shadow:inset 1px 1px 1px #ffffffa1,inset -1px -1px 1px #ffffff38,0 8px 24px #0b001a80}
.dock-app{position:relative;display:block;border-radius:18px}
.dock .app-icon{width:66px;height:66px;border-radius:18px}
.dock-divider{width:1px;height:49px;background:#ead8ff66;box-shadow:1px 0 #8b61af26;margin:0 1px}
.dock-tooltip{position:absolute;pointer-events:none;opacity:0;transform:translate(-50%,5px);left:50%;bottom:calc(100% + 23px);padding:8px 12px;border-radius:11px;background:#eadcf9f2;color:#291b3d;font-size:.875rem;font-weight:500;box-shadow:0 3px 15px #0002;transition:opacity .18s ease,transform .18s ease}
@media(hover:hover){.dock-app:hover .dock-tooltip{opacity:1;transform:translate(-50%,0)}}
.dock-app:focus-visible .dock-tooltip{opacity:1;transform:translate(-50%,0)}
.home-indicator{position:fixed;bottom:9px;left:calc(50% - 66px);width:132px;height:4px;border-radius:10px;background:#e7d3ffcc;z-index:4}
.clock-widget,.calendar-widget,.profile-widget,.app{animation:arrive .75s cubic-bezier(.16,1,.3,1) both}
.calendar-widget{animation-delay:.03s}.profile-widget{animation-delay:.07s}.app:nth-child(2n){animation-delay:.055s}.app:nth-child(n+5){animation-delay:.1s}
@keyframes arrive{from{opacity:0;transform:translateY(11px) scale(.982)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes wallpaper-drift{from{transform:scale(1.025) translate3d(-.5%,.1%,0)}to{transform:scale(1.055) translate3d(.5%,-.3%,0)}}
@media(min-width:1180px) and (min-height:900px){.home-content{padding-top:76px}.app-grid{row-gap:86px}.app-icon{width:106px;height:106px;border-radius:28px}.clock-widget{margin-bottom:39px}.calendar-widget{min-height:205px;padding-top:28px}.profile-widget{margin-top:24px;padding:24px 21px}.dock{bottom:38px;padding:16px 24px;gap:24px}.dock .app-icon{width:70px;height:70px;border-radius:19px}}
@media(max-width:1120px){.home-content{grid-template-columns:minmax(274px,.9fr) minmax(410px,1.35fr);gap:48px;padding:36px 38px 45px}.clock{font-size:6rem}.date{font-size:1rem}.app-grid{column-gap:24px;row-gap:61px}.app-icon{width:82px;height:82px;border-radius:22px}.app-name{font-size:.9375rem}.calendar-widget{padding:20px 17px;column-gap:13px}.today-number{font-size:3.9rem}.profile-widget{padding:20px 17px;gap:14px}.avatar{width:57px;height:57px;border-radius:17px}h1{font-size:1.45rem}}
@media(max-width:850px){.home-content{grid-template-columns:1fr;gap:35px;max-width:720px;padding:22px 32px 45px}.widgets{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:end}.clock-widget{grid-column:1/-1;margin:0 0 12px 2px}.clock{font-size:5.8rem}.calendar-widget{min-height:175px}.profile-widget{height:175px;margin:0;flex-direction:column;align-items:flex-start;justify-content:center;gap:12px;padding:18px 22px}.avatar{width:59px;height:59px;border-radius:18px}.app-grid{row-gap:38px;column-gap:32px;padding-top:0}.app-icon{width:86px;height:86px;border-radius:23px}.app-name{font-size:.9375rem}.screen{padding-bottom:164px}}
@media(max-width:540px){
  .status-bar{padding:12px 23px;min-height:46px;padding-top:max(12px,env(safe-area-inset-top))}
  .status-name{font-size:.8125rem}
  .screen{padding-bottom:calc(145px + env(safe-area-inset-bottom))}
  .home-content{display:block;width:100%;max-width:480px;margin-inline:auto;padding:clamp(22px,5vh,42px) 20px 28px}
  .widgets{display:none}
  .app-grid{--mobile-app-gap:16px;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;width:100%;column-gap:var(--mobile-app-gap);row-gap:32px;padding:0;margin:0 auto}
  .app-grid>.app{flex:0 0 calc((100% - 3 * var(--mobile-app-gap)) / 4)}
  .app-icon{width:clamp(54px,16vw,74px);height:clamp(54px,16vw,74px);border-radius:21%}
  .app-name{font-size:.875rem;letter-spacing:-.025em;margin-top:9px}
  .dock{bottom:max(24px,env(safe-area-inset-bottom));width:calc(100% - 36px);max-width:390px;justify-content:space-around;gap:12px;padding:14px 16px;border-radius:29px;background:linear-gradient(150deg,#ecdcff40,#b997e329),#6c478d40;backdrop-filter:blur(28px) saturate(1.5)}
  .dock .dock-desktop-only,.dock-divider,.dock-tooltip{display:none}
  .dock .app-icon{width:clamp(52px,15vw,64px);height:clamp(52px,15vw,64px);border-radius:16px}
  .home-indicator{width:106px;left:calc(50% - 53px);bottom:8px}
  .wallpaper{background-position:43% center}
}
@media(max-width:360px){.home-content{padding-inline:18px}.app-grid{--mobile-app-gap:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.wallpaper{will-change:auto}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass{background:#e2d2f6f0}.dock{background:#674d85f0}}