/* =========================================================
   DEXHAVEN — FRAME SHELL (live CSS)
   The red device + window frame around every page, drawn with
   your original frame CSS instead of a picture.

   HOW IT FITS THE SCREEN
   Your frame code draws everything on one fixed 2518 x 1583 canvas
   (section 3 below — that's your code, unchanged apart from the
   "fs-" in front of every class name so it can't clash with the
   site's own classes). script.js puts 8 copies of that canvas on the
   page, each showing one piece of it — 4 corners + 4 edges, the
   middle (the window) is left out:
     - the corners are shown at a fixed size (64%), never stretched,
     - the top/bottom edges stretch sideways only,
     - the left/right edges stretch up and down only.
   Because they're live CSS, the colours can change.

   CHANGING THE COLOUR (section 1)
   Two settings control every red part of the frame. The blue lens,
   the lights and the dark screen always keep their own colours.
   Later, a user's settings page just needs to set these two values
   (e.g. document.documentElement.style.setProperty("--frame-hue", 200)).
   ========================================================= */

/* -----------------------------
   1. COLOUR SETTINGS
   --frame-hue: how far to turn the colour wheel, in degrees.
       0   = the original red
       40  = orange        80  = yellow/gold
       130 = green         200 = blue
       250 = purple        300 = pink
   --frame-sat: how colourful.
       1 = as designed, 0.5 = muted, 0 = no colour (graphite/grey),
       above 1 = more vivid.
------------------------------ */
:root {
  --frame-hue: 0;
  --frame-sat: 1;
}

/* -----------------------------
   2. PLACEMENT (the 8 pieces — sizes are set by script.js)
------------------------------ */
.frame-shell {
  position: absolute;
  inset: 0;
  z-index: 2;            /* above the page content, below the Menu */
  pointer-events: none;  /* decoration only — clicks go straight through */
}

.fs-slice {
  position: absolute;
  overflow: hidden;
}

/* -----------------------------
   3. YOUR FRAME CODE
   Copied from the original frame file. The only changes: "fs-" in
   front of every class name, and three bits removed — the old
   html/body reset (not needed here), the white patch in the
   window's bottom-right corner, and a few rules that nothing used.
------------------------------ */
/* Whole picture, drawn in the original image's 2518 x 1583 pixel space. */
.fs-scene {
  position: relative;
  width: 2518px;
  height: 1583px;
  overflow: hidden;
}
.fs-scene > * {
  position: absolute;
}

/* The left device is the first design, scaled down to fit (1583 / 1644). */
.fs-device-wrap {
  left: 0;
  top: 0;
  width: 751px;
  height: 1644px;
  transform: scale(0.962895);
  transform-origin: 0 0;
}

