:root{--os-background:url(https://512pixels.net/downloads/macos-wallpapers-thumbs/10-4--thumb.png);--os-background-blur:20px;--os-background-opacity:.8;--os-text-color:#000;--os-text-color-secondary:#555;--os-lock-screen-text-color:#f5f5f5e7;--os-taskbar-background:#ffffff40;--os-taskbar-border-radius:1.25rem;--os-header-background:#f0f0f0;--os-window-border-color:#e3e3e3;--os-window-border-color-active:#76c1ff;--os-window-border-radius:1rem;--os-window-content-background:#fff;--os-window-box-shadow:0 4px 12px #0000001a;--os-btn-header-minimize:#f7dc13;--os-btn-header-maximize:#00e339;--os-btn-header-close:#e81123}@media screen and (prefers-color-scheme:dark){:root{--os-text-color:#fff;--os-text-color-secondary:#aaa;--os-background:url(https://512pixels.net/downloads/macos-wallpapers-thumbs/10-14-Night-Thumb.jpg);--os-taskbar-background:#1e1e1eb3;--os-taskbar-border-radius:1.25rem;--os-header-background:#333;--os-window-border-color:#555;--os-window-border-color-active:#777;--os-window-border-radius:1rem;--os-window-content-background:#222;--os-window-box-shadow:0 4px 12px #00000080;--os-btn-header-minimize:#f7dc13;--os-btn-header-maximize:#00e339;--os-btn-header-close:#e81123}}.os-lock-screen{position:fixed;z-index:2000;display:flex;color:var(--os-lock-screen-text-color);opacity:1;pointer-events:all;backdrop-filter:blur(var(--os-background-blur));animation:fadeIn 2s ease forwards;background:#0c1223dd;flex-direction:column;justify-content:space-between;align-items: center;padding:35vh 2rem 2rem;transition:opacity .4s;inset:0}.os-lock-screen.hidden{opacity:0;pointer-events:none}.os-lock-screen-content{display:flex;text-align:center;user-select:none;cursor:pointer;flex-direction:column;justify-content:center;align-items: center;gap:.4rem;padding:2rem 2.5rem}.os-lock-screen-date{text-transform:capitalize;margin:0;font-size:1rem}.os-lock-screen-time{letter-spacing:.03em;margin:0;font-size:clamp(3rem,9vw,5rem);font-weight:600;line-height:1}.os-lock-screen-hint{opacity:.8;margin:.5rem 0 0;font-size:.9rem}@keyframes fadeIn{0%{background-color:#050915;color:#0000}25%{color:#0000}39%{background-color:#0a0f1eea;backdrop-filter:blur(calc(var(--os-background-blur)*4))}to{background-color:#0c1223dd;color:var(--os-lock-screen-text-color);backdrop-filter:blur(var(--os-background-blur))}}*{box-sizing:border-box}html{background-color:#1a1c26}body{background:var(--os-background);background-position:50%;background-repeat:no-repeat;background-size:cover}html,body{color:var(--os-text-color);scrollbar-width:none;overflow:hidden;display:flex;flex-direction:column;width:100dvw;height:100dvh;margin:0;padding:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.os-header{display:flex;z-index:1000;justify-content:space-between;align-items: center;padding:.5rem 1rem;font-size:.875rem}.os-header-left,.os-header-right{display:flex;align-items: center;gap:1rem}.os-desktop{position:relative;overflow:hidden;flex:1;width:100%;padding:1rem 1rem 110px}.desktop-icon{position:absolute;display:flex;cursor:pointer;user-select:none;flex-direction:column;justify-content:flex-start;align-items: center;gap:.5rem;width:100px;height:100px;transition:opacity .1s .2s}.desktop-icon.dragging{opacity:.5;z-index:1000}.desktop-icon img{object-fit:cover;border-radius:8px;width:64px;height:64px;margin-top:8px}.desktop-icon span{text-align:center;word-wrap:break-word;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;-webkit-box-orient:vertical;max-width:100%;height:2.4em;font-size:.875rem;line-height:1.2}.os-windows{position:fixed;pointer-events:none;z-index:100;width:100%;height:100%;top:0;left:0}.os-windows>*{pointer-events:all}.context-menu{position:fixed;background:var(--os-taskbar-background);color:var(--os-color);backdrop-filter:blur(10px);z-index:10000;display:none;border-radius:8px;min-width:180px;padding:4px;box-shadow:0 4px 12px #00000026}.context-menu.active{display:block}.context-menu-item{cursor:pointer;user-select:none;border-radius:4px;padding:8px 12px;transition:background-color .1s;font-size:14px}.context-menu-item:hover{background-color:#00000014}.context-menu-separator{background-color:#0000001a;height:1px;margin:4px 0}.window{background:var(--os-window-content-background);border:1px solid var(--os-window-border-color);border-radius:var(--os-window-border-radius);box-shadow:var(--os-window-box-shadow);display:flex;user-select:none;flex-direction:column;margin:0;padding:0}.window.window-maximized{border-radius:calc(var(--os-window-border-radius)/2);box-shadow:none}.window.window-maximized .window-header{border-radius:calc(var(--os-window-border-radius)/2)}.window-header{background:var(--os-header-background);border-top-left-radius:var(--os-window-border-radius);border-top-right-radius:var(--os-window-border-radius);display:flex;border-bottom:1px solid var(--os-window-border-color);justify-content:space-between;align-items: center;padding:.75rem}.window-header>h3{color:var(--os-text-color);margin:0;font-size:1rem}.window-btn-container{display:flex;gap:.5rem}.window-btn{cursor:pointer;border:none;border-radius:50%;width:16px;height:16px}.window-btn:hover{filter:brightness(1.2)}.window-btn:disabled{opacity:.5;cursor:not-allowed}.window-minimize{background:var(--os-btn-header-minimize)}.window-maximize{background:var(--os-btn-header-maximize)}.window-close{background:var(--os-btn-header-close)}.window-content{flex:1;margin:0;padding:0}.notification-content{display:flex;justify-content:center;align-items: center;padding:1rem}.window>iframe{border-bottom-left-radius:var(--os-window-border-radius);border-bottom-right-radius:var(--os-window-border-radius);border:none}.window-resize-handle{position:absolute;cursor:nwse-resize;z-index:10;width:16px;height:16px;bottom:0;right:0}.window-resize-handle:after{content:"";position:absolute;border-style:solid;border-width:0 0 12px 12px;border-color:transparent transparent var(--os-window-border-color)transparent;opacity:.5;width:0;height:0;bottom:2px;right:2px}.os-taskbar-container{position:fixed;display:flex;pointer-events:none;z-index:1000;justify-content:center;align-items: flex-end;width:100%;height:100px;padding-bottom:.5rem;bottom:0;left:0}.os-taskbar{display:flex;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:var(--os-taskbar-border-radius);pointer-events:all;border:1px solid #fff3;flex-direction:row;align-items: flex-end;gap:.5rem;padding:.75rem 1rem;transition:gap .3s ease-in-out,padding .3s ease-in-out;box-shadow:0 8px 32px #0000004d}.os-taskbar:has(.os-taskbar-item:hover){gap:1rem}.os-taskbar-item{cursor:pointer;transform-origin:center bottom;position:relative;display:flex;user-select:none;background:0 0;border-radius:12px;justify-content:center;align-items: center;width:64px;height:64px;margin:0;transition:all .3s cubic-bezier(.34,1.56,.64,1)}.os-taskbar-item img{object-fit:cover;pointer-events:none;border-radius:12px;width:100%;height:100%}.os-taskbar-item:hover{margin:0 .75rem;transform:scale(1.4)}.os-taskbar-item:hover+.os-taskbar-item{margin:0 .5rem;transform:scale(1.2)}.os-taskbar-item:has(+.os-taskbar-item:hover){margin:0 .5rem;transform:scale(1.2)}.os-taskbar-item:hover+.os-taskbar-item+.os-taskbar-item{margin:0 .3rem;transform:scale(1.1)}.os-taskbar-item:has(+.os-taskbar-item+.os-taskbar-item:hover){margin:0 .3rem;transform:scale(1.1)}.os-taskbar-item:hover+.os-taskbar-item+.os-taskbar-item+.os-taskbar-item{margin:0 .2rem;transform:scale(1.05)}.os-taskbar-item:has(+.os-taskbar-item+.os-taskbar-item+.os-taskbar-item:hover){margin:0 .2rem;transform:scale(1.05)}.os-taskbar-item.active:after{content:"";position:absolute;background:var(--os-text-color);opacity:.8;border-radius:50%;width:4px;height:4px;bottom:-6px;left:50%;transform:translate(-50%)}.os-taskbar-item:hover:before{content:attr(data-tooltip);position:absolute;background:var(--os-taskbar-background);color:var(--os-text-color);white-space:nowrap;pointer-events:none;opacity:0;animation:tooltipFadeIn .2s ease-out .5s forwards;border-radius:6px;padding:.4rem .8rem;font-size:.75rem;bottom:calc(100% + 8px);left:50%;transform:translate(-50%)}@keyframes tooltipFadeIn{0%{opacity:0;transform:translate(-50%)translateY(4px)}to{opacity:1;transform:translate(-50%)translateY(0)}}.os-taskbar-separator{background:#fff3;width:1px;height:40px;margin:0 .25rem;transition:height .3s cubic-bezier(.34,1.56,.64,1)}.os-taskbar:hover{padding-bottom:1rem}.basic *{color:var(--os-text-color);font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.basic{display:flex;overflow:hidden;flex-direction:column;gap:.5rem;padding:.75rem}.basic.no-padding{padding:0}.basic .background{background:var(--os-header-background)}.basic .card{background:var(--os-header-background);border-radius:calc(var(--os-window-border-radius)/2);padding:.75rem}.basic .card.contrast{background:var(--os-window-content-background)}.basic .flex-grow{display:flex;flex-direction:column;flex-grow:1;height:100%}.basic button,select{display:flex;background:var(--os-header-background);user-select:none;outline:none;border:none;border-radius:.25rem;justify-content:center;align-items: center;padding:.75rem;transition:background .3s}.basic button:hover,.basic select:hover{cursor:pointer}.basic button:active,.basic select:active{background:var(--os-window-border-color)}.basic .square{width:100%;aspect-ratio:1!important}.basic .full{width:100%;height:100%}.basic .width-full{width:100%}.basic div{display:flex;flex-direction:column;gap:.5rem}.basic .row{display:flex;flex-direction:row;gap:.5rem}.basic .column{display:flex;flex-direction:column;gap:.5rem}.basic .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}.basic input{background:var(--os-header-background);color:var(--os-text-color);outline:none;border:none;border-radius:.25rem;width:100%;padding:.5rem;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.basic .center{display:flex;justify-content:center;align-items: center}.basic .text-red{color:#e62525}.basic .text-blue{color:#2070fa}.basic h1{margin:0;font-size:2rem}.basic h2{margin:0;font-size:1.5rem}.basic h3{margin:0;font-size:1.25rem}.basic p{margin:0}.basic .gap-sm{gap:.5rem}.basic .gap-md{gap:1rem}.basic .gap-lg{gap:1.5rem}.basic .gap-xl{gap:2rem}.basic ul{list-style:disc;padding-left:1.5rem}
