Web
powered by OpenWebOS
.wp-swatch.s4{background:linear-gradient(135deg,#1a0e0e,#3a1a1a)} .acc-row{display:flex;gap:8px;justify-content:center;margin:8px 0 22px} .acc-dot{width:28px;height:28px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:.2s} .acc-dot.sel{border-color:#fff;transform:scale(1.2)} #loginScreen{background:var(--bg)} .login-time{font-size:72px;font-weight:100;letter-spacing:2px;color:#fff;text-align:center;line-height:1} .login-date{font-size:14px;font-weight:300;color:rgba(255,255,255,0.4);letter-spacing:3px;text-align:center;margin-bottom:50px;text-transform:uppercase} .login-avatar{width:72px;height:72px;border-radius:50%;background:var(--acc);display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:300;color:#fff;margin:0 auto 12px} .login-name{font-size:18px;font-weight:300;color:#fff;text-align:center;margin-bottom:24px;letter-spacing:1px} .login-input{width:280px;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.12);border-radius:40px;padding:13px 22px;color:#fff;font-size:14px;font-weight:300;outline:none;text-align:center;letter-spacing:1px;font-family:'Roboto',sans-serif} .login-input:focus{border-color:var(--acc)} .login-err{font-size:12px;color:#e94560;margin-top:10px;min-height:16px;text-align:center} .login-arrow{margin-top:16px;width:280px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12);border-radius:40px;padding:13px;color:#fff;font-size:14px;font-weight:300;cursor:pointer;letter-spacing:1px;text-transform:uppercase;font-family:'Roboto',sans-serif;transition:.2s} .login-arrow:hover{background:rgba(255,255,255,0.14)} #topbar{position:absolute;top:0;left:0;right:0;height:46px;z-index:50;display:flex;align-items:center;padding:0 14px;gap:10px;background:rgba(8,8,15,0.75);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,0.05)} #just-type{flex:1;max-width:420px;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.1);border-radius:20px;padding:7px 16px;color:#fff;font-size:13px;font-weight:300;outline:none;font-family:'Roboto',sans-serif} #just-type::placeholder{color:rgba(255,255,255,0.25)} #tb-right{display:flex;align-items:center;gap:8px;margin-left:auto} .tb-pill{font-size:12px;font-weight:300;color:rgba(255,255,255,0.45);padding:4px 12px;border-radius:14px;cursor:pointer;transition:.15s;white-space:nowrap} .tb-pill:hover{background:rgba(255,255,255,0.07)} #user-menu{position:absolute;top:42px;right:8px;background:rgba(20,20,36,0.97);border:1px solid rgba(255,255,255,0.1);border-radius:14px;overflow:hidden;min-width:160px;z-index:300;backdrop-filter:blur(20px)} .umenu-item{padding:11px 18px;font-size:13px;cursor:pointer;color:var(--text);transition:.15s;font-weight:300} .umenu-item:hover{background:rgba(255,255,255,0.07)} .umenu-item.danger{color:#e94560} .umenu-sep{height:1px;background:rgba(255,255,255,0.07);margin:3px 0} #widget-bar{position:absolute;top:46px;left:0;right:0;z-index:40;overflow-x:auto;white-space:nowrap;padding:8px 12px 8px 8px;display:none;gap:10px;background:rgba(8,8,15,0.6);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,0.04);scrollbar-width:none;align-items:center} #widget-bar::-webkit-scrollbar{display:none} #widget-bar.visible{display:flex} .widget-close-btn{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.1);color:rgba(255,255,255,0.5);font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s} .widget-close-btn:hover{background:rgba(255,255,255,0.15);color:#fff} .widget{display:inline-flex;flex-direction:column;vertical-align:top;background:rgba(22,22,40,0.92);border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:10px 13px;min-width:120px;max-width:180px;white-space:normal;flex-shrink:0;cursor:pointer;transition:.15s;position:relative} .widget:hover{background:rgba(30,30,56,0.95)} .widget-icon{font-size:16px;margin-bottom:4px} .widget-title{font-size:9px;font-weight:500;color:rgba(255,255,255,0.3);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:4px} .widget-main{font-size:20px;font-weight:100;color:#fff;letter-spacing:1px;line-height:1.1} .widget-sub{font-size:10px;font-weight:300;color:rgba(255,255,255,0.4);margin-top:3px;line-height:1.4} .widget-open{position:absolute;top:7px;right:9px;font-size:10px;color:rgba(255,255,255,0.2)} #desktop{position:absolute;top:126px;left:0;right:0;bottom:64px;z-index:1;overflow:hidden} #cards-container{position:relative;width:100%;height:100%} .app-card{position:absolute;background:var(--card);border-radius:20px;border:1px solid rgba(255,255,255,0.07);width:340px;min-width:240px;min-height:180px;display:flex;flex-direction:column;box-shadow:0 8px 32px rgba(0,0,0,0.5);animation:cardIn .22s ease} .app-card.fullscreen{position:fixed!important;top:46px!important;left:0!important;right:0!important;bottom:64px!important;width:100%!important;height:calc(100vh - 110px)!important;border-radius:0!important;z-index:100!important} @keyframes cardIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}} @keyframes fadeIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}} @keyframes wobble{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}} @keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}} @keyframes siriPulse{from{box-shadow:0 0 0 0 rgba(233,69,96,0.4)}to{box-shadow:0 0 0 16px rgba(233,69,96,0)}} .card-header{display:flex;align-items:center;gap:8px;padding:10px 14px;background:rgba(0,0,0,0.25);border-radius:20px 20px 0 0;cursor:move;user-select:none;flex-shrink:0} .app-card.fullscreen .card-header{border-radius:0;cursor:default} .card-dot{width:13px;height:13px;border-radius:50%;border:none;cursor:pointer;flex-shrink:0;transition:.15s} .dot-close{background:#ff5f57}.dot-min{background:#febc2e}.dot-full{background:#28c840} .card-icon{font-size:13px}.card-title{font-size:12px;font-weight:400;flex:1;letter-spacing:.3px;color:rgba(255,255,255,0.7)} .card-body{flex:1;overflow-y:auto;display:flex;flex-direction:column;border-radius:0 0 20px 20px} .app-card.fullscreen .card-body{border-radius:0} #launcher{position:absolute;bottom:0;left:0;right:0;height:64px;z-index:50;display:flex;align-items:center;padding:0 16px;gap:10px;background:rgba(8,8,15,0.85);backdrop-filter:blur(20px);border-top:1px solid rgba(255,255,255,0.05);justify-content:center} .launch-icon{width:46px;height:46px;border-radius:14px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:20px;transition:.15s;flex-direction:column;gap:2px;position:relative;user-select:none} .launch-icon:hover{background:rgba(255,255,255,0.12);transform:translateY(-3px)} .launch-icon:active{transform:scale(.93)} .launch-lbl{font-size:8px;font-weight:300;color:rgba(255,255,255,0.35);letter-spacing:.5px} .launch-icon.editing{animation:wobble .4s infinite alternate;border-color:rgba(255,255,255,0.25)} .launch-icon .remove-badge{position:absolute;top:-5px;left:-5px;width:16px;height:16px;background:#e94560;border-radius:50%;font-size:11px;color:#fff;display:none;align-items:center;justify-content:center} .launch-icon.editing .remove-badge{display:flex} #dock-divider{width:1px;height:36px;background:rgba(255,255,255,0.1);flex-shrink:0} #launch-home{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.15)} #app-drawer{position:absolute;bottom:64px;left:0;right:0;z-index:49;background:rgba(8,8,15,0.95);backdrop-filter:blur(24px);border-top:1px solid rgba(255,255,255,0.07);padding:16px;display:grid;grid-template-columns:repeat(6,1fr);gap:12px;animation:slideUp .2s ease;max-height:calc(100vh - 110px);overflow-y:auto} .drawer-icon{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;padding:10px 4px;border-radius:14px;transition:.15s} .drawer-icon:hover{background:rgba(255,255,255,0.07)} .drawer-icon-img{width:44px;height:44px;border-radius:13px;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;font-size:20px} .drawer-icon-lbl{font-size:10px;font-weight:300;color:rgba(255,255,255,0.55);letter-spacing:.5px;text-align:center} .drawer-icon.in-dock .drawer-icon-img{border-color:var(--acc);background:rgba(233,69,96,0.1)} .drawer-section{grid-column:1/-1;font-size:10px;font-weight:500;color:rgba(255,255,255,0.25);letter-spacing:2px;text-transform:uppercase;padding:4px 0 0} .browser-frame{flex:1;display:flex;flex-direction:column} .browser-bar{display:flex;align-items:center;gap:6px;padding:8px;background:rgba(0,0,0,0.2)} .browser-url{flex:1;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);border-radius:8px;padding:5px 10px;color:#fff;font-size:12px;outline:none;font-family:'Roboto',sans-serif} .browser-go{background:var(--acc);border:none;border-radius:7px;padding:5px 12px;color:#fff;font-size:11px;cursor:pointer} .browser-splash{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px;text-align:center} .splash-logo{font-size:48px}.splash-title{font-size:20px;font-weight:300;letter-spacing:3px} .splash-url{font-size:10px;color:var(--muted);word-break:break-all;max-width:280px;background:rgba(0,0,0,0.25);padding:6px 12px;border-radius:8px;font-family:monospace} .splash-sub{font-size:11px;color:rgba(255,255,255,0.25);letter-spacing:.5px} .splash-btn{background:var(--acc);border:none;border-radius:10px;padding:9px 24px;color:#fff;font-size:12px;cursor:pointer;font-family:'Roboto',sans-serif} .calc-body{padding:12px;display:flex;flex-direction:column;gap:6px} .calc-display{background:rgba(0,0,0,0.35);border-radius:12px;padding:12px 14px;text-align:right;font-size:28px;font-weight:300;color:#fff;min-height:58px;word-break:break-all} .calc-sub{font-size:11px;color:rgba(255,255,255,0.28);min-height:14px} .calc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px} .calc-btn{padding:12px 4px;border-radius:10px;border:none;font-size:14px;font-weight:300;cursor:pointer;transition:.1s;font-family:'Roboto',sans-serif} .calc-btn:active{transform:scale(.93)} .cb-num{background:rgba(255,255,255,0.09);color:#fff} .cb-op{background:rgba(233,69,96,0.2);color:#e94560} .cb-eq{background:var(--acc);color:#fff} .cb-fn{background:rgba(255,255,255,0.05);color:rgba(255,255,255,0.5);font-size:12px} .cb-zero{grid-column:span 2} .term-body{flex:1;background:#060610;padding:10px;font-family:monospace;font-size:12px;overflow-y:auto;min-height:200px;display:flex;flex-direction:column;gap:1px} .term-line{color:#9fefb0;white-space:pre-wrap;word-break:break-all} .term-prompt-row{display:flex;align-items:center;gap:6px;background:#060610;padding:4px 10px} .term-prompt-lbl{color:var(--acc);white-space:nowrap;font-size:12px;font-family:monospace} .term-input-el{flex:1;background:transparent;border:none;outline:none;color:#9fefb0;font-family:monospace;font-size:12px} .notes-body{flex:1;display:flex;flex-direction:column} .notes-toolbar{display:flex;gap:4px;padding:6px 8px;background:rgba(0,0,0,0.2);flex-shrink:0} .notes-tb-btn{background:rgba(255,255,255,0.07);border:none;border-radius:6px;padding:4px 10px;color:rgba(255,255,255,0.6);font-size:11px;cursor:pointer} .notes-textarea{flex:1;background:rgba(0,0,0,0.15);border:none;padding:12px;color:var(--text);font-size:13px;font-weight:300;resize:none;outline:none;line-height:1.7;font-family:'Roboto',sans-serif;min-height:150px} .clock-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:20px} .clock-time{font-size:52px;font-weight:100;letter-spacing:3px} .clock-date{font-size:13px;font-weight:300;color:var(--muted);letter-spacing:2px;text-transform:uppercase} .cal-body{flex:1;padding:12px;display:flex;flex-direction:column;gap:8px;overflow:hidden} .cal-header{display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:400;padding:0 2px} .cal-nav{background:none;border:none;color:var(--text);cursor:pointer;font-size:18px;padding:2px 8px;border-radius:6px} .cal-nav:hover{background:rgba(255,255,255,0.08)} .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center} .cal-day-lbl{font-size:10px;font-weight:500;color:var(--muted);padding:3px 0} .cal-day{font-size:12px;padding:5px 2px;border-radius:7px;color:rgba(255,255,255,0.7)} .cal-day.today{background:var(--acc);color:#fff;font-weight:500} .cal-day.other-month{color:rgba(255,255,255,0.18)} .files-body{flex:1;overflow-y:auto} .files-header{padding:8px 12px;font-size:11px;color:var(--muted);border-bottom:1px solid rgba(255,255,255,0.05);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px} .file-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid rgba(255,255,255,0.03);cursor:pointer;font-size:13px;font-weight:300;transition:.1s} .file-item:hover{background:rgba(255,255,255,0.05)} .file-icon{font-size:16px;width:22px;text-align:center} .file-size{font-size:11px;color:var(--muted);margin-left:auto} .music-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px;text-align:center} .music-title{font-size:16px;font-weight:400;letter-spacing:.5px} .music-artist{font-size:12px;font-weight:300;color:var(--muted)} .music-controls{display:flex;gap:16px;align-items:center} .mc-btn{background:rgba(255,255,255,0.08);border:none;border-radius:50%;width:36px;height:36px;color:#fff;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s} .mc-btn:hover{background:rgba(255,255,255,0.15)} .mc-play{width:48px;height:48px;background:var(--acc);font-size:20px} .music-progress{width:100%;height:3px;background:rgba(255,255,255,0.1);border-radius:2px;cursor:pointer} .music-fill{height:100%;width:0%;background:var(--acc);border-radius:2px;transition:.3s} .weather-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:20px;text-align:center} .weather-icon{font-size:56px} .weather-temp{font-size:48px;font-weight:100;letter-spacing:2px} .weather-desc{font-size:14px;font-weight:300;color:var(--muted);letter-spacing:1px;text-transform:uppercase} .weather-loc{font-size:12px;font-weight:300;color:rgba(255,255,255,0.3);margin-top:4px} .weather-row{display:flex;gap:20px;margin-top:10px} .weather-stat{text-align:center} .weather-stat-val{font-size:15px;font-weight:300} .weather-stat-lbl{font-size:10px;color:var(--muted);letter-spacing:1px;text-transform:uppercase} .contacts-body{flex:1;overflow-y:auto} .contact-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,0.04);cursor:pointer} .contact-item:hover{background:rgba(255,255,255,0.04)} .contact-avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:400;flex-shrink:0} .contact-name{font-size:13px;font-weight:300} .contact-num{font-size:11px;color:var(--muted)} .settings-body{flex:1;overflow-y:auto} .settings-section-hdr{padding:12px 14px 5px;font-size:10px;font-weight:500;color:var(--muted);letter-spacing:2px;text-transform:uppercase} .settings-row{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,0.04);font-size:13px;font-weight:300} .settings-row .val{color:var(--muted);font-size:12px} .settings-toggle{width:36px;height:20px;border-radius:10px;background:rgba(255,255,255,0.1);cursor:pointer;position:relative;transition:.2s;border:none;flex-shrink:0} .settings-toggle.on{background:var(--acc)} .settings-toggle::after{content:'';position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:.2s} .settings-toggle.on::after{left:19px} .hidden{display:none!important}
Web
powered by OpenWebOS
.wp-swatch.s4{background:linear-gradient(135deg,#1a0e0e,#3a1a1a)} .acc-row{display:flex;gap:8px;justify-content:center;margin:8px 0 22px} .acc-dot{width:28px;height:28px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:.2s} .acc-dot.sel{border-color:#fff;transform:scale(1.2)} #loginScreen{background:var(--bg)} .login-time{font-size:72px;font-weight:100;letter-spacing:2px;color:#fff;text-align:center;line-height:1} .login-date{font-size:14px;font-weight:300;color:rgba(255,255,255,0.4);letter-spacing:3px;text-align:center;margin-bottom:50px;text-transform:uppercase} .login-avatar{width:72px;height:72px;border-radius:50%;background:var(--acc);display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:300;color:#fff;margin:0 auto 12px} .login-name{font-size:18px;font-weight:300;color:#fff;text-align:center;margin-bottom:24px;letter-spacing:1px} .login-input{width:280px;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.12);border-radius:40px;padding:13px 22px;color:#fff;font-size:14px;font-weight:300;outline:none;text-align:center;letter-spacing:1px;font-family:'Roboto',sans-serif} .login-input:focus{border-color:var(--acc)} .login-err{font-size:12px;color:#e94560;margin-top:10px;min-height:16px;text-align:center} .login-arrow{margin-top:16px;width:280px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12);border-radius:40px;padding:13px;color:#fff;font-size:14px;font-weight:300;cursor:pointer;letter-spacing:1px;text-transform:uppercase;font-family:'Roboto',sans-serif;transition:.2s} .login-arrow:hover{background:rgba(255,255,255,0.14)} #topbar{position:absolute;top:0;left:0;right:0;height:46px;z-index:50;display:flex;align-items:center;padding:0 14px;gap:10px;background:rgba(8,8,15,0.75);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,0.05)} #just-type{flex:1;max-width:420px;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.1);border-radius:20px;padding:7px 16px;color:#fff;font-size:13px;font-weight:300;outline:none;font-family:'Roboto',sans-serif} #just-type::placeholder{color:rgba(255,255,255,0.25)} #tb-right{display:flex;align-items:center;gap:8px;margin-left:auto} .tb-pill{font-size:12px;font-weight:300;color:rgba(255,255,255,0.45);padding:4px 12px;border-radius:14px;cursor:pointer;transition:.15s;white-space:nowrap} .tb-pill:hover{background:rgba(255,255,255,0.07)} #user-menu{position:absolute;top:42px;right:8px;background:rgba(20,20,36,0.97);border:1px solid rgba(255,255,255,0.1);border-radius:14px;overflow:hidden;min-width:160px;z-index:300;backdrop-filter:blur(20px)} .umenu-item{padding:11px 18px;font-size:13px;cursor:pointer;color:var(--text);transition:.15s;font-weight:300} .umenu-item:hover{background:rgba(255,255,255,0.07)} .umenu-item.danger{color:#e94560} .umenu-sep{height:1px;background:rgba(255,255,255,0.07);margin:3px 0} #widget-bar{position:absolute;top:46px;left:0;right:0;z-index:40;overflow-x:auto;white-space:nowrap;padding:8px 12px 8px 8px;display:none;gap:10px;background:rgba(8,8,15,0.6);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,0.04);scrollbar-width:none;align-items:center} #widget-bar::-webkit-scrollbar{display:none} #widget-bar.visible{display:flex} .widget-close-btn{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.1);color:rgba(255,255,255,0.5);font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s} .widget-close-btn:hover{background:rgba(255,255,255,0.15);color:#fff} .widget{display:inline-flex;flex-direction:column;vertical-align:top;background:rgba(22,22,40,0.92);border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:10px 13px;min-width:120px;max-width:180px;white-space:normal;flex-shrink:0;cursor:pointer;transition:.15s;position:relative} .widget:hover{background:rgba(30,30,56,0.95)} .widget-icon{font-size:16px;margin-bottom:4px} .widget-title{font-size:9px;font-weight:500;color:rgba(255,255,255,0.3);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:4px} .widget-main{font-size:20px;font-weight:100;color:#fff;letter-spacing:1px;line-height:1.1} .widget-sub{font-size:10px;font-weight:300;color:rgba(255,255,255,0.4);margin-top:3px;line-height:1.4} .widget-open{position:absolute;top:7px;right:9px;font-size:10px;color:rgba(255,255,255,0.2)} #desktop{position:absolute;top:126px;left:0;right:0;bottom:64px;z-index:1;overflow:hidden} #cards-container{position:relative;width:100%;height:100%} .app-card{position:absolute;background:var(--card);border-radius:20px;border:1px solid rgba(255,255,255,0.07);width:340px;min-width:240px;min-height:180px;display:flex;flex-direction:column;box-shadow:0 8px 32px rgba(0,0,0,0.5);animation:cardIn .22s ease} .app-card.fullscreen{position:fixed!important;top:46px!important;left:0!important;right:0!important;bottom:64px!important;width:100%!important;height:calc(100vh - 110px)!important;border-radius:0!important;z-index:100!important} @keyframes cardIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}} @keyframes fadeIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}} @keyframes wobble{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}} @keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}} @keyframes siriPulse{from{box-shadow:0 0 0 0 rgba(233,69,96,0.4)}to{box-shadow:0 0 0 16px rgba(233,69,96,0)}} .card-header{display:flex;align-items:center;gap:8px;padding:10px 14px;background:rgba(0,0,0,0.25);border-radius:20px 20px 0 0;cursor:move;user-select:none;flex-shrink:0} .app-card.fullscreen .card-header{border-radius:0;cursor:default} .card-dot{width:13px;height:13px;border-radius:50%;border:none;cursor:pointer;flex-shrink:0;transition:.15s} .dot-close{background:#ff5f57}.dot-min{background:#febc2e}.dot-full{background:#28c840} .card-icon{font-size:13px}.card-title{font-size:12px;font-weight:400;flex:1;letter-spacing:.3px;color:rgba(255,255,255,0.7)} .card-body{flex:1;overflow-y:auto;display:flex;flex-direction:column;border-radius:0 0 20px 20px} .app-card.fullscreen .card-body{border-radius:0} #launcher{position:absolute;bottom:0;left:0;right:0;height:64px;z-index:50;display:flex;align-items:center;padding:0 16px;gap:10px;background:rgba(8,8,15,0.85);backdrop-filter:blur(20px);border-top:1px solid rgba(255,255,255,0.05);justify-content:center} .launch-icon{width:46px;height:46px;border-radius:14px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:20px;transition:.15s;flex-direction:column;gap:2px;position:relative;user-select:none} .launch-icon:hover{background:rgba(255,255,255,0.12);transform:translateY(-3px)} .launch-icon:active{transform:scale(.93)} .launch-lbl{font-size:8px;font-weight:300;color:rgba(255,255,255,0.35);letter-spacing:.5px} .launch-icon.editing{animation:wobble .4s infinite alternate;border-color:rgba(255,255,255,0.25)} .launch-icon .remove-badge{position:absolute;top:-5px;left:-5px;width:16px;height:16px;background:#e94560;border-radius:50%;font-size:11px;color:#fff;display:none;align-items:center;justify-content:center} .launch-icon.editing .remove-badge{display:flex} #dock-divider{width:1px;height:36px;background:rgba(255,255,255,0.1);flex-shrink:0} #launch-home{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.15)} #app-drawer{position:absolute;bottom:64px;left:0;right:0;z-index:49;background:rgba(8,8,15,0.95);backdrop-filter:blur(24px);border-top:1px solid rgba(255,255,255,0.07);padding:16px;display:grid;grid-template-columns:repeat(6,1fr);gap:12px;animation:slideUp .2s ease;max-height:calc(100vh - 110px);overflow-y:auto} .drawer-icon{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;padding:10px 4px;border-radius:14px;transition:.15s} .drawer-icon:hover{background:rgba(255,255,255,0.07)} .drawer-icon-img{width:44px;height:44px;border-radius:13px;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;font-size:20px} .drawer-icon-lbl{font-size:10px;font-weight:300;color:rgba(255,255,255,0.55);letter-spacing:.5px;text-align:center} .drawer-icon.in-dock .drawer-icon-img{border-color:var(--acc);background:rgba(233,69,96,0.1)} .drawer-section{grid-column:1/-1;font-size:10px;font-weight:500;color:rgba(255,255,255,0.25);letter-spacing:2px;text-transform:uppercase;padding:4px 0 0} .browser-frame{flex:1;display:flex;flex-direction:column} .browser-bar{display:flex;align-items:center;gap:6px;padding:8px;background:rgba(0,0,0,0.2)} .browser-url{flex:1;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);border-radius:8px;padding:5px 10px;color:#fff;font-size:12px;outline:none;font-family:'Roboto',sans-serif} .browser-go{background:var(--acc);border:none;border-radius:7px;padding:5px 12px;color:#fff;font-size:11px;cursor:pointer} .browser-splash{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px;text-align:center} .splash-logo{font-size:48px}.splash-title{font-size:20px;font-weight:300;letter-spacing:3px} .splash-url{font-size:10px;color:var(--muted);word-break:break-all;max-width:280px;background:rgba(0,0,0,0.25);padding:6px 12px;border-radius:8px;font-family:monospace} .splash-sub{font-size:11px;color:rgba(255,255,255,0.25);letter-spacing:.5px} .splash-btn{background:var(--acc);border:none;border-radius:10px;padding:9px 24px;color:#fff;font-size:12px;cursor:pointer;font-family:'Roboto',sans-serif} .calc-body{padding:12px;display:flex;flex-direction:column;gap:6px} .calc-display{background:rgba(0,0,0,0.35);border-radius:12px;padding:12px 14px;text-align:right;font-size:28px;font-weight:300;color:#fff;min-height:58px;word-break:break-all} .calc-sub{font-size:11px;color:rgba(255,255,255,0.28);min-height:14px} .calc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px} .calc-btn{padding:12px 4px;border-radius:10px;border:none;font-size:14px;font-weight:300;cursor:pointer;transition:.1s;font-family:'Roboto',sans-serif} .calc-btn:active{transform:scale(.93)} .cb-num{background:rgba(255,255,255,0.09);color:#fff} .cb-op{background:rgba(233,69,96,0.2);color:#e94560} .cb-eq{background:var(--acc);color:#fff} .cb-fn{background:rgba(255,255,255,0.05);color:rgba(255,255,255,0.5);font-size:12px} .cb-zero{grid-column:span 2} .term-body{flex:1;background:#060610;padding:10px;font-family:monospace;font-size:12px;overflow-y:auto;min-height:200px;display:flex;flex-direction:column;gap:1px} .term-line{color:#9fefb0;white-space:pre-wrap;word-break:break-all} .term-prompt-row{display:flex;align-items:center;gap:6px;background:#060610;padding:4px 10px} .term-prompt-lbl{color:var(--acc);white-space:nowrap;font-size:12px;font-family:monospace} .term-input-el{flex:1;background:transparent;border:none;outline:none;color:#9fefb0;font-family:monospace;font-size:12px} .notes-body{flex:1;display:flex;flex-direction:column} .notes-toolbar{display:flex;gap:4px;padding:6px 8px;background:rgba(0,0,0,0.2);flex-shrink:0} .notes-tb-btn{background:rgba(255,255,255,0.07);border:none;border-radius:6px;padding:4px 10px;color:rgba(255,255,255,0.6);font-size:11px;cursor:pointer} .notes-textarea{flex:1;background:rgba(0,0,0,0.15);border:none;padding:12px;color:var(--text);font-size:13px;font-weight:300;resize:none;outline:none;line-height:1.7;font-family:'Roboto',sans-serif;min-height:150px} .clock-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:20px} .clock-time{font-size:52px;font-weight:100;letter-spacing:3px} .clock-date{font-size:13px;font-weight:300;color:var(--muted);letter-spacing:2px;text-transform:uppercase} .cal-body{flex:1;padding:12px;display:flex;flex-direction:column;gap:8px;overflow:hidden} .cal-header{display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:400;padding:0 2px} .cal-nav{background:none;border:none;color:var(--text);cursor:pointer;font-size:18px;padding:2px 8px;border-radius:6px} .cal-nav:hover{background:rgba(255,255,255,0.08)} .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center} .cal-day-lbl{font-size:10px;font-weight:500;color:var(--muted);padding:3px 0} .cal-day{font-size:12px;padding:5px 2px;border-radius:7px;color:rgba(255,255,255,0.7)} .cal-day.today{background:var(--acc);color:#fff;font-weight:500} .cal-day.other-month{color:rgba(255,255,255,0.18)} .files-body{flex:1;overflow-y:auto} .files-header{padding:8px 12px;font-size:11px;color:var(--muted);border-bottom:1px solid rgba(255,255,255,0.05);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px} .file-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid rgba(255,255,255,0.03);cursor:pointer;font-size:13px;font-weight:300;transition:.1s} .file-item:hover{background:rgba(255,255,255,0.05)} .file-icon{font-size:16px;width:22px;text-align:center} .file-size{font-size:11px;color:var(--muted);margin-left:auto} .music-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px;text-align:center} .music-title{font-size:16px;font-weight:400;letter-spacing:.5px} .music-artist{font-size:12px;font-weight:300;color:var(--muted)} .music-controls{display:flex;gap:16px;align-items:center} .mc-btn{background:rgba(255,255,255,0.08);border:none;border-radius:50%;width:36px;height:36px;color:#fff;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s} .mc-btn:hover{background:rgba(255,255,255,0.15)} .mc-play{width:48px;height:48px;background:var(--acc);font-size:20px} .music-progress{width:100%;height:3px;background:rgba(255,255,255,0.1);border-radius:2px;cursor:pointer} .music-fill{height:100%;width:0%;background:var(--acc);border-radius:2px;transition:.3s} .weather-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:20px;text-align:center} .weather-icon{font-size:56px} .weather-temp{font-size:48px;font-weight:100;letter-spacing:2px} .weather-desc{font-size:14px;font-weight:300;color:var(--muted);letter-spacing:1px;text-transform:uppercase} .weather-loc{font-size:12px;font-weight:300;color:rgba(255,255,255,0.3);margin-top:4px} .weather-row{display:flex;gap:20px;margin-top:10px} .weather-stat{text-align:center} .weather-stat-val{font-size:15px;font-weight:300} .weather-stat-lbl{font-size:10px;color:var(--muted);letter-spacing:1px;text-transform:uppercase} .contacts-body{flex:1;overflow-y:auto} .contact-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,0.04);cursor:pointer} .contact-item:hover{background:rgba(255,255,255,0.04)} .contact-avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:400;flex-shrink:0} .contact-name{font-size:13px;font-weight:300} .contact-num{font-size:11px;color:var(--muted)} .settings-body{flex:1;overflow-y:auto} .settings-section-hdr{padding:12px 14px 5px;font-size:10px;font-weight:500;color:var(--muted);letter-spacing:2px;text-transform:uppercase} .settings-row{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,0.04);font-size:13px;font-weight:300} .settings-row .val{color:var(--muted);font-size:12px} .settings-toggle{width:36px;height:20px;border-radius:10px;background:rgba(255,255,255,0.1);cursor:pointer;position:relative;transition:.2s;border:none;flex-shrink:0} .settings-toggle.on{background:var(--acc)} .settings-toggle::after{content:'';position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:.2s} .settings-toggle.on::after{left:19px} .hidden{display:none!important}
Web
powered by OpenWebOS
.wp-swatch.s4{background:linear-gradient(135deg,#1a0e0e,#3a1a1a)} .acc-row{display:flex;gap:8px;justify-content:center;margin:8px 0 22px} .acc-dot{width:28px;height:28px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:.2s} .acc-dot.sel{border-color:#fff;transform:scale(1.2)} #loginScreen{background:var(--bg)} .login-time{font-size:72px;font-weight:100;letter-spacing:2px;color:#fff;text-align:center;line-height:1} .login-date{font-size:14px;font-weight:300;color:rgba(255,255,255,0.4);letter-spacing:3px;text-align:center;margin-bottom:50px;text-transform:uppercase} .login-avatar{width:72px;height:72px;border-radius:50%;background:var(--acc);display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:300;color:#fff;margin:0 auto 12px} .login-name{font-size:18px;font-weight:300;color:#fff;text-align:center;margin-bottom:24px;letter-spacing:1px} .login-input{width:280px;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.12);border-radius:40px;padding:13px 22px;color:#fff;font-size:14px;font-weight:300;outline:none;text-align:center;letter-spacing:1px;font-family:'Roboto',sans-serif} .login-input:focus{border-color:var(--acc)} .login-err{font-size:12px;color:#e94560;margin-top:10px;min-height:16px;text-align:center} .login-arrow{margin-top:16px;width:280px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12);border-radius:40px;padding:13px;color:#fff;font-size:14px;font-weight:300;cursor:pointer;letter-spacing:1px;text-transform:uppercase;font-family:'Roboto',sans-serif;transition:.2s} .login-arrow:hover{background:rgba(255,255,255,0.14)} #topbar{position:absolute;top:0;left:0;right:0;height:46px;z-index:50;display:flex;align-items:center;padding:0 14px;gap:10px;background:rgba(8,8,15,0.75);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,0.05)} #just-type{flex:1;max-width:420px;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.1);border-radius:20px;padding:7px 16px;color:#fff;font-size:13px;font-weight:300;outline:none;font-family:'Roboto',sans-serif} #just-type::placeholder{color:rgba(255,255,255,0.25)} #tb-right{display:flex;align-items:center;gap:8px;margin-left:auto} .tb-pill{font-size:12px;font-weight:300;color:rgba(255,255,255,0.45);padding:4px 12px;border-radius:14px;cursor:pointer;transition:.15s;white-space:nowrap} .tb-pill:hover{background:rgba(255,255,255,0.07)} #user-menu{position:absolute;top:42px;right:8px;background:rgba(20,20,36,0.97);border:1px solid rgba(255,255,255,0.1);border-radius:14px;overflow:hidden;min-width:160px;z-index:300;backdrop-filter:blur(20px)} .umenu-item{padding:11px 18px;font-size:13px;cursor:pointer;color:var(--text);transition:.15s;font-weight:300} .umenu-item:hover{background:rgba(255,255,255,0.07)} .umenu-item.danger{color:#e94560} .umenu-sep{height:1px;background:rgba(255,255,255,0.07);margin:3px 0} #widget-bar{position:absolute;top:46px;left:0;right:0;z-index:40;overflow-x:auto;white-space:nowrap;padding:8px 12px 8px 8px;display:none;gap:10px;background:rgba(8,8,15,0.6);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,0.04);scrollbar-width:none;align-items:center} #widget-bar::-webkit-scrollbar{display:none} #widget-bar.visible{display:flex} .widget-close-btn{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.1);color:rgba(255,255,255,0.5);font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s} .widget-close-btn:hover{background:rgba(255,255,255,0.15);color:#fff} .widget{display:inline-flex;flex-direction:column;vertical-align:top;background:rgba(22,22,40,0.92);border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:10px 13px;min-width:120px;max-width:180px;white-space:normal;flex-shrink:0;cursor:pointer;transition:.15s;position:relative} .widget:hover{background:rgba(30,30,56,0.95)} .widget-icon{font-size:16px;margin-bottom:4px} .widget-title{font-size:9px;font-weight:500;color:rgba(255,255,255,0.3);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:4px} .widget-main{font-size:20px;font-weight:100;color:#fff;letter-spacing:1px;line-height:1.1} .widget-sub{font-size:10px;font-weight:300;color:rgba(255,255,255,0.4);margin-top:3px;line-height:1.4} .widget-open{position:absolute;top:7px;right:9px;font-size:10px;color:rgba(255,255,255,0.2)} #desktop{position:absolute;top:126px;left:0;right:0;bottom:64px;z-index:1;overflow:hidden} #cards-container{position:relative;width:100%;height:100%} .app-card{position:absolute;background:var(--card);border-radius:20px;border:1px solid rgba(255,255,255,0.07);width:340px;min-width:240px;min-height:180px;display:flex;flex-direction:column;box-shadow:0 8px 32px rgba(0,0,0,0.5);animation:cardIn .22s ease} .app-card.fullscreen{position:fixed!important;top:46px!important;left:0!important;right:0!important;bottom:64px!important;width:100%!important;height:calc(100vh - 110px)!important;border-radius:0!important;z-index:100!important} @keyframes cardIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}} @keyframes fadeIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}} @keyframes wobble{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}} @keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}} @keyframes siriPulse{from{box-shadow:0 0 0 0 rgba(233,69,96,0.4)}to{box-shadow:0 0 0 16px rgba(233,69,96,0)}} .card-header{display:flex;align-items:center;gap:8px;padding:10px 14px;background:rgba(0,0,0,0.25);border-radius:20px 20px 0 0;cursor:move;user-select:none;flex-shrink:0} .app-card.fullscreen .card-header{border-radius:0;cursor:default} .card-dot{width:13px;height:13px;border-radius:50%;border:none;cursor:pointer;flex-shrink:0;transition:.15s} .dot-close{background:#ff5f57}.dot-min{background:#febc2e}.dot-full{background:#28c840} .card-icon{font-size:13px}.card-title{font-size:12px;font-weight:400;flex:1;letter-spacing:.3px;color:rgba(255,255,255,0.7)} .card-body{flex:1;overflow-y:auto;display:flex;flex-direction:column;border-radius:0 0 20px 20px} .app-card.fullscreen .card-body{border-radius:0} #launcher{position:absolute;bottom:0;left:0;right:0;height:64px;z-index:50;display:flex;align-items:center;padding:0 16px;gap:10px;background:rgba(8,8,15,0.85);backdrop-filter:blur(20px);border-top:1px solid rgba(255,255,255,0.05);justify-content:center} .launch-icon{width:46px;height:46px;border-radius:14px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:20px;transition:.15s;flex-direction:column;gap:2px;position:relative;user-select:none} .launch-icon:hover{background:rgba(255,255,255,0.12);transform:translateY(-3px)} .launch-icon:active{transform:scale(.93)} .launch-lbl{font-size:8px;font-weight:300;color:rgba(255,255,255,0.35);letter-spacing:.5px} .launch-icon.editing{animation:wobble .4s infinite alternate;border-color:rgba(255,255,255,0.25)} .launch-icon .remove-badge{position:absolute;top:-5px;left:-5px;width:16px;height:16px;background:#e94560;border-radius:50%;font-size:11px;color:#fff;display:none;align-items:center;justify-content:center} .launch-icon.editing .remove-badge{display:flex} #dock-divider{width:1px;height:36px;background:rgba(255,255,255,0.1);flex-shrink:0} #launch-home{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.15)} #app-drawer{position:absolute;bottom:64px;left:0;right:0;z-index:49;background:rgba(8,8,15,0.95);backdrop-filter:blur(24px);border-top:1px solid rgba(255,255,255,0.07);padding:16px;display:grid;grid-template-columns:repeat(6,1fr);gap:12px;animation:slideUp .2s ease;max-height:calc(100vh - 110px);overflow-y:auto} .drawer-icon{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;padding:10px 4px;border-radius:14px;transition:.15s} .drawer-icon:hover{background:rgba(255,255,255,0.07)} .drawer-icon-img{width:44px;height:44px;border-radius:13px;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;font-size:20px} .drawer-icon-lbl{font-size:10px;font-weight:300;color:rgba(255,255,255,0.55);letter-spacing:.5px;text-align:center} .drawer-icon.in-dock .drawer-icon-img{border-color:var(--acc);background:rgba(233,69,96,0.1)} .drawer-section{grid-column:1/-1;font-size:10px;font-weight:500;color:rgba(255,255,255,0.25);letter-spacing:2px;text-transform:uppercase;padding:4px 0 0} .browser-frame{flex:1;display:flex;flex-direction:column} .browser-bar{display:flex;align-items:center;gap:6px;padding:8px;background:rgba(0,0,0,0.2)} .browser-url{flex:1;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);border-radius:8px;padding:5px 10px;color:#fff;font-size:12px;outline:none;font-family:'Roboto',sans-serif} .browser-go{background:var(--acc);border:none;border-radius:7px;padding:5px 12px;color:#fff;font-size:11px;cursor:pointer} .browser-splash{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px;text-align:center} .splash-logo{font-size:48px}.splash-title{font-size:20px;font-weight:300;letter-spacing:3px} .splash-url{font-size:10px;color:var(--muted);word-break:break-all;max-width:280px;background:rgba(0,0,0,0.25);padding:6px 12px;border-radius:8px;font-family:monospace} .splash-sub{font-size:11px;color:rgba(255,255,255,0.25);letter-spacing:.5px} .splash-btn{background:var(--acc);border:none;border-radius:10px;padding:9px 24px;color:#fff;font-size:12px;cursor:pointer;font-family:'Roboto',sans-serif} .calc-body{padding:12px;display:flex;flex-direction:column;gap:6px} .calc-display{background:rgba(0,0,0,0.35);border-radius:12px;padding:12px 14px;text-align:right;font-size:28px;font-weight:300;color:#fff;min-height:58px;word-break:break-all} .calc-sub{font-size:11px;color:rgba(255,255,255,0.28);min-height:14px} .calc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px} .calc-btn{padding:12px 4px;border-radius:10px;border:none;font-size:14px;font-weight:300;cursor:pointer;transition:.1s;font-family:'Roboto',sans-serif} .calc-btn:active{transform:scale(.93)} .cb-num{background:rgba(255,255,255,0.09);color:#fff} .cb-op{background:rgba(233,69,96,0.2);color:#e94560} .cb-eq{background:var(--acc);color:#fff} .cb-fn{background:rgba(255,255,255,0.05);color:rgba(255,255,255,0.5);font-size:12px} .cb-zero{grid-column:span 2} .term-body{flex:1;background:#060610;padding:10px;font-family:monospace;font-size:12px;overflow-y:auto;min-height:200px;display:flex;flex-direction:column;gap:1px} .term-line{color:#9fefb0;white-space:pre-wrap;word-break:break-all} .term-prompt-row{display:flex;align-items:center;gap:6px;background:#060610;padding:4px 10px} .term-prompt-lbl{color:var(--acc);white-space:nowrap;font-size:12px;font-family:monospace} .term-input-el{flex:1;background:transparent;border:none;outline:none;color:#9fefb0;font-family:monospace;font-size:12px} .notes-body{flex:1;display:flex;flex-direction:column} .notes-toolbar{display:flex;gap:4px;padding:6px 8px;background:rgba(0,0,0,0.2);flex-shrink:0} .notes-tb-btn{background:rgba(255,255,255,0.07);border:none;border-radius:6px;padding:4px 10px;color:rgba(255,255,255,0.6);font-size:11px;cursor:pointer} .notes-textarea{flex:1;background:rgba(0,0,0,0.15);border:none;padding:12px;color:var(--text);font-size:13px;font-weight:300;resize:none;outline:none;line-height:1.7;font-family:'Roboto',sans-serif;min-height:150px} .clock-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:20px} .clock-time{font-size:52px;font-weight:100;letter-spacing:3px} .clock-date{font-size:13px;font-weight:300;color:var(--muted);letter-spacing:2px;text-transform:uppercase} .cal-body{flex:1;padding:12px;display:flex;flex-direction:column;gap:8px;overflow:hidden} .cal-header{display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:400;padding:0 2px} .cal-nav{background:none;border:none;color:var(--text);cursor:pointer;font-size:18px;padding:2px 8px;border-radius:6px} .cal-nav:hover{background:rgba(255,255,255,0.08)} .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center} .cal-day-lbl{font-size:10px;font-weight:500;color:var(--muted);padding:3px 0} .cal-day{font-size:12px;padding:5px 2px;border-radius:7px;color:rgba(255,255,255,0.7)} .cal-day.today{background:var(--acc);color:#fff;font-weight:500} .cal-day.other-month{color:rgba(255,255,255,0.18)} .files-body{flex:1;overflow-y:auto} .files-header{padding:8px 12px;font-size:11px;color:var(--muted);border-bottom:1px solid rgba(255,255,255,0.05);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px} .file-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid rgba(255,255,255,0.03);cursor:pointer;font-size:13px;font-weight:300;transition:.1s} .file-item:hover{background:rgba(255,255,255,0.05)} .file-icon{font-size:16px;width:22px;text-align:center} .file-size{font-size:11px;color:var(--muted);margin-left:auto} .music-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px;text-align:center} .music-title{font-size:16px;font-weight:400;letter-spacing:.5px} .music-artist{font-size:12px;font-weight:300;color:var(--muted)} .music-controls{display:flex;gap:16px;align-items:center} .mc-btn{background:rgba(255,255,255,0.08);border:none;border-radius:50%;width:36px;height:36px;color:#fff;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s} .mc-btn:hover{background:rgba(255,255,255,0.15)} .mc-play{width:48px;height:48px;background:var(--acc);font-size:20px} .music-progress{width:100%;height:3px;background:rgba(255,255,255,0.1);border-radius:2px;cursor:pointer} .music-fill{height:100%;width:0%;background:var(--acc);border-radius:2px;transition:.3s} .weather-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:20px;text-align:center} .weather-icon{font-size:56px} .weather-temp{font-size:48px;font-weight:100;letter-spacing:2px} .weather-desc{font-size:14px;font-weight:300;color:var(--muted);letter-spacing:1px;text-transform:uppercase} .weather-loc{font-size:12px;font-weight:300;color:rgba(255,255,255,0.3);margin-top:4px} .weather-row{display:flex;gap:20px;margin-top:10px} .weather-stat{text-align:center} .weather-stat-val{font-size:15px;font-weight:300} .weather-stat-lbl{font-size:10px;color:var(--muted);letter-spacing:1px;text-transform:uppercase} .contacts-body{flex:1;overflow-y:auto} .contact-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,0.04);cursor:pointer} .contact-item:hover{background:rgba(255,255,255,0.04)} .contact-avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:400;flex-shrink:0} .contact-name{font-size:13px;font-weight:300} .contact-num{font-size:11px;color:var(--muted)} .settings-body{flex:1;overflow-y:auto} .settings-section-hdr{padding:12px 14px 5px;font-size:10px;font-weight:500;color:var(--muted);letter-spacing:2px;text-transform:uppercase} .settings-row{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,0.04);font-size:13px;font-weight:300} .settings-row .val{color:var(--muted);font-size:12px} .settings-toggle{width:36px;height:20px;border-radius:10px;background:rgba(255,255,255,0.1);cursor:pointer;position:relative;transition:.2s;border:none;flex-shrink:0} .settings-toggle.on{background:var(--acc)} .settings-toggle::after{content:'';position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:.2s} .settings-toggle.on::after{left:19px} .hidden{display:none!important}
Web
powered by OpenWebOS
.wp-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:10px 0 20px} .wp-swatch{height:44px;border-radius:10px;cursor:pointer;border:2px solid transparent;transition:.2s} .wp-swatch.sel{border-color:#fff} .wp-swatch.s0{background:linear-gradient(135deg,#0e0e1a,#1a1a3e)} .wp-swatch.s1{background:linear-gradient(135deg,#0d1b2a,#1b3a4b)} .wp-swatch.s2{background:linear-gradient(135deg,#1a0e2e,#2e1a4e)} .wp-swatch.s3{background:linear-gradient(135deg,#0e1a0e,#1a3a1a)} .wp-swatch.s4{background:linear-gradient(135deg,#1a0e0e,#3a1a1a)} .acc-row{display:flex;gap:8px;justify-content:center;margin:8px 0 22px} .acc-dot{width:28px;height:28px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:.2s} .acc-dot.sel{border-color:#fff;transform:scale(1.2)} /* LuneOS Login */ #loginScreen{background:var(--bg)} .login-time{font-size:72px;font-weight:100;letter-spacing:2px;color:#fff;text-align:center;line-height:1} .login-date{font-size:14px;font-weight:300;color:rgba(255,255,255,0.4);letter-spacing:3px;text-align:center;margin-bottom:50px;text-transform:uppercase} .login-avatar{width:72px;height:72px;border-radius:50%;background:var(--acc);display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:300;color:#fff;margin:0 auto 12px} .login-name{font-size:18px;font-weight:300;color:#fff;text-align:center;margin-bottom:24px;letter-spacing:1px} .login-input{width:280px;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.12);border-radius:40px;padding:13px 22px;color:#fff;font-size:14px;font-weight:300;outline:none;text-align:center;letter-spacing:1px;font-family:'Roboto',sans-serif} .login-input:focus{border-color:var(--acc)} .login-err{font-size:12px;color:#e94560;margin-top:10px;min-height:16px;text-align:center} .login-arrow{margin-top:16px;width:280px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12);border-radius:40px;padding:13px;color:#fff;font-size:14px;font-weight:300;cursor:pointer;letter-spacing:1px;text-transform:uppercase;font-family:'Roboto',sans-serif;transition:.2s} .login-arrow:hover{background:rgba(255,255,255,0.14)} /* Status / Just Type bar */ #topbar{position:absolute;top:0;left:0;right:0;height:46px;z-index:50;display:flex;align-items:center;padding:0 14px;gap:10px;background:rgba(8,8,15,0.75);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,0.05)} #just-type{flex:1;max-width:420px;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.1);border-radius:20px;padding:7px 16px;color:#fff;font-size:13px;font-weight:300;outline:none;font-family:'Roboto',sans-serif} #just-type::placeholder{color:rgba(255,255,255,0.25)} #just-type:focus{border-color:rgba(255,255,255,0.22)} #tb-right{display:flex;align-items:center;gap:8px;margin-left:auto} .tb-pill{font-size:12px;font-weight:300;color:rgba(255,255,255,0.45);padding:4px 12px;border-radius:14px;cursor:pointer;transition:.15s;white-space:nowrap} .tb-pill:hover{background:rgba(255,255,255,0.07)} #user-menu{position:absolute;top:42px;right:8px;background:rgba(20,20,36,0.97);border:1px solid rgba(255,255,255,0.1);border-radius:14px;overflow:hidden;min-width:160px;z-index:300;backdrop-filter:blur(20px);animation:fadeIn .15s ease} .umenu-item{padding:11px 18px;font-size:13px;cursor:pointer;color:var(--text);transition:.15s;font-weight:300} .umenu-item:hover{background:rgba(255,255,255,0.07)} .umenu-item.danger{color:#e94560} .umenu-sep{height:1px;background:rgba(255,255,255,0.07);margin:3px 0} /* Desktop */ #desktop{position:absolute;top:126px;left:0;right:0;bottom:64px;z-index:1;overflow:hidden} #cards-container{position:relative;width:100%;height:100%} /* Draggable App Cards */ .app-card{position:absolute;background:var(--card);border-radius:20px;border:1px solid rgba(255,255,255,0.07);width:340px;min-width:240px;min-height:180px;overflow:visible;display:flex;flex-direction:column;box-shadow:0 8px 32px rgba(0,0,0,0.5);animation:cardIn .22s ease;resize:both} .app-card.fullscreen{position:fixed!important;top:46px!important;left:0!important;right:0!important;bottom:64px!important;width:100%!important;height:calc(100vh - 110px)!important;border-radius:0!important;z-index:100!important;resize:none} @keyframes cardIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}} .card-header{display:flex;align-items:center;gap:8px;padding:10px 14px;background:rgba(0,0,0,0.25);border-radius:20px 20px 0 0;cursor:move;user-select:none;flex-shrink:0} .app-card.fullscreen .card-header{border-radius:0;cursor:default} .card-dot{width:13px;height:13px;border-radius:50%;border:none;cursor:pointer;flex-shrink:0;transition:.15s} .dot-close{background:#ff5f57}.dot-min{background:#febc2e}.dot-full{background:#28c840} .dot-close:hover{filter:brightness(.8)}.dot-min:hover{filter:brightness(.8)}.dot-full:hover{filter:brightness(.8)} .card-icon{font-size:13px}.card-title{font-size:12px;font-weight:400;flex:1;letter-spacing:.3px;color:rgba(255,255,255,0.7)} .card-body{flex:1;overflow:hidden;display:flex;flex-direction:column;border-radius:0 0 20px 20px} .app-card.fullscreen .card-body{border-radius:0} /* Launcher */ #launcher{position:absolute;bottom:0;left:0;right:0;height:64px;z-index:50;display:flex;align-items:center;padding:0 16px;gap:10px;background:rgba(8,8,15,0.85);backdrop-filter:blur(20px);border-top:1px solid rgba(255,255,255,0.05);justify-content:center} .launch-icon{width:46px;height:46px;border-radius:14px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:20px;transition:.15s;flex-direction:column;gap:2px;position:relative;user-select:none} .launch-icon:hover{background:rgba(255,255,255,0.12);transform:translateY(-3px)} .launch-icon:active{transform:scale(.93)} .launch-lbl{font-size:8px;font-weight:300;color:rgba(255,255,255,0.35);letter-spacing:.5px} .launch-icon.editing{animation:wobble .4s infinite alternate;border-color:rgba(255,255,255,0.25)} .launch-icon .remove-badge{position:absolute;top:-5px;left:-5px;width:16px;height:16px;background:#e94560;border-radius:50%;font-size:11px;color:#fff;display:flex;align-items:center;justify-content:center;line-height:1;display:none} .launch-icon.editing .remove-badge{display:flex} #dock-divider{width:1px;height:36px;background:rgba(255,255,255,0.1);flex-shrink:0} #launch-home{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.15)} @keyframes wobble{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}} /* Widgets */ #widget-bar{position:absolute;top:46px;left:0;right:0;z-index:40;overflow-x:auto;white-space:nowrap;padding:8px 12px 8px 8px;display:none;gap:10px;background:rgba(8,8,15,0.6);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,0.04);scrollbar-width:none;align-items:center} #widget-bar::-webkit-scrollbar{display:none} #widget-bar.visible{display:flex} .widget-close-btn{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.1);color:rgba(255,255,255,0.5);font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s;order:-1} .widget-close-btn:hover{background:rgba(255,255,255,0.15);color:#fff} .widget{display:inline-flex;flex-direction:column;vertical-align:top;background:rgba(22,22,40,0.92);border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:10px 13px;min-width:120px;max-width:180px;white-space:normal;flex-shrink:0;cursor:pointer;transition:.15s;position:relative} .widget:hover{background:rgba(30,30,56,0.95)} .widget-icon{font-size:16px;margin-bottom:4px} .widget-title{font-size:9px;font-weight:500;color:rgba(255,255,255,0.3);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:4px} .widget-main{font-size:20px;font-weight:100;color:#fff;letter-spacing:1px;line-height:1.1} .widget-sub{font-size:10px;font-weight:300;color:rgba(255,255,255,0.4);margin-top:3px;line-height:1.4} .widget-open{position:absolute;top:7px;right:9px;font-size:10px;color:rgba(255,255,255,0.2)} #app-drawer{position:absolute;bottom:64px;left:0;right:0;z-index:49;background:rgba(8,8,15,0.95);backdrop-filter:blur(24px);border-top:1px solid rgba(255,255,255,0.07);padding:16px;display:grid;grid-template-columns:repeat(6,1fr);gap:12px;animation:slideUp .2s ease;max-height:calc(100vh - 110px);overflow-y:auto} @keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}} .drawer-icon{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;padding:10px 4px;border-radius:14px;transition:.15s} .drawer-icon:hover{background:rgba(255,255,255,0.07)} .drawer-icon-img{width:44px;height:44px;border-radius:13px;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;font-size:20px} .drawer-icon-lbl{font-size:10px;font-weight:300;color:rgba(255,255,255,0.55);letter-spacing:.5px;text-align:center} .drawer-icon.in-dock .drawer-icon-img{border-color:var(--acc);background:rgba(233,69,96,0.1)} .drawer-section{grid-column:1/-1;font-size:10px;font-weight:500;color:rgba(255,255,255,0.25);letter-spacing:2px;text-transform:uppercase;padding:4px 0 0} /* App Styles */ .browser-frame{flex:1;display:flex;flex-direction:column} .browser-bar{display:flex;align-items:center;gap:6px;padding:8px;background:rgba(0,0,0,0.2)} .browser-url{flex:1;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);border-radius:8px;padding:5px 10px;color:#fff;font-size:12px;outline:none;font-family:'Roboto',sans-serif} .browser-go{background:var(--acc);border:none;border-radius:7px;padding:5px 12px;color:#fff;font-size:11px;cursor:pointer} .browser-splash{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px;text-align:center} .splash-logo{font-size:48px} .splash-title{font-size:20px;font-weight:300;letter-spacing:3px} .splash-url{font-size:10px;color:var(--muted);word-break:break-all;max-width:280px;background:rgba(0,0,0,0.25);padding:6px 12px;border-radius:8px;font-family:monospace} .splash-sub{font-size:11px;color:rgba(255,255,255,0.25);letter-spacing:.5px} .splash-btn{background:var(--acc);border:none;border-radius:10px;padding:9px 24px;color:#fff;font-size:12px;cursor:pointer;font-family:'Roboto',sans-serif} .calc-body{padding:12px;display:flex;flex-direction:column;gap:6px} .calc-display{background:rgba(0,0,0,0.35);border-radius:12px;padding:12px 14px;text-align:right;font-size:28px;font-weight:300;color:#fff;min-height:58px;word-break:break-all} .calc-sub{font-size:11px;color:rgba(255,255,255,0.28);min-height:14px} .calc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px} .calc-btn{padding:12px 4px;border-radius:10px;border:none;font-size:14px;font-weight:300;cursor:pointer;transition:.1s;font-family:'Roboto',sans-serif} .calc-btn:active{transform:scale(.93)} .cb-num{background:rgba(255,255,255,0.09);color:#fff} .cb-op{background:rgba(233,69,96,0.2);color:#e94560} .cb-eq{background:var(--acc);color:#fff} .cb-fn{background:rgba(255,255,255,0.05);color:rgba(255,255,255,0.5);font-size:12px} .cb-zero{grid-column:span 2} .term-body{flex:1;background:#060610;padding:10px;font-family:'Roboto Mono',monospace;font-size:12px;overflow-y:auto;min-height:200px;display:flex;flex-direction:column;gap:1px} .term-line{color:#9fefb0;white-space:pre-wrap;word-break:break-all;font-size:12px} .term-prompt-row{display:flex;align-items:center;gap:6px;background:#060610;padding:4px 10px} .term-prompt-lbl{color:var(--acc);white-space:nowrap;font-size:12px;font-family:monospace} .term-input-el{flex:1;background:transparent;border:none;outline:none;color:#9fefb0;font-family:monospace;font-size:12px} .notes-body{flex:1;display:flex;flex-direction:column} .notes-toolbar{display:flex;gap:4px;padding:6px 8px;background:rgba(0,0,0,0.2);flex-shrink:0} .notes-tb-btn{background:rgba(255,255,255,0.07);border:none;border-radius:6px;padding:4px 10px;color:rgba(255,255,255,0.6);font-size:11px;cursor:pointer} .notes-textarea{flex:1;background:rgba(0,0,0,0.15);border:none;padding:12px;color:var(--text);font-size:13px;font-weight:300;resize:none;outline:none;line-height:1.7;font-family:'Roboto',sans-serif;min-height:150px} .clock-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:20px} .clock-time{font-size:52px;font-weight:100;letter-spacing:3px} .clock-date{font-size:13px;font-weight:300;color:var(--muted);letter-spacing:2px;text-transform:uppercase} .clock-secs{font-size:14px;font-weight:300;color:rgba(255,255,255,0.3);letter-spacing:1px} .cal-body{flex:1;padding:12px;display:flex;flex-direction:column;gap:8px;overflow:hidden} .cal-header{display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:400;padding:0 2px} .cal-nav{background:none;border:none;color:var(--text);cursor:pointer;font-size:18px;padding:2px 8px;border-radius:6px;line-height:1} .cal-nav:hover{background:rgba(255,255,255,0.08)} .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center;flex:1} .cal-day-lbl{font-size:10px;font-weight:500;color:var(--muted);padding:3px 0} .cal-day{font-size:12px;padding:5px 2px;border-radius:7px;cursor:default;color:rgba(255,255,255,0.7)} .cal-day.today{background:var(--acc);color:#fff;font-weight:500} .cal-day.other-month{color:rgba(255,255,255,0.18)} .files-body{flex:1;overflow-y:auto} .files-header{padding:8px 12px;font-size:11px;color:var(--muted);border-bottom:1px solid rgba(255,255,255,0.05)} .file-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid rgba(255,255,255,0.03);cursor:pointer;font-size:13px;font-weight:300;transition:.1s} .file-item:hover{background:rgba(255,255,255,0.05)} .file-icon{font-size:16px;width:22px;text-align:center} .file-size{font-size:11px;color:var(--muted);margin-left:auto} .music-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:20px;text-align:center} .music-art{width:80px;height:80px;border-radius:16px;background:linear-gradient(135deg,var(--acc),rgba(var(--acc),0.3));display:flex;align-items:center;justify-content:center;font-size:32px} .music-title{font-size:16px;font-weight:400;letter-spacing:.5px} .music-artist{font-size:12px;font-weight:300;color:var(--muted)} .music-controls{display:flex;gap:16px;align-items:center} .mc-btn{background:rgba(255,255,255,0.08);border:none;border-radius:50%;width:36px;height:36px;color:#fff;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s} .mc-btn:hover{background:rgba(255,255,255,0.15)} .mc-play{width:48px;height:48px;background:var(--acc);font-size:20px} .music-progress{width:100%;height:3px;background:rgba(255,255,255,0.1);border-radius:2px;cursor:pointer} .music-fill{height:100%;width:35%;background:var(--acc);border-radius:2px;transition:.5s} .weather-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:20px;text-align:center} .weather-icon{font-size:56px} .weather-temp{font-size:48px;font-weight:100;letter-spacing:2px} .weather-desc{font-size:14px;font-weight:300;color:var(--muted);letter-spacing:1px;text-transform:uppercase} .weather-loc{font-size:12px;font-weight:300;color:rgba(255,255,255,0.3);margin-top:4px} .weather-row{display:flex;gap:20px;margin-top:10px} .weather-stat{text-align:center} .weather-stat-val{font-size:15px;font-weight:300} .weather-stat-lbl{font-size:10px;color:var(--muted);letter-spacing:1px;text-transform:uppercase} .settings-body{flex:1;overflow-y:auto} .settings-section-hdr{padding:12px 14px 5px;font-size:10px;font-weight:500;color:var(--muted);letter-spacing:2px;text-transform:uppercase} .settings-row{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,0.04);font-size:13px;font-weight:300} .settings-row .val{color:var(--muted);font-size:12px} .settings-toggle{width:36px;height:20px;border-radius:10px;background:rgba(255,255,255,0.1);cursor:pointer;position:relative;transition:.2s;border:none} .settings-toggle.on{background:var(--acc)} .settings-toggle::after{content:'';position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:.2s} .settings-toggle.on::after{left:19px} .maps-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px;text-align:center} .maps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;width:100%;height:140px;border-radius:10px;overflow:hidden;background:rgba(255,255,255,0.03)} .maps-cell{background:rgba(255,255,255,0.02)} .maps-center{background:rgba(var(--acc),0.2)} .photos-body{flex:1;overflow-y:auto} .photos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:2px} .photo-item{aspect-ratio:1;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:24px;cursor:pointer} .contacts-body{flex:1;overflow-y:auto} .contact-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,0.04);cursor:pointer} .contact-item:hover{background:rgba(255,255,255,0.04)} .contact-avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:400;flex-shrink:0} .contact-name{font-size:13px;font-weight:300} .contact-num{font-size:11px;color:var(--muted)} .about-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px;text-align:center} .about-logo{font-size:48px;margin-bottom:8px} .about-name{font-size:22px;font-weight:300;letter-spacing:3px} .about-ver{font-size:12px;color:var(--muted);letter-spacing:1px;margin-bottom:16px} .about-rows{width:100%;text-align:left} .about-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.05);font-size:13px;font-weight:300} .about-row .k{color:var(--muted)} @keyframes siriPulse{from{box-shadow:0 0 0 0 rgba(233,69,96,0.4)}to{box-shadow:0 0 0 16px rgba(233,69,96,0)}} @keyframes fadeIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}} .hidden{display:none!important}
Web
powered by OpenWebOS