/* Bevel — color tokens. Luna (default theme). Values are literal; do not round or re-derive. */
:root{
  /* --- System surfaces --- */
  --face:#ECE9D8;
  --window:#FFFFFF;
  --text:#000000;
  --text-disabled:#ACA899;
  --highlight:#316AC5;
  --highlight-text:#FFFFFF;
  --hilight-3d:#FFFFFF;
  --light-3d:#F1EFE2;
  --shadow-3d:#ACA899;
  --dk-shadow-3d:#716F64;
  --tooltip:#FFFFE1;
  --link:#0000FF;
  --link-visited:#800080;
  --desktop:#004E98;

  /* --- Luna chrome, flat stops --- */
  --title-active-a:#0058E6;
  --title-active-b:#3A93FF;
  --title-active-c:#0046C7;
  --title-inactive-a:#7A96DF;
  --title-inactive-b:#A6BBEE;
  --frame:#0831D9;
  --taskbar-a:#245EDC;
  --taskbar-b:#3F8CF3;
  --tray-flat:#0F9EED;
  --start-a:#3C9A3A;
  --start-b:#6CC46A;
  --close-a:#E2573B;
  --close-b:#B5321A;
  --task-pane-a:#7BA2E7;
  --task-pane-b:#6375D6;

  /* --- Luna chrome, gradients --- */
  --title-active:linear-gradient(180deg,#3A93FF 0%,#0A6AF3 8%,#0058E6 14%,#0058E6 80%,#0050D8 90%,#0046C7 100%); /* @kind color */
  --title-inactive:linear-gradient(180deg,#A6BBEE 0%,#8AA4E6 10%,#7A96DF 20%,#7A96DF 88%,#6F8AD6 100%); /* @kind color */
  --taskbar:linear-gradient(180deg,#3F8CF3 0%,#2B71E6 7%,#245EDC 14%,#245EDC 86%,#1C4FC4 100%); /* @kind color */
  --tray:linear-gradient(180deg,#19B9F3 0%,#0F9EED 12%,#0F9EED 88%,#0A84D6 100%); /* @kind color */
  --start:linear-gradient(180deg,#6CC46A 0%,#3C9A3A 14%,#338C31 60%,#2E7F2C 100%); /* @kind color */
  --close:linear-gradient(180deg,#F0876F 0%,#E2573B 20%,#C8421F 85%,#B5321A 100%); /* @kind color */
  --task-pane:linear-gradient(180deg,#7BA2E7 0%,#6375D6 100%); /* @kind color */

  /* --- Controls --- */
  --ctl-border:#003C74;
  --field-border:#7F9DB9;
  --btn-face:linear-gradient(180deg,#FFFFFF 0%,#ECEBE5 86%,#D6D0C5 100%); /* @kind color */
  --btn-face-pressed:linear-gradient(180deg,#E5E4DD 0%,#F2F1EC 100%); /* @kind color */
  --btn-face-disabled:#F5F4EA;
  --btn-border-disabled:#C9C7BA;
  --hot:#FFB84A;
  --default-ring:#8EB4F2;
  --group-border:#D0D0BF;
  --group-label:#0046D5;
  --progress:#2FD13A;
  --combo-btn:linear-gradient(180deg,#C1D2FB 0%,#9AB5F5 100%); /* @kind color */
  --check-border:#1C5180;
  --check-face:linear-gradient(135deg,#DCDCD7 0%,#FFFFFF 100%); /* @kind color */
  --check-mark:#21A121;
  --tab-page:#FCFCFE;
  --tab-border:#919B9C;
  --scroll-track:linear-gradient(90deg,#F3F1EC 0%,#FEFEFB 100%); /* @kind color */
  --scroll-thumb:linear-gradient(180deg,#C9D7FC 0%,#B6CAF7 100%); /* @kind color */
  --task-btn:#3C81F3;
  --task-btn-active:#1E52B7;
  --task-btn-flash:#E5A01A;
  --pane-header:linear-gradient(90deg,#FFFFFF 0%,#C6D3F7 100%); /* @kind color */
  --pane-body:#D6DFF7;
  --pane-link:#215DC6;
  --start-panel-right:#D3E5FA;
  --start-panel-edge:#95BDEE;

  /* --- Icon palette (§7) --- */
  --icon-folder-a:#FDDA72;
  --icon-folder-b:#E8A82E;
  --icon-blue:#3B7DD8;
  --icon-green:#4CA535;
  --icon-red:#D8402A;

  /* --- Semantic aliases --- */
  --surface-app:var(--face);
  --surface-document:var(--window);
  --surface-raised:var(--face);
  --surface-sunken:var(--window);
  --text-body:var(--text);
  --text-muted:var(--dk-shadow-3d);
  --text-on-chrome:#FFFFFF;
  --text-heading:var(--text);
  --border-field:var(--field-border);
  --border-control:var(--ctl-border);
  --border-separator:var(--shadow-3d);
  --accent-select:var(--highlight);
  --accent-hot:var(--hot);
  --state-info:var(--icon-blue);
  --state-warning:var(--icon-folder-b);
  --state-error:var(--icon-red);
  --state-success:var(--progress);
}
/* Bevel — type tokens. All families are platform fonts; no webfont binaries ship with this system. */
:root{
  --font-ui:Tahoma,"MS Sans Serif",Verdana,Geneva,sans-serif;
  --font-caption:"Trebuchet MS",Tahoma,sans-serif;
  --font-start:"Franklin Gothic Medium","Trebuchet MS",sans-serif;
  --font-mono:"Lucida Console","Courier New",Monaco,monospace;
  --font-welcome:Verdana,Tahoma,sans-serif;

  --size-ui:11px;
  --size-caption:13px;
  --size-start:17px;
  --size-mono:12px;
  --size-welcome:16px;
  --size-start-user:14px;

  --weight-normal:400; /* @kind other */
  --weight-bold:700; /* @kind other */
  --leading-ui:1.3; /* @kind other */

  --shadow-caption:1px 1px 0 #0A1883;

  /* Semantic aliases */
  --text-ui:var(--size-ui)/var(--leading-ui) var(--font-ui); /* @kind font */
  --text-mono:var(--size-mono)/var(--leading-ui) var(--font-mono); /* @kind font */
  --measure-dialog:60ch; /* @kind other */
}
/* Bevel — spacing and metrics. Derived from dialog units at 96 DPI. Use the numbers as given. */
:root{
  /* Spacing */
  --margin-dialog:11px;
  --gap-related:4px;
  --gap-unrelated:7px;
  --gap-group:11px;
  --gap-label:3px;
  --gap-button:6px;
  --pad-group:9px;
  --pad-field-x:3px;
  --pad-menu-item-x:6px;

  /* Control metrics */
  --h-button:23px;
  --w-button-min:75px;
  --h-field:21px;
  --sz-glyph:13px;
  --gap-glyph-label:6px;
  --h-menu-item:19px;
  --gutter-menu:17px;
  --sz-toolbar-btn:22px;
  --sz-toolbar-icon:16px;
  --h-title:30px;
  --sz-caption-btn:21px;
  --gap-caption-btn:2px;
  --inset-caption-btn:5px;
  --h-taskbar:30px;
  --h-task-btn:25px;
  --w-task-btn-max:160px;
  --w-scrollbar:17px;
  --h-tab:21px;
  --h-tab-selected:23px;
  --h-status:22px;
  --w-task-pane:200px;
  --w-start-menu:380px;
  --w-wizard:503px;
  --h-wizard:360px;
  --w-wizard-watermark:164px;
  --h-wizard-header:59px;
  --grid-desktop-icon:75px;

  /* Radii */
  --radius-window:8px;
  --radius-ctl:3px;
  --radius-balloon:7px;
  --radius-start-btn:10px;
  --radius-none:0; /* @kind radius */
}
/* Bevel — depth. Every edge is a stacked 1px inset shadow so it stays sharp at any zoom. */
:root{
  --bevel-raised:inset 1px 1px 0 var(--hilight-3d),inset -1px -1px 0 var(--dk-shadow-3d),inset 2px 2px 0 var(--light-3d),inset -2px -2px 0 var(--shadow-3d);
  --bevel-sunken:inset 1px 1px 0 var(--shadow-3d),inset -1px -1px 0 var(--hilight-3d),inset 2px 2px 0 var(--dk-shadow-3d),inset -2px -2px 0 var(--light-3d);
  --bevel-thin-raised:inset 1px 1px 0 var(--hilight-3d),inset -1px -1px 0 var(--dk-shadow-3d);
  --bevel-thin-sunken:inset 1px 1px 0 var(--shadow-3d),inset -1px -1px 0 var(--hilight-3d);
  --shadow-menu:2px 2px 2px rgba(0,0,0,.5);
  --ring-hot:inset 0 0 0 1px #FFD695,inset 0 0 0 2px var(--hot);
  --ring-default:inset 0 0 0 1px #C3D9F7,inset 0 0 0 2px var(--default-ring);
  --focus-dots:1px dotted #000; /* @kind other */
  --focus-offset:-4px; /* @kind other */

  /* Motion budget */
  --dur-fade:100ms; /* @kind other */
  --dur-zoom:150ms; /* @kind other */
  --ease-ui:linear; /* @kind other */
}
/* Bevel — reset. Minimal: the look is a skin over semantic markup. */
.os-root,.os-root *,.os-root *::before,.os-root *::after{box-sizing:border-box}
.os-root{font:var(--text-ui);color:var(--text);-webkit-font-smoothing:none;font-smooth:never;text-rendering:geometricPrecision;-webkit-text-size-adjust:100%}
.os-root button,.os-root input,.os-root select,.os-root textarea{font:var(--text-ui);color:var(--text);margin:0}
.os-root p{margin:0 0 var(--gap-unrelated);max-width:var(--measure-dialog);text-wrap:pretty}
.os-root h1,.os-root h2,.os-root h3,.os-root h4{margin:0;font-size:var(--size-ui);font-weight:var(--weight-bold)}
.os-root ul,.os-root ol{margin:0;padding:0;list-style:none}
.os-root a{color:var(--link);text-decoration:underline;cursor:pointer}
.os-root a:visited{color:var(--link-visited)}
.os-root a:hover{color:var(--link);text-decoration:underline}
.os-root img{display:block;image-rendering:pixelated}
.os-root kbd{font:var(--text-mono)}
@media (prefers-reduced-motion:reduce){.os-root *{animation-duration:0s!important;transition-duration:0s!important}}
/* Bevel — utilities. Bevel recipes, separators, focus, icon masks. */
.raised{box-shadow:var(--bevel-raised)}
.sunken{box-shadow:var(--bevel-sunken)}
.raised-thin{box-shadow:var(--bevel-thin-raised)}
.sunken-thin{box-shadow:var(--bevel-thin-sunken)}
.pressed{box-shadow:var(--bevel-sunken);padding-top:1px;padding-left:1px}
.etched-h{height:2px;border-top:1px solid var(--shadow-3d);border-bottom:1px solid var(--hilight-3d);margin:3px 0}
.etched-v{width:2px;align-self:stretch;border-left:1px solid var(--shadow-3d);border-right:1px solid var(--hilight-3d);margin:0 3px}
.crisp{-webkit-font-smoothing:none;font-smooth:never}
.os-face{background:var(--face)}
.os-doc{background:var(--window)}
.os-bold{font-weight:var(--weight-bold)}
.os-akey{text-decoration:underline}
.os-focus-dots:focus-visible{outline:var(--focus-dots);outline-offset:var(--focus-offset)}
.os-stack{display:flex;flex-direction:column;gap:var(--gap-related)}
.os-row{display:flex;align-items:center;gap:var(--gap-related)}
.os-row--unrelated{gap:var(--gap-unrelated)}
.os-buttonrow{display:flex;justify-content:flex-end;gap:var(--gap-button)}
.os-dialogbody{padding:var(--margin-dialog);background:var(--face)}

/* Icons. `.os-icon` is a box holding an inline <svg fill="currentColor"> (what the Icon component renders).
   `.os-glyph` is the no-JS route: a masked box using the .os-i-<name> classes in base/icons.css.
   Tone classes set `color`, which both routes inherit. */
.os-icon{display:inline-block;flex:none;width:16px;height:16px;line-height:0}
.os-glyph{display:inline-block;flex:none;width:16px;height:16px;background-color:currentColor;-webkit-mask:linear-gradient(transparent,transparent) center/100% 100% no-repeat;mask:linear-gradient(transparent,transparent) center/100% 100% no-repeat}
.os-icon--16,.os-glyph--16{width:16px;height:16px}
.os-icon--24,.os-glyph--24{width:24px;height:24px}
.os-icon--32,.os-glyph--32{width:32px;height:32px}
.os-icon--48,.os-glyph--48{width:48px;height:48px}
.os-icon--folder{color:var(--icon-folder-b)}
.os-icon--blue{color:var(--icon-blue)}
.os-icon--green{color:var(--icon-green)}
.os-icon--red{color:var(--icon-red)}
.os-icon--chrome{color:#FFFFFF}
.os-icon[data-disabled="true"]{color:var(--text-disabled)}

/* Touch: keep the visual size, extend the hit area. */
@media (pointer:coarse){
  .os-btn,.os-capbtn,.os-toolbtn,.os-taskbtn,.os-menuitem,.os-check{position:relative}
  .os-btn::after,.os-capbtn::after,.os-toolbtn::after,.os-check::after{content:"";position:absolute;inset:50% 50%;width:40px;height:40px;transform:translate(-50%,-50%)}
}
@media (forced-colors:active){
  .os-root *{background-image:none!important;box-shadow:none!important}
  .os-window,.os-btn,.os-field,.os-menu,.os-list,.os-tree{border:1px solid ButtonBorder}
}
/* Bevel — control layer. Components emit these class names; every value comes from tokens. */

/* ---------- Window ---------- */
.os-window{display:flex;flex-direction:column;background:var(--frame);border-radius:var(--radius-window) var(--radius-window) 0 0;padding:0 3px 3px;min-width:0}
.os-window--flush{padding:0;border-radius:0}
.os-window--flush>.os-titlebar{margin:0;border-radius:0}
.os-titlebar{height:var(--h-title);margin:0 -3px;border-radius:var(--radius-window) var(--radius-window) 0 0;background:var(--title-active);display:flex;align-items:center;gap:var(--gap-related);padding:0 var(--inset-caption-btn) 0 4px;user-select:none}
.os-titlebar--inactive{background:var(--title-inactive)}
.os-titlebar__caption{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff;font:var(--weight-bold) var(--size-caption)/1 var(--font-caption);text-shadow:var(--shadow-caption)}
.os-capbtns{display:flex;gap:var(--gap-caption-btn)}
.os-capbtn{width:var(--sz-caption-btn);height:var(--sz-caption-btn);border:1px solid #fff;border-radius:var(--radius-ctl);background:linear-gradient(180deg,#83B5FA 0%,#3E7EE8 34%,#1E56C4 72%,#4B8CF2 100%);display:grid;place-items:center;padding:0;cursor:default}
.os-capbtn--close{background:var(--close)}
.os-capbtn:hover{filter:brightness(1.1)}
.os-capbtn:active{filter:brightness(.82);background-image:none;background-color:#2559B8}
.os-capbtn--close:active{background-image:none;background-color:#B5321A}
.os-titlebar--inactive .os-capbtn{filter:saturate(.45) brightness(1.05)}
.os-window__body{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--face);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.os-window__content{flex:1;min-height:0;overflow:auto}

/* ---------- Status bar ---------- */
.os-statusbar{height:var(--h-status);flex:none;background:var(--face);display:flex;align-items:center;gap:2px;padding:2px}
.os-statusbar__cell{height:18px;display:flex;align-items:center;padding:0 6px;box-shadow:var(--bevel-thin-sunken);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.os-statusbar__grip{margin-left:auto;width:14px;height:14px;flex:none;background:repeating-linear-gradient(135deg,transparent 0 2px,var(--hilight-3d) 2px 3px,var(--shadow-3d) 3px 4px,transparent 4px 6px)}

/* ---------- Push button ---------- */
.os-btn{position:relative;min-width:var(--w-button-min);height:var(--h-button);padding:0 10px;border:1px solid var(--ctl-border);border-radius:var(--radius-ctl);background:var(--btn-face);color:var(--text);display:inline-flex;align-items:center;justify-content:center;gap:var(--gap-related);cursor:default;white-space:nowrap}
.os-btn--auto{min-width:0}
.os-btn::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;background:linear-gradient(180deg,#FFE3A6 0%,#FFB84A 55%,#EE8F12 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;opacity:0;pointer-events:none}
.os-btn[data-default="true"]::after{background:linear-gradient(180deg,#CFE0F9 0%,#8EB4F2 55%,#6A99E6 100%);opacity:1}
.os-btn:hover::after{background:linear-gradient(180deg,#FFE3A6 0%,#FFB84A 55%,#EE8F12 100%);opacity:1}
.os-btn:focus-visible{outline:var(--focus-dots);outline-offset:var(--focus-offset)}
.os-btn:focus-visible::after{background:linear-gradient(180deg,#CFE0F9 0%,#8EB4F2 55%,#6A99E6 100%);opacity:1}
.os-btn:active,.os-btn[data-pressed="true"]{background:var(--btn-face-pressed)}
.os-btn:active::after,.os-btn[data-pressed="true"]::after{opacity:0}
.os-btn:disabled{background:var(--btn-face-disabled);border-color:var(--btn-border-disabled);color:var(--text-disabled)}
.os-btn:disabled::after{opacity:0}

/* ---------- Text field, combo box, spin box ---------- */
.os-field{height:var(--h-field);padding:0 var(--pad-field-x);border:1px solid var(--field-border);border-radius:0;background:var(--window);color:var(--text);outline:0;min-width:0}
.os-field--multi{height:auto;padding:2px var(--pad-field-x);resize:none;line-height:var(--leading-ui)}
.os-field:read-only,.os-field:disabled{background:var(--face)}
.os-field:disabled{color:var(--text-disabled)}
.os-root ::selection{background:var(--highlight);color:var(--highlight-text)}
.os-combo{display:inline-flex;align-items:stretch;height:var(--h-field);border:1px solid var(--field-border);background:var(--window);min-width:0}
.os-combo__value{flex:1;min-width:0;display:flex;align-items:center;gap:4px;padding:0 var(--pad-field-x);overflow:hidden;white-space:nowrap;cursor:default}
.os-combo__input{flex:1;min-width:0;border:0;outline:0;background:transparent;padding:0}
.os-combo-btn{width:17px;flex:none;border:0;padding:0;background:var(--combo-btn);display:grid;place-items:center;cursor:default}
.os-combo-btn:hover{filter:brightness(1.07)}
.os-combo-btn:active{filter:brightness(.88)}
.os-arrow-down{width:0;height:0;border-left:3.5px solid transparent;border-right:3.5px solid transparent;border-top:4px solid #000}
.os-arrow-up{width:0;height:0;border-left:3.5px solid transparent;border-right:3.5px solid transparent;border-bottom:4px solid #000}
.os-arrow-right{width:0;height:0;border-top:3.5px solid transparent;border-bottom:3.5px solid transparent;border-left:4px solid currentColor}
.os-spin{display:inline-flex;align-items:stretch;height:var(--h-field);border:1px solid var(--field-border);background:var(--window)}
.os-spin__input{flex:1;min-width:0;border:0;outline:0;background:transparent;padding:0 var(--pad-field-x);text-align:right}
.os-spin__btns{display:flex;flex-direction:column;width:17px;flex:none}
.os-spin__btn{flex:1;border:0;padding:0;background:var(--combo-btn);display:grid;place-items:center;cursor:default}
.os-spin__btn:hover{filter:brightness(1.07)}
.os-spin__btn:active{filter:brightness(.88)}

/* ---------- Checkbox and radio ---------- */
.os-check{display:inline-flex;align-items:center;gap:var(--gap-glyph-label);cursor:default;position:relative;padding:1px 2px}
.os-check__glyph{width:var(--sz-glyph);height:var(--sz-glyph);flex:none;border:1px solid var(--check-border);background:var(--check-face);display:grid;place-items:center;position:relative}
.os-check--radio .os-check__glyph{border-radius:50%}
.os-check:hover .os-check__glyph{box-shadow:inset 0 0 0 1px var(--hot),inset 0 0 0 2px #FFE3A6}
.os-check:focus-visible{outline:var(--focus-dots);outline-offset:0}
.os-check__tick{width:4px;height:8px;border-right:2px solid var(--check-mark);border-bottom:2px solid var(--check-mark);transform:rotate(40deg) translate(-1px,-1px)}
.os-check__dot{width:5px;height:5px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#7CE07C,var(--check-mark) 70%)}
.os-check__mixed{width:7px;height:7px;background:var(--check-mark)}
.os-check[aria-disabled="true"]{color:var(--text-disabled)}
.os-check[aria-disabled="true"] .os-check__glyph{background:var(--face);border-color:var(--shadow-3d)}
.os-check[aria-disabled="true"]:hover .os-check__glyph{box-shadow:none}

/* ---------- Group box ---------- */
.os-group{border:1px solid var(--group-border);border-radius:var(--radius-ctl);padding:var(--pad-group);position:relative;margin-top:7px}
.os-group__label{position:absolute;top:-7px;left:7px;background:var(--face);padding:0 2px;color:var(--group-label);font-weight:var(--weight-bold);line-height:1.2}

/* ---------- Tabs ---------- */
.os-tabs{display:flex;flex-direction:column;min-width:0}
.os-tablist{display:flex;align-items:flex-end;padding-left:3px;position:relative;z-index:1;min-height:var(--h-tab-selected)}
.os-tab{position:relative;height:var(--h-tab);padding:0 9px;margin-right:-1px;border:1px solid var(--tab-border);border-bottom:0;border-radius:var(--radius-ctl) var(--radius-ctl) 0 0;background:linear-gradient(180deg,#FFFFFF 0%,#F4F2E7 55%,var(--face) 100%);display:flex;align-items:center;cursor:default;white-space:nowrap;color:var(--text)}
.os-tab::before{content:"";position:absolute;top:1px;left:2px;right:2px;height:3px;background:linear-gradient(180deg,#FFD88A,var(--hot));opacity:0;border-radius:2px 2px 0 0}
.os-tab:hover::before{opacity:1}
.os-tab[aria-selected="true"]{height:var(--h-tab-selected);padding:0 11px;background:var(--tab-page);z-index:2;margin-bottom:-1px}
.os-tab[aria-selected="true"]::before{opacity:1}
.os-tabpage{background:var(--tab-page);border:1px solid var(--tab-border);padding:var(--margin-dialog);margin-top:-1px;flex:1;min-height:0;overflow:auto}

/* ---------- Menu bar and menus ---------- */
.os-menubar{display:flex;align-items:stretch;height:var(--h-menu-item);flex:none;background:var(--face);user-select:none}
.os-menubar__item{padding:0 var(--pad-menu-item-x);display:flex;align-items:center;cursor:default;border:0;background:transparent}
.os-menubar__item:hover,.os-menubar__item[aria-expanded="true"]{background:var(--highlight);color:var(--highlight-text)}
.os-menu{background:var(--window);border:1px solid var(--shadow-3d);padding:2px;box-shadow:var(--shadow-menu);min-width:150px;animation:os-fade var(--dur-fade) var(--ease-ui);user-select:none}
.os-menuitem{position:relative;display:flex;align-items:center;height:var(--h-menu-item);padding-left:var(--gutter-menu);padding-right:10px;gap:8px;cursor:default;color:var(--text);white-space:nowrap}
.os-menuitem--default{font-weight:var(--weight-bold)}
.os-menuitem__gutter{position:absolute;left:0;top:0;bottom:0;width:var(--gutter-menu);display:grid;place-items:center}
.os-menuitem__shortcut{margin-left:auto;padding-left:24px}
.os-menuitem__sub{margin-left:auto;padding-left:16px;display:flex;align-items:center}
.os-menuitem:hover:not([aria-disabled="true"]){background:var(--highlight);color:var(--highlight-text)}
.os-menuitem[aria-disabled="true"]{color:var(--text-disabled)}
.os-menu__sep{height:1px;background:var(--shadow-3d);margin:3px 1px}

/* ---------- Toolbar ---------- */
.os-toolbar{display:flex;align-items:center;flex:none;padding:1px 2px;background:linear-gradient(180deg,#F7F6F0 0%,var(--face) 100%)}
.os-toolbar__grip{width:3px;height:20px;flex:none;margin:0 4px 0 1px;background:repeating-linear-gradient(180deg,var(--hilight-3d) 0 1px,transparent 1px 2px) 2px 1px/1px 100% no-repeat,repeating-linear-gradient(180deg,var(--shadow-3d) 0 1px,transparent 1px 2px) 1px 0/1px 100% no-repeat}
.os-toolbar__sep{width:2px;height:20px;flex:none;margin:0 3px;border-left:1px solid var(--shadow-3d);border-right:1px solid var(--hilight-3d)}
.os-toolbtn{height:var(--sz-toolbar-btn);min-width:var(--sz-toolbar-btn);padding:0 3px;border:1px solid transparent;border-radius:var(--radius-ctl);background:transparent;display:inline-flex;align-items:center;justify-content:center;gap:4px;cursor:default;color:var(--text);white-space:nowrap}
.os-toolbtn:hover:not(:disabled){border-color:var(--field-border);background:linear-gradient(180deg,#FFFFFF 0%,#F2F0E4 60%,#E4E1D2 100%)}
.os-toolbtn:active:not(:disabled),.os-toolbtn[data-pressed="true"]{border-color:var(--field-border);background:linear-gradient(180deg,#DCD8C7 0%,#EDEADB 100%);box-shadow:inset 1px 1px 1px rgba(0,0,0,.14)}
.os-toolbtn:disabled{color:var(--text-disabled)}
.os-toolbtn--large{height:36px;padding:0 6px;gap:5px}
.os-addressbar{display:flex;align-items:center;gap:var(--gap-related);flex:none;padding:2px 4px;background:var(--face)}
.os-addressbar .os-combo{flex:1}
.os-gobtn{display:inline-flex;align-items:center;gap:3px;height:20px;padding:0 6px;border:1px solid transparent;border-radius:var(--radius-ctl);background:transparent;cursor:default}
.os-gobtn:hover{border-color:var(--field-border);background:linear-gradient(180deg,#FFFFFF,#E4E1D2)}

/* ---------- List view ---------- */
.os-list{background:var(--window);border:1px solid var(--field-border);display:flex;flex-direction:column;min-height:0;overflow:auto}
.os-list__head{display:flex;position:sticky;top:0;z-index:1;height:18px;flex:none;background:linear-gradient(180deg,#FFFFFF 0%,#F3F1E6 60%,var(--face) 88%,#DDD9C6 100%)}
.os-list__col{padding:0 6px;display:flex;align-items:center;border-right:1px solid var(--shadow-3d);flex:none;cursor:default;overflow:hidden;white-space:nowrap}
.os-list__col:hover{box-shadow:inset 0 -2px 0 var(--hot)}
.os-list__col:active{box-shadow:var(--bevel-thin-sunken)}
.os-list__row{display:flex;align-items:center;height:17px;cursor:default}
.os-list__cell{padding:0 6px;display:flex;align-items:center;gap:4px;flex:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.os-list__row[aria-selected="true"]{background:var(--highlight);color:var(--highlight-text)}
.os-list[data-focused="false"] .os-list__row[aria-selected="true"]{background:var(--face);color:var(--text)}
.os-list--icons{display:flex;flex-direction:row;flex-wrap:wrap;align-content:flex-start;gap:0;padding:4px}
.os-list__tile{width:75px;padding:4px 2px;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:default;text-align:center}
.os-list__tile span{max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 2px}
.os-list__tile[aria-selected="true"] span{background:var(--highlight);color:var(--highlight-text)}
.os-list__tile[aria-selected="true"] .os-icon{background:color-mix(in srgb,var(--highlight) 50%,transparent)}

/* ---------- Tree view ---------- */
.os-tree{background:var(--window);border:1px solid var(--field-border);padding:2px;overflow:auto;min-height:0}
.os-tree__row{display:flex;align-items:center;height:17px;cursor:default;white-space:nowrap}
.os-tree__indent{width:19px;height:17px;flex:none;background:repeating-linear-gradient(180deg,#808080 0 1px,transparent 1px 2px) 9px 0/1px 100% no-repeat}
.os-tree__expander{width:9px;height:9px;flex:none;margin-right:4px;border:1px solid var(--shadow-3d);background:var(--window);display:grid;place-items:center;font:9px/7px var(--font-mono);color:#000;cursor:default}
.os-tree__spacer{width:13px;flex:none}
.os-tree__label{display:inline-flex;align-items:center;gap:4px;padding:0 3px}
.os-tree__row[aria-selected="true"] .os-tree__label{background:var(--highlight);color:var(--highlight-text)}

/* ---------- Scrollbar ---------- */
.os-scrollbar{width:var(--w-scrollbar);flex:none;display:flex;flex-direction:column;background:var(--scroll-track)}
.os-scrollbar--h{width:auto;height:var(--w-scrollbar);flex-direction:row}
.os-scroll-btn{width:var(--w-scrollbar);height:var(--w-scrollbar);flex:none;border:1px solid #fff;border-radius:2px;background:var(--scroll-thumb);display:grid;place-items:center;padding:0;cursor:default}
.os-scroll-btn:hover{filter:brightness(1.06)}
.os-scroll-btn:active{filter:brightness(.88)}
.os-scroll-lane{flex:1;position:relative;min-height:0}
.os-scroll-thumb{position:absolute;left:0;right:0;border:1px solid #fff;border-radius:2px;background:var(--scroll-thumb);box-shadow:inset 0 0 0 1px rgba(255,255,255,.65)}
.os-scroll-thumb::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(180deg,transparent 0 2px,rgba(255,255,255,.85) 2px 3px,#8FA8E0 3px 4px) center/8px 16px no-repeat}
.os-scrollbar--h .os-scroll-thumb{top:0;bottom:0;left:auto;right:auto}
.os-scroll::-webkit-scrollbar{width:var(--w-scrollbar);height:var(--w-scrollbar)}
.os-scroll::-webkit-scrollbar-track{background:#F3F1EC}
.os-scroll::-webkit-scrollbar-thumb{background:linear-gradient(90deg,#D6E1FD,#B6CAF7);border:1px solid #fff;border-radius:2px}
.os-scroll::-webkit-scrollbar-thumb:hover{filter:brightness(1.06)}
.os-scroll::-webkit-scrollbar-corner{background:#F3F1EC}

/* ---------- Progress bar ---------- */
.os-progress{height:17px;background:var(--window);border:1px solid #686868;border-radius:var(--radius-ctl);padding:2px;overflow:hidden}
.os-progress__fill{height:100%;background:linear-gradient(180deg,#D3F8D5 0%,#6BE573 16%,var(--progress) 50%,#1EA829 84%,#8FEC96 100%);-webkit-mask:repeating-linear-gradient(90deg,#000 0 8px,transparent 8px 10px);mask:repeating-linear-gradient(90deg,#000 0 8px,transparent 8px 10px)}
.os-progress--marquee{position:relative}
.os-progress--marquee .os-progress__fill{position:absolute;top:2px;bottom:2px;left:0;width:50px;animation:os-marquee 2s linear infinite}
@media (prefers-reduced-motion:reduce){.os-progress--marquee .os-progress__fill{animation:none;position:static;width:40%;height:100%}}

/* ---------- Slider ---------- */
.os-slider{display:inline-flex;flex-direction:column;gap:2px;min-width:120px}
.os-slider__track{position:relative;height:21px}
.os-slider__groove{position:absolute;top:8px;left:0;right:0;height:4px;background:var(--face);box-shadow:var(--bevel-sunken)}
.os-slider__thumb{position:absolute;top:0;width:11px;height:21px;margin-left:-5px;background:linear-gradient(180deg,#FFFFFF 0%,#E7EEFC 45%,#C9D7FC 100%);border:1px solid var(--ctl-border);clip-path:polygon(0 0,100% 0,100% 62%,50% 100%,0 62%);cursor:default}
.os-slider__thumb:hover{background:linear-gradient(180deg,#FFFFFF 0%,#FFE9C4 45%,#FFC978 100%)}
.os-slider__ticks{height:4px;background:repeating-linear-gradient(90deg,var(--shadow-3d) 0 1px,transparent 1px 10px)}

/* ---------- Tooltip and balloon ---------- */
.os-tooltip{background:var(--tooltip);border:1px solid #000;border-radius:0;padding:2px 3px;box-shadow:var(--shadow-menu);max-width:280px;animation:os-fade var(--dur-fade) var(--ease-ui)}
.os-balloon{position:relative;background:var(--tooltip);border:1px solid #000;border-radius:var(--radius-balloon);padding:8px 10px;box-shadow:var(--shadow-menu);max-width:300px}
.os-balloon__title{display:flex;align-items:center;gap:6px;font-weight:var(--weight-bold);margin-bottom:4px}
.os-balloon__close{margin-left:auto;width:13px;height:13px;border:0;background:transparent;display:grid;place-items:center;font:10px/1 var(--font-ui);cursor:default}
.os-balloon__tail{position:absolute;bottom:-11px;left:24px;width:16px;height:12px;background:var(--tooltip);clip-path:polygon(0 0,100% 0,18% 100%)}
.os-balloon__tail::before{content:"";position:absolute;inset:0;background:#000;clip-path:polygon(0 0,100% 0,18% 100%);transform:scale(1.08);z-index:-1}

/* ---------- Message box ---------- */
.os-msgbox__body{display:flex;gap:var(--margin-dialog);padding:var(--margin-dialog) var(--margin-dialog) 7px}
.os-msgbox__text{padding-top:2px;max-width:var(--measure-dialog)}
.os-msgbox__text p{white-space:pre-line}
.os-msgbox__buttons{display:flex;justify-content:center;gap:var(--gap-button);padding:0 var(--margin-dialog) var(--margin-dialog)}

/* ---------- Wizard ---------- */
.os-wizard{width:var(--w-wizard);height:var(--h-wizard);display:flex;flex-direction:column;background:var(--face)}
.os-wizard__main{flex:1;min-height:0;display:flex}
.os-wizard__watermark{width:var(--w-wizard-watermark);flex:none;background:linear-gradient(170deg,#DCE8FA 0%,#8FB2E8 30%,#3C6DC4 68%,#16357F 100%);position:relative}
.os-wizard__welcome{flex:1;background:var(--window);padding:14px 18px;overflow:auto}
.os-wizard__welcome h2{font:var(--weight-bold) var(--size-welcome)/1.25 var(--font-welcome);margin-bottom:11px}
.os-wizard__header{height:var(--h-wizard-header);flex:none;background:var(--window);display:flex;align-items:center;gap:var(--margin-dialog);padding:0 var(--margin-dialog);border-bottom:1px solid var(--shadow-3d);box-shadow:0 1px 0 var(--hilight-3d)}
.os-wizard__header h2{font-weight:var(--weight-bold)}
.os-wizard__header p{margin:2px 0 0 11px;max-width:none}
.os-wizard__page{flex:1;min-height:0;overflow:auto;padding:var(--margin-dialog);background:var(--face)}
.os-wizard__footer{flex:none;display:flex;justify-content:flex-end;align-items:center;gap:var(--gap-button);padding:8px var(--margin-dialog);border-top:1px solid var(--shadow-3d);box-shadow:inset 0 1px 0 var(--hilight-3d)}
.os-wizard__footer .os-wizard__gap{width:var(--margin-dialog)}

/* ---------- Task pane ---------- */
.os-taskpane{width:var(--w-task-pane);flex:none;background:var(--task-pane);padding:var(--margin-dialog) 8px;display:flex;flex-direction:column;gap:var(--gap-group);overflow:auto}
.os-taskpane__section{border-radius:4px 4px 0 0}
.os-taskpane__header{height:23px;display:flex;align-items:center;justify-content:space-between;padding:0 4px 0 8px;background:var(--pane-header);border-radius:4px 4px 0 0;color:var(--pane-link);font-weight:var(--weight-bold);cursor:default}
.os-taskpane__chev{width:17px;height:17px;border-radius:50%;border:0;background:linear-gradient(180deg,#F3F7FE,#B9CCF2);display:grid;place-items:center;cursor:default}
.os-taskpane__body{background:var(--pane-body);border:1px solid #fff;border-top:0;padding:7px 8px;display:flex;flex-direction:column;gap:5px}
.os-taskpane__link{display:flex;align-items:center;gap:6px;color:var(--pane-link);text-decoration:none;cursor:default}
.os-taskpane__link:hover{text-decoration:underline;color:var(--pane-link)}

/* ---------- Taskbar ---------- */
.os-taskbar{height:var(--h-taskbar);flex:none;display:flex;align-items:stretch;background:var(--taskbar);box-shadow:inset 0 1px 0 #7FB2F8,inset 0 -1px 0 #12409E;user-select:none}
.os-startbtn{position:relative;height:100%;padding:0 20px 2px 7px;border:0;border-radius:0 var(--radius-start-btn) var(--radius-start-btn) 0;background:var(--start);color:#fff;font:italic var(--weight-bold) var(--size-start)/1 var(--font-start);text-shadow:1px 1px 0 #16490F;display:flex;align-items:center;gap:5px;cursor:default;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset -1px 0 0 rgba(0,0,0,.18)}
.os-startbtn::after{content:"";position:absolute;left:0;right:0;top:0;height:44%;border-radius:0 var(--radius-start-btn) 0 0;background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,0));pointer-events:none}
.os-startbtn:hover{filter:brightness(1.08)}
.os-startbtn:active{filter:brightness(.88);padding-left:8px;padding-top:1px}
.os-taskbar__grip{width:5px;flex:none;align-self:center;height:20px;background:repeating-linear-gradient(180deg,rgba(255,255,255,.55) 0 1px,transparent 1px 3px) 1px 0/1px 100% no-repeat,repeating-linear-gradient(180deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px) 3px 0/1px 100% no-repeat}
.os-quicklaunch{display:flex;align-items:center;gap:5px;padding:0 3px}
.os-taskbtns{flex:1;min-width:0;display:flex;align-items:center;gap:3px;padding:0 3px;overflow:hidden}
.os-taskbtn{max-width:var(--w-task-btn-max);min-width:0;height:var(--h-task-btn);flex:1;border:0;border-radius:var(--radius-ctl);padding:0 6px;display:flex;align-items:center;gap:5px;background:linear-gradient(180deg,#6BA3F6 0%,#3C81F3 14%,#3076E8 80%,#2463CE 100%);color:#fff;cursor:default;box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
.os-taskbtn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.os-taskbtn:hover{filter:brightness(1.08)}
.os-taskbtn[data-active="true"]{background:#1E52B7;box-shadow:inset 1px 1px 3px rgba(0,0,0,.5)}
.os-taskbtn[data-flashing="true"]{animation:os-flash 1s steps(1) infinite}
.os-tray{flex:none;display:flex;align-items:center;gap:7px;padding:0 9px;background:var(--tray);box-shadow:inset 1px 0 0 #0A6FA8,inset 2px 0 0 #43C2F7}
.os-clock{color:#fff;font:var(--size-ui)/1 var(--font-ui)}

/* ---------- Start menu ---------- */
.os-startmenu{width:var(--w-start-menu);border-radius:var(--radius-window) var(--radius-window) 0 0;overflow:hidden;box-shadow:2px 2px 5px rgba(0,0,0,.45);border:1px solid #0A3C9E;border-bottom:0;user-select:none}
.os-startmenu__header{height:56px;background:var(--title-active);display:flex;align-items:center;gap:9px;padding:0 10px;border-bottom:2px solid #F0A825}
.os-startmenu__avatar{width:48px;height:48px;flex:none;border:2px solid #fff;border-radius:4px;background:linear-gradient(180deg,#9FC0F0,#5A82D0);display:grid;place-items:center}
.os-startmenu__name{color:#fff;font:var(--weight-bold) var(--size-start-user)/1 var(--font-caption);text-shadow:var(--shadow-caption)}
.os-startmenu__cols{display:flex;align-items:stretch}
.os-startmenu__left{width:210px;flex:none;background:var(--window);padding:6px 4px;display:flex;flex-direction:column;gap:1px}
.os-startmenu__right{flex:1;min-width:0;background:var(--start-panel-right);border-left:1px solid var(--start-panel-edge);padding:6px 4px;display:flex;flex-direction:column;gap:1px}
.os-sm-item{display:flex;align-items:center;gap:7px;padding:3px 6px;border-radius:2px;cursor:default;color:var(--text);text-decoration:none;white-space:nowrap}
.os-sm-item:hover{background:var(--highlight);color:var(--highlight-text)}
.os-sm-item--pinned{font-weight:var(--weight-bold)}
.os-sm-item--system{font-weight:var(--weight-bold);color:#0A246A}
.os-sm-item--system:hover{color:var(--highlight-text)}
.os-startmenu__footer{background:var(--title-active);display:flex;justify-content:flex-end;gap:16px;padding:7px 12px}
.os-startmenu__footer .os-sm-item{color:#fff;text-shadow:var(--shadow-caption)}

/* ---------- Desktop ---------- */
.os-desktop{position:relative;background:var(--desktop);overflow:hidden;display:flex;flex-direction:column}
.os-desktop--hills{background:linear-gradient(180deg,#2C7BD6 0%,#59A6EE 26%,#9FD3F6 44%,#CFE9F7 52%,#8FBF48 58%,#69A833 74%,#4C8F27 100%)}
.os-desktop__surface{flex:1;min-height:0;position:relative}
.os-deskicons{display:grid;grid-auto-flow:column;grid-template-rows:repeat(auto-fill,var(--grid-desktop-icon));justify-content:start;align-content:start;height:100%;padding:6px;width:max-content}
.os-deskicon{width:var(--grid-desktop-icon);height:var(--grid-desktop-icon);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;padding:5px 2px;cursor:default;border:1px dotted transparent}
.os-deskicon__label{color:#fff;font:var(--size-ui)/1.2 var(--font-ui);text-align:center;text-shadow:1px 1px 0 rgba(0,0,0,.85);max-width:71px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;padding:0 2px}
.os-deskicon[aria-selected="true"]{border-color:#fff}
.os-deskicon[aria-selected="true"] .os-deskicon__label{background:var(--highlight);text-shadow:none}
.os-deskicon[aria-selected="true"] .os-icon{background:color-mix(in srgb,var(--highlight) 50%,transparent)}

/* ---------- Motion ---------- */
@keyframes os-fade{from{opacity:0}to{opacity:1}}
@keyframes os-marquee{from{left:-52px}to{left:100%}}
@keyframes os-flash{0%,49%{background:#E5A01A;color:#000}50%,100%{background:#1E52B7;color:#fff}}