:root {
 color-scheme: dark;
 --chrome: #191a21;
 --chrome-2: #20212a;
 --page: #191a21;
 --surface: color-mix(in srgb, var(--page) 96%, white);
 --surface-raised: color-mix(in srgb, var(--page) 92%, white);
 --surface-hover: color-mix(in srgb, var(--page) 88%, white);
 --border: color-mix(in srgb, var(--page) 84%, white);
 --muted: #898b98;
 --text: #f4f5fb;
 --accent: #0099ff;
 --tab-active: #252731;
}
* {
 box-sizing: border-box;
}
html,
body {
 width: 100%;
 height: 100%;
 margin: 0;
}
body {
 display: flex;
 flex-direction: column;
 overflow: hidden;
 background: var(--page);
 color: var(--text);
 font:
  14px/1.45 Inter,
  ui-sans-serif,
  system-ui,
  -apple-system,
  BlinkMacSystemFont,
  "Segoe UI",
  sans-serif;
}
button,
input {
 color: inherit;
 font: inherit;
}
button {
 cursor: pointer;
}
.browser {
 flex: 0 0 auto;
 background: var(--chrome);
}
.tabs {
 height: 40px;
 display: flex;
 align-items: stretch;
 gap: 3px;
 padding: 0 6px 0;
 border-bottom: 3px solid var(--accent);
 background: transparent;
 overflow: hidden;
}
.tab-list {
 display: flex;
 align-items: stretch;
 flex: 0 1 auto;
 gap: 3px;
 min-width: 0;
 height: 100%;
 padding-top: 4px;
 overflow-x: auto;
 scrollbar-width: none;
}
.tab-list::-webkit-scrollbar {
 display: none;
}
.tab {
 display: grid;
 grid-template-columns: 16px minmax(0, 1fr) 20px;
 align-items: center;
 column-gap: 7px;
 min-width: 170px;
 max-width: 210px;
 height: 33px;
 align-self: stretch;
 padding: 0 8px 0 10px;
 border: 1px solid rgba(255, 255, 255, 0.1);
 border-bottom: 0;
 border-radius: 6px 6px 0 0;
 color: rgba(255, 255, 255, 0.45);
 background: rgba(255, 255, 255, 0.04);
 user-select: none;
 flex: 0 0 170px;
 transform-origin: center bottom;
}
.tab.tab-entering {
 animation: tab-open 180ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
}
.tab.tab-closing {
 animation: tab-close 130ms ease-in both;
 pointer-events: none;
}
@keyframes tab-open {
 from {
  opacity: 0;
  transform: translateY(7px) scale(0.96);
 }
 to {
  opacity: 1;
  transform: none;
 }
}
@keyframes tab-close {
 to {
  opacity: 0;
  transform: translateY(5px) scale(0.94);
 }
}
.tab.has-audio {
 grid-template-columns: 16px minmax(0, 1fr) 20px 20px;
}
.tab:hover {
 background: rgba(255, 255, 255, 0.08);
 border-color: rgba(255, 255, 255, 0.18);
}
.tab.active {
 margin: 0;
 border: 2px solid var(--accent);
 border-bottom: 0;
 background: rgba(0, 153, 255, 0.07);
 color: rgba(255, 255, 255, 0.9);
 z-index: 1;
}
.tab.combined-tab { border-top-color:color-mix(in srgb,var(--accent) 72%,white); }
.tab-title {
 display:flex;
 align-items:center;
 gap:5px;
 min-width: 0;
 font-size: 12.5px;
}
.tab-title-text {
 min-width:0;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 text-align: left;
}
.tab-split-indicator { flex:none; color:var(--accent); font-size:14px; }
.material-symbols-rounded {
 font-family: "Material Symbols Rounded";
 font-weight: normal;
 font-style: normal;
 font-size: 20px;
 line-height: 1;
 letter-spacing: normal;
 text-transform: none;
 display: inline-block;
 white-space: nowrap;
 direction: ltr;
 -webkit-font-feature-settings: "liga";
 -webkit-font-smoothing: antialiased;
}
.tab-close,
.tab-audio,
.icon-button {
 display: inline-grid;
 place-items: center;
 border: 0;
 padding: 0;
 color: #a5a7b2;
 background: transparent;
 line-height: 1;
}
.tab-close {
 position: relative;
 width: 20px;
 height: 20px;
 padding: 0;
 border-radius: 3px;
 font-size: 0;
}
.tab-audio {
 width: 20px;
 height: 20px;
 padding: 0;
 border-radius: 3px;
 cursor: pointer;
}
.tab-audio .material-symbols-rounded {
 font-size: 16px;
}
.tab-audio.muted {
 color: var(--accent);
}
.tab-close::before,
.tab-close::after {
 position: absolute;
 top: 50%;
 left: 50%;
 width: 10px;
 height: 1.5px;
 border-radius: 1px;
 background: currentColor;
 content: "";
}
.tab-close::before {
 transform: translate(-50%, -50%) rotate(45deg);
}
.tab-close::after {
 transform: translate(-50%, -50%) rotate(-45deg);
}
.tab-favicon-wrap .material-symbols-rounded {
 font-size: 16px;
 line-height: 16px;
 transform: translateY(-1px);
}
.tab-close:hover,
.tab-audio:hover,
.icon-button:hover {
 color: white;
 background: #343641;
}
.new-tab {
 position: relative;
 display: grid;
 place-items: center;
 width: 30px;
 height: 30px;
 margin: 0 2px;
 padding: 0;
 font-size: 0;
 line-height: 1;
 border-radius: 5px;
 align-self: center;
 flex: 0 0 30px;
 transform: translateY(2px);
}
.new-tab::before,
.new-tab::after {
 position: absolute;
 top: 50%;
 left: 50%;
 border-radius: 1px;
 background: currentColor;
 content: "";
}
.new-tab::before {
 width: 11px;
 height: 1.5px;
 transform: translate(-50%, -50%);
}
.new-tab::after {
 width: 1.5px;
 height: 11px;
 transform: translate(-50%, -50%);
}
.new-tab .material-symbols-rounded {
 display: none;
}
.extension-menu {
 position: fixed;
 z-index: 30;
 top: 88px;
 right: 12px;
 width: min(360px, calc(100vw - 24px));
 max-height: min(70vh, 520px);
 display: flex;
 flex-direction: column;
 overflow: hidden;
 border: 1px solid var(--border);
 border-radius: 12px;
 background: var(--surface);
 box-shadow: 0 16px 42px #0009;
}
.extension-menu[hidden] {
 display: none;
}
.extension-menu-heading {
 display: flex;
 align-items: center;
 gap: 11px;
 padding: 14px 14px 13px;
 border-bottom: 1px solid var(--border);
}
.extension-menu-mark {
 display: grid;
 flex: 0 0 36px;
 place-items: center;
 width: 36px;
 height: 36px;
 border-radius: 9px;
 color: var(--accent);
 background: color-mix(in srgb, var(--accent) 14%, var(--surface));
}
.extension-menu-heading-copy {
 min-width: 0;
 flex: 1;
}
.extension-menu-title {
 font-size: 14px;
 font-weight: 650;
 line-height: 1.25;
}
.extension-menu-subtitle {
 margin-top: 3px;
 color: var(--muted);
 font-size: 11px;
}
.extension-menu-list {
 display: grid;
 gap: 3px;
 overflow: auto;
 padding: 2px 9px 10px;
}
.extension-menu-empty {
 display: grid;
 justify-items: center;
 gap: 7px;
 margin: 0;
 padding: 24px 12px 28px;
 color: var(--muted);
 font-size: 12px;
 text-align: center;
}
.extension-menu-empty .material-symbols-rounded {
 color: var(--accent);
 font-size: 25px;
}
.extension-menu-row {
 display: flex;
 align-items: center;
 gap: 7px;
 min-height: 55px;
 padding: 4px 5px;
 border: 1px solid transparent;
 border-radius: 8px;
}
.extension-menu-row:hover {
 border-color: var(--border);
 background: var(--surface-raised);
}
.extension-menu-icon {
 width: 32px;
 height: 32px;
 flex: 0 0 32px;
 border-radius: 8px;
 object-fit: contain;
 background: var(--surface-raised);
}
.extension-menu-icon-fallback {
 display: grid;
 place-items: center;
 color: var(--accent);
}
.extension-menu-open {
 display: flex;
 align-items: center;
 gap: 10px;
 flex: 1;
 min-width: 0;
 min-height: 44px;
 padding: 0 4px;
 border: 0;
 background: transparent;
 text-align: left;
}
.extension-menu-copy {
 display: grid;
 min-width: 0;
 gap: 3px;
}
.extension-menu-name {
 overflow: hidden;
 color: var(--text);
 text-overflow: ellipsis;
 white-space: nowrap;
 font-size: 12px;
 font-weight: 550;
}
.extension-menu-open-hint {
 color: var(--muted);
 font-size: 10px;
}
.extension-menu-footer {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 8px;
 padding: 10px;
 border-top: 1px solid var(--border);
}
.extension-menu-action {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 7px;
 min-width: 0;
 min-height: 38px;
 padding: 0 8px;
 border: 1px solid var(--border);
 border-radius: 7px;
 background: var(--surface-raised);
 font-size: 11px;
}
.extension-menu-action .material-symbols-rounded {
 font-size: 16px;
}
.extension-menu-action:hover {
 border-color: var(--accent);
 background: var(--surface-hover);
}
.extension-menu-action.primary {
 border-color: color-mix(in srgb, var(--accent) 48%, var(--border));
 color: var(--accent);
 background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}
