.tile.appearance-tile{--glass-bg:rgba(120,120,128,.16);--glass-border:rgba(255,255,255,.24);--glass-highlight:rgba(255,255,255,.28);--glass-shadow:rgba(31,38,49,.1);--island-bg:rgba(255,255,255,.24);--icon-active:#555660;--icon-rest:#616773;--edge:rgba(39,45,58,.08);background:linear-gradient(135deg,#f5f2ed,#e2e8f0);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:17px;color:#454952}.appearance-tile h2{font-size:14px;font-weight:500}.appearance-tile .appearance-mode{font-size:12px;color:#787d87;min-height:18px}.frosted-switch{position:relative;width:72px;height:38px;display:inline-flex;align-items:center;justify-content:space-around;flex-shrink:0;border:1px solid var(--glass-border);border-radius:999px;background:var(--glass-bg);backdrop-filter:blur(24px) saturate(140%);-webkit-backdrop-filter:blur(24px) saturate(140%);box-shadow:inset 0 1px 0 var(--glass-highlight),inset 0 -1px 1px var(--edge),0 2px 6px var(--glass-shadow);padding:2px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color .6s,border-color .6s,box-shadow .25s}.frosted-switch:before{content:"";position:absolute;width:32px;height:32px;left:2px;top:2px;border-radius:999px;background:var(--island-bg);backdrop-filter:blur(19px);-webkit-backdrop-filter:blur(19px);border:1px solid var(--glass-border);box-shadow:inset 0 1px 1px var(--glass-highlight),inset 0 -1px 1px var(--edge),0 1px 3px var(--glass-shadow);transform:translateX(0);transition:transform .4s cubic-bezier(.22,.8,.25,1),background-color .6s}.frosted-switch[aria-checked="true"]:before{transform:translateX(34px)}.frosted-switch svg{position:relative;z-index:1;width:17px;height:17px;stroke-width:1.65;fill:none;stroke:currentColor;pointer-events:none;transition:opacity .35s,color .5s}.frosted-switch .sun{color:var(--icon-active);opacity:1}.frosted-switch .moon{color:var(--icon-rest);opacity:.5}.frosted-switch[aria-checked="true"] .sun{color:var(--icon-rest);opacity:.5}.frosted-switch[aria-checked="true"] .moon{color:var(--icon-active);opacity:1}.frosted-switch:active:before{scale:1.035 .99}.frosted-switch:hover{box-shadow:inset 0 1px 0 var(--glass-highlight),inset 0 -1px 1px var(--edge),0 3px 9px var(--glass-shadow)}.frosted-switch:focus-visible{outline:2px solid #9da6b5;outline-offset:5px}html[data-theme="dark"] .appearance-tile{--glass-bg:rgba(120,128,145,.18);--glass-border:rgba(239,245,255,.1);--glass-highlight:rgba(239,245,255,.13);--glass-shadow:rgba(5,9,17,.24);--island-bg:rgba(239,243,252,.18);--icon-active:#f4f7fc;--icon-rest:#b9c1ce;--edge:rgba(0,0,0,.2);background:linear-gradient(135deg,#303642,#354253);color:#edf0f6}html[data-theme="dark"] .appearance-tile .appearance-mode{color:#aeb7c7}html,body,.tile,[data-widget-content-container],.styles_bio__oMe8p{transition:background-color .6s,color .6s,border-color .6s}@media(prefers-reduced-motion:reduce){html,body,.tile,[data-widget-content-container],.styles_bio__oMe8p,.frosted-switch,.frosted-switch:before,.frosted-switch svg{transition:none!important}.frosted-switch:active:before{scale:1}}
.tile.appearance-tile{gap:14px;padding-top:6px}.appearance-tile .appearance-mode{margin:0}
.tile.appearance-tile{background:#fdfdfc;padding:0;gap:0}
html[data-theme="dark"] .tile.appearance-tile{background:#252b27}
.appearance-tile .appearance-mode{display:none}
.theme-ripple{position:fixed;border-radius:50%;pointer-events:none;z-index:1000;will-change:transform,opacity;contain:strict}

/* Mechanical slider adapted from Nathan Taylor's Realistic CSS Switch:
   https://codepen.io/nathantaylor/pen/jyVeYp/ */
.appearance-tile .frosted-switch{
  --switch-base:#b6babe;
  --switch-light:#edf2ed;
  --switch-dark:#283839;
  width:104px;height:38px;border:0;padding:0;overflow:hidden;
  background:#546565;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:-1px -1px 2px rgba(24,36,35,.6),1px 1px 2px var(--switch-light),inset 5px 5px 18px rgba(20,34,35,.55),inset 1px 1px 3px rgba(20,34,35,.85),inset -5px -5px 20px rgba(237,242,237,.3);
}
.appearance-tile .frosted-switch::before{
  width:66px;height:34px;left:2px;top:2px;z-index:2;border:0;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  background:
    linear-gradient(90deg,rgba(237,242,237,.8),rgba(45,57,58,.25),rgba(237,242,237,.55)) 23px 7px/4px 20px no-repeat,
    linear-gradient(90deg,rgba(237,242,237,.8),rgba(45,57,58,.25),rgba(237,242,237,.55)) 31px 7px/4px 20px no-repeat,
    linear-gradient(90deg,rgba(237,242,237,.8),rgba(45,57,58,.25),rgba(237,242,237,.55)) 39px 7px/4px 20px no-repeat,
    linear-gradient(175deg,#c3c7c9,var(--switch-base));
  box-shadow:inset -1px -1px 2px rgba(23,37,37,.65),inset 1px 1px 2px var(--switch-light),6px 5px 12px rgba(16,28,28,.5),2px 2px 3px rgba(16,28,28,.6);
  transition:transform .22s cubic-bezier(.55,.085,.68,.53);
}
.appearance-tile .frosted-switch[aria-checked="true"]::before{transform:translateX(34px)}
.appearance-tile .frosted-switch svg{position:absolute;top:10px;width:18px;height:18px;z-index:1;opacity:.85;color:#edf2ed}
.appearance-tile .frosted-switch .sun{left:10px}
.appearance-tile .frosted-switch .moon{right:10px}
.appearance-tile .frosted-switch:hover{filter:brightness(1.04)}
.appearance-tile .frosted-switch:active::before{scale:1;filter:brightness(.97)}
html[data-theme="dark"] .appearance-tile .frosted-switch{--switch-light:#83928c;--switch-base:#8a9591}

.appearance-tile .frosted-switch{
  --switch-light:#ffe9d8;--switch-base:#ebc6aa;
  width:80px;height:34px;background:#c28e69;
  box-shadow:-1px -1px 2px rgba(109,68,42,.4),1px 1px 2px #ffeadb,inset 3px 3px 12px rgba(115,68,39,.45),inset 1px 1px 2px rgba(115,68,39,.6),inset -3px -3px 12px rgba(255,234,217,.45);
}
.appearance-tile .frosted-switch::before{
  width:48px;height:30px;
  background:
    linear-gradient(90deg,#ffe9d8,rgba(136,91,57,.3),#fbe0c9) 18px 6px/3px 18px no-repeat,
    linear-gradient(90deg,#ffe9d8,rgba(136,91,57,.3),#fbe0c9) 27px 6px/3px 18px no-repeat,
    linear-gradient(175deg,#f3d5bd,var(--switch-base));
  box-shadow:inset -1px -1px 2px rgba(126,81,47,.5),inset 1px 1px 2px var(--switch-light),4px 3px 9px rgba(96,58,34,.4),1px 1px 2px rgba(96,58,34,.4);
}
.appearance-tile .frosted-switch[aria-checked="true"]::before{transform:translateX(28px)}
.appearance-tile .frosted-switch svg{top:9px;width:16px;height:16px;stroke:none;fill:none}
.appearance-tile .frosted-switch .sun{left:8px}
.appearance-tile .frosted-switch .moon{right:8px}
html[data-theme="dark"] .appearance-tile .frosted-switch{--switch-light:#efd2bb;--switch-base:#d5ac8d}
.appearance-tile .frosted-switch{touch-action:none;user-select:none;-webkit-user-select:none}
.appearance-tile .frosted-switch::before{transition:transform .32s cubic-bezier(.22,.8,.25,1)}
.appearance-tile .frosted-switch.is-dragging::before{transform:translateX(var(--drag-offset));transition:none}