/* ---------- Big frame: dark top band ---------- */
.fs-rf-band {
  inset: 0;
  clip-path: polygon(722px 16px, 2480px 16px, 2480px 45px, 693px 45px);
  background: linear-gradient(180deg, #17171a 16px, #050404 19px, #030202 21px, #000 42px, #3a0c0f 44px, #7d1a1f 45px);
}
.fs-rf-band-glow {
  left: 700px;
  top: 21px;
  width: 1780px;
  height: 11px;
  background: linear-gradient(90deg, #210507 20px, #0e0202 140px, #160103 260px, #110203 380px, #130204 500px, #180102 620px, #1d0203 740px, #290508 860px, #320508 980px, #3c0e10 1100px, #441215 1220px, #3b1417 1340px, #3e181c 1460px, #3e171b 1580px, #310b0d 1700px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 35%, #000 70%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 35%, #000 70%, transparent 100%);
  clip-path: polygon(17px 0, 100% 0, 100% 100%, 6px 100%);
}
.fs-rf-band-line {
  left: 690px;
  top: 31px;
  width: 1790px;
  height: 8px;
  background: linear-gradient(90deg, #30313b 30px, #1a1e21 150px, #211e21 270px, #1e1f23 390px, #212023 510px, #2c2629 630px, #371013 750px, #2e1616 870px, #2a2323 990px, #24292c 1110px, #1c2529 1230px, #1d2227 1350px, #15161a 1470px, #101315 1590px, #060304 1710px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%);
  clip-path: polygon(17px 0, 100% 0, 100% 100%, 9px 100%);
}

/* ---------- Big frame: red ring around the window ---------- */
.fs-rf-ring {
  inset: 0;
  clip-path: path(evenodd, "M560,44 L2410,44 A58,58 0 0 1 2468,102 L2468,1520 A30,30 0 0 1 2438,1550 L546,1550 A30,30 0 0 1 516,1520 L516,88 A44,44 0 0 1 560,44 Z M571,63 L2408,63 A40,40 0 0 1 2448,103 L2448,1517 A25,25 0 0 1 2423,1542 L561,1542 A25,25 0 0 1 536,1517 L536,98 A35,35 0 0 1 571,63 Z");
}
.fs-rf-ring > * {
  position: absolute;
}
.fs-rf-top {
  left: 560px;
  top: 44px;
  width: 1860px;
  height: 19px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  background: linear-gradient(180deg, #5a1115 0, #7d1a1f 1px, #db2b36 2px, rgba(0,0,0,0) 4px, rgba(0,0,0,0) 11px, rgba(0,0,0,0) 17px, #380c11 18px), linear-gradient(90deg, #b73639 0px, #c43139 120px, #bf2d34 240px, #a62832 360px, #af2732 480px, #a62531 600px, #af2932 720px, #c02933 840px, #c42730 960px, #c3252f 1080px, #c42e33 1200px, #c12c33 1320px, #bc2e33 1440px, #b5262e 1560px, #aa2b30 1680px, #a0282b 1800px);
}
.fs-rf-top-hl {
  left: 566px;
  top: 56px;
  width: 1840px;
  height: 5px;
  background: linear-gradient(90deg, #c13b40 -6px, #e7484b 114px, #cc6664 234px, #ec464a 354px, #ee484b 474px, #f3474b 594px, #f14b4c 714px, #e93c44 834px, #9d5256 954px, #a54c53 1074px, #a95154 1194px, #904f54 1314px, #da373d 1434px, #b03338 1554px, #94403d 1674px, #892f2f 1794px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 50px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 50px), transparent 100%);
  opacity: .9;
}
.fs-rf-left {
  left: 516px;
  top: 96px;
  width: 20px;
  height: 1424px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  background: linear-gradient(90deg, rgba(255,120,110,.55) 0, rgba(255,120,110,0) 2px, rgba(0,0,0,0) 16px, rgba(0,0,0,.55) 17px, #0d0000 19px), linear-gradient(180deg, #ca3e43 -20px, #d73a3f 44px, #e14042 124px, #e74647 204px, #eb4345 404px, #dc363b 524px, #d2363e 644px, #bc343d 684px, #903137 724px, #993036 804px, #a22830 884px, #aa242d 964px, #a21e29 1204px, #971a23 1324px, #841d23 1404px, #7a1a20 1454px);
}
.fs-rf-left-hl {
  left: 529px;
  top: 100px;
  width: 4px;
  height: 1415px;
  background: linear-gradient(180deg, #d9504f -24px, #f27a70 100px, #ffa999 200px, #f58a7e 400px, #e0574f 600px, #c24048 680px, #9b2c33 720px, #b42d37 900px, #ae2931 1200px, #8a2229 1400px);
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.5), #000 50%, rgba(0,0,0,.4));
  mask-image: linear-gradient(90deg, rgba(0,0,0,.5), #000 50%, rgba(0,0,0,.4));
}
.fs-rf-right {
  left: 2447px;
  top: 102px;
  width: 21px;
  height: 1416px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  background: linear-gradient(90deg, #000 0, #000 2px, rgba(40,10,10,.8) 3px, rgba(0,0,0,0) 5px, rgba(0,0,0,0) 19px, rgba(120,20,20,.6) 21px), linear-gradient(180deg, #ba3e3c -26px, #b93735 38px, #be3d38 198px, #c53838 398px, #bc4641 518px, #a84c47 638px, #8f4344 678px, #7c4043 718px, #904140 798px, #a04642 918px, #a8403c 1038px, #a22d32 1118px, #9d2d2f 1198px, #902b2f 1318px, #7e3737 1398px, #823e3b 1448px);
}
.fs-rf-right-hl {
  left: 2452px;
  top: 104px;
  width: 3px;
  height: 1412px;
  background: linear-gradient(180deg, #c9554f -28px, #e25c52 196px, #d36a60 516px, #a35a58 676px, #975751 896px, #a84041 1196px, #8a4344 1396px);
}
.fs-rf-bottom {
  left: 560px;
  top: 1541px;
  width: 1864px;
  height: 9px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  background: linear-gradient(180deg, #1c0606 0, #4c090b 2px, rgba(0,0,0,0) 3px, rgba(0,0,0,0) 7px, rgba(0,0,0,.15) 9px), linear-gradient(90deg, #d32b32 0px, #e22e37 120px, #ec2e37 240px, #ee313b 360px, #ec2e38 480px, #e72c36 600px, #e52f37 720px, #e62d35 840px, #ef393e 960px, #e22934 1080px, #e1353a 1200px, #d92830 1320px, #b71c24 1440px, #9a141a 1560px, #671617 1680px, #511717 1800px, #5a1a1a 1908px);
}

/* white patch in the window's bottom-right corner (it is in the source image) */

/* ---------- Big frame: right-hand side ---------- */
.fs-rf-side {
  left: 2466px;
  top: 90px;
  width: 52px;
  height: 1430px;
  background: linear-gradient(180deg, #380e0e 4px, #b83131 12px, #c33433 52px, #c03232 212px, #bc2c2f 452px, #b62d2e 612px, #ad3336 692px, #b93134 732px, #b72e30 912px, #b42a2e 1012px, #ad262b 1212px, #a8222a 1332px, #9e252b 1372px, #8c2a2d 1427px);
}
.fs-rf-side-hl {
  left: 2468px;
  top: 88px;
  width: 11px;
  height: 1430px;
  background: linear-gradient(180deg, #a72729 4px, #c22127 12px, #cf2b2e 92px, #dc3439 172px, #eb4b4a 292px, #d72e31 412px, #c6292c 612px, #c42d30 652px, #cf4546 692px, #f26057 772px, #e34040 852px, #df3639 932px, #e0343a 1212px, #c72c32 1372px, #bf3b40 1427px);
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.45) 0, rgba(0,0,0,.45) 1px, #000 3px, #000 7px, rgba(0,0,0,.55) 9px, transparent 11px);
  mask-image: linear-gradient(90deg, rgba(0,0,0,.45) 0, rgba(0,0,0,.45) 1px, #000 3px, #000 7px, rgba(0,0,0,.55) 9px, transparent 11px);
}
.fs-rf-side-panel {
  left: 2504px;
  top: 826px;
  width: 14px;
  height: 700px;
  clip-path: polygon(14px 0, 14px 100%, 0 100%, 0 20px);
  background: linear-gradient(90deg, #7b2423 0, #000 2px, #000 3px, rgba(0,0,0,0) 5px), linear-gradient(180deg, #2d2c31 4px, #34343b 74px, #2a2c30 174px, #25252b 274px, #232428 434px, #211c21 554px, #1d181c 634px, #19191b 689px);
}
.fs-rf-corner-top {
  left: 2430px;
  top: 16px;
  width: 88px;
  height: 80px;
  clip-path: path("M0,0 L46,0 Q88,0 88,40 L88,76 L30,76 L0,30 Z");
  background: linear-gradient(180deg, #18191c 0, #000 6px, #121115 12px, #151418 30px, #141317 60px, #080606 72px, #3a0c0c 76px);
}
.fs-rf-corner-plate {
  left: 2430px;
  top: 16px;
  width: 88px;
  height: 80px;
  clip-path: polygon(8px 18px, 22px 14px, 54px 56px, 88px 56px, 88px 74px, 48px 74px);
  background: linear-gradient(135deg, #2a2b31 0, #1d1c21 45%, #17171b 100%);
}
.fs-rf-corner-plate-edge {
  left: 2430px;
  top: 16px;
  width: 88px;
  height: 80px;
  clip-path: polygon(22px 14px, 25px 13px, 57px 55px, 88px 55px, 88px 57px, 54px 57px);
  background: #3a3b42;
}
.fs-rf-corner-bottom {
  left: 2440px;
  top: 1500px;
  width: 78px;
  height: 51px;
  clip-path: path("M10,50 L14,20 L78,14 L78,40 Q78,50 68,50 Z");
  background: linear-gradient(180deg, #490f14 14px, #2d0a0c 17px, #050708 20px, #171417 24px, #0c090b 28px, #0b090a 36px, #020102 40px, #010101 50px);
}
.fs-rf-side-foot {
  left: 2440px;
  top: 1500px;
  width: 78px;
  height: 51px;
  clip-path: path("M20,50 Q24,28 38,22 L78,16 L78,19 L40,25 Q28,32 24,50 Z");
  background: #7a1f22;
}
.fs-rf-base {
  inset: 0;
  background: linear-gradient(180deg, #b0302f 0, #b43a38 300px, #9a3a3a 800px, #a02a2e 1300px, #7e2a2c 1550px);
}
.fs-rf-edge {
  inset: 0;
  clip-path: path(evenodd, "M569,61 L2408,61 A42,42 0 0 1 2450,103 L2450,1517 A27,27 0 0 1 2423,1544 L561,1544 A27,27 0 0 1 534,1517 L534,98 A37,37 0 0 1 569,61 Z M571,63 L2408,63 A40,40 0 0 1 2448,103 L2448,1517 A25,25 0 0 1 2423,1542 L561,1542 A25,25 0 0 1 536,1517 L536,98 A35,35 0 0 1 571,63 Z");
  background: linear-gradient(180deg, #2a080b 60px, #120304 70px, #0a0000 1500px, #1c0606 1544px);
}
.fs-rf-corner-fill-tl {
  left: 516px;
  top: 44px;
  width: 110px;
  height: 110px;
  background: radial-gradient(circle at 55px 54px, #1a0506 35px, #3a0c10 37px, #d9504f 39px, #c84044 42px, #c23a3f 50px, #d84647 53px, #b83c3e 55px);
}
.fs-rf-corner-fill-bl {
  left: 516px;
  top: 1470px;
  width: 110px;
  height: 80px;
  background: radial-gradient(circle at 45px 47px, #0d0000 25px, #7f1f23 27px, #a42630 30px, #d8303a 33px, #b0282e 40px, #c8363a 45px);
}
.fs-rf-corner-fill-tr {
  left: 2360px;
  top: 44px;
  width: 108px;
  height: 110px;
  background: radial-gradient(circle at 48px 59px, #000 38px, #380c11 41px, #c94a47 43px, #d65450 46px, #b0302f 48px, #a8302f 55px, #c93639 57px, #7d1a1f 59px);
}
.fs-rf-corner-fill-br {
  left: 2360px;
  top: 1470px;
  width: 108px;
  height: 80px;
  background: radial-gradient(circle at 63px 47px, #000 25px, #3a1515 27px, #7a3434 30px, #6a2e2e 36px, #5a2424 45px);
}

/* ================= Left device (same CSS as the first design) ================= */

/* Everything is drawn in the original image's 751 x 1644 pixel space. */
.fs-device {
  position: relative;
  width: 751px;
  height: 1644px;
  overflow: hidden;
}
.fs-device > * {
  position: absolute;
}

/* ---------- Red shell ---------- */
.fs-shell {
  inset: 0;
  clip-path: path("M10,0 L750,0 L718,30 L552,31 Q520,33 519,64 L519,1580 Q518,1644 458,1644 L55,1644 Q0,1644 0,1596 L0,11 Z");
  background: linear-gradient(90deg, rgba(0,0,0,0) 0, rgba(0,0,0,0) 45%, rgba(0,0,0,.2) 100%), linear-gradient(180deg, #e44a48 0, #dc3b3d 180px, #d93739 700px, #d6383b 1000px, #cf3035 1200px, #c2272f 1340px, #b5212a 1420px, #aa2028 1500px, #991c22 1540px, #6f1317 1580px, #470508 1640px);
}

/* bright top bar that sweeps to the right */
.fs-topbar {
  left: 0;
  top: 0;
  width: 751px;
  height: 48px;
  clip-path: path("M10,0 L750,0 L718,30 L552,31 Q534,32 526,40 L526,48 L0,48 L0,11 Z");
  background: linear-gradient(90deg, #f36559 0, #f4776b 90px, #ea534e 170px, #e44543 290px, #d8363a 380px, #cb2c33 450px, #c02630 530px, #b12129 600px, #a81f28 740px);
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 26px, transparent 46px);
  mask-image: linear-gradient(180deg, #000 0, #000 26px, transparent 46px);
}
.fs-topbar-shadow {
  left: 526px;
  top: 27px;
  width: 195px;
  height: 6px;
  background: linear-gradient(180deg, rgba(110,14,18,0) 0, rgba(110,14,18,.85) 100%);
  clip-path: polygon(0 70%, 100% 0, 97% 60%, 0 100%);
}

/* hairline seam in the top bar */
.fs-seam-top {
  left: 173px;
  top: 0;
  width: 3px;
  height: 32px;
  background: linear-gradient(180deg, rgba(120,20,22,.7), rgba(120,20,22,.2));
  transform: skewX(6deg);
}

/* raised ledge above the screen */
.fs-ledge {
  left: 0;
  top: 0;
  width: 751px;
  height: 80px;
  clip-path: polygon(236px 57px, 249px 46px, 430px 46px, 438px 58px, 438px 76px, 260px 76px);
  background: linear-gradient(180deg, #4a080b 46px, #6a0f13 49px, #a3202a 52px, #b3242d 60px, #d9383f 66px, #ec5358 69px, #8e1a20 72px, #3a0406 76px);
}

/* ---------- Left edge (neighbouring panel) ---------- */
.fs-left-edge-top {
  left: 0;
  top: 172px;
  width: 27px;
  height: 160px;
  border-top-right-radius: 12px;
  box-shadow: inset -2px 2px 0 #5a1012;
  background: linear-gradient(180deg, #b93a38 0, #c4403d 30px, #bb3936 70px, #ba272b 100px, #bc2a2d 150px, #5a0d10 160px);
}
.fs-left-edge-gap {
  left: 0;
  top: 330px;
  width: 30px;
  height: 415px;
  background: #0e0709;
  clip-path: polygon(0 0, 30px 0, 30px 100%, 0 100%);
}
.fs-left-edge-panel {
  left: 0;
  top: 336px;
  width: 13px;
  height: 405px;
  background: linear-gradient(180deg, #5a4d55 0, #564d54 60px, #6b454c 160px, #52494e 200px, #5f3f45 280px, #4b4048 320px, #423d45 360px, #1e1618 405px);
  clip-path: polygon(0 0, 100% 6px, 100% 94%, 0 100%);
}
.fs-left-edge-rim {
  left: 21px;
  top: 336px;
  width: 3px;
  height: 400px;
  background: rgba(60,50,56,.8);
}

/* ---------- Bezel & screen ---------- */

/* black outline around the bezel (also casts a dark bevel) */
.fs-bezel-outline {
  inset: 0;
  clip-path: polygon(281px 69px, 506px 69px, 520px 80px, 520px 1466px, 146px 1467px, 50px 1370px, 50px 790px, 90px 752px, 90px 228px, 124px 216px);
  background: #000;
}

/* inner red bevel just outside the outline (darker lip) */
.fs-bevel-left {
  left: 72px;
  top: 205px;
  width: 20px;
  height: 575px;
  clip-path: polygon(6px 18px, 20px 12px, 20px 552px, 0 575px, 0 30px);
  background: linear-gradient(90deg, #d8504c 0, #a33a35 4px, #943631 100%);
}
.fs-bevel-lower {
  left: 36px;
  top: 780px;
  width: 18px;
  height: 600px;
  clip-path: polygon(0 20px, 18px 0, 18px 590px, 0 580px);
  background: linear-gradient(90deg, #e84e53 0, #a51d28 4px, #aa2129 100%);
}
.fs-bezel {
  inset: 0;
  clip-path: polygon(285px 76px, 504px 76px, 518px 88px, 518px 1463px, 148px 1463px, 53px 1367px, 53px 792px, 91px 755px, 91px 232px, 130px 222px);
  background: linear-gradient(180deg, #1d1c22 0, #1b1a21 600px, #18191f 820px, #15171f 1100px, #11141c 1360px);
}

/* lighter face of the upper-left bezel strip */
.fs-bezel-face-upper {
  left: 96px;
  top: 226px;
  width: 20px;
  height: 540px;
  background: linear-gradient(90deg, #1e1d23 0, #1f1e24 100%);
  clip-path: polygon(0 10px, 10px 0, 20px 0, 20px 540px, 0 560px);
}
.fs-bezel-face-lower {
  left: 60px;
  top: 795px;
  width: 38px;
  height: 580px;
  background: #16181f;
}
.fs-screen {
  inset: 0;
  clip-path: polygon(289px 83px, 500px 83px, 506px 90px, 506px 1392px, 104px 1392px, 104px 802px, 118px 786px, 118px 258px);
  background: radial-gradient(ellipse at 50% 30%, rgba(20,26,36,.25), rgba(0,0,0,0) 60%), linear-gradient(180deg, #0d131b 0, #0c121a 400px, #0b121b 800px, #091119 1100px, #070f17 1300px, #040d14 1390px);
}

/* bright top rim of the screen */
.fs-screen-top-rim {
  left: 282px;
  top: 77px;
  width: 224px;
  height: 6px;
  background: linear-gradient(180deg, #131315 0, #25272b 30%, #2a3036 55%, #1b2029 100%);
  border-radius: 6px 10px 0 0;
}

/* diagonal rim that follows the chamfer */
.fs-screen-diag-rim {
  left: 0;
  top: 0;
  width: 751px;
  height: 300px;
  clip-path: polygon(284px 77px, 291px 77px, 124px 246px, 118px 258px, 118px 250px);
  background: #2a2a31;
}
.fs-screen-right-rim {
  left: 506px;
  top: 84px;
  width: 5px;
  height: 1310px;
  background: linear-gradient(90deg, #141a24 0, #1f252f 20%, #262c36 50%, #1c2029 80%, #0e0e12 100%);
}
.fs-screen-left-groove {
  left: 115px;
  top: 258px;
  width: 3px;
  height: 530px;
  background: #0c0c11;
}
.fs-screen-left-groove-lower {
  left: 99px;
  top: 804px;
  width: 5px;
  height: 588px;
  background: linear-gradient(90deg, #09090d 0, #09090d 55%, #1a2029 70%, #1a2029 100%);
}

/* ---------- Control strip under the screen ---------- */
.fs-ctrl {
  inset: 0;
  clip-path: polygon(128px 1393px, 512px 1393px, 512px 1462px, 150px 1462px, 112px 1424px, 112px 1408px);
  background: linear-gradient(180deg, #151a23 0, #0f141c 40%, #0a0e15 100%);
}
.fs-ctrl-top-line {
  left: 120px;
  top: 1392px;
  width: 232px;
  height: 10px;
  border-top: 2px solid #2b3947;
  border-left: 2px solid #2b3947;
  border-top-left-radius: 16px;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
}
.fs-ctrl-curve {
  left: 300px;
  top: 1150px;
  width: 190px;
  height: 246px;
  border-right: 2px solid #33475a;
  border-bottom: 3px solid #3d5366;
  border-bottom-right-radius: 62px 58px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 70%), linear-gradient(90deg, transparent 20%, #000 30%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, transparent 0, #000 70%), linear-gradient(90deg, transparent 20%, #000 30%);
  mask-composite: intersect;
}
.fs-ctrl-divider {
  left: 349px;
  top: 1396px;
  width: 2px;
  height: 66px;
  background: linear-gradient(180deg, #2a323d, #151a22);
}
.fs-pill {
  left: 156px;
  top: 1408px;
  width: 162px;
  height: 33px;
  border-radius: 17px;
  background: linear-gradient(180deg, #0c1016 0, #141a24 100%);
  box-shadow: 0 0 0 2px #1d2530, inset 0 1px 1px rgba(0,0,0,.8);
}
.fs-pill-glow {
  left: 160px;
  top: 1412px;
  width: 40px;
  height: 26px;
  border-radius: 13px;
  background: radial-gradient(ellipse at 55% 50%, rgba(170,30,20,.9) 0, rgba(110,15,15,.8) 50%, rgba(60,10,12,0) 100%);
}
.fs-led-orange {
  left: 174px;
  top: 1417px;
  width: 16px;
  height: 13px;
  border-radius: 6px;
  background: radial-gradient(ellipse at 50% 45%, #ffd24a 0, #ffb028 45%, #f27a18 100%);
  box-shadow: 0 0 6px 2px rgba(255,120,30,.55);
}
.fs-led-green {
  left: 203px;
  top: 1418px;
  width: 13px;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 45% 40%, #c6f06a 0, #7dcf2f 55%, #3e8b1a 100%);
  box-shadow: 0 0 4px 1px rgba(120,200,60,.45);
}
.fs-led-white {
  left: 239px;
  top: 1418px;
  width: 6px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 40% 40%, #ffffff 0, #d9dde2 60%, #8a9099 100%);
}
.fs-slider {
  left: 250px;
  top: 1414px;
  width: 60px;
  height: 22px;
  border-radius: 11px;
  background: linear-gradient(180deg, #232830 0, #1e232b 50%, #181c23 100%);
}

/* ---------- Lower red plate ---------- */
.fs-plate-highlight {
  inset: 0;
  clip-path: polygon(146px 1463px, 518px 1461px, 521px 1470px, 521px 1486px, 146px 1486px, 138px 1476px);
  background: linear-gradient(180deg, rgba(0,0,0,0) 1460px, #7a141a 1464px, #e33d48 1469px, #f0616a 1474px, #d93a44 1478px, #a41d27 1484px, rgba(0,0,0,0) 1487px);
}
.fs-plate-left-diag {
  inset: 0;
  clip-path: polygon(40px 1368px, 50px 1368px, 146px 1464px, 140px 1478px);
  background: linear-gradient(135deg, #f36a6d 0, #e2474d 100%);
}
.fs-plate-seam-v {
  left: 99px;
  top: 1428px;
  width: 3px;
  height: 104px;
  background: linear-gradient(90deg, #8e1a21, #c83a40);
}
.fs-plate-dot {
  left: 125px;
  top: 1515px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #5a0c10;
}
.fs-plate-groove {
  inset: 0;
  clip-path: polygon(62px 1529px, 388px 1529px, 474px 1623px, 471px 1627px, 46px 1627px, 6px 1588px, 9px 1582px);
  background: #3a0508;
}
.fs-plate-panel {
  inset: 0;
  clip-path: polygon(66px 1532px, 385px 1532px, 468px 1622px, 48px 1622px, 11px 1586px);
  background: linear-gradient(90deg, rgba(0,0,0,0) 0, rgba(0,0,0,.16) 100%), linear-gradient(180deg, #971b22 1532px, #86171c 1580px, #761419 1622px);
}
.fs-plate-panel-rim {
  inset: 0;
  clip-path: polygon(66px 1532px, 385px 1532px, 387px 1535px, 68px 1535px, 14px 1588px, 11px 1586px);
  background: #d0444a;
}
.fs-plate-bottom {
  inset: 0;
  clip-path: path("M0,1590 Q12,1622 50,1627 L472,1627 Q506,1622 519,1575 L519,1580 Q518,1644 458,1644 L55,1644 Q0,1644 0,1596 Z");
  background: linear-gradient(90deg, #4e080b 0, #3c0306 100%);
}

/* red band + seam that follow the screen's chamfer */
.fs-diag-band {
  inset: 0;
  clip-path: polygon(238px 56px, 262px 70px, 124px 214px, 88px 226px, 82px 212px);
  background: linear-gradient(135deg, #e44b4b 0, #d63a3d 60%, #c93036 100%);
}
.fs-diag-seam {
  inset: 0;
  clip-path: polygon(236px 55px, 240px 57px, 84px 213px, 80px 211px);
  background: #6a1215;
}
.fs-corner-notch {
  left: 76px;
  top: 198px;
  width: 18px;
  height: 28px;
  clip-path: polygon(8px 0, 18px 6px, 18px 28px, 0 28px, 0 10px);
  background: linear-gradient(180deg, #b0302f, #7a1c1d);
}
.fs-seam-left {
  left: 0;
  top: 44px;
  width: 44px;
  height: 3px;
  background: linear-gradient(90deg, rgba(110,20,22,.8), rgba(110,20,22,.2));
}
.fs-seam-left-2 {
  left: 0;
  top: 160px;
  width: 34px;
  height: 12px;
  border-top: 2px solid rgba(100,18,20,.8);
  border-right: 2px solid rgba(100,18,20,.8);
  border-top-right-radius: 14px;
}
.fs-col-highlight {
  left: 30px;
  top: 178px;
  width: 4px;
  height: 572px;
  background: linear-gradient(90deg, #ff736d 0, #f25f5c 60%, rgba(216,50,52,0) 100%);
}
.fs-col-highlight-2 {
  left: 74px;
  top: 230px;
  width: 4px;
  height: 520px;
  background: linear-gradient(90deg, rgba(232,70,70,0), #e84a4a 60%, rgba(160,57,56,.6));
}

/* ---------- Blue lens ---------- */
.fs-lens-shadow {
  left: 34px;
  top: 22px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(40,10,10,.85) 60%, rgba(40,10,10,0) 72%);
}
.fs-lens-ring {
  left: 36px;
  top: 18px;
  width: 174px;
  height: 174px;
  border-radius: 50%;
  background: conic-gradient(from 200deg, #3a3434 0, #d6cfcc 25%, #f4efec 35%, #8c8481 50%, #4b4545 62%, #c9c2bf 78%, #6a6262 90%, #3a3434 100%);
  box-shadow: inset 0 0 0 2px #2f2a2c, 0 0 0 1px #3a2020;
}
.fs-lens-ring-inner {
  left: 48px;
  top: 30px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: #2a2f38;
}
.fs-lens-glass {
  left: 51px;
  top: 33px;
  width: 144px;
  height: 144px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 24%, #a6e4fa 0, #5cc0f0 28%, #3f9fe8 55%, #2f7fdc 80%, #2566c4 100%);
  box-shadow: inset 0 -8px 14px rgba(20,60,150,.55), inset 0 0 0 2px rgba(30,70,140,.6);
}
.fs-lens-reflect {
  left: 56px;
  top: 36px;
  width: 134px;
  height: 136px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 70% 80%, rgba(120,200,255,.55) 0, rgba(120,200,255,0) 35%);
}
.fs-lens-highlight {
  left: 72px;
  top: 48px;
  width: 52px;
  height: 36px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, #ffffff 0, rgba(235,248,255,.95) 40%, rgba(200,235,255,0) 72%);
  transform: rotate(-28deg);
}
.fs-lens-highlight-2 {
  left: 118px;
  top: 128px;
  width: 36px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(200,240,255,.7), rgba(200,240,255,0) 70%);
  transform: rotate(-35deg);
}

/* Each copy of the canvas sits at the top-left of its piece; script.js
   moves and scales it so the right part of the canvas shows. */
.frame-shell .fs-scene {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
}

/* -----------------------------
   4. COLOUR SWITCHING
   The same colours as section 3, but each one passed through the two
   settings in section 1 (turned around the colour wheel by
   --frame-hue, made more/less colourful by --frame-sat). At the
   default settings they come out exactly as designed. Browsers too
   old for this simply use section 3's colours as they are.
------------------------------ */
@supports (color: oklch(from red l c h)) {
  .fs-rf-band {
    background: linear-gradient(180deg, oklch(from #17171a l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 16px, oklch(from #050404 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 19px, oklch(from #030202 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 21px, oklch(from #000 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 42px, oklch(from #3a0c0f l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 44px, oklch(from #7d1a1f l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 45px);
  }
  .fs-rf-band-glow {
    background: linear-gradient(90deg, oklch(from #210507 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 20px, oklch(from #0e0202 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 140px, oklch(from #160103 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 260px, oklch(from #110203 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 380px, oklch(from #130204 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 500px, oklch(from #180102 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 620px, oklch(from #1d0203 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 740px, oklch(from #290508 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 860px, oklch(from #320508 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 980px, oklch(from #3c0e10 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1100px, oklch(from #441215 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1220px, oklch(from #3b1417 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1340px, oklch(from #3e181c l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1460px, oklch(from #3e171b l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1580px, oklch(from #310b0d l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1700px);
  }
  .fs-rf-band-line {
    background: linear-gradient(90deg, oklch(from #30313b l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 30px, oklch(from #1a1e21 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 150px, oklch(from #211e21 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 270px, oklch(from #1e1f23 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 390px, oklch(from #212023 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 510px, oklch(from #2c2629 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 630px, oklch(from #371013 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 750px, oklch(from #2e1616 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 870px, oklch(from #2a2323 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 990px, oklch(from #24292c l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1110px, oklch(from #1c2529 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1230px, oklch(from #1d2227 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1350px, oklch(from #15161a l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1470px, oklch(from #101315 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1590px, oklch(from #060304 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1710px);
  }
  .fs-rf-top {
    background: linear-gradient(180deg, oklch(from #5a1115 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 0, oklch(from #7d1a1f l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1px, oklch(from #db2b36 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 2px, oklch(from rgba(0,0,0,0) l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 4px, oklch(from rgba(0,0,0,0) l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 11px, oklch(from rgba(0,0,0,0) l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 17px, oklch(from #380c11 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 18px), linear-gradient(90deg, oklch(from #b73639 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 0px, oklch(from #c43139 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 120px, oklch(from #bf2d34 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 240px, oklch(from #a62832 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 360px, oklch(from #af2732 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 480px, oklch(from #a62531 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 600px, oklch(from #af2932 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 720px, oklch(from #c02933 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 840px, oklch(from #c42730 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 960px, oklch(from #c3252f l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1080px, oklch(from #c42e33 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1200px, oklch(from #c12c33 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1320px, oklch(from #bc2e33 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1440px, oklch(from #b5262e l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1560px, oklch(from #aa2b30 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1680px, oklch(from #a0282b l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1800px);
  }
  .fs-rf-top-hl {
    background: linear-gradient(90deg, oklch(from #c13b40 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) -6px, oklch(from #e7484b l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 114px, oklch(from #cc6664 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 234px, oklch(from #ec464a l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 354px, oklch(from #ee484b l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 474px, oklch(from #f3474b l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 594px, oklch(from #f14b4c l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 714px, oklch(from #e93c44 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 834px, oklch(from #9d5256 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 954px, oklch(from #a54c53 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1074px, oklch(from #a95154 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1194px, oklch(from #904f54 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1314px, oklch(from #da373d l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1434px, oklch(from #b03338 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1554px, oklch(from #94403d l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1674px, oklch(from #892f2f l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1794px);
  }
  .fs-rf-left {
    background: linear-gradient(90deg, oklch(from rgba(255,120,110,.55) l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 0, oklch(from rgba(255,120,110,0) l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 2px, oklch(from rgba(0,0,0,0) l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 16px, oklch(from rgba(0,0,0,.55) l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 17px, oklch(from #0d0000 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 19px), linear-gradient(180deg, oklch(from #ca3e43 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) -20px, oklch(from #d73a3f l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 44px, oklch(from #e14042 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 124px, oklch(from #e74647 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 204px, oklch(from #eb4345 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 404px, oklch(from #dc363b l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 524px, oklch(from #d2363e l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 644px, oklch(from #bc343d l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 684px, oklch(from #903137 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 724px, oklch(from #993036 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 804px, oklch(from #a22830 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 884px, oklch(from #aa242d l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 964px, oklch(from #a21e29 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1204px, oklch(from #971a23 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1324px, oklch(from #841d23 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1404px, oklch(from #7a1a20 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1454px);
  }
  .fs-rf-left-hl {
    background: linear-gradient(180deg, oklch(from #d9504f l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) -24px, oklch(from #f27a70 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 100px, oklch(from #ffa999 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 200px, oklch(from #f58a7e l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 400px, oklch(from #e0574f l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 600px, oklch(from #c24048 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 680px, oklch(from #9b2c33 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 720px, oklch(from #b42d37 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 900px, oklch(from #ae2931 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1200px, oklch(from #8a2229 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1400px);
  }
  .fs-rf-right {
    background: linear-gradient(90deg, oklch(from #000 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 0, oklch(from #000 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 2px, oklch(from rgba(40,10,10,.8) l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 3px, oklch(from rgba(0,0,0,0) l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 5px, oklch(from rgba(0,0,0,0) l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 19px, oklch(from rgba(120,20,20,.6) l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 21px), linear-gradient(180deg, oklch(from #ba3e3c l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) -26px, oklch(from #b93735 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 38px, oklch(from #be3d38 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 198px, oklch(from #c53838 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 398px, oklch(from #bc4641 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 518px, oklch(from #a84c47 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 638px, oklch(from #8f4344 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 678px, oklch(from #7c4043 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 718px, oklch(from #904140 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 798px, oklch(from #a04642 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 918px, oklch(from #a8403c l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1038px, oklch(from #a22d32 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1118px, oklch(from #9d2d2f l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1198px, oklch(from #902b2f l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1318px, oklch(from #7e3737 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1398px, oklch(from #823e3b l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1448px);
  }
  .fs-rf-right-hl {
    background: linear-gradient(180deg, oklch(from #c9554f l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) -28px, oklch(from #e25c52 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 196px, oklch(from #d36a60 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 516px, oklch(from #a35a58 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 676px, oklch(from #975751 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 896px, oklch(from #a84041 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1196px, oklch(from #8a4344 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1396px);
  }
  .fs-rf-bottom {
    background: linear-gradient(180deg, oklch(from #1c0606 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 0, oklch(from #4c090b l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 2px, oklch(from rgba(0,0,0,0) l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 3px, oklch(from rgba(0,0,0,0) l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 7px, oklch(from rgba(0,0,0,.15) l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 9px), linear-gradient(90deg, oklch(from #d32b32 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 0px, oklch(from #e22e37 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 120px, oklch(from #ec2e37 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 240px, oklch(from #ee313b l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 360px, oklch(from #ec2e38 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 480px, oklch(from #e72c36 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 600px, oklch(from #e52f37 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 720px, oklch(from #e62d35 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 840px, oklch(from #ef393e l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 960px, oklch(from #e22934 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1080px, oklch(from #e1353a l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1200px, oklch(from #d92830 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1320px, oklch(from #b71c24 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1440px, oklch(from #9a141a l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1560px, oklch(from #671617 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1680px, oklch(from #511717 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1800px, oklch(from #5a1a1a l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1908px);
  }
  .fs-rf-side {
    background: linear-gradient(180deg, oklch(from #380e0e l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 4px, oklch(from #b83131 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 12px, oklch(from #c33433 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 52px, oklch(from #c03232 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 212px, oklch(from #bc2c2f l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 452px, oklch(from #b62d2e l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 612px, oklch(from #ad3336 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 692px, oklch(from #b93134 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 732px, oklch(from #b72e30 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 912px, oklch(from #b42a2e l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1012px, oklch(from #ad262b l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1212px, oklch(from #a8222a l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1332px, oklch(from #9e252b l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1372px, oklch(from #8c2a2d l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1427px);
  }
  .fs-rf-side-hl {
    background: linear-gradient(180deg, oklch(from #a72729 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 4px, oklch(from #c22127 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 12px, oklch(from #cf2b2e l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 92px, oklch(from #dc3439 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 172px, oklch(from #eb4b4a l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 292px, oklch(from #d72e31 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 412px, oklch(from #c6292c l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 612px, oklch(from #c42d30 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 652px, oklch(from #cf4546 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 692px, oklch(from #f26057 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 772px, oklch(from #e34040 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 852px, oklch(from #df3639 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 932px, oklch(from #e0343a l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1212px, oklch(from #c72c32 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1372px, oklch(from #bf3b40 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1427px);
  }
  .fs-rf-side-panel {
    background: linear-gradient(90deg, oklch(from #7b2423 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 0, oklch(from #000 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 2px, oklch(from #000 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 3px, oklch(from rgba(0,0,0,0) l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 5px), linear-gradient(180deg, oklch(from #2d2c31 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 4px, oklch(from #34343b l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 74px, oklch(from #2a2c30 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 174px, oklch(from #25252b l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 274px, oklch(from #232428 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 434px, oklch(from #211c21 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 554px, oklch(from #1d181c l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 634px, oklch(from #19191b l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 689px);
  }
  .fs-rf-corner-top {
    background: linear-gradient(180deg, oklch(from #18191c l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 0, oklch(from #000 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 6px, oklch(from #121115 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 12px, oklch(from #151418 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 30px, oklch(from #141317 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 60px, oklch(from #080606 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 72px, oklch(from #3a0c0c l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 76px);
  }
  .fs-rf-corner-plate {
    background: linear-gradient(135deg, oklch(from #2a2b31 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 0, oklch(from #1d1c21 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 45%, oklch(from #17171b l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 100%);
  }
  .fs-rf-corner-plate-edge {
    background: oklch(from #3a3b42 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue)));
  }
  .fs-rf-corner-bottom {
    background: linear-gradient(180deg, oklch(from #490f14 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 14px, oklch(from #2d0a0c l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 17px, oklch(from #050708 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 20px, oklch(from #171417 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 24px, oklch(from #0c090b l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 28px, oklch(from #0b090a l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 36px, oklch(from #020102 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 40px, oklch(from #010101 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 50px);
  }
  .fs-rf-side-foot {
    background: oklch(from #7a1f22 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue)));
  }
  .fs-rf-base {
    background: linear-gradient(180deg, oklch(from #b0302f l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 0, oklch(from #b43a38 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 300px, oklch(from #9a3a3a l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 800px, oklch(from #a02a2e l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1300px, oklch(from #7e2a2c l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1550px);
  }
  .fs-rf-edge {
    background: linear-gradient(180deg, oklch(from #2a080b l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 60px, oklch(from #120304 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 70px, oklch(from #0a0000 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1500px, oklch(from #1c0606 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1544px);
  }
  .fs-rf-corner-fill-tl {
    background: radial-gradient(circle at 55px 54px, oklch(from #1a0506 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 35px, oklch(from #3a0c10 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 37px, oklch(from #d9504f l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 39px, oklch(from #c84044 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 42px, oklch(from #c23a3f l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 50px, oklch(from #d84647 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 53px, oklch(from #b83c3e l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 55px);
  }
  .fs-rf-corner-fill-bl {
    background: radial-gradient(circle at 45px 47px, oklch(from #0d0000 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 25px, oklch(from #7f1f23 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 27px, oklch(from #a42630 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 30px, oklch(from #d8303a l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 33px, oklch(from #b0282e l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 40px, oklch(from #c8363a l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 45px);
  }
  .fs-rf-corner-fill-tr {
    background: radial-gradient(circle at 48px 59px, oklch(from #000 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 38px, oklch(from #380c11 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 41px, oklch(from #c94a47 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 43px, oklch(from #d65450 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 46px, oklch(from #b0302f l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 48px, oklch(from #a8302f l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 55px, oklch(from #c93639 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 57px, oklch(from #7d1a1f l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 59px);
  }
  .fs-rf-corner-fill-br {
    background: radial-gradient(circle at 63px 47px, oklch(from #000 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 25px, oklch(from #3a1515 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 27px, oklch(from #7a3434 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 30px, oklch(from #6a2e2e l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 36px, oklch(from #5a2424 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 45px);
  }
  .fs-shell {
    background: linear-gradient(90deg, oklch(from rgba(0,0,0,0) l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 0, oklch(from rgba(0,0,0,0) l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 45%, oklch(from rgba(0,0,0,.2) l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 100%), linear-gradient(180deg, oklch(from #e44a48 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 0, oklch(from #dc3b3d l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 180px, oklch(from #d93739 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 700px, oklch(from #d6383b l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1000px, oklch(from #cf3035 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1200px, oklch(from #c2272f l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1340px, oklch(from #b5212a l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1420px, oklch(from #aa2028 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1500px, oklch(from #991c22 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1540px, oklch(from #6f1317 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1580px, oklch(from #470508 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1640px);
  }
  .fs-topbar {
    background: linear-gradient(90deg, oklch(from #f36559 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 0, oklch(from #f4776b l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 90px, oklch(from #ea534e l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 170px, oklch(from #e44543 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 290px, oklch(from #d8363a l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 380px, oklch(from #cb2c33 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 450px, oklch(from #c02630 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 530px, oklch(from #b12129 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 600px, oklch(from #a81f28 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 740px);
  }
  .fs-topbar-shadow {
    background: linear-gradient(180deg, oklch(from rgba(110,14,18,0) l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 0, oklch(from rgba(110,14,18,.85) l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 100%);
  }
  .fs-seam-top {
    background: linear-gradient(180deg, oklch(from rgba(120,20,22,.7) l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))), oklch(from rgba(120,20,22,.2) l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))));
  }
  .fs-ledge {
    background: linear-gradient(180deg, oklch(from #4a080b l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 46px, oklch(from #6a0f13 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 49px, oklch(from #a3202a l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 52px, oklch(from #b3242d l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 60px, oklch(from #d9383f l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 66px, oklch(from #ec5358 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 69px, oklch(from #8e1a20 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 72px, oklch(from #3a0406 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 76px);
  }
  .fs-left-edge-top {
    box-shadow: inset -2px 2px 0 oklch(from #5a1012 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue)));
    background: linear-gradient(180deg, oklch(from #b93a38 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 0, oklch(from #c4403d l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 30px, oklch(from #bb3936 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 70px, oklch(from #ba272b l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 100px, oklch(from #bc2a2d l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 150px, oklch(from #5a0d10 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 160px);
  }
  .fs-bevel-left {
    background: linear-gradient(90deg, oklch(from #d8504c l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 0, oklch(from #a33a35 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 4px, oklch(from #943631 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 100%);
  }
  .fs-bevel-lower {
    background: linear-gradient(90deg, oklch(from #e84e53 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 0, oklch(from #a51d28 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 4px, oklch(from #aa2129 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 100%);
  }
  .fs-plate-highlight {
    background: linear-gradient(180deg, oklch(from rgba(0,0,0,0) l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1460px, oklch(from #7a141a l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1464px, oklch(from #e33d48 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1469px, oklch(from #f0616a l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1474px, oklch(from #d93a44 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1478px, oklch(from #a41d27 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1484px, oklch(from rgba(0,0,0,0) l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1487px);
  }
  .fs-plate-left-diag {
    background: linear-gradient(135deg, oklch(from #f36a6d l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 0, oklch(from #e2474d l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 100%);
  }
  .fs-plate-seam-v {
    background: linear-gradient(90deg, oklch(from #8e1a21 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))), oklch(from #c83a40 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))));
  }
  .fs-plate-dot {
    background: oklch(from #5a0c10 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue)));
  }
  .fs-plate-groove {
    background: oklch(from #3a0508 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue)));
  }
  .fs-plate-panel {
    background: linear-gradient(90deg, oklch(from rgba(0,0,0,0) l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 0, oklch(from rgba(0,0,0,.16) l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 100%), linear-gradient(180deg, oklch(from #971b22 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1532px, oklch(from #86171c l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1580px, oklch(from #761419 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 1622px);
  }
  .fs-plate-panel-rim {
    background: oklch(from #d0444a l calc(c * var(--frame-sat)) calc(h + var(--frame-hue)));
  }
  .fs-plate-bottom {
    background: linear-gradient(90deg, oklch(from #4e080b l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 0, oklch(from #3c0306 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 100%);
  }
  .fs-diag-band {
    background: linear-gradient(135deg, oklch(from #e44b4b l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 0, oklch(from #d63a3d l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 60%, oklch(from #c93036 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 100%);
  }
  .fs-diag-seam {
    background: oklch(from #6a1215 l calc(c * var(--frame-sat)) calc(h + var(--frame-hue)));
  }
  .fs-corner-notch {
    background: linear-gradient(180deg, oklch(from #b0302f l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))), oklch(from #7a1c1d l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))));
  }
  .fs-seam-left {
    background: linear-gradient(90deg, oklch(from rgba(110,20,22,.8) l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))), oklch(from rgba(110,20,22,.2) l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))));
  }
  .fs-seam-left-2 {
    border-top: 2px solid oklch(from rgba(100,18,20,.8) l calc(c * var(--frame-sat)) calc(h + var(--frame-hue)));
    border-right: 2px solid oklch(from rgba(100,18,20,.8) l calc(c * var(--frame-sat)) calc(h + var(--frame-hue)));
  }
  .fs-col-highlight {
    background: linear-gradient(90deg, oklch(from #ff736d l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 0, oklch(from #f25f5c l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 60%, oklch(from rgba(216,50,52,0) l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 100%);
  }
  .fs-col-highlight-2 {
    background: linear-gradient(90deg, oklch(from rgba(232,70,70,0) l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))), oklch(from #e84a4a l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 60%, oklch(from rgba(160,57,56,.6) l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))));
  }
  .fs-lens-shadow {
    background: radial-gradient(circle, oklch(from rgba(40,10,10,.85) l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 60%, oklch(from rgba(40,10,10,0) l calc(c * var(--frame-sat)) calc(h + var(--frame-hue))) 72%);
  }
}