.pinned-extension-actions {
 display: flex;
 align-items: center;
 gap: 3px;
}
.pinned-extension-actions:empty {
 display: none;
}
.pinned-extension-actions .icon-button {
 width: 29px;
 height: 29px;
}
.pinned-extension-icon {
 width: 17px;
 height: 17px;
 object-fit: contain;
 border-radius: 4px;
}
.extension-action-popup {
 position: fixed;
 z-index: 31;
 top: 88px;
 right: 12px;
 width: min(390px, calc(100vw - 24px));
 height: min(560px, calc(100vh - 110px));
 display: flex;
 flex-direction: column;
 overflow: hidden;
 border: 1px solid var(--border);
 border-radius: 12px;
 background: var(--surface);
 box-shadow: 0 12px 38px #0009;
}
.extension-action-popup[hidden] {
 display: none;
}
.extension-popup-header {
 display: flex;
 align-items: center;
 gap: 10px;
 min-height: 50px;
 padding: 8px 12px;
 border-bottom: 1px solid var(--border);
}
.extension-popup-header img {
 width: 25px;
 height: 25px;
 object-fit: contain;
 border-radius: 5px;
}
.extension-popup-title {
 flex: 1;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 font-size: 13px;
}
.extension-popup-frame {
 flex: 1;
 width: 100%;
 min-height: 0;
 border: 0;
 background: white;
}
.extension-popup-content {
 flex: 1;
 overflow: auto;
 padding: 16px;
 color: #d8d9e1;
 font-size: 13px;
}
.extension-popup-content:empty {
 display: none;
}
.extension-popup-note {
 margin: 0;
 padding: 7px 12px;
 border-top: 1px solid var(--border);
 color: var(--muted);
 font-size: 11px;
}
.agent-launch {
 flex: 0 0 29px;
}
.agent-launch.active {
 color: var(--accent);
 background: var(--surface-raised);
}
.page-agent-popup {
 position: fixed;
 z-index: 32;
 top: 88px;
 right: 12px;
 width: min(390px, calc(100vw - 24px));
 height: min(540px, calc(100vh - 105px));
 display: flex;
 flex-direction: column;
 overflow: hidden;
 border: 1px solid var(--border);
 border-radius: 13px;
 color: var(--text);
 background: var(--surface);
 box-shadow: 0 14px 44px #000b;
}
.page-agent-popup[hidden] {
 display: none;
}
.page-agent-head {
 display: flex;
 align-items: center;
 gap: 10px;
 min-height: 54px;
 padding: 9px 12px;
 border-bottom: 1px solid var(--border);
}
.page-agent-head-icon {
 color: var(--accent);
 font-size: 21px;
}
.page-agent-head-copy {
 min-width: 0;
 flex: 1;
}
.page-agent-head-title {
 font-size: 13px;
 font-weight: 650;
}
.page-agent-page {
 margin-top: 3px;
 overflow: hidden;
 color: var(--muted);
 font-size: 10px;
 text-overflow: ellipsis;
 white-space: nowrap;
}
.page-agent-close {
 display: grid;
 place-items: center;
 width: 28px;
 height: 28px;
 border: 0;
 border-radius: 6px;
 color: var(--muted);
 background: transparent;
 cursor: pointer;
}
.page-agent-close:hover {
 color: var(--text);
 background: var(--surface-hover);
}
.page-agent-log {
 flex: 1;
 display: flex;
 flex-direction: column;
 align-items: stretch;
 gap: 10px;
 overflow: auto;
 padding: 15px 12px;
}
.page-agent-welcome {
 margin: auto 8px;
 color: var(--muted);
 font-size: 12px;
 line-height: 1.65;
 text-align: center;
}
.page-agent-welcome .material-symbols-rounded {
 display: block;
 margin-bottom: 8px;
 color: var(--accent);
 font-size: 27px;
}
.page-agent-message {
 max-width: 90%;
 padding: 10px 12px;
 border: 1px solid var(--border);
 border-radius: 12px;
 color: var(--text);
 background: var(--surface-raised);
 font-size: 12px;
 line-height: 1.5;
 white-space: pre-wrap;
 overflow-wrap: anywhere;
}
.page-agent-message.user {
 align-self: flex-end;
 border-color: color-mix(in srgb, var(--accent) 48%, var(--border));
 background: color-mix(in srgb, var(--accent) 16%, var(--surface));
}
.page-agent-message.status {
 align-self: center;
 max-width: 100%;
 border: 0;
 color: var(--muted);
 background: transparent;
 font-size: 11px;
 text-align: center;
}
.page-agent-composer {
 padding: 10px;
 border-top: 1px solid var(--border);
 background: var(--surface);
}
.page-agent-input-wrap {
 display: flex;
 align-items: flex-end;
 gap: 8px;
 padding: 8px;
 border: 1px solid var(--border);
 border-radius: 11px;
 background: var(--chrome);
}
.page-agent-input-wrap:focus-within {
 border-color: var(--accent);
 box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 14%, transparent);
}
.page-agent-input {
 flex: 1;
 min-height: 38px;
 max-height: 110px;
 resize: vertical;
 border: 0;
 outline: 0;
 color: var(--text);
 background: transparent;
 font: inherit;
 font-size: 12px;
 line-height: 1.5;
}
.page-agent-input::placeholder {
 color: var(--muted);
}
.page-agent-send {
 display: grid;
 flex: 0 0 34px;
 place-items: center;
 width: 34px;
 height: 34px;
 border: 0;
 border-radius: 9px;
 color: var(--page);
 background: var(--accent);
 cursor: pointer;
}
.page-agent-send:disabled {
 opacity: 0.5;
 cursor: wait;
}
.extension-menu-pin {
 display: grid;
 flex: 0 0 30px;
 place-items: center;
 width: 30px;
 height: 30px;
 border: 0;
 border-radius: 7px;
 color: var(--muted);
 background: transparent;
}
.extension-menu-pin:hover {
 color: var(--text);
 background: var(--surface-hover);
}
.extension-menu-pin.pinned {
 color: var(--accent);
 background: color-mix(in srgb, var(--accent) 13%, var(--surface));
}
.toolbar {
 position: relative;
 z-index: 20;
 height: 48px;
 display: flex;
 align-items: center;
 gap: 9px;
 padding: 0 14px;
 border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.nav-actions,
.toolbar-actions {
 display: flex;
 align-items: center;
 gap: 5px;
}
.icon-button {
 width: 29px;
 height: 29px;
 border-radius: 6px;
}
.icon-button:disabled {
 opacity: 0.35;
 cursor: default;
}
.icon-button.active {
 color: var(--accent);
 background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.icon-button .material-symbols-rounded {
 font-size: 19px;
}
.tab-favicon-wrap {
 display: inline-grid;
 place-items: center;
 width: 16px;
 height: 16px;
 flex: 0 0 16px;
 color: #a5a7b2;
}
.tab-favicon {
 display: none;
 width: 16px;
 height: 16px;
 object-fit: contain;
}
.tab-favicon.loaded {
 display: block;
}
.address-wrap {
 flex: 1;
 display: flex;
 justify-content: center;
 min-width: 0;
 padding: 0 16px;
}
.address {
 width: min(860px, 100%);
 height: 32px;
 padding: 0 14px;
 border: 1px solid rgba(255, 255, 255, 0.14);
 border-radius: 8px;
 outline: none;
 background: rgba(255, 255, 255, 0.06);
 color: #f1f2f8;
 font-size: 13px;
 transition:
  border-color 0.16s,
  box-shadow 0.16s;
}
.address::placeholder {
 color: rgba(255, 255, 255, 0.28);
}
.address:focus {
 border-color: #4f9dd0;
 box-shadow: 0 0 0 2px #18a8ff24;
}
.toolbar-actions {
 margin-left: auto;
}
.bookmark-bar {
 display: none;
 align-items: center;
 gap: 4px;
 height: 34px;
 padding: 4px 12px;
 overflow-x: auto;
 border-bottom: 1px solid rgba(255, 255, 255, 0.06);
 scrollbar-width: none;
}
.bookmark-bar::-webkit-scrollbar {
 display: none;
}
.bookmark-item {
 display: inline-flex;
 align-items: center;
 gap: 2px;
 border: 1px solid rgba(255, 255, 255, 0.1);
 border-radius: 6px;
 background: rgba(255, 255, 255, 0.05);
 color: rgba(255, 255, 255, 0.68);
 font-size: 12px;
 white-space: nowrap;
}
.bookmark-open { display:inline-flex; align-items:center; gap:6px; min-width:0; padding:3px 4px 3px 9px; border:0; background:transparent; color:inherit; font:inherit; cursor:pointer; }
.bookmark-open img {
 width: 16px;
 height: 16px;
 object-fit: contain;
}
.bookmark-item:hover {
 border-color: rgba(0, 153, 255, 0.3);
 background: rgba(0, 153, 255, 0.08);
 color: #fff;
}
.bookmark-remove { display:grid; place-items:center; width:20px; height:22px; padding:0; border:0; border-radius:4px; color:var(--muted); background:transparent; font:inherit; font-size:16px; cursor:pointer; }
.bookmark-remove:hover { color:#fff; background:rgba(255,255,255,.12); }
.workspace {
 position: relative;
 flex: 1;
 min-height: 0;
 background-color: var(--page);
 background-image:
  radial-gradient(
   ellipse at 50% 18%,
   color-mix(in srgb, var(--accent) 14%, transparent),
   transparent 44%
  ),
  radial-gradient(
   ellipse at 12% 88%,
   color-mix(in srgb, var(--accent) 10%, transparent),
   transparent 38%
  ),
  linear-gradient(
   145deg,
   var(--chrome) 0%,
   var(--page) 58%,
   var(--chrome-2) 100%
  );
}
.home {
 position: absolute;
 inset: 0;
 display: grid;
 place-items: center;
 overflow: hidden;
 padding: 24px;
}
.home-inner {
 position: relative;
 z-index: 2;
 width: min(560px, 100%);
 margin: 0 auto;
}
.brand {
 margin: 0;
 color: #f8f8fb;
 font-size: clamp(58px, 7vw, 88px);
 font-weight: 720;
 letter-spacing: -4px;
 text-align: center;
 line-height: 1;
}
.splash {
 margin: 8px 0 30px;
 color: #0099ff;
 font-size: 12px;
 font-weight: 700;
 letter-spacing: 2px;
 text-align: center;
}
.search-form {
 width: min(500px, 100%);
 margin: 0 auto;
}
.search-box {
 display: flex;
 align-items: center;
 height: 62px;
 padding: 0 22px;
 border: 1px solid var(--border);
 border-radius: 14px;
 background: rgba(32, 33, 42, 0.94);
 box-shadow: 0 12px 42px rgba(0, 0, 0, 0.22);
 transition:
  border-color 0.18s,
  box-shadow 0.18s;
}
.search-box:focus-within {
 border-color: #3e91c5;
 box-shadow: 0 0 0 3px #18a8ff16;
}
.search-box > .material-symbols-rounded {
 flex: 0 0 auto;
 margin-right: 13px;
 color: #81838f;
 font-size: 20px;
}
.search-box input {
 width: 100%;
 border: 0;
 outline: 0;
 background: transparent;
 font-size: 15px;
}
.search-box input::placeholder {
 color: #777984;
}
.shortcuts {
 display: grid;
 grid-template-columns: repeat(7, minmax(78px, 1fr));
 gap: 14px;
}
.shortcut {
 min-height: 108px;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 12px;
 border: 1px solid var(--border);
 border-radius: 12px;
 background: #1b1c23;
 color: #eef0f5;
 text-decoration: none;
 transition:
  transform 0.16s,
  border-color 0.16s,
  background 0.16s;
}
.shortcut:hover {
 transform: translateY(-3px);
 border-color: #4b4d5a;
 background: #22242d;
}
.shortcut-icon {
 display: grid;
 place-items: center;
 width: 34px;
 height: 34px;
 border-radius: 9px;
 background: #f5f6f9;
 color: #22232a;
 font-size: 19px;
 font-weight: 800;
}
.shortcut-icon.google {
 color: #4285f4;
}
.shortcut-icon.youtube {
 color: #ff0033;
}
.shortcut-icon.reddit {
 color: #ff541b;
}
.shortcut-icon.discord {
 color: #5865f2;
}
.shortcut-icon.github {
 color: #24262c;
}
.shortcut-icon.spotify {
 color: #1ed760;
}
.shortcut-icon.xbrand {
 background: transparent;
 border: 2px solid #f4f5fb;
 color: white;
 font-size: 17px;
}
.shortcut-label {
 font-size: 13px;
}
.view {
 position: absolute;
 inset: 0;
 display: block;
 background: var(--page);
 opacity: 0;
 visibility: hidden;
 transform: scale(0.992);
 transition:
  opacity 160ms ease,
  transform 180ms ease,
  visibility 0s linear 180ms;
 pointer-events: none;
}
.view:not(.loaded)::before {
 content: "";
 position: absolute;
 z-index: 2;
 inset: 0;
 pointer-events: none;
 background:
  linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 10%, transparent), transparent) 0 0 / 45% 100% no-repeat,
  linear-gradient(color-mix(in srgb, var(--surface) 92%, var(--page)), color-mix(in srgb, var(--surface) 92%, var(--page)));
 animation: view-loading-shimmer 1.35s ease-in-out infinite;
}
.view:not(.loaded)::after {
 content: "";
 position: absolute;
 z-index: 3;
 top: 50%;
 left: 50%;
 width: 28px;
 height: 28px;
 margin: -14px;
 border: 3px solid color-mix(in srgb, var(--text) 18%, transparent);
 border-top-color: var(--accent);
 border-radius: 50%;
 pointer-events: none;
 animation: view-loading-spin 0.8s linear infinite;
}
@keyframes view-loading-shimmer {
 from { background-position: -60% 0, 0 0; }
 to { background-position: 160% 0, 0 0; }
}
@keyframes view-loading-spin { to { transform: rotate(360deg); } }
.view.loaded::before,
.view.loaded::after { content: none; }
.view.active {
 opacity: 1;
 visibility: visible;
 transform: scale(1);
 transition-delay: 0s;
 pointer-events: auto;
}
.view.combined-primary {
 display: grid;
 grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
 gap: 1px;
 overflow: hidden;
}
.view.combined-primary > iframe,
.combined-secondary > iframe {
 min-width: 0;
 min-height: 0;
}
.combined-secondary {
 position: relative;
 min-width: 0;
 min-height: 0;
 overflow: hidden;
 background: var(--page);
}
.view.combined-hidden {
 visibility: hidden !important;
 opacity: 0 !important;
 pointer-events: none !important;
}
@media (prefers-reduced-motion: reduce) {
 .tab.tab-entering,
 .tab.tab-closing {
  animation: none;
 }
 .view {
  transition: none;
 }
 .view:not(.loaded)::before { animation: none; }
 .view:not(.loaded)::after { animation-duration: 1.5s; }
}
.plasma-dialog {
 width: min(420px, calc(100vw - 32px));
 max-height: min(80vh, 620px);
 margin: auto;
 padding: 20px;
 color: #e8eaf3;
 background: var(--chrome, #191a21);
 border: 1px solid var(--line, rgba(255, 255, 255, 0.14));
 border-radius: 16px;
 box-shadow: 0 24px 80px rgba(0, 0, 0, 0.48);
}
.plasma-dialog:not([open]) {
 display: none;
}
.plasma-dialog::backdrop {
 background: rgba(0, 0, 0, 0.56);
 backdrop-filter: blur(3px);
}
.plasma-dialog form {
 display: grid;
 gap: 12px;
}
.plasma-dialog-heading {
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 gap: 16px;
 margin-bottom: 10px;
}
.plasma-dialog-heading > div {
 display: grid;
 gap: 4px;
 min-width: 0;
}
.plasma-dialog-heading strong {
 font-size: 16px;
}
.plasma-dialog-heading span {
 color: var(--muted, #a4a7b4);
 font-size: 12px;
 overflow-wrap: anywhere;
}
.plasma-dialog-label {
 color: var(--muted, #a4a7b4);
 font-size: 12px;
}
.plasma-dialog-input {
 width: 100%;
 padding: 10px 12px;
 color: inherit;
 background: var(--surface, #22232c);
 border: 1px solid var(--line, rgba(255, 255, 255, 0.14));
 border-radius: 9px;
 outline: none;
}
.plasma-dialog-input:focus {
 border-color: var(--accent);
 box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
.plasma-dialog-actions {
 display: flex;
 justify-content: flex-end;
 gap: 8px;
 margin-top: 6px;
}
.plasma-dialog-button,
.combine-tab-option {
 padding: 9px 13px;
 color: inherit;
 background: var(--surface-hover, #292a34);
 border: 1px solid var(--line, rgba(255, 255, 255, 0.12));
 border-radius: 9px;
}
.plasma-dialog-button.primary {
 color: white;
 background: var(--accent);
 border-color: transparent;
}
.combine-dialog {
 width: min(460px, calc(100vw - 32px));
}
.combine-tab-list {
 display: grid;
 gap: 7px;
 max-height: 55vh;
 overflow: auto;
}
.combine-tab-option {
 display: flex;
 align-items: center;
 gap: 10px;
 width: 100%;
 text-align: left;
}
.combine-tab-option:hover {
 border-color: var(--accent);
 background: var(--accent-soft);
}
.view iframe {
 width: 100%;
 height: 100%;
 border: 0;
 background: var(--page);
}
.home.hidden {
 display: none;
}
.empty {
 color: var(--muted);
 font-size: 13px;
 text-align: center;
 margin: 30px auto;
}
.taskbar {
 position: relative;
 z-index: 10;
 flex: 0 0 58px;
 display: grid;
 grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
 align-items: center;
 padding: 0 18px;
 border-top: 1px solid rgba(255, 255, 255, 0.08);
 background: rgba(20, 21, 28, 0.88);
 backdrop-filter: blur(18px);
}
.taskbar-profile {
 grid-column: 1;
 justify-self: start;
 display: flex;
 align-items: center;
 gap: 9px;
 min-width: 0;
 max-width: 240px;
 padding: 4px 9px 4px 4px;
 border: 1px solid transparent;
 border-radius: 12px;
 color: #d1d3dc;
 background: transparent;
 font: inherit;
 text-align: left;
 cursor: pointer;
}
.taskbar-profile:hover {
 border-color: var(--border);
 background: rgba(255, 255, 255, 0.06);
}
.taskbar-profile-avatar {
 display: grid;
 place-items: center;
 width: 34px;
 height: 34px;
 flex: 0 0 34px;
 overflow: hidden;
 border-radius: 50%;
 color: #d1d3dc;
 background: rgba(255, 255, 255, 0.09);
}
.taskbar-profile-avatar img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}
.taskbar-profile-avatar .material-symbols-rounded {
 font-size: 21px;
}
.taskbar-profile-copy {
 display: grid;
 gap: 2px;
 min-width: 0;
}
.taskbar-profile-top {
 display: flex;
 align-items: center;
 gap: 7px;
 min-width: 0;
}
.taskbar-profile-name {
 overflow: hidden;
 max-width: 135px;
 font-size: 12px;
 font-weight: 650;
 text-overflow: ellipsis;
 white-space: nowrap;
}
.taskbar-name-badges {
 display: inline-flex;
 align-items: center;
 gap: 4px;
 min-width: 0;
}
.taskbar-name-text {
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}
.taskbar-name-badge {
 display: block;
 width: 14px;
 height: 14px;
 flex: 0 0 14px;
 object-fit: contain;
 cursor: help;
}
#taskbar-level-badge {
 flex: 0 0 auto;
 color: var(--muted);
 font-size: 10px;
 font-weight: 600;
}
.taskbar-profile-xp {
 color: var(--muted);
 font-size: 9px;
 font-variant-numeric: tabular-nums;
 white-space: nowrap;
}
.taskbar-xp-track {
 display: block;
 width: 100%;
 max-width: 190px;
 height: 3px;
 overflow: hidden;
 border-radius: 99px;
 background: rgba(255, 255, 255, 0.1);
}
.taskbar-xp-track[hidden] {
 display: none;
}
.taskbar-xp-fill {
 display: block;
 width: 0;
 height: 100%;
 border-radius: inherit;
 background: var(--accent);
 transition: width 0.35s ease;
}
.taskbar-apps {
 grid-column: 2;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
}
.taskbar-app {
 position: relative;
 display: grid;
 place-items: center;
 width: 42px;
 height: 42px;
 border: 1px solid transparent;
 border-radius: 12px;
 color: #c8cad4;
 background: transparent;
 transition:
  background 0.15s,
  border-color 0.15s,
  color 0.15s,
  transform 0.15s;
}
.taskbar-app .material-symbols-rounded {
 font-size: 23px;
}
.taskbar-app:hover {
 transform: translateY(-2px);
 border-color: var(--border);
 color: #fff;
 background: rgba(255, 255, 255, 0.08);
}
.taskbar-app.active {
 color: var(--accent);
 background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.taskbar-app.active::after {
 position: absolute;
 right: 15px;
 bottom: -5px;
 left: 15px;
 height: 3px;
 border-radius: 3px;
 background: var(--accent);
 content: "";
}
.taskbar-status {
 grid-column: 3;
 justify-self: end;
 display: flex;
 align-items: center;
 gap: 13px;
 min-width: 0;
}
.taskbar-player {
 position: relative;
 display: flex;
 align-items: center;
 gap: 3px;
 width: min(286px, 34vw);
 min-width: 0;
 height: 38px;
 padding: 0 6px 0 9px;
 border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
 border-radius: 11px;
 color: #d1d3dc;
 background: linear-gradient(
  110deg,
  color-mix(in srgb, var(--accent) 9%, transparent),
  rgba(255, 255, 255, 0.025)
 );
}
#views {
 position: absolute;
 inset: 0;
 transition: right 220ms cubic-bezier(0.2, 0.75, 0.25, 1);
}
.workspace.lyrics-open {
 --lyrics-drawer-width: clamp(280px, 28vw, 420px);
}
.workspace.lyrics-open #views {
 right: var(--lyrics-drawer-width);
}
.music-lyrics-trigger.active {
 color: var(--accent);
 background: var(--accent-soft);
}
.lyrics-drawer[hidden] {
 display: none;
}
.lyrics-drawer {
 position: absolute;
 z-index: 2;
 top: 0;
 right: 0;
 bottom: 0;
 display: flex;
 flex-direction: column;
 overflow: hidden;
 color: var(--text, #e7e8f0);
 background: var(--page);
 border-left: 1px solid rgba(255, 255, 255, 0.62);
 border-radius: 0;
 box-shadow: none;
 animation: lyrics-drawer-in 180ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
}
.lyrics-drawer {
 width: var(--lyrics-drawer-width, clamp(280px, 28vw, 420px));
}
@keyframes lyrics-drawer-in {
 from {
  opacity: 0;
  transform: translateX(18px);
 }
 to {
  opacity: 1;
  transform: translateX(0);
 }
}
.lyrics-drawer-head {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 10px;
 min-height: 72px;
 padding: 12px 14px;
 border-bottom: 1px solid var(--line);
}
.lyrics-drawer-track {
 display: flex;
 align-items: center;
 gap: 11px;
 min-width: 0;
}
.lyrics-drawer-track > img,
#lyrics-drawer-fallback {
 width: 42px;
 height: 42px;
 flex: 0 0 42px;
 border-radius: 8px;
 object-fit: cover;
 background: var(--surface);
}
#lyrics-drawer-fallback {
 display: grid;
 place-items: center;
 color: var(--accent);
 font-size: 21px;
}
#lyrics-drawer-fallback[hidden] {
 display: none;
}
.lyrics-drawer-track > div {
 display: grid;
 min-width: 0;
 gap: 3px;
}
.lyrics-drawer-track strong,
.lyrics-drawer-track div span {
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}
.lyrics-drawer-track strong {
 font-size: 13px;
}
.lyrics-drawer-track div span {
 color: var(--muted);
 font-size: 11px;
}
.lyrics-drawer-actions {
 display: flex;
 flex: none;
 gap: 5px;
}
.lyrics-drawer-button {
 display: grid;
 place-items: center;
 width: 31px;
 height: 31px;
 border: 1px solid var(--line);
 border-radius: 8px;
 color: var(--muted);
 background: var(--surface);
}
.lyrics-drawer-button:hover {
 color: #fff;
 border-color: var(--accent);
}
.lyrics-drawer-button .material-symbols-rounded {
 font-size: 18px;
}
.lyrics-drawer-content {
 display: flex;
 flex: 1;
 min-height: 0;
 flex-direction: column;
 justify-content: flex-start;
 gap: 10px;
 overflow: auto;
 overscroll-behavior: none;
 overflow-anchor: none;
 padding: 22px 20px;
 color: var(--muted);
 font-size: 12px;
}
.lyrics-drawer-content .lyrics-line {
 margin: 0;
 padding: 2px 7px;
 border-radius: 7px;
 color: var(--muted);
 font-size: clamp(13px, 1vw, 16px);
 font-weight: 500;
 line-height: 1.5;
 transition:
  color 0.2s,
  font-size 0.2s,
  font-weight 0.2s,
  text-shadow 0.2s;
}
.lyrics-drawer-content .lyrics-line[data-time] {
 cursor: pointer;
}
.lyrics-drawer-content .lyrics-line[data-time]:hover,
.lyrics-drawer-content .lyrics-line[data-time]:focus-visible {
 color: #fff;
 outline: none;
}
.lyrics-drawer-content .lyrics-line.active {
 color: #fff;
 background: transparent;
 font-size: clamp(22px, 2.15vw, 30px);
 font-weight: 800;
 text-shadow:
  0 0 8px rgba(255, 255, 255, 0.72),
  0 0 20px rgba(255, 255, 255, 0.36);
}
@media (max-width: 700px) {
 .workspace.lyrics-open {
  --lyrics-drawer-width: clamp(220px, 42vw, 320px);
 }
 .lyrics-drawer-content {
  padding: 16px 12px;
  gap: 8px;
 }
 .lyrics-drawer-content .lyrics-line.active {
  font-size: clamp(19px, 4vw, 25px);
 }
}
.music-popover-lyrics {
 display: none !important;
}
.taskbar-player.active {
 border-color: color-mix(in srgb, var(--accent) 48%, transparent);
}
.taskbar-player.playing .taskbar-player-info > .material-symbols-rounded {
 color: var(--accent);
}
.taskbar-player-info {
 display: flex;
 align-items: center;
 gap: 8px;
 flex: 1;
 min-width: 0;
 height: 100%;
 padding: 0;
 border: 0;
 color: inherit;
 background: transparent;
 text-align: left;
 cursor: pointer;
}
.taskbar-player-info > .material-symbols-rounded {
 flex: 0 0 auto;
 color: var(--accent);
 font-size: 17px;
 font-variation-settings:
  "FILL" 1,
  "wght" 500,
  "GRAD" 0,
  "opsz" 20;
}
.taskbar-player-art {
 display: block;
 flex: 0 0 25px;
 width: 25px;
 height: 25px;
 border-radius: 4px;
 object-fit: cover;
 background: #ffffff12;
}
.taskbar-player-art[hidden],
.taskbar-player-info > .material-symbols-rounded[hidden] {
 display: none;
}
.taskbar-player-title {
 overflow: hidden;
 font-size: 10px;
 text-overflow: ellipsis;
 white-space: nowrap;
}
.taskbar-player-controls {
 display: flex;
 align-items: center;
 gap: 1px;
}
.taskbar-player-control {
 display: grid;
 place-items: center;
 width: 25px;
 height: 27px;
 padding: 0;
 border: 0;
 border-radius: 7px;
 color: var(--muted);
 background: transparent;
}
.taskbar-player-control:hover:not(:disabled) {
 color: #fff;
 background: #ffffff12;
}
.taskbar-player-control:disabled {
 opacity: 0.38;
 cursor: default;
}
.taskbar-player-control .material-symbols-rounded {
 font-size: 16px;
 font-variation-settings:
  "FILL" 1,
  "wght" 500,
  "GRAD" 0,
  "opsz" 20;
 line-height: 1;
}
.taskbar-player-control.active:not(:disabled) {
 color: var(--accent);
 background: color-mix(in srgb, var(--accent) 15%, transparent);
}
.taskbar-player-control.primary {
 color: var(--accent);
}
.taskbar-player-control.primary .material-symbols-rounded {
 font-size: 19px;
}
.music-popover[hidden] {
 display: none;
}
.music-popover {
 position: absolute;
 z-index: 50;
 right: 0;
 bottom: calc(100% + 12px);
 display: grid;
 gap: 14px;
 width: min(340px, calc(100vw - 24px));
 padding: 16px;
 border: 1px solid rgba(255, 255, 255, 0.12);
 border-radius: 14px;
 color: var(--text);
 background: color-mix(in srgb, var(--page) 96%, #252832);
 box-shadow: 0 14px 42px rgba(0, 0, 0, 0.48);
}
.music-popover-track {
 display: flex;
 align-items: center;
 gap: 12px;
 min-width: 0;
}
.music-popover-art {
 flex: 0 0 52px;
 width: 52px;
 height: 52px;
 border-radius: 8px;
 object-fit: cover;
 background: #ffffff10;
}
.music-popover-art[hidden],
#music-popover-fallback[hidden] {
 display: none;
}
#music-popover-fallback {
 color: var(--accent);
 font-size: 26px;
 font-variation-settings:
  "FILL" 1,
  "wght" 500,
  "GRAD" 0,
  "opsz" 28;
}
.music-popover-copy {
 display: grid;
 min-width: 0;
 gap: 3px;
}
.music-popover-title,
.music-popover-artist {
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}
.music-popover-title {
 font-size: 14px;
 font-weight: 650;
}
.music-popover-artist {
 color: var(--muted);
 font-size: 12px;
}
.music-popover-open {
 margin-left: auto;
}
.music-popover-seek {
 display: grid;
 gap: 5px;
}
.music-popover-range {
 width: 100%;
 height: 16px;
 margin: 0;
 accent-color: var(--accent);
 cursor: pointer;
}
.music-popover-times {
 display: flex;
 justify-content: space-between;
 color: var(--muted);
 font-size: 10px;
 font-variant-numeric: tabular-nums;
}
.music-popover-controls {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 10px;
}
.music-popover-button {
 display: grid;
 place-items: center;
 width: 36px;
 height: 36px;
 border: 0;
 border-radius: 50%;
 color: var(--text);
 background: transparent;
}
.music-popover-button:hover:not(:disabled) {
 background: #ffffff12;
}
.music-popover-button:disabled {
 opacity: 0.4;
 cursor: default;
}
.music-popover-button .material-symbols-rounded {
 font-size: 22px;
 font-variation-settings:
  "FILL" 1,
  "wght" 500,
  "GRAD" 0,
  "opsz" 24;
 line-height: 1;
}
.music-popover-button.active:not(:disabled) {
 color: var(--accent);
 background: color-mix(in srgb, var(--accent) 15%, transparent);
}
.music-popover-button.primary {
 width: 44px;
 height: 44px;
 color: #15161b;
 background: var(--accent);
}
.music-popover-button.primary .material-symbols-rounded {
 font-size: 27px;
}
.music-popover-volume {
 display: flex;
 align-items: center;
 gap: 9px;
 color: var(--muted);
}
.music-popover-volume .material-symbols-rounded {
 flex: 0 0 auto;
 font-size: 18px;
 font-variation-settings:
  "FILL" 1,
  "wght" 500,
  "GRAD" 0,
  "opsz" 20;
}
.music-popover-volume output {
 width: 32px;
 color: var(--muted);
 font-size: 10px;
 text-align: right;
}
.music-popover-actions {
 display: flex;
 justify-content: flex-end;
}
.taskbar-time {
 color: #d1d3dc;
 font-family: Inter, "Segoe UI", system-ui, sans-serif;
 font-size: 12px;
 font-weight: 500;
 font-variant-numeric: tabular-nums;
 letter-spacing: 0.015em;
 white-space: nowrap;
}
.taskbar-battery {
 display: flex;
 align-items: center;
 gap: 4px;
 color: var(--muted);
 font-family: Inter, "Segoe UI", system-ui, sans-serif;
 font-size: 11px;
 font-variant-numeric: tabular-nums;
 white-space: nowrap;
}
.taskbar-battery .material-symbols-rounded {
 font-size: 17px;
}
.taskbar-battery.charging {
 color: #a6e3a1;
}
@media (max-width: 780px) {
 .toolbar {
  gap: 3px;
  padding: 0 8px;
 }
 .address-wrap {
  padding: 0 4px;
 }
 .toolbar-actions .optional {
  display: none;
 }
}
@media (max-width: 1100px) {
 .taskbar {
  column-gap: 8px;
  padding-right: 10px;
  padding-left: 10px;
 }
 .taskbar-apps {
  gap: 3px;
 }
 .taskbar-app {
  width: 36px;
 }
 .taskbar-app.active::after {
  right: 12px;
  left: 12px;
 }
 .taskbar-status {
  gap: 7px;
 }
 .taskbar-player {
  width: min(186px, 19vw);
 }
 .taskbar-profile {
  max-width: 210px;
 }
}
@media (max-width: 900px) {
 .taskbar-apps {
  gap: 0;
 }
 .taskbar-app {
  width: 32px;
 }
 .taskbar-app.active::after {
  right: 10px;
  left: 10px;
 }
 .taskbar-player {
  width: min(170px, 20vw);
 }
}
@media (max-width: 850px) {
 .taskbar-time {
  display: none;
 }
}
@media (max-width: 460px) {
 .tab {
  min-width: 120px;
 }
 .toolbar-actions {
  display: none;
 }
 .nav-actions {
  gap: 0;
 }
 .home {
  padding: 22px;
 }
 .brand {
  letter-spacing: -2px;
 }
 .taskbar {
  flex-basis: 54px;
  padding: 0 12px;
 }
 .taskbar-app {
  width: 32px;
  height: 40px;
 }
 .taskbar-profile {
  gap: 6px;
  padding-right: 4px;
 }
 .taskbar-profile-avatar {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
 }
 .taskbar-profile-name {
  max-width: 62px;
 }
 .taskbar-profile-xp {
  display: none;
 }
 .taskbar-xp-track {
  max-width: 92px;
 }
 .taskbar-status {
  gap: 8px;
 }
 .taskbar-time {
  font-size: 11px;
 }
 .taskbar-player {
  width: 132px;
  height: 34px;
  padding-left: 7px;
 }
 .taskbar-player-title {
  max-width: 75px;
 }
 .taskbar-player .music-lyrics-trigger {
  display: none;
 }
 .music-popover-lyrics {
  display: inline-grid !important;
 }
}
@media (max-width: 460px) {
 .taskbar-player-title {
  max-width: 42px;
 }
 .taskbar-player-control {
  width: 22px;
 }
 .taskbar-status {
  gap: 6px;
 }
}