/* OXYЙ OS · Glass / Windows 7 visual system, October 2026. */
@font-face{font-family:Nunito;src:url('/assets/fonts/nunito-variable.woff') format('woff');font-weight:200 1000;font-display:swap}
@font-face{font-family:Comfortaa;src:url('/assets/fonts/comfortaa-variable.woff') format('woff');font-weight:300 700;font-display:swap}
:root{font-family:Nunito,'Segoe UI',sans-serif;color:#103c55;--muted:#315b70;--edge:rgba(241,255,255,.85);--shadow:0 8px 28px #00437232}
body{background-image:url('/assets/wallpaper-aero-v2.webp')}
body:before{background:linear-gradient(120deg,#005d8a0b,#b8f9ff00 55%,#ffffff0a)}
h1,h2,.brand,.familiar-card strong{font-family:Comfortaa,Nunito,sans-serif}
h1{font-weight:700}h2{font-weight:700;letter-spacing:-.45px}
button,input,textarea{font-family:Nunito,'Segoe UI',sans-serif}
.glass{background:linear-gradient(133deg,#ffffff57,#c6f0ff28 46%,#8ed7f02d);border:1px solid var(--edge);border-radius:13px;box-shadow:inset 0 1px 0 #ffffffdc,inset 0 -1px 1px #16739442,var(--shadow);backdrop-filter:blur(34px) saturate(1.3);-webkit-backdrop-filter:blur(34px) saturate(1.3);text-shadow:0 1px 0 #ffffff65}
.primary,.secondary,.danger{border-radius:5px;padding:9px 19px;min-height:38px;font-weight:700;box-shadow:inset 0 1px 0 #fff9,inset 0 -1px 1px #0a538936,0 1px 3px #1b557138;transition:box-shadow .15s,filter .15s}
.primary{border-color:#0771a4;background:linear-gradient(#9de9ff 0%,#56c7ec 46%,#078cbe 49%,#0b9dd3 82%,#48c8f2);text-shadow:0 1px 2px #00517d}
.secondary{border-color:#679bb7;background:linear-gradient(#ffffffd9,#ddf6ffb3 46%,#a9d8ebbf 49%,#def8ffbd)}
.danger{background:linear-gradient(#fff5f5dd,#f8d2d7c7 47%,#e7abb5c2 49%,#ffedf0d9)}
.primary:hover,.secondary:hover,.danger:hover{filter:brightness(1.06);box-shadow:inset 0 1px 0 #fff,0 0 8px #48d8ff84}
.primary:active,.secondary:active{box-shadow:inset 0 2px 5px #085d8370}
input,textarea{border-radius:5px;border-color:#6197b4;background:#f7fdffbf;box-shadow:inset 0 1px 4px #0b4d702b}
input:focus,textarea:focus{background:#ffffffeb}
.eyebrow{font-family:Nunito,sans-serif;letter-spacing:1.2px;font-weight:800;color:#315f77}
.icon,.nav-button .icon{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:0;background:none;box-shadow:none;text-shadow:none;overflow:visible;font-size:0;vertical-align:middle}
.icon{width:52px;height:52px;flex-shrink:0}
.icon img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;filter:drop-shadow(0 2px 2px #084f7338)}
.icon.small{width:30px;height:30px;border-radius:0}.icon.big{width:66px;height:66px}
.topbar{border-radius:12px;background:linear-gradient(120deg,#e3f9ff60,#a5e5f42b);padding:11px 20px}
.brand{font-size:24px;letter-spacing:-1.1px;font-weight:700;line-height:1.3}
.brand small{font-family:Nunito,sans-serif;font-size:9px;letter-spacing:3px;margin:3px 0 0 2px;font-weight:800}
.search-open{border-radius:7px;background:linear-gradient(#f3fdff85,#e5f8ff43);padding:6px 12px;box-shadow:inset 0 1px 4px #15517125}
.search-open .icon{width:25px;height:25px}.search-open .keycap{background:#eafaff50}
.round{border-radius:8px;width:40px;height:37px;background:linear-gradient(#e6faff9c,#92cfe75e);display:grid;place-items:center;box-shadow:inset 0 1px 1px #fff8,0 1px 3px #2b6b8426}
.round .icon{width:31px;height:31px}.avatar{width:36px;height:36px;background:linear-gradient(#d7f9ff72,#8acfe43b);border:1px solid #fff9;box-shadow:inset 0 1px #fff,0 2px 5px #17617e30}
.avatar .icon{width:31px;height:31px}.user-name{font-weight:700}
.sidebar{padding:12px 8px;border-radius:12px;scrollbar-gutter:stable}
.nav-button{font-weight:700;font-size:13px;gap:9px;border-radius:6px;padding:7px 7px;margin:1px 0}
.nav-label{min-width:0;flex:1}.nav-label.branded{font-size:12px;letter-spacing:-.2px;white-space:nowrap}
.nav-button.active{background:linear-gradient(#eefcff91,#92daf065);border:1px solid #ffffffd0;box-shadow:inset 0 1px #fff,0 1px 4px #256f8d25}
.nav-button:hover{background:linear-gradient(#ebfcff6b,#b4eafd3d);border-color:#eaffffc2}
.nav-hint{font-size:9px;color:#2d6072}.sidebar-title{font-size:9px;letter-spacing:1.8px;font-weight:800;color:#295c72}
.workspace{min-height:calc(100dvh - 100px);padding-top:45px}
.greeting h1{font-size:clamp(26px,2.4vw,40px);line-height:1.3;letter-spacing:-1.1px;text-shadow:0 1px 3px #fff,0 2px 15px #dffbffc9}
.greeting p{font-weight:600}.greeting .eyebrow{font-size:10px}
.familiar-stage{position:absolute;left:50%;right:auto;top:clamp(145px,20vh,220px);bottom:auto;transform:translateX(-50%);width:clamp(300px,29vw,430px);height:auto;aspect-ratio:1;display:block;pointer-events:none}
.familiar-stage:after{content:none;display:none}
.familiar{position:relative;display:block;width:100%;height:100%;max-height:none;padding:0;border:0;background:none;border-radius:16px;animation:none;filter:none;pointer-events:auto;cursor:pointer;transform:none;overflow:visible;--wander-x:0px;--gaze-x:0px;--gaze-y:0px;--gaze-angle:0deg}
.familiar-traveler{display:block;width:100%;height:100%;transform:translateX(var(--wander-x));transition:transform 3.8s cubic-bezier(.4,0,.2,1)}
.familiar-pose{display:block;position:relative;width:100%;height:100%;transform:translate(var(--gaze-x),var(--gaze-y)) rotate(var(--gaze-angle));transition:transform .45s ease-out}
.familiar-static{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 7px #004b6328)}
.familiar-sprite{position:absolute;inset:0;background-size:300% 200%;background-position:0 0;background-repeat:no-repeat;opacity:0;filter:drop-shadow(0 8px 7px #004b6328)}
.familiar.atlas-ready:not(.is-still) .familiar-static{visibility:hidden}.familiar.atlas-ready:not(.is-still) .familiar-sprite{opacity:1}
.familiar:not(.is-still) .familiar-pose{animation:pet-breathe 6s ease-in-out infinite}
.familiar.bounce .familiar-traveler{animation:pet-joy .75s ease-out}
.familiar-bubble{left:50%;right:auto;top:122px;bottom:auto;transform:translateX(-50%);max-width:270px;min-width:200px;text-align:center;background:#dff8ff63;border-radius:13px;border:1px solid #edffffb3;box-shadow:inset 0 1px #fff,0 5px 18px #1a6a8e25;backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px);font-size:13px;font-weight:700;color:#14485f}
.familiar-bubble:after{display:none}.familiar-name{display:none!important}
.home-tasks{position:absolute;bottom:100px;left:15px;width:min(315px,44%);margin:0;padding:18px;border-radius:12px;z-index:1}
.home-tasks .panel-heading h2{font-size:15px}.home-tasks .empty{font-size:13px}
.panel-heading h2,.quick-panel h2{font-size:15px;line-height:1.5}
.task-row{border-color:#4398ba3b}.link-button{color:#006999;font-weight:700}
.rightbar{gap:17px}.clock-panel{padding:21px}.clock-panel time{font-family:Comfortaa,Nunito,sans-serif;font-weight:600;font-size:47px;letter-spacing:-3px;color:#0a3f5c;text-shadow:0 1px 1px #eaffffc7}
.clock-panel .date{font-weight:800}.clock-bottom{color:#27596d;font-weight:700}
.quick-panel{padding:18px}.quick-link{padding:9px 0;font-weight:700;font-size:13px;gap:11px}
.quick-link .icon{width:33px;height:33px}.quick-link:after{color:#1c6b8f}.small-panel{padding:17px}
.dock{padding:8px 17px;gap:20px;border-radius:14px;background:linear-gradient(#d3f5ff5f,#75c9e82a 46%,#3497bc4d 49%,#b6eeff52);box-shadow:inset 0 1px #fff,0 7px 22px #004b794d}
.dock .icon{width:54px;height:54px}.dock-button:hover{transform:translateY(-5px) scale(1.06)}
.dock-label{border-radius:5px;background:#def8ffb8;backdrop-filter:blur(20px);font-weight:700}
.system-line{font-weight:700;font-size:10px;color:#164b64;text-shadow:0 1px 2px #fff}

/* Windows 7 Aero frame: narrow glass surround, connected glossy caption buttons. */
.window{padding:6px;border-radius:8px;border:1px solid #edffffdd;background:linear-gradient(118deg,#b8e9ff92,#67b7d961 42%,#dbf8ff8a);box-shadow:inset 0 0 0 1px #ffffff7d,0 0 0 1px #135b889c,0 14px 48px #002f5966;backdrop-filter:blur(28px) saturate(1.3);-webkit-backdrop-filter:blur(28px) saturate(1.3)}
.titlebar{height:33px;padding:0 112px 5px 5px;margin:0;border:0;background:none;gap:7px;position:relative}
.titlebar .icon{width:24px;height:24px}.titlebar strong{font-family:Nunito,sans-serif;font-weight:800;font-size:13px;color:#0a344e;text-shadow:0 0 5px #fff,0 1px 2px #fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.window-buttons{position:absolute;right:-1px;top:-7px;margin:0;display:flex;gap:0;border-radius:0 0 5px 5px;box-shadow:0 1px 2px #083b6894;overflow:hidden;border:1px solid #4b729b;border-top:0}
.window-control{position:relative;display:grid;place-items:center;width:29px;min-width:29px;height:23px;padding:0;border:0;border-left:1px solid #406f9b;border-radius:0;background:linear-gradient(#e0f5ffaf 0%,#a4cbe39c 45%,#477ea67d 49%,#a6d6ed93);box-shadow:inset 0 1px #ffffffcd,inset 0 -1px #ffffff54;color:#fff;font-size:0;text-shadow:0 1px 2px #173c6d}
.window-control:first-child{border-left:0}.window-control:hover{background:linear-gradient(#c3f3ff,#6fc8ec 46%,#198cc6 49%,#7fe4ff);box-shadow:inset 0 1px #fff,0 0 12px #47d8ff}
.window-control.minimize:after{content:"";width:10px;height:3px;background:#fff;box-shadow:0 1px 1px #1e3d61;transform:translateY(3px)}
.window-control.maximize:after{content:"";width:11px;height:9px;border:1.5px solid #fff;border-top-width:3px;box-shadow:0 1px 1px #153c69}
.window.maximized .window-control.maximize:after{width:9px;height:8px;box-shadow:2px -2px 0 -1px #78a9ca,3px -3px 0 0 #fff}
.window-control.close{width:48px;background:linear-gradient(#f8c6bfdf,#dc8e84df 45%,#ae3828e3 49%,#dc6d53eb);border-left-color:#833e43}
.window-control.close:after{content:"×";font-family:Arial,sans-serif;font-size:21px;font-weight:700;line-height:1;text-shadow:0 1px 2px #63251f}
.window-control.close:hover{background:linear-gradient(#ffd5b5,#f49c72 45%,#d93815 49%,#ff9662);box-shadow:inset 0 1px #fff,0 0 12px #ff624a}
.window-content{height:calc(100% - 33px);border:1px solid #6e9bb9;border-radius:2px;background:linear-gradient(135deg,#f6fcffe8,#e5f5fce0);padding:22px;box-shadow:0 0 0 1px #ffffff8c;scrollbar-gutter:stable}
.window-content>h2{font-size:23px}.window.maximized{border-radius:7px}
.module-card{padding:17px 8px;border-radius:7px;border-color:#82b5cec2;background:linear-gradient(#ffffffad,#dbf5ff82 48%,#b7dfe96e 50%,#edfaff9e);box-shadow:inset 0 1px #fff,0 2px 5px #20597813}
.module-card .icon{width:60px;height:60px}.module-card .module-name{font-weight:800}.module-card:hover{background:linear-gradient(#ffffffdf,#c6f0ffbd);border-color:#29a0ce;box-shadow:0 0 9px #65ddff6b}
.familiar-card{border-radius:8px;background:linear-gradient(#ffffffba,#d4f3ff87);border-width:1px;border-color:#83b3ce}
.familiar-card.selected{border-color:#1480ba;box-shadow:inset 0 0 0 1px #6be6ff,0 0 8px #66d5f955}
.familiar-card p{font-size:12px}.familiar-card strong{font-size:15px}.familiar-card .latin{font-weight:800}
.note-pick{border-radius:5px;background:linear-gradient(#edfaffbb,#ccebf58c);font-weight:700}.note-pick.selected{background:linear-gradient(#d7f9ff,#a6dff6);border-color:#57a6cd}
.future-badge{background:#c9e8f185;color:#2a5c70;border:1px solid #a7d2e0;font-weight:700}
.login-card{background:linear-gradient(135deg,#f4feff61,#b6e5f635);padding:32px;border-radius:13px}
.login-intro h1{font-family:Comfortaa,Nunito,sans-serif;font-size:54px}.login-intro p{font-weight:600}.login-card h2{font-size:24px;line-height:1.5}
.login-divider{font-weight:700}.login-foot{font-weight:700}.badge{background:#e4fbff69;border-radius:6px}
#toast{border-radius:7px;background:#d9f5ffd1;backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);font-weight:700}

/* Chromium/WebKit glass scrollbars; Firefox gets the same aqua colors. */
*{scrollbar-width:thin;scrollbar-color:#438fbba6 #daf6ff39}
@supports selector(::-webkit-scrollbar){
  *,.sidebar,.window-content,.note-list,textarea{scrollbar-width:auto;scrollbar-color:auto}
  *::-webkit-scrollbar{width:12px;height:12px}
  *::-webkit-scrollbar-track{background:linear-gradient(90deg,#b7e4f33b,#efffff49,#87bfd93b);border-left:1px solid #b7e9f05e;border-radius:8px}
  *::-webkit-scrollbar-thumb{min-height:35px;border:2px solid transparent;border-radius:7px;background:linear-gradient(90deg,#f2ffffa6,#75bedbb8 42%,#358dbaa1 52%,#bdeeffb8);background-clip:padding-box;box-shadow:inset 0 0 0 1px #ffffff68}
  *::-webkit-scrollbar-thumb:hover{background:linear-gradient(90deg,#eaffff,#7ddcff 44%,#1aa0d2 50%,#a5efff);background-clip:padding-box}
  *::-webkit-scrollbar-corner{background:#b6e9f644}
}
@keyframes pet-breathe{0%,100%{scale:1 1}50%{scale:1.012 1.018}}
@keyframes pet-joy{0%,100%{translate:0 0}40%{translate:0 -13px}65%{translate:0 -3px}}

@media(min-width:1600px){
  .workspace{padding-top:65px}.greeting h1{font-size:40px}
  .familiar-stage{left:50%;right:auto;top:190px;bottom:auto;width:440px;height:440px}
  .familiar-bubble{left:50%;right:auto;top:132px;bottom:auto}.home-tasks{margin:0;width:325px;bottom:105px}
}
@media(max-width:1150px) and (min-width:701px){
  .brand{font-size:21px}.nav-button{font-size:12px;gap:7px;padding:7px 4px}
  .nav-label.branded{font-size:11px}
  .nav-button .icon{width:27px;height:27px}.familiar-stage{left:50%;right:auto;top:160px;width:310px;height:310px}
  .familiar-bubble{left:50%;right:auto;top:110px;bottom:auto;max-width:220px;min-width:190px;font-size:12px;padding:10px}
  .home-tasks{width:min(270px,85%);bottom:105px;margin:0}.greeting h1{font-size:26px}.greeting .eyebrow{font-size:8px}
  .clock-panel time{font-size:39px}.topbar{gap:15px}.quick-link{font-size:12px}
}
@media(max-height:750px) and (min-width:701px){
  .workspace{padding-top:22px}.familiar-stage{top:135px;bottom:auto;width:290px;height:290px}
  .familiar-bubble{top:83px;bottom:auto;padding:9px 12px;font-size:12px}
  .home-tasks{bottom:95px;padding:12px 15px;max-width:285px}.home-tasks .empty{font-size:12px;margin-bottom:0}.home-tasks .link-button{font-size:12px}
  .nav-button{padding-top:4px;padding-bottom:4px}.sidebar .icon.small{width:26px;height:26px}.rightbar{gap:12px}
}
@media(max-width:700px){
  .glass{backdrop-filter:blur(26px) saturate(1.2);-webkit-backdrop-filter:blur(26px) saturate(1.2)}
  .topbar{height:62px;padding:10px 14px;border-radius:12px}.brand{font-size:20px}.brand small{font-size:8px;letter-spacing:2px}
  .topbar .round{width:34px;height:34px;border-radius:7px}.topbar .round .icon{width:28px;height:28px}.topbar .avatar{width:33px;height:33px}
  .workspace{display:flex;margin:0;min-height:calc(100dvh - 85px);padding:25px 18px 125px}
  .greeting h1{font-size:27px;letter-spacing:-1px}.greeting p{font-size:14px}
  .familiar-stage{position:relative;left:auto;right:auto;top:auto;bottom:auto;transform:none;width:260px;height:235px;aspect-ratio:auto;align-self:center;margin:10px 0 14px;order:1}
  .familiar{width:235px;height:235px;max-height:none;margin:auto}.familiar-static{width:100%;height:100%}
  .familiar-bubble{display:none}.mobile-grid{order:2;gap:18px 8px;margin:4px 0 24px}
  .mobile-launch .icon{width:60px;height:60px;border-radius:0}.mobile-launch>span:last-child{font-size:11px;font-weight:800}
  .home-tasks{position:relative;bottom:auto;left:auto;width:100%;max-width:none;order:3;padding:18px;margin:0;background:linear-gradient(133deg,#ffffff57,#a4dff332);border-radius:12px}
  .dock{border-radius:15px;padding:9px 13px;gap:15px}.dock .icon{width:39px;height:39px;border-radius:0}
  .dock-button:nth-child(3) .icon{width:48px;height:48px;border:0;border-radius:0;background:none}
  .dock-button:hover{transform:none}.system-line{font-size:8px}
  .window,.window.maximized{padding:0;border:0;border-radius:0;background:#bde5f5;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  .titlebar{height:54px;margin:0;padding:8px 80px 8px 13px;gap:8px;background:linear-gradient(#dbf7ffd9,#8cc6e2bf 48%,#68adcf9c);border-bottom:1px solid #6e9bb9}
  .titlebar strong{font-size:14px}.titlebar .icon{width:28px;height:28px}
  .window-buttons{top:10px;right:12px;border:1px solid #718fb0;border-radius:5px;box-shadow:0 1px 2px #18507455}
  .window-control.close{height:30px;width:64px;min-width:64px;border:0;border-radius:4px;color:#154963;background:linear-gradient(#f1fdffd9,#c6e7f2ad 48%,#97c8deb5 50%,#c7efffd0);font-size:12px;text-shadow:0 1px #fff}
  .window-control.close:after{content:"";display:none}.mobile-back{display:inline;font-size:12px;font-weight:800}
  .window-content{height:calc(100% - 54px);padding:22px 17px max(25px,env(safe-area-inset-bottom));border:0;border-radius:0;scrollbar-gutter:auto;background:linear-gradient(#effafff2,#dff2faf5)}
  .module-card{padding:14px 6px;border-radius:7px}.module-card .icon{width:52px;height:52px}.module-card .module-name{font-size:11px}
  .familiar-card{padding:10px}.familiar-card img{height:110px}.familiar-card p{font-size:11px}.familiar-card strong{font-size:14px}
  .login-wrap{padding:28px 18px}.login-intro h1{font-size:35px}.login-intro p{font-size:15px}.login-card{padding:25px}.login-card h2{font-size:22px}
  .preview .workspace{min-height:calc(100dvh - 113px)}
}
@media(prefers-reduced-motion:reduce){.familiar-pose,.familiar-traveler{animation:none!important;transform:none!important;transition:none!important}}