/* THE GOD TERMINAL — the costume's system apps (js/costume-system.js): wallpapers, colour schemes,
 * pointer schemes and the other session preferences (data-* attributes on #costume), the in-costume
 * overlays (screen savers, nap, trails, fx), the period control kit, Display Properties, Control
 * Panel and its applets, Help and Support, Log Off / Welcome and the All Programs cascade.
 * Off-palette like the rest of the costume. Every wallpaper is original art drawn in SVG/CSS. */

/* ═════════════════════════ wallpapers ═════════════════════════ */
.cs {
  --csy-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  --csy-stars-a: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><g fill='%23fff'><circle cx='23' cy='41' r='.9' opacity='.8'/><circle cx='78' cy='12' r='.6' opacity='.6'/><circle cx='131' cy='67' r='1.1' opacity='.9'/><circle cx='190' cy='30' r='.7' opacity='.5'/><circle cx='255' cy='88' r='.9' opacity='.7'/><circle cx='12' cy='140' r='.7' opacity='.6'/><circle cx='66' cy='175' r='1.2' opacity='.9'/><circle cx='118' cy='128' r='.6' opacity='.5'/><circle cx='171' cy='160' r='.8' opacity='.7'/><circle cx='230' cy='200' r='.6' opacity='.6'/><circle cx='285' cy='150' r='1' opacity='.8'/><circle cx='40' cy='240' r='.8' opacity='.7'/><circle cx='99' cy='270' r='.6' opacity='.5'/><circle cx='210' cy='265' r='.7' opacity='.6'/><circle cx='270' cy='250' r='.9' opacity='.7'/><circle cx='5' cy='290' r='.6' opacity='.5'/><circle cx='182' cy='105' r='.5' opacity='.5'/><circle cx='244' cy='12' r='.6' opacity='.6'/><circle cx='60' cy='95' r='.5' opacity='.4'/></g><circle cx='150' cy='230' r='1.3' fill='%23cfe0ff'/><circle cx='104' cy='212' r='.8' fill='%23ffe9c8'/></svg>");
  --csy-stars-b: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='470' height='470'><g fill='%23fff'><circle cx='35' cy='60' r='1.4' opacity='.9'/><circle cx='140' cy='30' r='.8' opacity='.7'/><circle cx='260' cy='95' r='1' opacity='.8'/><circle cx='390' cy='50' r='.7' opacity='.6'/><circle cx='90' cy='190' r='.9' opacity='.7'/><circle cx='210' cy='230' r='.7' opacity='.6'/><circle cx='50' cy='350' r='.8' opacity='.7'/><circle cx='300' cy='380' r='.6' opacity='.5'/><circle cx='420' cy='330' r='.9' opacity='.7'/><circle cx='250' cy='450' r='.7' opacity='.6'/><circle cx='120' cy='300' r='.5' opacity='.4'/></g><circle cx='440' cy='170' r='1.2' fill='%23ffe9c8'/><circle cx='330' cy='260' r='1.4' fill='%23cfe0ff'/><circle cx='170' cy='400' r='1.1' fill='%23cfe0ff'/></svg>");
  --csy-twinkle: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='1130' height='790'><defs><path id='s' d='M0-10l2.2 7.8L10 0l-7.8 2.2L0 10l-2.2-7.8L-10 0l7.8-2.2z'/></defs><g fill='%23fff'><use href='%23s' transform='translate(84 122)'/><circle cx='84' cy='122' r='7' opacity='.2'/><use href='%23s' transform='translate(377 61) scale(.7)'/><use href='%23s' transform='translate(612 288) scale(.9)'/><circle cx='612' cy='288' r='6' opacity='.2'/><use href='%23s' transform='translate(941 147) scale(.65)'/><use href='%23s' transform='translate(233 471) scale(.8)'/><use href='%23s' transform='translate(812 593) scale(1.1)'/><circle cx='812' cy='593' r='8' opacity='.2'/><use href='%23s' transform='translate(1061 412) scale(.6)'/><use href='%23s' transform='translate(486 702) scale(.7)'/><use href='%23s' transform='translate(52 655) scale(.55)'/><circle cx='700' cy='90' r='1.6'/><circle cx='160' cy='300' r='1.4'/><circle cx='1010' cy='720' r='1.5'/><circle cx='420' cy='420' r='1.3'/></g></svg>");
  --csy-drift: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 500'><defs><filter id='b' x='-.3' y='-.8' width='1.6' height='2.6'><feGaussianBlur stdDeviation='9'/></filter></defs><g fill='%23fff' filter='url(%23b)'><g opacity='.72'><ellipse cx='700' cy='120' rx='150' ry='24'/><ellipse cx='660' cy='106' rx='70' ry='32'/><ellipse cx='742' cy='98' rx='82' ry='40'/></g><g opacity='.55'><ellipse cx='1350' cy='240' rx='120' ry='19'/><ellipse cx='1320' cy='228' rx='55' ry='25'/><ellipse cx='1386' cy='224' rx='60' ry='30'/></g><g opacity='.45'><ellipse cx='160' cy='330' rx='100' ry='14'/><ellipse cx='140' cy='322' rx='45' ry='18'/></g></g></svg>");

  --csy-wp-teal:
    var(--csy-grain),
    linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.05) 46%, transparent 62%),
    radial-gradient(120% 95% at 50% 38%, #24a8a5 0%, #128d8b 42%, #0a6a6b 82%, #075355 100%),
    #0f8483;

  /* Two hills under a big sky, a lone tree on the far one, soft clouds. */
  --csy-wp-hills:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='xMidYMid slice'><defs><linearGradient id='s' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23165ccc'/><stop offset='.42' stop-color='%234b94ec'/><stop offset='.66' stop-color='%23a5d2f7'/><stop offset='1' stop-color='%23e9f6fe'/></linearGradient><radialGradient id='sun' cx='.8' cy='.12' r='.55'><stop offset='0' stop-color='%23fffdf0'/><stop offset='.08' stop-color='%23fff6cf' stop-opacity='.75'/><stop offset='.3' stop-color='%23fff2c0' stop-opacity='.18'/><stop offset='1' stop-color='%23fff2c0' stop-opacity='0'/></radialGradient><linearGradient id='f' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%2392c97a'/><stop offset='1' stop-color='%23508f45'/></linearGradient><linearGradient id='n' x1='0' y1='0' x2='.2' y2='1'><stop offset='0' stop-color='%23b9e65c'/><stop offset='.3' stop-color='%237cc53c'/><stop offset='.75' stop-color='%233f8d27'/><stop offset='1' stop-color='%232a6e1c'/></linearGradient><radialGradient id='l' cx='.42' cy='.7' r='.42'><stop offset='0' stop-color='%23f4ff9e' stop-opacity='.55'/><stop offset='1' stop-color='%23f4ff9e' stop-opacity='0'/></radialGradient><filter id='b' x='-.3' y='-.6' width='1.6' height='2.2'><feGaussianBlur stdDeviation='7'/></filter></defs><rect width='1600' height='1000' fill='url(%23s)'/><rect width='1600' height='1000' fill='url(%23sun)'/><g fill='%23fff' filter='url(%23b)'><g opacity='.9'><ellipse cx='300' cy='200' rx='170' ry='34'/><ellipse cx='250' cy='178' rx='80' ry='44'/><ellipse cx='340' cy='168' rx='95' ry='56'/><ellipse cx='420' cy='190' rx='70' ry='36'/></g><g opacity='.75'><ellipse cx='980' cy='300' rx='130' ry='24'/><ellipse cx='950' cy='285' rx='60' ry='32'/><ellipse cx='1020' cy='278' rx='70' ry='38'/></g><g opacity='.55'><ellipse cx='620' cy='420' rx='110' ry='16'/><ellipse cx='600' cy='410' rx='50' ry='20'/></g></g><path d='M0 600C300 520 650 505 950 545S1400 575 1600 520V1000H0z' fill='url(%23f)'/><g transform='translate(1312 570)'><path d='M-3.5 2h7v-30h-7z' fill='%233d5a2a'/><circle cx='0' cy='-40' r='21' fill='%23447f33'/><circle cx='-14' cy='-31' r='13' fill='%233d752e'/><circle cx='14' cy='-30' r='14' fill='%233d752e'/><circle cx='-6' cy='-48' r='10' fill='%2366a34a'/></g><path d='M0 600C300 520 650 505 950 545S1400 575 1600 520V1000H0z' fill='%23d6ecff' opacity='.17'/><path d='M0 800C250 640 650 600 980 650S1420 735 1600 690V1000H0z' fill='url(%23n)'/><path d='M0 800C250 640 650 600 980 650S1420 735 1600 690V1000H0z' fill='url(%23l)'/><path d='M0 800C250 640 650 600 980 650S1420 735 1600 690' fill='none' stroke='%23e6ff9a' stroke-opacity='.45' stroke-width='3'/></svg>") center / cover no-repeat,
    #4b94ec;

  --csy-wp-clouds:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='xMidYMid slice'><defs><linearGradient id='s' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%231f6fd0'/><stop offset='.5' stop-color='%235aa4ec'/><stop offset='1' stop-color='%23c6e4fb'/></linearGradient><radialGradient id='c' cx='.45' cy='.28' r='.85'><stop offset='0' stop-color='%23fff'/><stop offset='.62' stop-color='%23f4f9ff'/><stop offset='1' stop-color='%23c3d7ee'/></radialGradient><filter id='b' x='-.2' y='-.4' width='1.4' height='1.8'><feGaussianBlur stdDeviation='4.5'/></filter><filter id='bb' x='-.2' y='-.6' width='1.4' height='2.2'><feGaussianBlur stdDeviation='14'/></filter><g id='k'><ellipse cx='0' cy='28' rx='150' ry='28' fill='%23bcd2ec'/><ellipse cx='-70' cy='6' rx='62' ry='42'/><ellipse cx='0' cy='-18' rx='76' ry='60'/><ellipse cx='72' cy='2' rx='62' ry='46'/><ellipse cx='120' cy='18' rx='42' ry='27'/><ellipse cx='-120' cy='22' rx='38' ry='21'/></g></defs><rect width='1600' height='1000' fill='url(%23s)'/><g fill='url(%23c)' filter='url(%23b)'><use href='%23k' transform='translate(270 230) scale(1.25)'/><use href='%23k' transform='translate(1180 175) scale(1.6)'/><use href='%23k' transform='translate(760 470) scale(1.05)'/><use href='%23k' transform='translate(1440 570) scale(.9)'/><use href='%23k' transform='translate(160 650) scale(.85)'/><use href='%23k' transform='translate(560 800) scale(.7)'/><use href='%23k' transform='translate(1060 830) scale(.75)'/><use href='%23k' transform='translate(1390 905) scale(.55)'/><use href='%23k' transform='translate(330 925) scale(.5)'/></g><ellipse cx='800' cy='990' rx='900' ry='60' fill='%23fff' opacity='.5' filter='url(%23bb)'/></svg>") center / cover no-repeat,
    #5aa4ec;

  /* A nebula, two star fields, a ringed planet and its moon. */
  --csy-wp-space:
    var(--csy-stars-a) 0 0 / 300px 300px,
    var(--csy-stars-b) 37px 91px / 470px 470px,
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='xMidYMid slice'><defs><radialGradient id='a' cx='.28' cy='.38' r='.5'><stop offset='0' stop-color='%23c02a86' stop-opacity='.55'/><stop offset='1' stop-color='%23c02a86' stop-opacity='0'/></radialGradient><radialGradient id='v' cx='.62' cy='.22' r='.45'><stop offset='0' stop-color='%235b3bd0' stop-opacity='.55'/><stop offset='1' stop-color='%235b3bd0' stop-opacity='0'/></radialGradient><radialGradient id='c' cx='.72' cy='.8' r='.5'><stop offset='0' stop-color='%23129aa8' stop-opacity='.42'/><stop offset='1' stop-color='%23129aa8' stop-opacity='0'/></radialGradient><filter id='neb' x='0' y='0' width='1' height='1'><feTurbulence type='fractalNoise' baseFrequency='.0021 .0033' numOctaves='5' seed='11'/><feColorMatrix values='0 0 0 0 .8 0 0 0 0 .38 0 0 0 0 .96 2.8 0 0 0 -1.28'/></filter><radialGradient id='p' cx='.36' cy='.32' r='.75'><stop offset='0' stop-color='%23ffe2b0'/><stop offset='.35' stop-color='%23e9a565'/><stop offset='.7' stop-color='%23a2502c'/><stop offset='1' stop-color='%23260b04'/></radialGradient><linearGradient id='bd' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23fff' stop-opacity='0'/><stop offset='.3' stop-color='%23fff' stop-opacity='.16'/><stop offset='.36' stop-color='%23fff' stop-opacity='0'/><stop offset='.55' stop-color='%23000' stop-opacity='.18'/><stop offset='.62' stop-color='%23000' stop-opacity='0'/><stop offset='.78' stop-color='%23fff' stop-opacity='.12'/><stop offset='.84' stop-color='%23fff' stop-opacity='0'/></linearGradient><linearGradient id='r' x1='0' y1='0' x2='1' y2='0'><stop offset='0' stop-color='%23f3d6a8' stop-opacity='0'/><stop offset='.2' stop-color='%23f3d6a8' stop-opacity='.7'/><stop offset='.5' stop-color='%23fff0d0' stop-opacity='.9'/><stop offset='.8' stop-color='%23d8a874' stop-opacity='.7'/><stop offset='1' stop-color='%23d8a874' stop-opacity='0'/></linearGradient><radialGradient id='m' cx='.35' cy='.3' r='.8'><stop offset='0' stop-color='%23f2f2f5'/><stop offset='1' stop-color='%234b4f60'/></radialGradient></defs><rect width='1600' height='1000' fill='%2305060f'/><rect width='1600' height='1000' filter='url(%23neb)' opacity='.8'/><rect width='1600' height='1000' fill='url(%23a)'/><rect width='1600' height='1000' fill='url(%23v)'/><rect width='1600' height='1000' fill='url(%23c)'/><g transform='translate(1270 720) rotate(-16)'><ellipse rx='300' ry='62' fill='none' stroke='url(%23r)' stroke-width='16'/><circle r='150' fill='url(%23p)'/><circle r='150' fill='url(%23bd)'/><path d='M-300 0A300 62 0 0 0 300 0' fill='none' stroke='url(%23r)' stroke-width='16'/></g><circle cx='980' cy='600' r='26' fill='url(%23m)'/></svg>") center / cover no-repeat,
    #05060f;

  --csy-wp-sunset:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='xMidYMid slice'><defs><linearGradient id='s' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23241a5c'/><stop offset='.4' stop-color='%235c2f8c'/><stop offset='.7' stop-color='%23c24f88'/><stop offset='.88' stop-color='%23f07a6a'/><stop offset='1' stop-color='%23ffb066'/></linearGradient><linearGradient id='w' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23ff9a5e'/><stop offset='.22' stop-color='%23c45a7a'/><stop offset='.6' stop-color='%235a3480'/><stop offset='1' stop-color='%23201640'/></linearGradient><radialGradient id='g' cx='.5' cy='.6' r='.42'><stop offset='0' stop-color='%23fff1c2' stop-opacity='.95'/><stop offset='.22' stop-color='%23ffc46e' stop-opacity='.5'/><stop offset='1' stop-color='%23ff8a5a' stop-opacity='0'/></radialGradient><radialGradient id='sun' cx='.5' cy='.42' r='.62'><stop offset='0' stop-color='%23fffbe8'/><stop offset='.6' stop-color='%23ffe08a'/><stop offset='1' stop-color='%23ffb050'/></radialGradient></defs><rect width='1600' height='620' fill='url(%23s)'/><rect width='1600' height='1000' fill='url(%23g)'/><g fill='%23ff9fb6' opacity='.5'><ellipse cx='380' cy='305' rx='290' ry='9'/><ellipse cx='330' cy='326' rx='190' ry='5'/><ellipse cx='520' cy='290' rx='120' ry='4'/><ellipse cx='1280' cy='244' rx='330' ry='11'/><ellipse cx='1300' cy='270' rx='210' ry='5'/><ellipse cx='1080' cy='226' rx='130' ry='4'/><ellipse cx='850' cy='434' rx='230' ry='7'/><ellipse cx='930' cy='452' rx='120' ry='3.5'/></g><g fill='%23ffc77a' opacity='.65'><ellipse cx='390' cy='311' rx='230' ry='2.4'/><ellipse cx='1290' cy='252' rx='260' ry='2.6'/><ellipse cx='860' cy='439' rx='170' ry='2'/></g><circle cx='800' cy='600' r='96' fill='url(%23sun)'/><rect y='600' width='1600' height='400' fill='url(%23w)'/><rect y='600' width='1600' height='400' fill='url(%23g)' opacity='.45'/><rect y='597' width='1600' height='5' fill='%23fff0c0' opacity='.75'/><g fill='%23ffe6a0'><rect x='700' y='612' width='200' height='6' rx='3' opacity='.9'/><rect x='715' y='628' width='170' height='5' rx='2.5' opacity='.8'/><rect x='690' y='646' width='220' height='5' rx='2.5' opacity='.7'/><rect x='730' y='668' width='140' height='4' rx='2' opacity='.6'/><rect x='705' y='694' width='190' height='4' rx='2' opacity='.5'/><rect x='745' y='724' width='110' height='3' rx='1.5' opacity='.42'/><rect x='725' y='760' width='150' height='3' rx='1.5' opacity='.34'/><rect x='760' y='800' width='80' height='3' rx='1.5' opacity='.26'/><rect x='745' y='850' width='110' height='2' rx='1' opacity='.2'/></g><path d='M0 600C80 560 160 548 260 570S380 590 430 600z' fill='%233a1f4a'/><path d='M1180 600C1260 575 1330 560 1420 572S1560 590 1600 588V600z' fill='%23442456'/><g fill='%232a1638'><path d='M1030 596h56l-8 10h-40z'/><rect x='1057' y='530' width='3' height='66'/><path d='M1062 534v58h32z'/><path d='M1054 542v48h-24z'/></g><g fill='none' stroke='%23301a40' stroke-width='3' stroke-linecap='round'><path d='M520 360q12-10 24 0q12-10 24 0'/><path d='M590 392q8-7 16 0q8-7 16 0'/></g></svg>") center / cover no-repeat,
    #c24f88;

  --csy-wp-ducks:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'><defs><radialGradient id='d' cx='.35' cy='.3' r='.85'><stop offset='0' stop-color='%23fff2a0'/><stop offset='.55' stop-color='%23ffd23a'/><stop offset='1' stop-color='%23e8a800'/></radialGradient><g id='k'><path d='M8 28c0-5 4.5-7.5 10-7.5-.6-7 3.6-12 9.6-12 6 0 9.6 4.2 9.6 9.4 0 3-1.2 5.2-3 6.8 4.2 1.6 6.8 4.8 6.8 8.6C41 39.6 34 44 24.5 44 15 44 8 38.6 8 31z' fill='url(%23d)' stroke='%23b07c00' stroke-width='1.1'/><path d='M36.5 15.4l8.5 2.3-8.4 3.4z' fill='%23ff8a1c' stroke='%23c25c00' stroke-linejoin='round'/><circle cx='31' cy='14.6' r='2' fill='%231c1c1c'/><circle cx='31.6' cy='14' r='.6' fill='%23fff'/><path d='M15.5 30c4.5-1 9.5.4 12 4' fill='none' stroke='%23d89b00' stroke-width='1.8' stroke-linecap='round'/></g></defs><rect width='240' height='240' fill='%2398d8ee'/><path d='M-120 120L120-120M0 240L240 0M-120 240L120 0M120 240L360 0M120 360L360 120' stroke='%23fff' stroke-opacity='.16' stroke-width='30'/><use href='%23k' transform='translate(20 22) scale(1.35) rotate(-10 24 26)'/><use href='%23k' transform='translate(214 128) scale(-1.15 1.15) rotate(12 24 26)'/><g fill='%23fff' opacity='.7'><circle cx='196' cy='40' r='4'/><circle cx='208' cy='56' r='2.4'/><circle cx='52' cy='196' r='3.4'/><circle cx='38' cy='212' r='2'/><circle cx='130' cy='112' r='2.6'/></g></svg>") 0 0 / 240px 240px repeat,
    #98d8ee;

  --csy-wp-toast:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='230' height='230' viewBox='0 0 230 230'><defs><linearGradient id='c' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23c98238'/><stop offset='1' stop-color='%238a4f1c'/></linearGradient><linearGradient id='i' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23fae2a4'/><stop offset='1' stop-color='%23e6ab5c'/></linearGradient><g id='t'><path d='M10 64V30C-2 27 0 4 18 4h30c18 0 20 23 8 26v34a4 4 0 0 1-4 4H14a4 4 0 0 1-4-4z' fill='url(%23c)'/><path d='M15 60V27c-8-2-6-18 6-18h24c12 0 14 16 6 18v33a3 3 0 0 1-3 3H18a3 3 0 0 1-3-3z' fill='url(%23i)'/><rect x='24' y='30' width='18' height='12' rx='3' fill='%23fff3a6' stroke='%23e2b400' stroke-width='1.2'/></g></defs><rect width='230' height='230' fill='%23ffe7a8'/><g fill='%23f0c878'><circle cx='24' cy='22' r='3'/><circle cx='140' cy='74' r='2.2'/><circle cx='205' cy='18' r='2'/><circle cx='80' cy='206' r='2.4'/><circle cx='14' cy='150' r='1.8'/><circle cx='120' cy='150' r='1.6'/></g><use href='%23t' transform='translate(30 38) rotate(-12 33 36)'/><use href='%23t' transform='translate(130 128) rotate(14 33 36)'/></svg>") 0 0 / 230px 230px repeat,
    #ffe7a8;

  --csy-wp-night:
    var(--csy-grain),
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><radialGradient id='m' cx='.4' cy='.35' r='.7'><stop offset='0' stop-color='%23fffef4'/><stop offset='1' stop-color='%23e6dfbf'/></radialGradient><mask id='k'><rect width='100' height='100' fill='%23fff'/><circle cx='66' cy='38' r='35' fill='%23000'/></mask></defs><circle cx='50' cy='50' r='40' fill='url(%23m)' mask='url(%23k)'/></svg>") 84% 13% / clamp(4rem, 10vmin, 7rem) auto no-repeat,
    radial-gradient(circle at 84% 15%, rgba(214, 236, 255, 0.3) 0, rgba(170, 210, 255, 0.09) 8%, transparent 24%),
    var(--csy-stars-a) 0 0 / 300px 300px,
    var(--csy-stars-b) 120px 40px / 470px 470px,
    radial-gradient(130% 60% at 50% 115%, rgba(40, 160, 160, 0.35), transparent 70%),
    radial-gradient(120% 95% at 50% 38%, #0f5560 0%, #0a3d48 40%, #062b34 78%, #031b22 100%),
    #062b34;
}

#costume[data-wallpaper='hills'] .cs-screen, .csy-wall[data-wall='hills'] { background: var(--csy-wp-hills); }
#costume[data-wallpaper='clouds'] .cs-screen, .csy-wall[data-wall='clouds'] { background: var(--csy-wp-clouds); }
#costume[data-wallpaper='space'] .cs-screen, .csy-wall[data-wall='space'] { background: var(--csy-wp-space); }
#costume[data-wallpaper='sunset'] .cs-screen, .csy-wall[data-wall='sunset'] { background: var(--csy-wp-sunset); }
#costume[data-wallpaper='ducks'] .cs-screen, .csy-wall[data-wall='ducks'] { background: var(--csy-wp-ducks); }
#costume[data-wallpaper='toast'] .cs-screen, .csy-wall[data-wall='toast'] { background: var(--csy-wp-toast); }
#costume[data-wallpaper='night'] .cs-screen, .csy-wall[data-wall='night'] { background: var(--csy-wp-night); }
.csy-wall[data-wall='teal'] { background: var(--csy-wp-teal); }

/* Living wallpapers: clouds drift and stars twinkle on their own compositor layer (none in reduced motion). */
#costume[data-wallpaper='hills'] .cs-screen::before,
#costume[data-wallpaper='clouds'] .cs-screen::before,
#costume[data-wallpaper='space'] .cs-screen::before,
#costume[data-wallpaper='night'] .cs-screen::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}
#costume[data-wallpaper='hills'] .cs-screen::before,
#costume[data-wallpaper='clouds'] .cs-screen::before {
  width: calc(100% + 1600px);
  height: 500px;
  background: var(--csy-drift) 0 0 / 1600px 500px repeat-x;
  animation: csy-drift 150s linear infinite;
}
#costume[data-wallpaper='clouds'] .cs-screen::before { top: 18%; opacity: 0.85; animation-duration: 110s; }
@keyframes csy-drift { to { transform: translateX(-1600px); } }
#costume[data-wallpaper='space'] .cs-screen::before,
#costume[data-wallpaper='night'] .cs-screen::before {
  width: 100%;
  height: 100%;
  background: var(--csy-twinkle) 0 0 / 1130px 790px;
  animation: csy-twinkle 3.6s ease-in-out infinite alternate;
}
#costume[data-wallpaper='night'] .cs-screen::before { height: 60%; animation-duration: 5s; }
@keyframes csy-twinkle { from { opacity: 0.2; } to { opacity: 1; } }
html[data-reduced-motion='on'] #costume .cs-screen::before { animation: none; }

/* High contrast: black desk, yellow labels. */
#costume[data-contrast='on'] .cs-screen { background: #000 !important; }
#costume[data-contrast='on'] .cs-screen::before { display: none; }
#costume[data-contrast='on'] .cs-icon-label { color: #ff0; text-shadow: none; }
#costume[data-contrast='on'] .cs-icon.is-selected .cs-icon-label { background: #00f; color: #fff; }

/* ═════════════════════════ colour schemes (Display → Appearance) ═════════════════════════ */
[data-scheme='blue'] {
  --csy-task-bg: linear-gradient(180deg, #3d7ef0 0%, #5d9cf6 4%, #2c69e3 9%, #2560db 30%, #2462d8 70%, #1f58cb 92%, #1747b0 100%);
  --csy-task-line: #0e3fa8;
  --csy-tray-bg: linear-gradient(180deg, #13a1ef 0%, #18aaf3 8%, #0f94e8 50%, #0b84dd 92%, #0a72c9 100%);
  --csy-tray-line: #0d3a9a;
  --csy-tray-ink: #fff;
  --csy-btn-bg: linear-gradient(180deg, #5d9bf8, #3b7ff0 45%, #3375e8);
  --csy-btn-on: linear-gradient(180deg, #1c4fbf, #2559c9);
  --csy-btn-line: #1c4fbf;
  --csy-btn-ink: #fff;
  --csy-bar-bg: linear-gradient(180deg, #0a5ef7 0%, #3d8cff 8%, #0b5ff2 22%, #0656ea 60%, #0353e8 85%, #0447c9 100%);
  --csy-bar-off: linear-gradient(180deg, #7b9fe8, #9db8ef 10%, #7f9ee4 60%, #7593db);
  --csy-frame: #0a3ed6;
  --csy-frame-off: #7a96df;
  --csy-title-ink: #fff;
  --csy-title-shadow: 1px 1px 1px #0f1a63;
  --csy-menu-head: linear-gradient(180deg, #1a6fd8 0%, #3c8ff0 12%, #2a7ae6 40%, #1c63cf 100%);
  --csy-menu-foot: linear-gradient(180deg, #2a7ae6 0%, #1c63cf 60%, #1856bd 100%);
  --csy-menu-line: #0b3cb6;
  --csy-menu-right: #d6e6fb;
  --csy-menu-right-line: #a9c8f0;
}
[data-scheme='olive'] {
  --csy-task-bg: linear-gradient(180deg, #d9e2b6 0%, #bccb92 5%, #a3b772 12%, #95ab66 50%, #8ba15b 88%, #74894a 100%);
  --csy-task-line: #6a7d3e;
  --csy-tray-bg: linear-gradient(180deg, #edf2d6 0%, #d8e1b6 50%, #c7d39f 100%);
  --csy-tray-line: #8ea061;
  --csy-tray-ink: #1f2a0c;
  --csy-btn-bg: linear-gradient(180deg, #c3d19a, #a6b977 50%, #9aae6c);
  --csy-btn-on: linear-gradient(180deg, #7c914d, #8ea25e);
  --csy-btn-line: #6f8443;
  --csy-btn-ink: #fff;
  --csy-bar-bg: linear-gradient(180deg, #a9bf7a 0%, #cfdea2 8%, #a2b872 24%, #91a95f 60%, #849d52 100%);
  --csy-bar-off: linear-gradient(180deg, #dbe2c4, #c9d3ab 60%, #c0cb9f);
  --csy-frame: #8ea061;
  --csy-frame-off: #c3cc9f;
  --csy-title-ink: #fff;
  --csy-title-shadow: 1px 1px 1px #3e4d1a;
  --csy-menu-head: linear-gradient(180deg, #a6bb76 0%, #c5d698 12%, #9fb46e 40%, #8aa05a 100%);
  --csy-menu-foot: linear-gradient(180deg, #9fb46e 0%, #8aa05a 60%, #7a8f4c 100%);
  --csy-menu-line: #6a7d3e;
  --csy-menu-right: #eef2dc;
  --csy-menu-right-line: #c3cf98;
}
[data-scheme='silver'] {
  --csy-task-bg: linear-gradient(180deg, #f7f7fa 0%, #e2e2ea 8%, #cdcdd9 50%, #bcbccb 92%, #a5a5b6 100%);
  --csy-task-line: #8c8d9c;
  --csy-tray-bg: linear-gradient(180deg, #fcfcfe 0%, #e8e8ef 50%, #dadae4 100%);
  --csy-tray-line: #a5a5b6;
  --csy-tray-ink: #1b1b2a;
  --csy-btn-bg: linear-gradient(180deg, #ffffff, #e4e4ec 50%, #d4d5e0);
  --csy-btn-on: linear-gradient(180deg, #b6b7c7, #cdced9);
  --csy-btn-line: #9898aa;
  --csy-btn-ink: #1b1b2a;
  --csy-bar-bg: linear-gradient(180deg, #e9e9f1 0%, #ffffff 8%, #dcdde6 30%, #c6c7d4 70%, #b2b3c3 100%);
  --csy-bar-off: linear-gradient(180deg, #f6f6fa, #ebebf2 60%, #e3e3ec);
  --csy-frame: #a8a9b8;
  --csy-frame-off: #d4d4de;
  --csy-title-ink: #1b1b2a;
  --csy-title-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  --csy-menu-head: linear-gradient(180deg, #c8c9d6 0%, #e9e9f1 12%, #cfd0dc 40%, #b9bac9 100%);
  --csy-menu-foot: linear-gradient(180deg, #cfd0dc 0%, #b9bac9 60%, #a9aabb 100%);
  --csy-menu-line: #8c8d9c;
  --csy-menu-right: #eeeef4;
  --csy-menu-right-line: #cfd0dc;
}
[data-scheme='toast'] {
  --csy-task-bg: linear-gradient(180deg, #f6cd85 0%, #eaa950 6%, #da8d36 30%, #ca7b2b 70%, #a8601c 100%);
  --csy-task-line: #8a4f1c;
  --csy-tray-bg: linear-gradient(180deg, #fde7b0 0%, #f4cb7c 50%, #e8b35e 100%);
  --csy-tray-line: #b06a22;
  --csy-tray-ink: #4a2a10;
  --csy-btn-bg: linear-gradient(180deg, #f2c272, #de9c47 50%, #d08b38);
  --csy-btn-on: linear-gradient(180deg, #9c5a1c, #b06a26);
  --csy-btn-line: #9c5a1c;
  --csy-btn-ink: #fff;
  --csy-bar-bg: linear-gradient(180deg, #e2a04a 0%, #f6cf86 8%, #d98c35 25%, #c47826 65%, #a8601c 100%);
  --csy-bar-off: linear-gradient(180deg, #f1d6aa, #e9c792 60%, #e2bd85);
  --csy-frame: #b06a22;
  --csy-frame-off: #dfb98a;
  --csy-title-ink: #fff;
  --csy-title-shadow: 1px 1px 1px #5b3008;
  --csy-menu-head: linear-gradient(180deg, #c98238 0%, #e9ad5c 12%, #cf8a3a 40%, #a8601c 100%);
  --csy-menu-foot: linear-gradient(180deg, #cf8a3a 0%, #b06a26 60%, #94531a 100%);
  --csy-menu-line: #8a4f1c;
  --csy-menu-right: #fff3d6;
  --csy-menu-right-line: #ecc98e;
}
:is(#costume[data-scheme], .csy-replica[data-scheme]) .cs-taskbar { background: var(--csy-task-bg); border-top-color: var(--csy-task-line); }
:is(#costume[data-scheme], .csy-replica[data-scheme]) .cs-tray { background: var(--csy-tray-bg); border-left-color: var(--csy-tray-line); }
:is(#costume[data-scheme], .csy-replica[data-scheme]) .cs-clock { color: var(--csy-tray-ink); }
:is(#costume[data-scheme], .csy-replica[data-scheme]) .cs-task { background: var(--csy-btn-bg); border-color: var(--csy-btn-line); color: var(--csy-btn-ink); }
:is(#costume[data-scheme], .csy-replica[data-scheme]) .cs-task.is-active { background: var(--csy-btn-on); }
:is(#costume[data-scheme], .csy-replica[data-scheme]) .cs-win { --cs-frame: var(--csy-frame); }
:is(#costume[data-scheme], .csy-replica[data-scheme]) .cs-win:not(.is-active) { --cs-frame: var(--csy-frame-off); }
:is(#costume[data-scheme], .csy-replica[data-scheme]) .cs-win-bar { background: var(--csy-bar-bg); }
:is(#costume[data-scheme], .csy-replica[data-scheme]) .cs-win:not(.is-active) .cs-win-bar { background: var(--csy-bar-off); }
:is(#costume[data-scheme], .csy-replica[data-scheme]) .cs-win-title { color: var(--csy-title-ink); text-shadow: var(--csy-title-shadow); }
:is(#costume[data-scheme], .csy-replica[data-scheme]) .cs-menu { border-color: var(--csy-menu-line); }
:is(#costume[data-scheme], .csy-replica[data-scheme]) .cs-menu-head { background: var(--csy-menu-head); }
:is(#costume[data-scheme], .csy-replica[data-scheme]) .cs-menu-foot { background: var(--csy-menu-foot); }
:is(#costume[data-scheme], .csy-replica[data-scheme]) .cs-menu-right { background: var(--csy-menu-right); border-left-color: var(--csy-menu-right-line); }
#costume[data-scheme='silver'] .cs-task-label, #costume[data-scheme='silver'] .cs-clock { text-shadow: none; }

/* ═════════════════════════ pointer schemes, icon sizes, the tray ═════════════════════════ */
#costume[data-pointer='large'], #costume[data-pointer='large'] * {
  cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'><path d='M3 1.5v19l4.6-4.4 3.3 7.4 3.2-1.4-3.2-7.2H17z' fill='%23fff' stroke='%23000' stroke-width='1.1' stroke-linejoin='round'/></svg>") 6 3, default !important;
}
#costume[data-pointer='inverted'], #costume[data-pointer='inverted'] * {
  cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24'><path d='M3 1.5v19l4.6-4.4 3.3 7.4 3.2-1.4-3.2-7.2H17z' fill='%23000' stroke='%23fff' stroke-width='1.3' stroke-linejoin='round'/></svg>") 3 2, default !important;
}
#costume[data-pointer='duck'], #costume[data-pointer='duck'] * {
  cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 48 48'><g transform='translate(48 0) scale(-1 1)'><path d='M8 28c0-5 4.5-7.5 10-7.5-.6-7 3.6-12 9.6-12 6 0 9.6 4.2 9.6 9.4 0 3-1.2 5.2-3 6.8 4.2 1.6 6.8 4.8 6.8 8.6C41 39.6 34 44 24.5 44 15 44 8 38.6 8 31z' fill='%23ffd23a' stroke='%23714f00' stroke-width='2'/><path d='M36.5 15.4l8.5 2.3-8.4 3.4z' fill='%23ff8a1c' stroke='%23714f00' stroke-width='1.4' stroke-linejoin='round'/><circle cx='31' cy='14.6' r='2.2' fill='%231c1c1c'/></g></svg>") 2 14, default !important;
}
#costume[data-pointer='busy'], #costume[data-pointer='busy'] * {
  cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'><path d='M6 2h12v2c0 4-4 6-4 8s4 4 4 8v2H6v-2c0-4 4-6 4-8S6 8 6 4z' fill='%23fff' stroke='%23000' stroke-width='1.2'/><path d='M8 20c1-2.5 3-3.5 4-3.5s3 1 4 3.5zM9 6h6c-.5 1.6-2 2.8-3 3.6C11 8.8 9.5 7.6 9 6z' fill='%23e0b420'/></svg>") 16 16, wait !important;
}

/* Accessibility → "Make everything bigger". */
#costume[data-icons='large'] .cs-icons { grid-template-rows: repeat(auto-fill, 8.3rem); grid-auto-columns: 8.4rem; }
#costume[data-icons='large'] .cs-icon { width: 8.4rem; }
#costume[data-icons='large'] .cs-icon-art { width: 4.5rem; height: 4.5rem; }
#costume[data-icons='large'] .cs-icon-label { font-size: 1.05rem; }
#costume[data-icons='huge'] .cs-icons { grid-template-rows: repeat(auto-fill, 10.6rem); grid-auto-columns: 10.6rem; }
#costume[data-icons='huge'] .cs-icon { width: 10.6rem; }
#costume[data-icons='huge'] .cs-icon-art { width: 6.2rem; height: 6.2rem; }
#costume[data-icons='huge'] .cs-icon-label { font-size: 1.3rem; }
#costume[data-icons='enormous'] .cs-icons { grid-template-rows: repeat(auto-fill, 14rem); grid-auto-columns: 13.5rem; }
#costume[data-icons='enormous'] .cs-icon { width: 13.5rem; }
#costume[data-icons='enormous'] .cs-icon-art { width: 9rem; height: 9rem; }
#costume[data-icons='enormous'] .cs-icon-label { font-size: 1.6rem; }
#costume:is([data-icons='huge'], [data-icons='enormous']) .cs-start { font-size: 1.55rem; }
#costume:is([data-icons='huge'], [data-icons='enormous']) .cs-clock { font-size: 1.05rem; }
@media (max-width: 599px) {
  #costume[data-icons='huge'] .cs-icons, #costume[data-icons='enormous'] .cs-icons { grid-template-rows: repeat(auto-fill, 9.6rem); grid-auto-columns: 9.4rem; }
  #costume[data-icons='huge'] .cs-icon, #costume[data-icons='enormous'] .cs-icon { width: 9.4rem; }
  #costume[data-icons='huge'] .cs-icon-art, #costume[data-icons='enormous'] .cs-icon-art { width: 5.4rem; height: 5.4rem; }
  #costume[data-icons='huge'] .cs-icon-label, #costume[data-icons='enormous'] .cs-icon-label { font-size: 1.15rem; }
  #costume:is([data-icons='huge'], [data-icons='enormous']) .cs-start { font-size: 1.3rem; }
}

/* Date & Time → time zones that the tray clock takes literally. */
#costume[data-tz] .cs-clock { min-width: 0; font-size: 0; }
#costume[data-tz] .cs-clock::after { font-size: 0.875rem; white-space: nowrap; }
#costume[data-tz='snack'] .cs-clock::after { content: "Snack o'clock"; }
#costume[data-tz='five'] .cs-clock::after { content: '5 more minutes'; }
#costume[data-tz='monday'] .cs-clock::after { content: 'Monday'; }
#costume[data-tz='pond'] .cs-clock::after { content: "Duck o'clock"; }

/* Power Options → "Never sleep": a coffee in the tray. */
#costume[data-power='awake'] .cs-tray::before {
  content: '';
  flex: none;
  width: 1.3rem;
  height: 1.3rem;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8 2c-1 1.4 1 2.2 0 3.6M12 2c-1 1.4 1 2.2 0 3.6' fill='none' stroke='%23fff' stroke-width='1.4' stroke-linecap='round' opacity='.85'/><path d='M3 8h15v6a6 6 0 0 1-6 6H9a6 6 0 0 1-6-6z' fill='%23fff' stroke='%235b3424' stroke-width='1.2'/><path d='M18 10h1.5a2.5 2.5 0 0 1 0 5H18' fill='none' stroke='%23fff' stroke-width='1.8'/><path d='M4.5 9.5h12v1.5h-12z' fill='%237a4a1e'/></svg>") center / contain no-repeat;
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.3));
}

/* Busy wallpapers: the icon captions get a heavier halo so they stay legible. */
#costume:is([data-wallpaper='ducks'], [data-wallpaper='toast'], [data-wallpaper='clouds'], [data-wallpaper='hills']) .cs-icon:not(.is-selected) .cs-icon-label {
  text-shadow: 1px 1px 1px #000, 0 0 3px #000, 0 0 7px rgba(0, 0, 0, 0.75);
}
#costume:is([data-scheme='silver'], [data-scheme='olive']) .cs-tray-icon, .csy-replica:is([data-scheme='silver'], [data-scheme='olive']) .cs-tray-icon { filter: brightness(0.3) drop-shadow(0 1px 0 rgba(255, 255, 255, 0.6)); }

/* ═════════════════════════ overlays inside the costume screen ═════════════════════════ */
.csy-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.csy-art { display: block; width: 100%; height: 100%; overflow: visible; }

.csy-fx { position: absolute; inset: 0; z-index: 9; overflow: hidden; pointer-events: none; }
.csy-fx-canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.csy-fly {
  position: absolute;
  left: 0;
  top: 0;
  font-family: 'Trebuchet MS', Tahoma, Verdana, sans-serif;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35), 0 0 3px #000, 0 0 14px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.csy-ring {
  position: absolute;
  border: 3px solid currentColor;
  border-radius: 50%;
  box-shadow: 0 0 18px currentColor, inset 0 0 12px currentColor;
  pointer-events: none;
}
.csy-spark {
  position: absolute;
  left: 0;
  top: 0;
  width: 1.8rem;
  height: 1.8rem;
  margin: -0.9rem 0 0 -0.9rem;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 14%, rgba(255, 244, 160, 0.95) 24%, rgba(255, 196, 40, 0.5) 42%, rgba(255, 196, 40, 0) 68%);
}
.csy-spark::before {
  content: '';
  position: absolute;
  inset: -40%;
  background:
    linear-gradient(transparent 47%, #fff 47% 53%, transparent 53%),
    linear-gradient(90deg, transparent 47%, #fff 47% 53%, transparent 53%);
  -webkit-mask-image: radial-gradient(circle, #000 0 18%, transparent 62%);
  mask-image: radial-gradient(circle, #000 0 18%, transparent 62%);
}
.csy-spark.is-trail { width: 0.9rem; height: 0.9rem; margin: -0.45rem 0 0 -0.45rem; opacity: 0.75; }
.csy-spark.is-trail::before { content: none; }
.csy-locate {
  position: absolute;
  width: 6rem;
  height: 6rem;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}

/* Pointer trails. */
.csy-trails { position: absolute; inset: 0; z-index: 9; overflow: hidden; pointer-events: none; transition: opacity 300ms ease; }
.csy-trails.is-still { opacity: 0; }
.csy-trail {
  position: absolute;
  left: 0;
  top: 0;
  width: 1.3rem;
  height: 1.3rem;
  margin: -0.08rem 0 0 -0.16rem;
  will-change: transform;
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.25));
}
.csy-trail svg { display: block; width: 100%; height: 100%; }
.csy-trails.is-large .csy-trail { width: 2.9rem; height: 2.9rem; margin: -0.18rem 0 0 -0.36rem; }
.csy-trails.is-duck .csy-trail { width: 2.4rem; height: 2.4rem; margin: -0.85rem 0 0 -0.1rem; transform-origin: 0 0; }
.csy-trails.is-duck .csy-trail svg { transform: scaleX(-1); }
.csy-trails.is-busy .csy-trail { width: 1.9rem; height: 1.9rem; margin: -0.95rem 0 0 -0.95rem; }

/* Screen savers and naps cover the whole costume screen. */
.csy-saver { position: absolute; inset: 0; z-index: 8; overflow: hidden; background: #000; cursor: none; touch-action: none; }
.csy-saver-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.csy-nap {
  position: absolute;
  inset: 0;
  z-index: 8;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 45%, rgba(8, 12, 28, 0.93), rgba(0, 0, 0, 0.98));
  cursor: pointer;
  touch-action: none;
}
.csy-nap-z { position: absolute; left: 50%; top: 48%; }
.csy-nap-z span {
  position: absolute;
  left: 0;
  top: 0;
  color: #9fb8ff;
  font: italic 700 2.6rem/1 'Trebuchet MS', Tahoma, sans-serif;
  text-shadow: 0 0 14px rgba(120, 150, 255, 0.7);
  opacity: 0;
  animation: csy-z 3s ease-in infinite;
  animation-delay: calc(var(--i) * 1s);
}
@keyframes csy-z {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5) rotate(-10deg); }
  25% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(4.5rem, -8rem) scale(1.3) rotate(12deg); }
}
.csy-nap-led {
  position: absolute;
  right: 1.4rem;
  bottom: 1.4rem;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff2c0, #ffb020 60%, #b06a00);
  box-shadow: 0 0 12px #ffb020, 0 0 30px rgba(255, 170, 30, 0.5);
  animation: csy-breathe 3.4s ease-in-out infinite;
}
@keyframes csy-breathe { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
html[data-reduced-motion='on'] .csy-nap-z span { animation-duration: 6s; }

/* The troubleshooter's duck, crossing the desk. */
.csy-waddle {
  position: absolute;
  left: 0;
  bottom: 0.3rem;
  z-index: 1;
  width: 3.8rem;
  height: 3.8rem;
  pointer-events: none;
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.35));
}
.csy-waddle-bob { display: block; width: 100%; height: 100%; animation: csy-bob 0.42s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes csy-bob { 0%, 100% { transform: translateY(0) rotate(-7deg); } 50% { transform: translateY(-0.4rem) rotate(7deg); } }
html[data-reduced-motion='on'] .csy-waddle-bob { animation: none; }

.csy-veil { position: absolute; left: 0; top: 0; pointer-events: none; }

/* ═════════════════════════ the control kit (Luna) ═════════════════════════ */
.csy-app {
  --csy-spring: cubic-bezier(.2, 1.6, .4, 1);
  --csy-ink: #000;
  --csy-link: #0b3dbc;
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  background: var(--cs-face);
  color: var(--csy-ink);
  font-size: 0.9375rem;
  line-height: 1.35;
  outline: none;
}
.csy-app input, .csy-app textarea { user-select: text; -webkit-user-select: text; }
.csy-ico { display: inline-block; flex: none; width: 1.6rem; height: 1.6rem; }
.csy-ico.is-big { width: 2.6rem; height: 2.6rem; }
.csy-row { display: flex; align-items: center; gap: 0.5rem; }
.csy-row.csy-wrap { flex-wrap: wrap; }
.csy-row.csy-end { justify-content: flex-end; flex-wrap: wrap; }
.csy-row.csy-split { align-items: stretch; flex-wrap: wrap; }
.csy-row.csy-split > * { flex: 1 1 14rem; }
.csy-col { display: flex; flex-direction: column; gap: 0.45rem; }
.csy-grow { flex: 1; min-width: 0; }
.csy-label { flex: none; color: #000; font-size: 0.9375rem; }
.csy-value { font-weight: 700; }
.csy-note { margin: 0; color: #3b3b3b; font-size: 0.9375rem; line-height: 1.4; }
.csy-center { text-align: center; }
.csy-field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.csy-form { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: 0.55rem 0.7rem; }

.csy-btn { min-height: 2.3rem; padding: 0.2rem 1rem; font-size: 0.9375rem; white-space: nowrap; }
.csy-btn:disabled { color: #a3a198; border-color: #c9c7ba; background: linear-gradient(180deg, #fbfaf6, #ecebe3); box-shadow: none; }

.csy-group { min-width: 0; margin: 0; padding: 0.55rem 0.8rem 0.75rem; border: 1px solid #d0d0bf; border-radius: 4px; display: flex; flex-direction: column; gap: 0.6rem; }
.csy-group legend { padding: 0 0.3rem; color: #0046d5; font-size: 0.9375rem; }

/* Check boxes and radio buttons. */
.csy-check, .csy-radio {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.2rem;
  padding: 0.15rem 0.3rem 0.15rem 0.1rem;
  border: 0;
  border-radius: 3px;
  background: none;
  color: #000;
  font-size: 0.9375rem;
  text-align: left;
  transition: transform 140ms var(--csy-spring);
  transform-origin: 0.6rem 50%;
}
.csy-check:focus-visible, .csy-radio:focus-visible { outline: 1px dotted #000; }
.csy-check.is-pressed, .csy-radio.is-pressed { transform: scale(1.05); }
.csy-check-box, .csy-radio-dot {
  position: relative;
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  border: 1px solid #1c5180;
  background: linear-gradient(135deg, #dcdcd7, #ffffff);
}
.csy-check-box { border-radius: 2px; }
.csy-radio-dot { border-radius: 50%; background: radial-gradient(circle at 60% 60%, #ffffff, #dcdcd7); }
.csy-check:hover .csy-check-box, .csy-radio:hover .csy-radio-dot { box-shadow: inset 0 0 0 2px #fbc761; }
.csy-check[aria-checked='true'] .csy-check-box::after {
  content: '';
  position: absolute;
  left: 30%;
  top: 8%;
  width: 30%;
  height: 58%;
  border: solid #21a121;
  border-width: 0 0.2rem 0.2rem 0;
  transform: rotate(40deg);
}
.csy-radio[aria-checked='true'] .csy-radio-dot::after {
  content: '';
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #a8f0a0, #2fb82f 55%, #1a7d1a);
}
.csy-radio-label small { display: block; color: #555; font-size: 0.875rem; }
.csy-radios { display: flex; flex-direction: column; gap: 0.1rem; }

/* Sliders: the XP trackbar, with a fat touch rail. */
.csy-slider { --k: 0; display: flex; align-items: center; gap: 0.7rem; min-width: 0; outline: none; touch-action: none; }
.csy-slider-end { flex: none; color: #222; font-size: 0.9375rem; }
.csy-slider-rail { position: relative; flex: 1; min-width: 6rem; height: 2.75rem; cursor: pointer; }
.csy-slider-track {
  position: absolute;
  left: 0.55rem;
  right: 0.55rem;
  top: 0.95rem;
  height: 0.32rem;
  overflow: hidden;
  border-radius: 2px;
  background: #ecebe5;
  box-shadow: inset 1px 1px 0 #9d9c99, inset -1px -1px 0 #fff;
}
.csy-slider-fill { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--k)); background: linear-gradient(90deg, #6aa0f0, #2f74e0); opacity: 0.55; }
.csy-slider-ticks { position: absolute; left: 0.55rem; right: 0.55rem; top: 1.75rem; display: flex; justify-content: space-between; }
.csy-slider-ticks i { width: 1px; height: 0.45rem; background: #8a8a86; }
.csy-slider-thumb {
  position: absolute;
  left: calc(0.55rem + var(--k) * (100% - 1.1rem));
  top: 0.38rem;
  width: 1.1rem;
  height: 1.45rem;
  margin-left: -0.55rem;
  border: 1px solid #1c5180;
  background: linear-gradient(180deg, #ffffff, #e6e6e0 70%, #cfd2c8);
  clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%);
  border-radius: 3px 3px 0 0;
  box-shadow: inset 0 -3px 0 #21a121;
  transition: transform 140ms var(--csy-spring);
}
.csy-slider:hover .csy-slider-thumb, .csy-slider:focus-visible .csy-slider-thumb { box-shadow: inset 0 -3px 0 #fbc761, inset 0 3px 0 #fbc761; }
.csy-slider.is-dragging .csy-slider-thumb { transform: scale(1.25); }
.csy-slider.is-danger .csy-slider-thumb { box-shadow: inset 0 -3px 0 #e8471c, 0 0 10px #ff7a2a; background: linear-gradient(180deg, #fff6c2, #ffb020 70%, #e0571c); }

/* Drop-downs. */
.csy-select {
  display: inline-flex;
  align-items: center;
  min-width: 9rem;
  min-height: 2.25rem;
  padding: 0 0 0 0.55rem;
  border: 1px solid #7f9db9;
  border-radius: 0;
  background: #fff;
  color: #000;
  font-size: 0.9375rem;
  text-align: left;
  transition: transform 120ms var(--csy-spring);
  transform-origin: 30% 50%;
}
.csy-select.is-pressed { transform: scale(1.04); }
.csy-select:focus-visible { outline: 1px dotted #000; outline-offset: 2px; }
.csy-select-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csy-select-arrow {
  position: relative;
  flex: none;
  align-self: stretch;
  width: 1.6rem;
  margin: 1px;
  border: 1px solid #b6c9f6;
  border-radius: 2px;
  background: linear-gradient(180deg, #e3ebfe, #c6d6fc 50%, #b3c8fb);
}
.csy-select-arrow::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.4rem;
  height: 0.4rem;
  border: solid #4d6185;
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -70%) rotate(45deg);
}
.csy-select:hover .csy-select-arrow, .csy-select.is-open .csy-select-arrow { background: linear-gradient(180deg, #f2f6ff, #d4e2ff 50%, #c1d4ff); }
.csy-select-list {
  position: absolute;
  z-index: 30;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid #000;
  background: #fff;
  box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.35);
}
.csy-select-item {
  flex: none;
  min-height: 2.2rem;
  padding: 0.15rem 0.7rem;
  border: 0;
  background: none;
  color: #000;
  font-size: 0.9375rem;
  text-align: left;
  white-space: nowrap;
  transition: transform 120ms var(--csy-spring);
  transform-origin: 10% 50%;
}
.csy-select-item:hover, .csy-select-item:focus-visible, .csy-select-item.is-on { background: var(--cs-select); color: #fff; outline: none; }
.csy-select-item.is-pressed { transform: scale(1.04); }

/* List boxes. */
.csy-lb {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid #7f9db9;
  background: #fff;
  outline: none;
  scrollbar-width: thin;
}
.csy-lb:focus-visible { box-shadow: 0 0 0 1px #316ac5; }
.csy-lb-row {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.6rem;
  padding: 0.25rem 0.5rem;
  border: 0;
  background: none;
  color: #000;
  font-size: 0.9375rem;
  text-align: left;
  transition: transform 120ms var(--csy-spring);
  transform-origin: 10% 50%;
}
.csy-lb-row:hover:not(.is-on) { background: #eef3fd; }
.csy-lb-row.is-on { background: var(--cs-select); color: #fff; }
.csy-lb-row.is-pressed { transform: scale(1.03); }
.csy-lb-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* A wallpaper swatch: a real-size wall scaled into a 54 × 34 frame. */
.csy-thumb { position: relative; flex: none; width: 54px; height: 34px; overflow: hidden; border: 1px solid #5e6f8c; background: #000; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
.csy-thumb .csy-wall { position: absolute; left: 0; top: 0; width: 800px; height: 504px; transform: scale(0.0675); transform-origin: 0 0; }

/* Progress bars: white backfill leads, the green blocks catch up. */
.csy-prog {
  --b: 0;
  --p: 0;
  position: relative;
  height: 1.4rem;
  overflow: hidden;
  border: 1px solid #686868;
  border-radius: 3px;
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18);
}
.csy-prog-back, .csy-prog-fill { position: absolute; inset: 2px; }
.csy-prog-back {
  background: #fff;
  box-shadow: 0 0 8px #fff;
  clip-path: inset(0 calc((1 - var(--b)) * 100%) 0 0);
  transition: clip-path 160ms ease-out;
}
.csy-prog-fill {
  background:
    repeating-linear-gradient(90deg, transparent 0 0.6rem, #fff 0.6rem calc(0.6rem + 2px)),
    linear-gradient(180deg, #e2fbe2 0%, #7de57d 22%, #33c033 52%, #22a822 78%, #6bd86b 100%);
  clip-path: inset(0 calc((1 - var(--p)) * 100%) 0 0);
  transition: clip-path 420ms cubic-bezier(.3, .9, .3, 1);
}
.csy-prog.is-instant .csy-prog-back, .csy-prog.is-instant .csy-prog-fill { transition: none; }
.csy-prog.is-bad .csy-prog-fill { background: repeating-linear-gradient(90deg, transparent 0 0.6rem, #fff 0.6rem calc(0.6rem + 2px)), linear-gradient(180deg, #ffe0d8, #ff8a6a 30%, #e0392b 60%, #ff7a62); }

/* Task-pane links. */
.csy-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.1rem;
  padding: 0.1rem 0.2rem;
  border: 0;
  background: none;
  color: var(--csy-link);
  font-size: 0.9375rem;
  text-align: left;
  transition: transform 140ms var(--csy-spring);
  transform-origin: 0.8rem 50%;
}
.csy-link:hover span { text-decoration: underline; color: #2a6cf0; }
.csy-link:focus-visible { outline: 1px dotted #000; }
.csy-link.is-pressed { transform: scale(1.06); }
.csy-link-ico { flex: none; width: 1.5rem; height: 1.5rem; }

.csy-input {
  min-width: 0;
  min-height: 2.25rem;
  padding: 0.2rem 0.5rem;
  border: 1px solid #7f9db9;
  border-radius: 0;
  background: #fff;
  color: #000;
  font: inherit;
  font-size: 1rem;
  outline: none;
}
.csy-input:focus { box-shadow: 0 0 0 1px #316ac5; }

/* ═════════════════════════ windows: property sheets and message boxes ═════════════════════════ */
/* Each window's body is the size container its app's layouts query. */
.csy-win .cs-app-body { background: var(--cs-face); container-type: inline-size; }
.csy-ps { padding: 0.6rem 0.65rem 0.7rem; }
.csy-tabs {
  position: relative;
  z-index: 1;
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: 1px;
  margin-bottom: -1px;
  padding: 0 0.3rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.csy-tabs::-webkit-scrollbar { display: none; }
.csy-tab {
  flex: none;
  min-height: 2.25rem;
  margin-top: 4px;
  padding: 0 0.9rem;
  border: 1px solid #919b9c;
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #fefefe, #f2f1ec 60%, #e3e2da);
  color: #000;
  font-size: 0.9375rem;
  white-space: nowrap;
  transition: transform 140ms var(--csy-spring);
  transform-origin: 50% 100%;
}
.csy-tab:hover:not(.is-on) { box-shadow: inset 0 2px 0 #ffc83c; }
.csy-tab.is-on { min-height: calc(2.25rem + 4px); margin-top: 0; background: #fcfcfe; box-shadow: inset 0 3px 0 #f5a634; }
.csy-tab.is-pressed { transform: scale(1.06); }
.csy-tab:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }
.csy-ps-body {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  overflow: hidden;
  border: 1px solid #919b9c;
  background: linear-gradient(180deg, #fcfcfe, #f4f3ee);
}
.csy-ps-panel { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.8rem; padding: 0.9rem 1rem 1rem; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.csy-ps-panel[hidden] { display: none; }
.csy-ps-foot { flex: none; display: flex; justify-content: flex-end; gap: 0.45rem; padding-top: 0.6rem; }
.csy-ps-foot .csy-btn { min-width: 5.6rem; }

.csy-msg { padding: 1.05rem 1.05rem 0.95rem; }
.csy-msg-main { display: flex; align-items: flex-start; gap: 0.95rem; }
.csy-msg-ico { width: 2.7rem; height: 2.7rem; filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.25)); }
.csy-msg-text { margin: 0.2rem 0 0; font-size: 0.9375rem; line-height: 1.45; }
.csy-msg-main > .csy-field { flex: 1; }
.csy-msg-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 1.05rem; }
.csy-msg-btns .csy-btn { min-width: 5.6rem; }

/* ═════════════════════════ Display Properties ═════════════════════════ */
.csy-mon { --ar: 1.6; flex: none; align-self: center; display: flex; flex-direction: column; align-items: center; width: min(16rem, 70%); }
.csy-mon-bezel {
  position: relative;
  width: 100%;
  padding: 0.65rem 0.65rem 1.45rem;
  border: 1px solid #8f8670;
  border-radius: 0.7rem 0.7rem 0.5rem 0.5rem;
  background: linear-gradient(180deg, #f8f5ea 0%, #e2dbc7 55%, #cbc2a8 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 3px rgba(0, 0, 0, 0.14), 0 4px 10px rgba(40, 30, 0, 0.28);
}
.csy-mon-screen {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ar);
  overflow: hidden;
  border-radius: 3px;
  background: #000;
  box-shadow: 0 0 0 2px #2b2b2b, 0 0 0 3px #77705b;
}
.csy-mon-led {
  position: absolute;
  right: 1.05rem;
  bottom: 0.5rem;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #c8ffc0, #2ecc40 60%, #138a22);
  box-shadow: 0 0 6px #3dff6a;
}
.csy-mon-neck { width: 3.6rem; height: 0.85rem; background: linear-gradient(90deg, #bdb398, #e9e3d1 50%, #b4aa8e); clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%); }
.csy-mon-foot { width: 8.5rem; height: 0.7rem; border-radius: 0.4rem 0.4rem 0.2rem 0.2rem; background: linear-gradient(180deg, #efe9d8, #c4bba1); box-shadow: 0 3px 4px rgba(40, 30, 0, 0.3); }
.csy-mon-glare { position: absolute; inset: 0; background: linear-gradient(125deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.05) 36%, transparent 37%); pointer-events: none; }
.csy-mon-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.csy-mon-saver { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.csy-mon-saver[hidden], .csy-replica[hidden] { display: none; }
.csy-replica { position: absolute; left: 0; top: 0; overflow: hidden; transform-origin: 0 0; pointer-events: none; }
.csy-replica .csy-replica-wall { position: absolute; inset: 0; }
.csy-replica .cs-taskbar { position: absolute; left: 0; right: 0; bottom: 0; }
.csy-replica[data-colors='medium'] { filter: saturate(0.9) contrast(1.06); }
.csy-replica[data-colors='low'] { filter: saturate(1.7) contrast(1.4); }
.csy-replica[data-colors='crayon'] { filter: saturate(2.6) contrast(1.7) hue-rotate(-14deg) blur(0.6px); }

.csy-display .csy-ps-panel { gap: 0.9rem; }
.csy-wall-row { align-items: stretch; flex: 1 1 auto; min-height: 9.5rem; }
.csy-walls { flex: 1; min-height: 7rem; }
.csy-side-btns { justify-content: flex-start; padding-top: 1.55rem; }
.csy-side-btns .csy-btn { min-width: 7.5rem; }
.csy-res-label { align-self: center; color: #0b3dbc; font-size: 1rem; }
.csy-display .csy-group .csy-row > .csy-select { min-width: 10rem; }

/* Appearance: an inactive window, an active one and a message box over the desk. */
.csy-scheme { position: relative; flex: none; height: 13rem; overflow: hidden; border: 1px solid #7f9db9; background: var(--csy-wp-teal); }
.csy-scheme .csy-fake { position: absolute; width: 62%; pointer-events: none; }
.csy-scheme .csy-fake .cs-win-body { padding: 0.5rem 0.7rem; }
.csy-scheme .csy-fake.is-back { left: 4%; top: 6%; height: 52%; }
.csy-scheme .csy-fake.is-front { left: 13%; top: 25%; width: 72%; height: 60%; }
.csy-scheme .csy-fake.is-msg { left: 47%; top: 55%; width: 46%; }
.csy-scheme .cs-win-x { pointer-events: none; }
.csy-fake-text { display: flex; flex-wrap: wrap; gap: 0.2rem 0.7rem; font-size: 0.9375rem; }
.csy-fake-text .is-dim { color: #9a9a90; }
.csy-fake-text .is-sel { padding: 0 0.3rem; background: var(--cs-select); color: #fff; }
.csy-fake-text p { flex-basis: 100%; margin: 0.35rem 0 0; padding: 0.4rem; border: 1px solid #7f9db9; background: #fff; }
.csy-fake-msg { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.csy-fake-msg p { margin: 0; font-size: 0.9375rem; }
.csy-fake-msg .cs-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 3.6rem; }
.csy-swatch { height: 1rem; border: 1px solid #7f9db9; background: linear-gradient(90deg, #ff2020, #ff9a20, #ffe620, #3cd23c, #20c8e6, #2f54ff, #b030e0); }
.csy-swatch[data-q='low'] { background: linear-gradient(90deg, #f00 0 14%, #f80 14% 28%, #ff0 28% 42%, #0c0 42% 57%, #0cc 57% 71%, #00f 71% 85%, #c0c 85%); }
.csy-swatch[data-q='crayon'] { background: repeating-linear-gradient(100deg, #e8402a 0 9px, #f7c21c 9px 17px, #3aa83a 17px 26px, #2f6ae0 26px 34px); filter: saturate(1.4); }
@container (max-width: 30rem) {
  .csy-ps { padding: 0.45rem 0.45rem 0.55rem; }
  .csy-tab { padding: 0 0.6rem; }
  .csy-ps-panel { padding: 0.75rem 0.7rem 0.9rem; }
  .csy-ps-foot .csy-btn { min-width: 0; flex: 1; }
}

/* ═════════════════════════ explorer chrome shared by Control Panel ═════════════════════════ */
.csy-toolbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.25rem 0.4rem;
  border-bottom: 1px solid #c9c5b4;
  background: linear-gradient(180deg, #fdfcf9 0%, #f3f1e8 55%, #e2dfd0 100%);
  box-shadow: inset 0 1px 0 #fff;
}
.csy-nav {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.6rem;
  padding: 0.2rem 0.65rem 0.2rem 0.3rem;
  border: 1px solid transparent;
  border-radius: 4px;
  background: none;
  color: #1b1b1b;
  font-size: 0.9375rem;
  transition: transform 120ms var(--csy-spring), background-color 120ms;
}
.csy-nav:hover:not(:disabled) { border-color: #cbc6b2; background: linear-gradient(#fff, #f1efe6); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); }
.csy-nav.is-pressed { transform: scale(1.1); }
.csy-nav:disabled { color: #9b9b9b; }
.csy-nav:disabled .csy-nav-ico { filter: grayscale(1) opacity(0.45); }
.csy-nav-ico { flex: none; width: 2rem; height: 2rem; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.28)); }
.csy-tsep { align-self: stretch; width: 1px; margin: 0.35rem 0.25rem; background: #c9c5b4; box-shadow: 1px 0 0 #fff; }
.csy-addr { flex: none; display: flex; align-items: center; gap: 0.45rem; padding: 0.25rem 0.45rem; border-bottom: 1px solid #c9c5b4; background: var(--cs-face); }
.csy-addr .csy-label { color: #6d6d6d; }
.csy-addr-field { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.4rem; min-height: 2rem; padding: 0 0.45rem; border: 1px solid #7f9db9; background: #fff; }
.csy-addr-ico { flex: none; width: 1.25rem; height: 1.25rem; }
.csy-addr-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ═════════════════════════ Control Panel ═════════════════════════ */
.csy-cp { background: #fff; }
.csy-cp-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 14.5rem minmax(0, 1fr); }
.csy-pane {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-height: 0;
  padding: 0.85rem 0.75rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-right: 1px solid #4b5fb8;
  background: linear-gradient(180deg, #7ba2e7 0%, #6a8ae0 50%, #6375d6 100%);
}
.csy-pane-group { flex: none; border-radius: 0.4rem 0.4rem 0 0; box-shadow: 0 1px 3px rgba(18, 38, 120, 0.35); }
.csy-pane-group h3 {
  display: flex;
  align-items: center;
  min-height: 1.95rem;
  margin: 0;
  padding: 0.2rem 0.75rem;
  border-radius: 0.4rem 0.4rem 0 0;
  background: linear-gradient(90deg, #ffffff 0%, #ffffff 30%, #c6d3f7 100%);
  color: #215dc6;
  font-size: 0.9375rem;
  font-weight: 700;
}
.csy-pane-group.is-main h3 { background: linear-gradient(90deg, #0b49c4 0%, #2f6fdc 60%, #5a91ea 100%); color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); }
.csy-pane-body { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.4rem 0.5rem; border: 1px solid #fff; border-top: 0; background: #d6dff7; }
.csy-pane .csy-link { --csy-link: #0c32a8; }
.csy-cp-scroll { position: relative; min-height: 0; overflow-y: auto; overscroll-behavior: contain; background: #fff; }
.csy-cp-mode { display: none; padding: 0.5rem 1rem 0; }
.csy-cp-page { padding: 1.15rem 1.4rem 1.6rem; }
.csy-cp-title { margin: 0 0 1rem; color: #1d4fa8; font: 700 1.55rem/1.2 'Trebuchet MS', Tahoma, sans-serif; }
.csy-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.35rem 1rem; }
.csy-cat {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 4.1rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid transparent;
  border-radius: 0.45rem;
  background: none;
  color: #0b3dbc;
  font-size: 1rem;
  line-height: 1.25;
  text-align: left;
  transition: transform 140ms var(--csy-spring), background-color 140ms;
  transform-origin: 2rem 50%;
}
.csy-cat:hover, .csy-cat:focus-visible { border-color: #b9cdf3; background: linear-gradient(180deg, #f5f8ff, #e2ebfd); outline: none; }
.csy-cat:hover .csy-cat-name { text-decoration: underline; }
.csy-cat.is-pressed { transform: scale(1.05); }
.csy-cat-ico { flex: none; width: 3.1rem; height: 3.1rem; filter: drop-shadow(1px 2px 1.5px rgba(0, 0, 0, 0.3)); }
.csy-cat-head { display: flex; align-items: center; gap: 0.85rem; margin: -1.15rem -1.4rem 0.6rem; padding: 0.9rem 1.4rem; border-bottom: 1px solid #b9cdf3; background: linear-gradient(180deg, #f2f6fe, #dbe6fb); }
.csy-cat-head-ico { flex: none; width: 3.5rem; height: 3.5rem; filter: drop-shadow(1px 2px 1.5px rgba(0, 0, 0, 0.3)); }
.csy-cat-head h1 { margin: 0; color: #1d4fa8; font: 700 1.4rem/1.2 'Trebuchet MS', Tahoma, sans-serif; }
.csy-cp-sub { margin: 1.1rem 0 0.45rem; padding-bottom: 0.3rem; border-bottom: 1px solid #d6dff7; color: #1d4fa8; font-size: 1.05rem; }
.csy-tasks { display: flex; flex-direction: column; gap: 0.05rem; }
.csy-task {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.45rem;
  padding: 0.15rem 0.4rem;
  border: 0;
  border-radius: 3px;
  background: none;
  color: #0b3dbc;
  font-size: 0.9375rem;
  text-align: left;
  transition: transform 140ms var(--csy-spring);
  transform-origin: 1rem 50%;
}
.csy-task:hover span, .csy-task:focus-visible span { text-decoration: underline; outline: none; }
.csy-task.is-pressed { transform: scale(1.05); }
.csy-task-arrow {
  position: relative;
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #a6f08a, #3cad37 55%, #1d6b1d);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
.csy-task-arrow::after { content: ''; position: absolute; left: 30%; top: 30%; width: 32%; height: 32%; border: solid #fff; border-width: 2px 2px 0 0; transform: rotate(45deg); }
.csy-applets { display: flex; flex-wrap: wrap; gap: 0.5rem 0.7rem; }
.csy-applet {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  width: 7.8rem;
  min-height: 6.6rem;
  padding: 0.5rem 0.3rem;
  border: 1px solid transparent;
  border-radius: 0.4rem;
  background: none;
  color: #000;
  font-size: 0.9375rem;
  line-height: 1.25;
  text-align: center;
  transition: transform 140ms var(--csy-spring), background-color 140ms;
}
.csy-applet:hover, .csy-applet:focus-visible { border-color: #c6d6f7; background: #eef3fd; outline: none; }
.csy-applet.is-pressed { transform: scale(1.08); }
.csy-applet-ico { width: 3.3rem; height: 3.3rem; filter: drop-shadow(1px 2px 1.5px rgba(0, 0, 0, 0.3)); }
@container (max-width: 38rem) {
  .csy-cp-body { grid-template-columns: minmax(0, 1fr); }
  .csy-pane { display: none; }
  .csy-cp-mode { display: block; }
  .csy-nav-label { display: none; }
  .csy-cp-page { padding: 0.8rem 0.9rem 1.4rem; }
  .csy-cat-head { margin: -0.8rem -0.9rem 0.5rem; padding: 0.8rem 0.9rem; }
  .csy-cats { grid-template-columns: minmax(0, 1fr); }
  .csy-applet { width: calc(50% - 0.4rem); }
}

/* ═════════════════════════ applets ═════════════════════════ */
.csy-indent { padding-left: 1.8rem; }
.csy-slider.is-off { opacity: 0.45; pointer-events: none; }
.csy-speed-word, .csy-size-name { align-self: center; color: #0b3dbc; font-size: 1.05rem; transition: color 200ms; }
.csy-speed-word.is-hot { color: #e0571c; text-shadow: 0 0 10px rgba(255, 140, 40, 0.65); }
.csy-btn-big { min-height: 2.8rem; padding: 0.2rem 1.4rem; font-size: 1rem; font-weight: 700; }

/* Mouse: the double-click test folder, the pointer schemes. */
.csy-dbl-row { align-items: center; }
.csy-dbl { position: relative; flex: none; width: 5.4rem; height: 5.4rem; border: 1px solid #c6d6f7; border-radius: 0.5rem; background: linear-gradient(180deg, #fff, #eef3fd); transition: transform 140ms var(--csy-spring); }
.csy-dbl.is-pressed { transform: scale(1.06); }
.csy-dbl-folder { position: absolute; inset: 14%; }
.csy-dbl-duck { position: absolute; left: 24%; top: 22%; width: 52%; height: 52%; opacity: 0; transform: translateY(18%) scale(0.5); transition: transform 320ms var(--csy-spring), opacity 180ms; }
.csy-dbl.is-open .csy-dbl-duck { opacity: 1; transform: translateY(-62%) scale(1); }
.csy-cur-row { align-items: stretch; flex: 1; min-height: 0; }
.csy-cur-list { flex: 1; min-height: 11rem; }
.csy-cur-thumb { flex: none; width: 1.7rem; height: 1.7rem; }
.csy-cur-thumb svg, .csy-cur-preview svg { display: block; width: 100%; height: 100%; }
.csy-cur-preview {
  flex: none;
  align-self: flex-start;
  width: 5.4rem;
  height: 5.4rem;
  margin-top: 1.55rem;
  padding: 1.1rem;
  border: 1px solid #7f9db9;
  background: repeating-conic-gradient(#f1f4fa 0 25%, #fff 0 50%) 0 0 / 1rem 1rem;
}

/* Add or Remove Snacks. */
.csy-arp { flex-direction: row; background: #fff; }
.csy-arp-bar { flex: none; display: flex; flex-direction: column; gap: 0.3rem; width: 8.4rem; padding: 0.5rem 0.35rem; border-right: 1px solid #3a56b0; background: linear-gradient(180deg, #7095e6, #4a6bd0); }
.csy-arp-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  min-height: 5.8rem;
  padding: 0.5rem 0.3rem;
  border: 1px solid transparent;
  border-radius: 0.4rem;
  background: none;
  color: #fff;
  font-size: 0.875rem;
  line-height: 1.2;
  text-align: center;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
  transition: transform 140ms var(--csy-spring), background-color 140ms;
}
.csy-arp-nav:hover { border-color: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.14); }
.csy-arp-nav.is-on { border-color: #fff; background: linear-gradient(180deg, #f8faff, #d8e4fb); color: #0b3dbc; text-shadow: none; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
.csy-arp-nav.is-pressed { transform: scale(1.06); }
.csy-arp-nav-ico { width: 2.7rem; height: 2.7rem; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)); }
.csy-arp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.csy-arp-page { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.csy-arp-head { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 0.8rem; padding: 0.6rem 0.85rem; border-bottom: 1px solid #d6dff7; background: linear-gradient(180deg, #fff, #eef3fd); font-size: 0.9375rem; }
.csy-arp-sort { display: flex; align-items: center; gap: 0.45rem; }
.csy-arp-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0.3rem; }
.csy-arp-row { display: flex; gap: 0.75rem; padding: 0.45rem 0.6rem; overflow: hidden; border-radius: 3px; outline: none; transition: background-color 120ms; }
.csy-arp-row:hover:not(.is-on) { background: #f1f5fd; }
.csy-arp-row.is-on { background: linear-gradient(180deg, #d3e1fb, #b4cbf5); box-shadow: inset 0 0 0 1px #7da2e8; }
.csy-arp-ico { flex: none; width: 2.5rem; height: 2.5rem; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25)); }
.csy-arp-info { flex: 1; min-width: 0; }
.csy-arp-line { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; min-height: 2.5rem; }
.csy-arp-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9375rem; }
.csy-arp-size { flex: none; font-size: 0.9375rem; }
.csy-arp-size small { color: #555; font-size: 0.875rem; }
.csy-arp-more { display: none; flex-wrap: wrap; align-items: center; gap: 0.3rem 1.1rem; padding-bottom: 0.15rem; color: #2b2b2b; font-size: 0.875rem; }
.csy-arp-row.is-on .csy-arp-more { display: flex; }
.csy-arp-btns { display: flex; gap: 0.4rem; margin-left: auto; }
.csy-arp-foot { flex: none; display: flex; justify-content: flex-end; align-items: baseline; gap: 0.5rem; padding: 0.55rem 0.85rem; border-top: 1px solid #d6dff7; background: #f6f8fd; font-size: 0.9375rem; }
.csy-arp-total { color: #0b3dbc; font-size: 1.05rem; }
.csy-arp-empty { margin: 0; padding: 1.6rem; color: #555; text-align: center; }
.csy-arp-cards { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); align-content: start; gap: 0.75rem; padding: 0.85rem; }
.csy-arp-card { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding: 0.8rem 0.5rem; border: 1px solid #c6d6f7; border-radius: 0.45rem; background: linear-gradient(180deg, #fff, #eef3fd); font-size: 0.9375rem; text-align: center; }
.csy-arp-card small { color: #555; font-size: 0.875rem; }
.csy-arp-disc {
  position: relative;
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  background:
    radial-gradient(circle, #fff 0 13%, #9fb0c4 14% 16%, transparent 17%),
    conic-gradient(from 30deg, #f6d9ff, #c9f0ff, #fff6c2, #ffd6e6, #d9e4f2, #f6d9ff);
  box-shadow: inset 0 0 0 1px #8a99ae, 0 2px 4px rgba(0, 0, 0, 0.25);
}
.csy-arp-disc i { position: absolute; right: -14%; bottom: -10%; width: 58%; height: 58%; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3)); }
.csy-arp-veil { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(20, 30, 70, 0.35); }
.csy-arp-sheet { display: flex; flex-direction: column; gap: 0.75rem; width: min(27rem, 100%); padding: 0.95rem 1.05rem 1.05rem; border: 3px solid #0a3ed6; border-radius: 0.5rem; background: var(--cs-face); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); }
.csy-arp-sheet-head { display: flex; align-items: center; gap: 0.65rem; font-size: 1.1rem; }
.csy-arp-sheet-ico { flex: none; width: 2.8rem; height: 2.8rem; }
.csy-arp-sheet.is-sad .csy-arp-sheet-ico { animation: csy-sob 0.45s ease-in-out infinite alternate; }
@keyframes csy-sob { from { transform: rotate(-6deg) scale(0.96); } to { transform: rotate(6deg) scale(1.02); } }
.csy-arp-status { margin: 0; min-height: 2.9em; font-size: 0.9375rem; line-height: 1.45; }
.csy-arp-sheet-btns { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; }
.csy-arp-sheet-btns:empty { display: none; }
html[data-reduced-motion='on'] .csy-arp-sheet-ico { animation: none; }
@container (max-width: 34rem) {
  .csy-arp { flex-direction: column; }
  .csy-arp-bar { flex-direction: row; width: auto; padding: 0.35rem; border-right: 0; border-bottom: 1px solid #3a56b0; }
  .csy-arp-nav { flex: 1; flex-direction: row; justify-content: center; min-height: 3.2rem; }
  .csy-arp-nav-ico { width: 2rem; height: 2rem; }
}

/* Date and Time. */
.csy-date-row > .csy-group { align-items: center; }
.csy-cal-head { display: flex; align-items: center; justify-content: space-between; align-self: stretch; }
.csy-cal-title { color: #1d4fa8; font-size: 1rem; }
.csy-cal-nav { width: 2.5rem; height: 2.5rem; border: 1px solid #c6d6f7; border-radius: 50%; background: linear-gradient(180deg, #fff, #e3ecfd); color: #1d4fa8; font-size: 1.4rem; line-height: 1; transition: transform 140ms var(--csy-spring); }
.csy-cal-nav.is-pressed { transform: scale(1.15); }
.csy-cal-grid { display: grid; grid-template-columns: repeat(7, 2.1rem); gap: 0.15rem; justify-content: center; border: 1px solid #7f9db9; padding: 0.3rem; background: #fff; }
.csy-cal-grid > * { display: flex; align-items: center; justify-content: center; height: 1.85rem; font-size: 0.875rem; font-style: normal; }
.csy-cal-dow { color: #1d4fa8; font-weight: 700; }
.csy-cal-day { border-radius: 3px; }
.csy-cal-day.is-today { background: var(--cs-select); color: #fff; font-weight: 700; box-shadow: 0 0 0 2px #fbc761; }
.csy-clock { width: 10rem; height: 10rem; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.3)); }
.csy-clock svg { display: block; width: 100%; height: 100%; overflow: visible; }
.csy-clock-rim { fill: url(#cs-steel); stroke: #55606e; stroke-width: 1; }
.csy-clock-face { fill: url(#csy-face); stroke: #9aa4b6; stroke-width: 0.5; }
.csy-clock .is-hour { stroke: #1c1c1c; stroke-width: 1.6; }
.csy-clock .is-min { stroke: #8a94a3; stroke-width: 0.6; }
.csy-clock text { fill: #1c2a4a; font: 700 7px Tahoma, Verdana, sans-serif; text-anchor: middle; }
.csy-clock .csy-cookie { display: none; fill: #d9a35a; stroke: #9a6224; stroke-width: 0.8; }
.csy-clock .csy-clock-snack { display: none; fill: #c25c00; font-size: 7.5px; letter-spacing: 0.08em; }
.csy-clock.is-snack text { display: none; }
.csy-clock.is-snack .csy-cookie, .csy-clock.is-snack .csy-clock-snack { display: inline; }
.csy-clock-h, .csy-clock-m, .csy-clock-s { transform-box: view-box; transform-origin: 50px 50px; stroke-linecap: round; }
.csy-clock-h { stroke: #1c1c1c; stroke-width: 3.2; }
.csy-clock-m { stroke: #1c1c1c; stroke-width: 2.2; }
.csy-clock-s { stroke: #e0392b; stroke-width: 0.9; }
.csy-clock-pin { fill: #e0392b; stroke: #8a1414; stroke-width: 0.6; }
.csy-clock-digital { color: #1d2f6a; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.csy-map { position: relative; height: 10rem; overflow: hidden; border: 1px solid #7f9db9; }
.csy-map svg { display: block; width: 100%; height: 100%; }
.csy-map-band {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 9%;
  margin-left: -4.5%;
  border-inline: 1px dashed rgba(255, 255, 255, 0.75);
  background: linear-gradient(90deg, transparent, rgba(255, 240, 140, 0.6), transparent);
  transition: left 650ms cubic-bezier(.3, 1.3, .5, 1);
}

/* Power Options: a battery you can feed. */
.csy-battery-wrap { min-width: 9rem; }
.csy-prog.csy-battery { height: 1.9rem; border-radius: 0.35rem; }
.csy-battery-pct { min-width: 3.2rem; color: #1f8a24; font-size: 1.15rem; text-align: right; }

/* Users: pick a duck. */
.csy-users { background: #fff; }
.csy-users-head { flex: none; display: flex; align-items: center; gap: 1rem; padding: 0.9rem 1.2rem; border-bottom: 1px solid #0e2a78; background: linear-gradient(180deg, #3a72e0, #1d47b8); color: #fff; }
.csy-users-head b { display: block; font-size: 1.4rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }
.csy-users-head small { color: #d6e4ff; font-size: 0.9375rem; }
.csy-users-face { flex: none; width: 4.6rem; height: 4.6rem; overflow: hidden; border: 3px solid #fff; border-radius: 0.5rem; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4); }
.csy-users-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0.9rem 1.2rem; }
.csy-users-title { margin: 0 0 0.8rem; color: #1d4fa8; font: 700 1.2rem 'Trebuchet MS', Tahoma, sans-serif; }
.csy-users-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.2rem, 1fr)); gap: 0.7rem; }
.csy-users-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding: 0.4rem; border: 2px solid transparent; border-radius: 0.5rem; background: none; color: #000; font-size: 0.875rem; transition: transform 140ms var(--csy-spring), border-color 140ms; }
.csy-users-tile:hover { border-color: #c6d6f7; background: #f3f7ff; }
.csy-users-tile.is-on { border-color: #316ac5; background: #e3ecfd; box-shadow: 0 0 0 3px rgba(49, 106, 197, 0.25); }
.csy-users-tile.is-on::after { content: ''; position: absolute; right: 0.2rem; top: 0.2rem; width: 1.35rem; height: 1.35rem; border: 2px solid #fff; border-radius: 50%; background: radial-gradient(circle at 40% 30%, #8af07a, #26a32b 60%, #17631a) ; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }
.csy-users-tile.is-pressed { transform: scale(1.08); }
.csy-users-art { width: 4.6rem; height: 4.6rem; overflow: hidden; border: 2px solid #fff; border-radius: 0.4rem; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); }
.csy-users-foot { flex: none; display: flex; justify-content: flex-end; padding: 0.55rem 0.8rem; border-top: 1px solid #d6dff7; background: var(--cs-face); }
.cs-menu-avatar[data-avatar] { padding: 0; overflow: hidden; }
.cs-menu-avatar[data-avatar] svg { display: block; width: 100%; height: 100%; }

/* System Properties. */
.csy-sys { align-items: flex-start; gap: 1.2rem; }
.csy-sys-logo { flex: none; width: 7rem; height: 7rem; padding: 0.8rem; border-radius: 50%; background: radial-gradient(circle, #fffbe0 0%, #ffe7a0 45%, rgba(255, 231, 160, 0) 70%); }
.csy-sys-block { display: flex; flex-direction: column; margin-bottom: 0.7rem; font-size: 0.9375rem; }
.csy-sys-block b { margin-bottom: 0.15rem; }
.csy-sys-block span { padding-left: 1rem; }
.csy-devs { position: relative; display: flex; flex-direction: column; max-height: 15rem; overflow-y: auto; border: 1px solid #7f9db9; background: #fff; }
.csy-dev { display: grid; grid-template-columns: 1.6rem 1fr; grid-template-rows: auto auto; column-gap: 0.55rem; padding: 0.35rem 0.6rem; font-size: 0.9375rem; }
.csy-dev + .csy-dev { border-top: 1px solid #eef1f6; }
.csy-dev-ico { grid-row: span 2; align-self: center; width: 1.6rem; height: 1.6rem; }
.csy-dev span { color: #444; font-size: 0.875rem; }
.csy-devs.is-scanning::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2.6rem; background: linear-gradient(180deg, transparent, rgba(80, 160, 255, 0.35), transparent); animation: csy-scan 0.9s linear infinite; }
@keyframes csy-scan { from { transform: translateY(-2.6rem); } to { transform: translateY(15rem); } }

/* Sounds. */
.csy-events-wrap { flex: 1; min-height: 0; }
.csy-events { flex: 1; min-height: 10rem; }
.csy-ev-ico { width: 1.4rem; height: 1.4rem; }

/* Network status. */
.csy-net-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 0.8rem; padding: 0.9rem 1rem 0; }
.csy-net .csy-ps-foot { padding: 0.6rem 1rem 0.8rem; }
.csy-net-field { display: grid; grid-template-columns: 6.5rem 1fr; font-size: 0.9375rem; }
.csy-net-act { display: flex; align-items: center; justify-content: space-around; gap: 1rem; }
.csy-net-col { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.csy-net-art { position: relative; width: 4rem; height: 4rem; }
.csy-net-pulse { position: absolute; left: 50%; top: 50%; width: 0.7rem; height: 0.7rem; margin: -0.35rem; border-radius: 50%; background: #5dff8f; box-shadow: 0 0 10px #3dff6a; animation: csy-pulse 1.1s ease-out infinite; }
@keyframes csy-pulse { from { transform: scale(0.5); opacity: 1; } to { transform: scale(3); opacity: 0; } }
.csy-net.is-off .csy-net-art { filter: grayscale(1) opacity(0.5); }
.csy-net.is-off .csy-net-pulse { display: none; }
html[data-reduced-motion='on'] .csy-net-pulse { animation-duration: 2.4s; }

/* Printers: a test page comes out of the front. */
.csy-prn-main { flex: 1; min-height: 0; display: flex; align-items: center; gap: 1.4rem; padding: 1rem 1.2rem 0; font-size: 0.9375rem; }
.csy-prn .csy-ps-foot { padding: 0.6rem 1rem 0.8rem; }
.csy-prn-name { font-size: 1.2rem; color: #1d4fa8; }
.csy-prn-status { color: #c25c00; }
.csy-prn-art { position: relative; flex: none; width: 9.5rem; height: 11rem; }
.csy-prn-art::before { content: ''; position: absolute; left: 22%; right: 22%; top: 0; height: 1.6rem; border: 1px solid #c9cfd8; background: linear-gradient(180deg, #fff, #eef1f5); transform: perspective(6rem) rotateX(25deg); }
.csy-prn-body {
  position: absolute;
  left: 0;
  right: 0;
  top: 1rem;
  height: 3.8rem;
  border: 1px solid #55606e;
  border-radius: 0.6rem;
  background: linear-gradient(180deg, #f6f8fa, #c9d0d8 60%, #8d97a4);
  box-shadow: inset 0 1px 0 #fff, 0 3px 6px rgba(0, 0, 0, 0.3);
}
.csy-prn-body::after { content: ''; position: absolute; left: 10%; right: 10%; bottom: 0.7rem; height: 0.35rem; border-radius: 0.2rem; background: #2b3440; }
.csy-prn-led { position: absolute; right: 0.7rem; top: 0.6rem; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #3fd23f; box-shadow: 0 0 6px #3fd23f; }
.csy-prn.is-printing .csy-prn-led { animation: csy-breathe 0.3s linear infinite; }
.csy-prn-slot { position: absolute; left: 13%; right: 13%; top: 4.1rem; height: 6.8rem; overflow: hidden; }
.csy-prn-paper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  height: 100%;
  padding: 0.5rem 0.4rem;
  background: linear-gradient(180deg, #fff, #f1f3f6);
  box-shadow: inset 0 0 0 1px #c9cfd8;
  color: #000;
  text-align: center;
  transform: translateY(-100%);
}
.csy-prn.is-printed .csy-prn-paper { transform: none; }
.csy-prn-paper b { font-size: 0.875rem; letter-spacing: 0.08em; }
.csy-prn-paper span { width: 2.2rem; height: 2.2rem; }
.csy-prn-paper small { font-size: 0.875rem; line-height: 1.15; }

/* Command Prompt and the Rubber Duck Debugger. */
.csy-cmd-win .cs-app-body { background: #000; }
.csy-cmd { background: #000; color: #c8c8c8; font: 1rem/1.4 'Lucida Console', 'Courier New', monospace; }
.csy-cmd-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 0.4rem 0.6rem; scrollbar-color: #555 #000; cursor: text; }
.csy-cmd-row { min-height: 1.4em; white-space: pre-wrap; overflow-wrap: anywhere; }
.csy-cmd-row.is-err { color: #ff9a8a; }
.csy-cmd-line { display: flex; flex-wrap: wrap; }
.csy-cmd-prompt { white-space: pre; }
.csy-cmd-input { flex: 1; min-width: 4rem; padding: 0; border: 0; background: transparent; color: #fff; font: inherit; outline: none; caret-color: #fff; }
.csy-dd { gap: 0.75rem; padding: 0.9rem; background: linear-gradient(180deg, #eaf6ff, #bfe3ff); }
.csy-dd-stage { display: flex; align-items: flex-end; gap: 0.7rem; }
.csy-dd-duck { flex: none; width: 5.6rem; height: 5.6rem; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.3)); transform-origin: 50% 90%; }
.csy-dd-duck.is-listening { animation: csy-tilt 0.6s ease-in-out infinite alternate; }
@keyframes csy-tilt { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
html[data-reduced-motion='on'] .csy-dd-duck.is-listening { animation: none; }
.csy-dd-bubble { position: relative; flex: 1; min-height: 3.6rem; margin-bottom: 2.2rem; padding: 0.7rem 0.9rem; border: 2px solid #2b3440; border-radius: 1rem; background: #fff; font-size: 1rem; line-height: 1.35; }
.csy-dd-bubble::before { content: ''; position: absolute; left: -0.75rem; bottom: 0.7rem; width: 1.1rem; height: 1.1rem; border: solid #2b3440; border-width: 0 0 2px 2px; background: #fff; transform: skewY(-35deg) rotate(10deg); }
.csy-dd-input { resize: none; min-height: 4.6rem; }

/* The little progress boxes. */
.csy-taskbox { gap: 0.55rem; flex: 1; }
.csy-task-status { min-height: 2.9em; }
.csy-taskbox .csy-prog { width: 100%; }

/* ═════════════════════════ Help and Support ═════════════════════════ */
.csy-help { background: #fff; }
.csy-help-top {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 0.8rem;
  padding: 0.35rem 0.7rem;
  border-bottom: 1px solid #0e2a78;
  background: linear-gradient(180deg, #3164dc 0%, #1d47b8 55%, #163a9a 100%);
}
.csy-help-navs { display: flex; gap: 0.15rem; }
.csy-hnav {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.6rem;
  padding: 0.2rem 0.65rem 0.2rem 0.3rem;
  border: 1px solid transparent;
  border-radius: 4px;
  background: none;
  color: #fff;
  font-size: 0.9375rem;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
  transition: transform 120ms var(--csy-spring), background-color 120ms;
}
.csy-hnav:hover:not(:disabled) { border-color: rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.14); }
.csy-hnav.is-pressed { transform: scale(1.1); }
.csy-hnav:disabled { opacity: 0.5; }
.csy-hnav-ico { flex: none; width: 1.95rem; height: 1.95rem; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35)); }
.csy-help-brand { display: flex; align-items: center; gap: 0.55rem; color: #fff; font: italic 700 1.3rem 'Trebuchet MS', Tahoma, sans-serif; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
.csy-help-logo { width: 2.3rem; height: 2.3rem; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35)); }
.csy-help-search { flex: none; display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 0.95rem; border-bottom: 1px solid #2e5bb8; background: linear-gradient(180deg, #6898ec, #4176dc); }
.csy-help-label { color: #fff; font-size: 1.1rem; font-weight: 700; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35); }
.csy-help-field { flex: 1; max-width: 32rem; display: flex; gap: 0.35rem; }
.csy-help-input { flex: 1; min-width: 0; min-height: 2.5rem; padding: 0.2rem 0.65rem; border: 1px solid #1d3f9a; border-radius: 2px; background: #fff; color: #000; font: 1.05rem var(--cs-font); outline: none; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15); }
.csy-help-input:focus { box-shadow: 0 0 0 2px #fbc761; }
.csy-help-go { flex: none; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; background: none; transition: transform 140ms var(--csy-spring); }
.csy-help-go.is-pressed { transform: scale(1.15); }
.csy-help-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; background: linear-gradient(180deg, #ffffff, #f3f7fd); }
.csy-help-page { padding: 1.05rem 1.35rem 1.7rem; }
.csy-help-home { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; }
.csy-help-col h2, .csy-related h2, .csy-results h2 { margin: 0 0 0.45rem; padding-bottom: 0.3rem; border-bottom: 2px solid #c6d6f7; color: #1d4fa8; font: 700 1.1rem 'Trebuchet MS', Tahoma, sans-serif; }
.csy-help-col h2:not(:first-child) { margin-top: 1.15rem; }
.csy-hlinks { display: flex; flex-direction: column; gap: 0.05rem; }
.csy-hlink, .csy-haction {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.4rem;
  padding: 0.15rem 0.3rem;
  border: 0;
  border-radius: 3px;
  background: none;
  color: #0b3dbc;
  font-size: 0.9375rem;
  text-align: left;
  transition: transform 140ms var(--csy-spring), background-color 120ms;
  transform-origin: 1rem 50%;
}
.csy-hlink:hover, .csy-haction:hover { background: #eef3fd; }
.csy-hlink:hover span, .csy-haction:hover span { text-decoration: underline; }
.csy-hlink.is-pressed, .csy-haction.is-pressed { transform: scale(1.05); }
.csy-hlink:focus-visible, .csy-haction:focus-visible { outline: 1px dotted #000; }
.csy-hlink-ico { flex: none; width: 1.65rem; height: 1.65rem; }
.csy-haction.is-star { font-weight: 700; }
.csy-tip {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  width: 100%;
  margin-top: 1.15rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid #f0d27a;
  border-radius: 0.45rem;
  background: linear-gradient(180deg, #fffbe6, #fff0bd);
  color: #4a3a10;
  font-size: 0.9375rem;
  text-align: left;
  transition: transform 140ms var(--csy-spring);
}
.csy-tip.is-pressed { transform: scale(1.03); }
.csy-tip-ico { flex: none; width: 2.1rem; height: 2.1rem; }
.csy-tip b { display: block; margin-bottom: 0.15rem; color: #8a5a00; }
.csy-tip-text { margin: 0; }
.csy-article { max-width: 46rem; font-size: 1rem; line-height: 1.55; }
.csy-article p { margin: 0.65rem 0; }
.csy-crumbs { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.4rem; color: #555; font-size: 0.875rem; }
.csy-crumb { min-height: 1.9rem; padding: 0; border: 0; background: none; color: #0b3dbc; font-size: 0.875rem; }
.csy-crumb:hover { text-decoration: underline; }
.csy-article-head { display: flex; align-items: center; gap: 0.75rem; padding-bottom: 0.55rem; border-bottom: 2px solid #c6d6f7; }
.csy-article-ico { flex: none; width: 2.7rem; height: 2.7rem; }
.csy-article h1 { margin: 0; color: #1d4fa8; font: 700 1.45rem/1.2 'Trebuchet MS', Tahoma, sans-serif; }
.csy-steps { margin: 0.6rem 0; padding-left: 1.7rem; }
.csy-steps li { margin: 0.3rem 0; }
.csy-actions { display: flex; flex-direction: column; gap: 0.05rem; margin: 0.9rem 0; padding: 0.4rem 0.7rem; border-left: 4px solid #3fae3a; border-radius: 0 0.35rem 0.35rem 0; background: #f0f8ee; }
.csy-related { margin-top: 1.4rem; }
.csy-results-title { margin: 0 0 0.9rem; color: #1d4fa8; font: 700 1.35rem 'Trebuchet MS', Tahoma, sans-serif; }
.csy-results-title q { color: #c25c00; }
@container (max-width: 40rem) {
  .csy-help-home { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
  .csy-hnav-label { display: none; }
  .csy-help-brand b { display: none; }
  .csy-help-top { flex-wrap: nowrap; }
  .csy-help-page { padding: 0.85rem 0.9rem 1.4rem; }
  .csy-help-search { gap: 0.5rem; padding: 0.55rem 0.7rem; }
}

/* The Troubleshooting Wizard. */
.csy-wiz { max-width: 42rem; margin: 0 auto; overflow: hidden; border: 1px solid #b9cdf3; border-radius: 0.55rem; background: #fff; box-shadow: 0 3px 12px rgba(30, 60, 140, 0.16); }
.csy-wiz-head { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-bottom: 1px solid #b9cdf3; background: linear-gradient(180deg, #f2f6fe, #d6e2fa); }
.csy-wiz-head b { display: block; color: #1d4fa8; font-size: 1.2rem; }
.csy-wiz-head small { color: #555; font-size: 0.875rem; }
.csy-wiz-ico { flex: none; width: 2.7rem; height: 2.7rem; }
.csy-wiz-panel { display: flex; flex-direction: column; gap: 0.75rem; min-height: 16rem; padding: 1rem 1.2rem 1.15rem; }
.csy-wiz-step { color: #c25c00; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.csy-wiz-q { margin: 0; color: #000; font-size: 1.2rem; line-height: 1.35; }
.csy-wiz-opts { display: flex; flex-direction: column; gap: 0.6rem; }
.csy-wiz-opts .csy-radio { width: 100%; min-height: 2.8rem; padding: 0.3rem 0.6rem; border-radius: 0.35rem; font-size: 1rem; transform-origin: 1rem 50%; }
.csy-wiz-opts .csy-radio:hover { background: #f1f5fd; }
.csy-wiz-opts .csy-radio[aria-checked='true'] { background: #e3ecfd; box-shadow: inset 0 0 0 1px #9fbcf0; }
.csy-wiz-foot { display: flex; justify-content: flex-end; gap: 0.5rem; padding: 0.7rem 1rem; border-top: 1px solid #e3e8f4; background: #f6f8fd; }
.csy-btn.is-next, .csy-btn.is-ok { font-weight: 700; }
.csy-wiggle {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  height: 9.5rem;
  border: 2px dashed #9fbcf0;
  border-radius: 0.55rem;
  background: repeating-linear-gradient(45deg, #f6f9ff 0 12px, #eaf1fd 12px 24px);
  color: #1d4fa8;
  font-size: 1rem;
  touch-action: none;
  cursor: grab;
}
.csy-wiggle-ico { width: 3.2rem; height: 3.2rem; transition: transform 80ms ease-out; }
.csy-prog.csy-wiz-meter { height: 1.6rem; }
.csy-reboot { display: flex; align-items: center; justify-content: center; height: 9.5rem; border-radius: 0.45rem; background: #000; color: #9fb8ff; font: 1.25rem 'Trebuchet MS', Tahoma, sans-serif; }
.csy-win-banner { display: flex; align-items: center; gap: 1rem; padding: 0.8rem 1rem; border: 1px solid #f0c64a; border-radius: 0.55rem; background: linear-gradient(135deg, #fffbe6, #ffe7a0); }
.csy-trophy { flex: none; width: 4.8rem; height: 4.8rem; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.25)); }
.csy-win-banner h2 { margin: 0; color: #b06a00; font: 800 1.7rem/1.1 'Trebuchet MS', Tahoma, sans-serif; }
.csy-win-banner p { margin: 0.3rem 0 0; font-size: 1rem; line-height: 1.4; }
.csy-cert { position: relative; display: flex; flex-direction: column; gap: 0.2rem; padding: 0.9rem 3.4rem 0.9rem 1.2rem; border: 4px double #c8a24a; border-radius: 0.3rem; background: #fffdf5; text-align: center; }
.csy-cert small { color: #8a6a1a; font-size: 0.9375rem; font-variant: small-caps; letter-spacing: 0.12em; }
.csy-cert b { color: #1d2f6a; font: italic 700 1.55rem Georgia, 'Times New Roman', serif; }
.csy-cert span { color: #333; font-size: 0.9375rem; }
.csy-cert-seal { position: absolute; right: 0.6rem; bottom: 0.5rem; width: 2.7rem; height: 2.7rem; }
.csy-score { display: flex; align-items: center; gap: 0.7rem; font-size: 1rem; }
.csy-score .csy-prog { flex: 1; height: 1.6rem; }
.csy-score-pct { min-width: 3.6rem; color: #1f8a24; font-size: 1.15rem; text-align: right; }

/* ═════════════════════════ Log Off → Welcome ═════════════════════════ */
#costume .cs-desk, #costume .cs-taskbar { transition: filter 600ms ease; }
#costume.csy-greyed .cs-desk, #costume.csy-greyed .cs-taskbar { filter: grayscale(1) brightness(0.78); transition-duration: 1600ms; }
.csy-lo { position: absolute; inset: 0; z-index: 7; }
.csy-lo-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.csy-lo-dim { position: absolute; inset: 0; background: rgba(0, 10, 40, 0.22); }
.csy-lo-box { position: relative; width: min(28rem, calc(100% - 1.5rem)); overflow: hidden; border: 1px solid #001a66; border-radius: 0.45rem; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55); }
.csy-lo-head { display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; padding: 0.7rem 1rem; background: linear-gradient(180deg, #0c36b0, #052070); color: #fff; font-size: 1.15rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
.csy-lo-mark { flex: none; width: 2.3rem; height: 2.3rem; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4)); }
.csy-lo-body {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.2rem 2.4rem;
  padding: 1.6rem 1rem 1.4rem;
  border-top: 2px solid transparent;
  border-image: linear-gradient(90deg, transparent, #f5a634 30%, #f5a634 70%, transparent) 1;
  background: linear-gradient(180deg, #7096f2 0%, #4f76e0 100%);
  box-shadow: inset 0 -1px 0 #1d3f9a;
}
.csy-lo-big, .csy-off-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  min-width: 6.5rem;
  padding: 0.3rem;
  border: 0;
  background: none;
  color: #fff;
  font-size: 1rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  transition: transform 140ms var(--csy-spring);
}
.csy-lo-big.is-pressed, .csy-off-btn.is-pressed { transform: scale(1.1); }
.csy-lo-tile { width: 4.3rem; height: 4.3rem; padding: 0.65rem; border: 2px solid rgba(255, 255, 255, 0.9); border-radius: 0.75rem; box-shadow: 0 3px 7px rgba(0, 0, 0, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.4); transition: filter 140ms, box-shadow 140ms; }
.csy-lo-big.is-switch .csy-lo-tile { background: linear-gradient(180deg, #62ccff, #1d7fe0 55%, #0c56b0); }
.csy-lo-big.is-off .csy-lo-tile { background: linear-gradient(180deg, #ffd06a, #f5901e 55%, #c8600a); }
.csy-lo-big:hover .csy-lo-tile, .csy-lo-big:focus-visible .csy-lo-tile, .csy-off-btn:hover .csy-off-ring, .csy-off-btn:focus-visible .csy-off-ring {
  filter: brightness(1.12);
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.35), 0 0 0 3px rgba(255, 255, 255, 0.55), 0 0 18px rgba(255, 255, 255, 0.55);
}
.csy-lo-big:focus-visible, .csy-off-btn:focus-visible { outline: none; }
.csy-lo-foot { display: flex; justify-content: flex-end; padding: 0.6rem 1rem; background: linear-gradient(180deg, #0c36b0, #052070); }
.csy-off-veil { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 30, 0.45); }
.csy-off-ring { width: 3.8rem; height: 3.8rem; padding: 0.7rem; border: 2px solid rgba(255, 255, 255, 0.9); border-radius: 50%; box-shadow: 0 3px 7px rgba(0, 0, 0, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.4); transition: filter 140ms, box-shadow 140ms; }
.csy-off-btn.is-stand .csy-off-ring { background: radial-gradient(circle at 40% 30%, #ffe680, #f2b90c 60%, #a86e00); }
.csy-off-btn.is-off .csy-off-ring { background: radial-gradient(circle at 40% 30%, #ff9a8a, #e0392b 60%, #8a1414); }
.csy-off-btn.is-restart .csy-off-ring { background: radial-gradient(circle at 40% 30%, #a6f08a, #3cad37 60%, #1d6b1d); }

.csy-lo-stage.is-blue { flex-direction: column; align-items: stretch; justify-content: stretch; background: #5a7edc; }
.csy-wel-top, .csy-wel-bot { position: relative; flex: none; }
.csy-wel-top { height: 11%; min-height: 3rem; background: linear-gradient(180deg, #00267a, #00309c); }
.csy-wel-top::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, #5a7edc 0%, #ffffff 30%, #f5a634 62%, #5a7edc 100%); }
.csy-wel-bot { display: flex; align-items: center; height: 13%; min-height: 4.2rem; padding: 0 2rem; background: linear-gradient(180deg, #003399, #00267a); }
.csy-wel-bot::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, #5a7edc 0%, #ffffff 50%, #5a7edc 100%); }
.csy-wel-mid {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.4rem;
  padding: 1rem 2rem;
  overflow-y: auto;
  background:
    radial-gradient(ellipse 55% 75% at 15% 22%, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 70%),
    linear-gradient(90deg, #5a7edc, #6c90f0 50%, #5a7edc);
}
.csy-wel-left { flex: 1; max-width: 27rem; display: flex; flex-direction: column; align-items: flex-end; gap: 1.1rem; color: #fff; text-align: right; }
.csy-wel-left p { margin: 0; font-size: 1.35rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
.csy-logo { display: flex; align-items: center; gap: 0.6rem; }
.csy-logo-duck { flex: none; width: 4.6rem; height: 4.6rem; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.35)); }
.csy-logo-word { display: flex; align-items: flex-start; white-space: nowrap; }
.csy-logo-word b { color: #fff; font: italic 800 3.1rem/1 'Trebuchet MS', Tahoma, sans-serif; letter-spacing: -0.01em; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35); }
.csy-logo-word sup { margin-left: 0.2rem; color: #ffb020; font: italic 800 1.45rem/1 'Trebuchet MS', Tahoma, sans-serif; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
.csy-wel-rule { flex: none; align-self: stretch; width: 2px; margin: 1rem 0; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.85) 30%, rgba(255, 255, 255, 0.85) 70%, transparent); }
.csy-wel-users { flex: 1; max-width: 27rem; display: flex; flex-direction: column; gap: 0.35rem; }
.csy-wel-user {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  min-height: 4.7rem;
  padding: 0.45rem 0.75rem;
  border: 0;
  border-radius: 0.65rem;
  background: none;
  color: #fff;
  text-align: left;
  transition: transform 140ms var(--csy-spring), opacity 300ms ease;
}
.csy-wel-user:hover, .csy-wel-user.is-on { background: linear-gradient(90deg, #0b3a9e 0%, rgba(11, 58, 158, 0.6) 60%, rgba(11, 58, 158, 0) 100%); }
.csy-wel-user.is-pressed { transform: scale(1.04); }
.csy-wel-user:focus-visible { outline: 2px dotted #fff; outline-offset: -3px; }
.csy-wel-user.is-dim { opacity: 0.3; pointer-events: none; }
.csy-wel-pic { flex: none; width: 3.9rem; height: 3.9rem; overflow: hidden; border: 3px solid #fff; border-radius: 0.5rem; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); transition: border-color 140ms; }
.csy-wel-pic svg { display: block; width: 100%; height: 100%; }
.csy-wel-user:hover .csy-wel-pic, .csy-wel-user.is-on .csy-wel-pic { border-color: #ffc83c; }
.csy-wel-who { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.csy-wel-who b { font-size: 1.35rem; font-weight: 400; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
.csy-wel-sub { color: #dbe7ff; font-size: 0.9375rem; }
.csy-wel-sub:empty { display: none; }
.csy-wel-user.is-loading .csy-wel-sub { color: #fff; }
.csy-wel-pass { display: flex; gap: 0.35rem; margin-top: 0.2rem; }
.csy-wel-input { width: 11rem; min-width: 0; min-height: 2.3rem; padding: 0.1rem 0.5rem; border: 1px solid #1d3f9a; border-radius: 3px; background: #fff; color: #000; font: 1rem var(--cs-font); outline: none; }
.csy-wel-input:focus { box-shadow: 0 0 0 2px #fbc761; }
.csy-wel-go { flex: none; width: 2.3rem; height: 2.3rem; padding: 0; border: 0; background: none; transition: transform 140ms var(--csy-spring); }
.csy-wel-go.is-pressed { transform: scale(1.15); }
.csy-wel-hint { color: #fff3c4; font-size: 0.875rem; }
.csy-wel-off { display: flex; align-items: center; gap: 0.65rem; min-height: 3rem; padding: 0.3rem 0.5rem; border: 0; border-radius: 0.4rem; background: none; color: #fff; font-size: 1.05rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); transition: transform 140ms var(--csy-spring); }
.csy-wel-off:hover { background: rgba(255, 255, 255, 0.1); }
.csy-wel-off.is-pressed { transform: scale(1.06); }
.csy-wel-off-ico { flex: none; width: 2.6rem; height: 2.6rem; padding: 0.42rem; border: 2px solid #fff; border-radius: 0.5rem; background: linear-gradient(180deg, #ff8a6a, #e0392b 55%, #9c1a12); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35); }
.csy-wel-solo { display: flex; flex-direction: column; align-items: center; gap: 1.8rem; color: #fff; }
.csy-wel-saving { display: flex; align-items: center; gap: 0.9rem; font-size: 1.4rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
.csy-wel-status { font-weight: 400; }
.csy-dots { display: inline-flex; gap: 0.3rem; }
.csy-dots i { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #fff; animation: csy-dot 1s ease-in-out infinite; }
.csy-dots i:nth-child(2) { animation-delay: 0.15s; }
.csy-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes csy-dot { 0%, 100% { opacity: 0.25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-0.3rem); } }
.csy-lo-stage.is-safe, .csy-lo-stage.is-black, .csy-lo-stage.is-boot { background: #000; }
.csy-lo-stage.is-safe { cursor: pointer; }
.csy-safe-text { margin: 0; padding: 1rem; color: #ff8c1a; font: 700 clamp(1.3rem, 3.2vw, 2.4rem)/1.3 'Trebuchet MS', Tahoma, sans-serif; text-align: center; text-shadow: 0 0 14px rgba(255, 140, 26, 0.5); }
.csy-boot { display: flex; flex-direction: column; align-items: center; gap: 2.6rem; }
.csy-boot-bar { position: relative; width: 11rem; height: 1.15rem; overflow: hidden; border: 2px solid #b8b8b8; border-radius: 0.4rem; }
.csy-boot-bar i { position: absolute; left: 0; top: 2px; bottom: 2px; width: 0.75rem; border-radius: 2px; background: linear-gradient(180deg, #9cc0ff, #2f63d8 50%, #1a3fa0); animation: csy-bootbar 1.7s linear infinite; }
.csy-boot-bar i:nth-child(2) { animation-delay: 0.13s; }
.csy-boot-bar i:nth-child(3) { animation-delay: 0.26s; }
@keyframes csy-bootbar { from { transform: translateX(-3rem); } to { transform: translateX(12rem); } }
html[data-reduced-motion='on'] .csy-dots i, html[data-reduced-motion='on'] .csy-boot-bar i { animation-duration: 3s; }
@media (max-width: 599px) {
  .csy-wel-mid { flex-direction: column; justify-content: flex-start; gap: 0.9rem; padding: 1.2rem 1rem; }
  .csy-wel-left { flex: none; align-items: center; max-width: none; text-align: center; }
  .csy-wel-left p { font-size: 1.15rem; }
  .csy-wel-rule { align-self: center; width: 80%; height: 2px; margin: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85) 30%, rgba(255, 255, 255, 0.85) 70%, transparent); }
  .csy-wel-users { flex: none; width: 100%; }
  .csy-logo-duck { width: 3.4rem; height: 3.4rem; }
  .csy-logo-word b { font-size: 2.3rem; }
  .csy-wel-bot { padding: 0 1rem; }
  .csy-lo-body { gap: 1rem 1.6rem; }
}

/* ═════════════════════════ All Programs ═════════════════════════ */
.cs-menu .cs-menu-item.csy-hot { background: var(--cs-select); color: #fff; }
.csy-casc-layer { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.csy-casc {
  position: absolute;
  left: 0;
  top: 0;
  min-width: 13.5rem;
  max-width: 22rem;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0.2rem 0;
  border: 1px solid #5b77c8;
  background: #fff;
  box-shadow: 3px 3px 9px rgba(0, 0, 0, 0.4);
  pointer-events: auto;
  scrollbar-width: thin;
}
.csy-casc-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  min-height: 2.3rem;
  padding: 0.15rem 1.7rem 0.15rem 0.55rem;
  border: 0;
  background: none;
  color: #000;
  font-size: 0.875rem;
  text-align: left;
  white-space: nowrap;
  transition: transform 120ms var(--csy-spring, cubic-bezier(.2, 1.6, .4, 1));
  transform-origin: 1rem 50%;
}
.csy-casc-item:hover, .csy-casc-item:focus-visible, .csy-casc-item.is-open { background: var(--cs-select); color: #fff; outline: none; }
.csy-casc-item.is-pressed { transform: scale(1.04); }
.csy-casc-ico { flex: none; width: 1.55rem; height: 1.55rem; }
.csy-casc-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.csy-casc-arrow { position: absolute; right: 0.55rem; top: 50%; width: 0; height: 0; border: 0.3rem solid transparent; border-left: 0.4rem solid currentColor; transform: translate(0.2rem, -50%); }
.csy-casc-sep { margin: 0.2rem 0.45rem; border: 0; border-top: 1px solid #d3d3d3; }
.csy-casc-empty { display: block; padding: 0.45rem 1.4rem; color: #8a8a8a; font-size: 0.875rem; font-style: italic; }
.csy-casc-sheet {
  position: absolute;
  left: 0;
  bottom: calc(var(--cs-task-h) + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  width: min(25rem, calc(100% - 0.5rem));
  max-height: 78%;
  overflow: hidden;
  border: 1px solid #0b3cb6;
  border-radius: 0.55rem 0.55rem 0 0;
  background: #fff;
  box-shadow: 3px 3px 12px rgba(0, 0, 0, 0.45);
  pointer-events: auto;
}
.csy-sheet-head { flex: none; display: flex; align-items: center; gap: 0.5rem; min-height: 3.3rem; padding: 0.3rem 0.4rem; background: linear-gradient(180deg, #1a6fd8 0%, #3c8ff0 12%, #2a7ae6 40%, #1c63cf 100%); color: #fff; font-size: 1.05rem; }
.csy-sheet-back { flex: none; width: 2.75rem; height: 2.75rem; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 0.45rem; background: rgba(255, 255, 255, 0.16); color: #fff; font-size: 1.7rem; line-height: 1; transition: transform 140ms cubic-bezier(.2, 1.6, .4, 1); }
.csy-sheet-back.is-pressed { transform: scale(1.12); }
.csy-sheet-ico { flex: none; width: 1.9rem; height: 1.9rem; }
.csy-sheet-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); }
.csy-sheet-x {
  position: relative;
  flex: none;
  width: 2.6rem;
  height: 2.4rem;
  border: 1px solid #fff;
  border-radius: 4px;
  background: linear-gradient(180deg, #f28b6c, #e2502d 45%, #c83a1b);
  transition: transform 140ms cubic-bezier(.2, 1.6, .4, 1);
}
.csy-sheet-x::before, .csy-sheet-x::after { content: ''; position: absolute; left: 50%; top: 50%; width: 50%; height: 2.5px; border-radius: 1px; background: #fff; transform: translate(-50%, -50%) rotate(45deg); }
.csy-sheet-x::after { transform: translate(-50%, -50%) rotate(-45deg); }
.csy-sheet-x.is-pressed { transform: scale(1.12); }
.csy-sheet-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0.2rem 0; }
.csy-casc-sheet .csy-casc-item { min-height: 3rem; font-size: 0.9375rem; }
.csy-casc-sheet .csy-casc-ico { width: 1.8rem; height: 1.8rem; }
.csy-casc:focus, .csy-casc-sheet:focus { outline: none; }