@font-face {
  font-family: "Pixelify SF8";
  src: url("./assets/fonts/PixelifySans-Variable.ttf") format("truetype");
  font-weight: 400 900;
  font-display: swap;
}

@font-face {
  font-family: "Press SF8";
  src: url("./assets/fonts/PressStart2P-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

:root {
  --page: #f8f9fa;
  --paper: #ffffff;
  --ink: #15171a;
  --muted: #70777e;
  --line: #e0e3e6;
  --blue: #2f83e9;
  --folder: #68c6ee;
  --folder-edge: #1f84a9;
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--page);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 54% 7%, rgba(232, 234, 235, 0.95) 0 1px, transparent 2px) 0 0 / 82px 82px,
    linear-gradient(180deg, #fbfbfb 0%, #f8f9f9 48%, #ffffff 100%);
  font-family: "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  letter-spacing: 0;
}

button,
select {
  font: inherit;
}

button,
select {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

.works-main {
  min-height: 100vh;
  margin-left: 0;
  background:
    radial-gradient(circle at 44% 22%, rgba(223, 226, 228, 0.38), transparent 22%),
    linear-gradient(180deg, #fbfbfb 0%, #ffffff 100%);
}

.top-actions {
  position: absolute;
  z-index: 8;
  top: 43px;
  right: 45px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.icon-button {
  position: relative;
  width: 30px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: 0;
}

.icon-button.search::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 2px;
  width: 18px;
  height: 18px;
  border: 3px solid #11161b;
  border-radius: 50%;
}

.icon-button.search::after {
  content: "";
  position: absolute;
  right: 2px;
  bottom: 5px;
  width: 12px;
  height: 3px;
  background: #11161b;
  border-radius: 3px;
  transform: rotate(45deg);
}

.icon-button.bell::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 4px;
  width: 17px;
  height: 22px;
  border: 3px solid #11161b;
  border-bottom: 0;
  border-radius: 14px 14px 7px 7px;
}

.icon-button.bell::after {
  content: "";
  position: absolute;
  left: 4px;
  bottom: 3px;
  width: 22px;
  height: 9px;
  border-bottom: 3px solid #11161b;
  border-radius: 50%;
}

.top-mascot {
  position: relative;
  width: 41px;
  height: 41px;
  background: #69c340;
  border: 4px solid #11161b;
  border-radius: 52%;
  box-shadow: inset -6px -4px 0 rgba(33, 106, 31, 0.24);
}

.top-mascot::before {
  content: "";
  position: absolute;
  left: 14px;
  top: -12px;
  width: 12px;
  height: 12px;
  border: 3px solid #11161b;
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
}

.top-mascot::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 15px;
  width: 8px;
  height: 11px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 14px 0 0 #fff;
}

.top-mascot span {
  position: absolute;
  left: 12px;
  top: 19px;
  width: 4px;
  height: 4px;
  background: #11161b;
  border-radius: 50%;
  box-shadow: 14px 0 0 #11161b;
}

.works-hero {
  position: relative;
  height: 311px;
  padding: 96px 0 0 128px;
  overflow: hidden;
  background:
    radial-gradient(circle at 32% 16%, rgba(222, 225, 227, 0.5), transparent 18%),
    linear-gradient(180deg, #fbfbfb 0%, #f5f6f6 100%);
  border-bottom: 1px solid #eef0f1;
}

.hero-copy {
  position: relative;
  z-index: 3;
}

.hero-copy strong {
  display: block;
  margin-bottom: 18px;
  color: #2f83e9;
  font-size: 24px;
  line-height: 1;
  font-weight: 900;
}

.hero-copy h1 {
  margin: 0;
  color: #111315;
  font-size: 66px;
  line-height: 0.98;
  font-weight: 900;
}

.hero-copy p {
  margin: 23px 0 0 5px;
  color: #4a5057;
  font-size: 20px;
  line-height: 1.35;
  font-weight: 600;
}

.hero-spark {
  position: absolute;
  width: 9px;
  height: 9px;
  background: rgba(255, 255, 255, 0.78);
}

.spark-a {
  left: 408px;
  top: 32px;
}

.spark-b {
  right: 510px;
  top: 110px;
}

.hero-visual {
  position: absolute;
  left: 730px;
  top: 0;
  width: 850px;
  height: 311px;
}

.yellow-stamp {
  position: absolute;
  left: 6px;
  top: 153px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 105px;
  height: 48px;
  color: #11161b;
  background: #f6d842;
  border: 2px dashed #11161b;
  box-shadow: 0 7px 10px rgba(0, 0, 0, 0.12);
  transform: rotate(-11deg);
  font-family: "Pixelify SF8", "Press SF8", monospace;
  font-size: 21px;
  font-weight: 900;
}

.folder-hero {
  position: absolute;
  left: 282px;
  top: 160px;
  width: 210px;
  height: 170px;
}

.hero-tile {
  position: absolute;
  left: 42px;
  top: -18px;
  width: 122px;
  height: 98px;
  background: #ef237d;
  border-radius: 5px;
  transform: rotate(-4deg);
  box-shadow: 0 8px 12px rgba(15, 20, 25, 0.14);
}

.hero-tile::before {
  content: "";
  position: absolute;
  left: 24px;
  top: -8px;
  width: 64px;
  height: 15px;
  background: #ef237d;
  border: 5px solid #11161b;
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
}

.hero-tile .screen {
  position: absolute;
  left: 22px;
  top: 28px;
  width: 73px;
  height: 48px;
  background: #fff;
  border: 5px solid #11161b;
  border-radius: 5px;
}

.hero-tile .screen::before {
  content: "AI";
  position: absolute;
  left: 7px;
  top: 9px;
  color: #11161b;
  font-family: "Press SF8", monospace;
  font-size: 17px;
}

.hero-tile .screen::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 14px;
  border-left: 13px solid #11161b;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
}

.hero-folder {
  position: absolute;
  left: 0;
  bottom: -12px;
  width: 199px;
  height: 87px;
  background: var(--folder);
  border: 2px solid var(--folder-edge);
  box-shadow: 0 4px 0 #2689ad;
}

.hero-folder::before {
  content: "";
  position: absolute;
  left: 0;
  top: -38px;
  width: 111px;
  height: 41px;
  background: #5ec2e7;
  border: 2px solid var(--folder-edge);
  border-bottom: 0;
  clip-path: polygon(0 100%, 28% 100%, 43% 14%, 100% 14%, 100% 100%);
}

.hero-folder::after {
  content: "";
  position: absolute;
  right: 24px;
  top: 35px;
  width: 9px;
  height: 31px;
  background: rgba(203, 241, 255, 0.64);
  box-shadow: 12px 10px 0 -3px rgba(203, 241, 255, 0.64);
}

.hero-note {
  position: absolute;
  left: 560px;
  top: 160px;
  width: 254px;
  padding: 18px 21px;
  background: #fff;
  border: 2px dashed #767b80;
  box-shadow: 0 8px 14px rgba(0, 0, 0, 0.12);
  transform: rotate(2deg);
  color: #1d2227;
  font-size: 19px;
  line-height: 1.35;
  font-weight: 900;
}

.hero-note::after {
  content: "";
  position: absolute;
  left: -17px;
  bottom: -7px;
  width: 24px;
  height: 28px;
  border-left: 2px dashed #767b80;
  transform: skewX(-24deg);
}

.works-board {
  padding: 27px 113px 68px 120px;
}

.works-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 42px;
}

.filter-tabs {
  display: flex;
  align-items: center;
  gap: 27px;
}

.filter-tab {
  height: 42px;
  min-width: 104px;
  padding: 0 18px;
  color: #1f252b;
  background: transparent;
  border: 0;
  border-radius: 6px;
  font-size: 17px;
  font-weight: 900;
  white-space: nowrap;
}

.filter-tab.is-active {
  color: #fff;
  background: linear-gradient(180deg, #3d96f4, #2c79dd);
  box-shadow: 0 8px 16px rgba(46, 126, 223, 0.2);
}

.view-controls {
  display: flex;
  align-items: center;
  gap: 13px;
}

.view-controls label {
  position: relative;
}

.view-controls label::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 16px;
  width: 9px;
  height: 9px;
  border-right: 2px solid #8b9197;
  border-bottom: 2px solid #8b9197;
  transform: rotate(45deg);
  pointer-events: none;
}

.view-controls select {
  width: 130px;
  height: 42px;
  padding: 0 34px 0 20px;
  color: #1f252b;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid #d1d6da;
  border-radius: 5px;
  box-shadow: 0 5px 12px rgba(31, 39, 48, 0.04);
  appearance: none;
  font-size: 15px;
  font-weight: 800;
}

.layout-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 30px;
  padding: 0;
  background: transparent;
  border: 0;
  color: #a4aaaf;
}

.layout-button.is-active {
  color: #2f83e9;
}

.grid-icon {
  width: 22px;
  height: 22px;
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 9px 9px no-repeat,
    linear-gradient(currentColor, currentColor) right 0 / 9px 9px no-repeat,
    linear-gradient(currentColor, currentColor) 0 bottom / 9px 9px no-repeat,
    linear-gradient(currentColor, currentColor) right bottom / 9px 9px no-repeat;
}

.list-icon {
  width: 22px;
  height: 22px;
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 8px 8px no-repeat,
    linear-gradient(currentColor, currentColor) 13px 0 / 8px 8px no-repeat,
    linear-gradient(currentColor, currentColor) 0 13px / 8px 8px no-repeat,
    linear-gradient(currentColor, currentColor) 13px 13px / 8px 8px no-repeat;
  opacity: 0.7;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 36px 38px;
}

.video-card {
  display: block;
  min-width: 0;
}

.video-card[href] {
  cursor: pointer;
}

.video-card[href]:hover h2,
.video-card[href]:focus-visible h2 {
  color: #2f83e9;
}

.video-card[hidden] {
  display: none;
}

.video-thumb {
  position: relative;
  height: 145px;
  overflow: hidden;
  border: 1px solid #cbd1d5;
  border-radius: 7px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 8px 16px rgba(24, 32, 40, 0.045);
}

.video-thumb.sky {
  background: linear-gradient(135deg, #6fc1f0 0%, #4faee4 100%);
}

.video-thumb.white {
  background:
    radial-gradient(circle at 78% 20%, rgba(255, 255, 255, 0.85), transparent 28%),
    linear-gradient(135deg, #f8f8f8, #ececec);
}

.video-thumb.yellow {
  background: linear-gradient(135deg, #f7d33b 0%, #f3c42e 100%);
}

.video-thumb.blue {
  background: linear-gradient(135deg, #3396ee 0%, #1f78da 100%);
}

.video-thumb.green {
  background: linear-gradient(135deg, #72bc53 0%, #61ae47 100%);
}

.video-thumb.pink {
  background: linear-gradient(135deg, #ef6aa2 0%, #e84d8e 100%);
}

.duration {
  position: absolute;
  right: 9px;
  bottom: 9px;
  z-index: 6;
  display: flex;
  align-items: center;
  height: 24px;
  padding: 0 7px;
  color: #fff;
  background: rgba(26, 28, 31, 0.85);
  border-radius: 3px;
  font-size: 15px;
  line-height: 1;
  font-weight: 800;
}

.video-card h2 {
  margin: 13px 0 12px;
  color: #202429;
  font-size: 17px;
  line-height: 1.25;
  font-weight: 850;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.video-card p {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  color: #858a90;
  font-size: 15px;
  line-height: 1;
  font-weight: 500;
}

.views {
  position: relative;
  padding-left: 22px;
}

.views::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 15px;
  height: 10px;
  border: 2px solid #a0a5aa;
  border-radius: 50%;
}

.views::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 6px;
  width: 4px;
  height: 4px;
  background: #a0a5aa;
  border-radius: 50%;
}

.video-thumb::before,
.video-thumb::after {
  content: "";
  position: absolute;
}

.scene-office::before {
  left: 72px;
  bottom: -28px;
  width: 62px;
  height: 78px;
  background:
    radial-gradient(circle at 21px 29px, #11161b 0 4px, transparent 5px),
    radial-gradient(circle at 43px 29px, #11161b 0 4px, transparent 5px),
    linear-gradient(#11161b, #11161b) 25px 47px / 15px 3px no-repeat,
    #f0c62f;
  border: 4px solid #11161b;
  border-radius: 11px;
}

.scene-office::after {
  left: 101px;
  top: 64px;
  width: 11px;
  height: 11px;
  background: #11161b;
  border-radius: 50%;
  box-shadow: 27px 0 0 #11161b, 13px 17px 0 -3px #11161b, -22px -18px 0 -2px #f0c62f, -22px -18px 0 2px #11161b, 46px -24px 0 -2px #f0c62f, 46px -24px 0 2px #11161b;
}

.scene-office .duration::before {
  content: "";
  position: absolute;
  left: -190px;
  bottom: 67px;
  width: 54px;
  height: 48px;
  background: #f8fbff;
  border: 4px solid #11161b;
  border-radius: 4px;
  box-shadow: 119px 7px 0 1px #f8fbff, 119px 7px 0 5px #11161b;
}

.scene-office .duration::after {
  content: "";
  position: absolute;
  left: -178px;
  bottom: 98px;
  width: 30px;
  height: 3px;
  background: #9ca7ad;
  box-shadow: 0 13px 0 #9ca7ad, 0 26px 0 #9ca7ad, 121px 11px 0 -1px #5ca4ec, 121px 21px 0 -1px #5ca4ec, 121px 31px 0 -1px #5ca4ec;
}

.scene-brand::before {
  left: 53px;
  bottom: -27px;
  width: 66px;
  height: 70px;
  background:
    radial-gradient(circle at 22px 30px, #11161b 0 4px, transparent 5px),
    radial-gradient(circle at 44px 30px, #11161b 0 4px, transparent 5px),
    linear-gradient(#11161b, #11161b) 26px 48px / 15px 3px no-repeat,
    #fff;
  border: 4px solid #11161b;
  border-radius: 10px;
}

.scene-brand::after {
  left: 72px;
  top: 78px;
  width: 10px;
  height: 10px;
  background: #11161b;
  border-radius: 50%;
  box-shadow: 30px 0 0 #11161b, 15px 17px 0 -3px #11161b, -26px -12px 0 -3px #63a6ec, -26px -12px 0 1px #11161b, 47px -15px 0 -3px #63a6ec, 47px -15px 0 1px #11161b;
}

.scene-brand .duration::before {
  content: "AI";
  position: absolute;
  left: -136px;
  bottom: 62px;
  width: 68px;
  height: 44px;
  padding: 12px 0 0 10px;
  color: #11161b;
  background: #fff;
  border: 4px solid #11161b;
  border-radius: 5px;
  font-family: "Press SF8", monospace;
  font-size: 15px;
}

.scene-brand .duration::after {
  content: "";
  position: absolute;
  left: -20px;
  bottom: 43px;
  width: 31px;
  height: 48px;
  background:
    linear-gradient(#2f83e9, #2f83e9) 8px 8px / 14px 8px no-repeat,
    linear-gradient(#e84d8e, #e84d8e) 8px 22px / 14px 8px no-repeat,
    linear-gradient(#6cbf49, #6cbf49) 8px 36px / 14px 8px no-repeat,
    #f8fbff;
  border: 3px solid #11161b;
}

.scene-data::before,
.scene-market::before {
  left: 76px;
  top: 37px;
  width: 90px;
  height: 68px;
  background: #fffdf2;
  border: 5px solid #11161b;
  border-radius: 5px;
}

.scene-data::after,
.scene-market::after {
  left: 104px;
  top: 70px;
  width: 11px;
  height: 28px;
  background: #3d72ff;
  box-shadow: 21px -8px 0 #20b99f, 42px -20px 0 #11161b, 70px -12px 0 7px #11161b;
}

.scene-code::before,
.scene-video::before,
.scene-writing::before,
.scene-mj::before,
.scene-voice::before,
.scene-customer::before,
.scene-chatgpt::before,
.scene-ppt::before,
.scene-project::before,
.scene-nocode::before,
.scene-edit::before {
  left: 64px;
  bottom: -25px;
  width: 66px;
  height: 76px;
  background:
    radial-gradient(circle at 22px 30px, #11161b 0 4px, transparent 5px),
    radial-gradient(circle at 44px 30px, #11161b 0 4px, transparent 5px),
    linear-gradient(#11161b, #11161b) 26px 48px / 15px 3px no-repeat,
    #fff;
  border: 4px solid #11161b;
  border-radius: 9px;
}

.scene-code::after,
.scene-video::after,
.scene-writing::after,
.scene-mj::after,
.scene-voice::after,
.scene-customer::after,
.scene-chatgpt::after,
.scene-ppt::after,
.scene-project::after,
.scene-nocode::after,
.scene-edit::after {
  left: 85px;
  top: 76px;
  width: 10px;
  height: 10px;
  background: #11161b;
  border-radius: 50%;
  box-shadow: 29px 0 0 #11161b, 14px 18px 0 -3px #11161b, -27px -3px 0 -2px #77a6ff, -27px -3px 0 2px #11161b, 50px -4px 0 -2px #77a6ff, 50px -4px 0 2px #11161b, 16px -55px 0 -2px #77a6ff, 16px -55px 0 2px #11161b;
}

.scene-code .duration::before {
  content: "</>";
  position: absolute;
  left: -98px;
  bottom: 58px;
  width: 58px;
  height: 44px;
  padding-top: 13px;
  color: #57a5ff;
  background: #1c2730;
  border-radius: 4px;
  font-family: "Press SF8", monospace;
  font-size: 13px;
  text-align: center;
}

.scene-video .duration::before,
.scene-edit .duration::before {
  content: "";
  position: absolute;
  left: -80px;
  bottom: 51px;
  width: 63px;
  height: 50px;
  background: #fff;
  border: 4px solid #11161b;
  border-radius: 4px;
}

.scene-video .duration::after,
.scene-edit .duration::after {
  content: "";
  position: absolute;
  left: -55px;
  bottom: 66px;
  border-left: 16px solid #11161b;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
}

.scene-writing .duration::before {
  content: "";
  position: absolute;
  left: -92px;
  bottom: 55px;
  width: 54px;
  height: 62px;
  background:
    linear-gradient(#c2c7cc, #c2c7cc) 12px 13px / 30px 3px no-repeat,
    linear-gradient(#c2c7cc, #c2c7cc) 12px 26px / 27px 3px no-repeat,
    #fff;
  border: 4px solid #11161b;
}

.scene-writing .duration::after {
  content: "";
  position: absolute;
  left: -43px;
  bottom: 46px;
  width: 16px;
  height: 61px;
  background: #53a9f0;
  border: 4px solid #11161b;
  transform: rotate(42deg);
}

.scene-mj .duration::before {
  content: "";
  position: absolute;
  left: -100px;
  bottom: 54px;
  width: 56px;
  height: 54px;
  background:
    radial-gradient(circle at 14px 17px, #e95388 0 4px, #11161b 5px 7px, transparent 8px),
    radial-gradient(circle at 31px 13px, #f2ca27 0 4px, #11161b 5px 7px, transparent 8px),
    radial-gradient(circle at 42px 28px, #6ac14e 0 4px, #11161b 5px 7px, transparent 8px),
    #fff;
  border: 4px solid #11161b;
  border-radius: 50%;
}

.scene-mj .duration::after {
  content: "";
  position: absolute;
  left: -36px;
  bottom: 55px;
  width: 42px;
  height: 44px;
  background:
    linear-gradient(#11161b, #11161b) 13px 12px / 18px 3px no-repeat,
    linear-gradient(#11161b, #11161b) 20px 19px / 3px 14px no-repeat,
    #fff;
  border: 4px solid #11161b;
}

.scene-voice .duration::before {
  content: "";
  position: absolute;
  left: -93px;
  bottom: 57px;
  width: 61px;
  height: 48px;
  background:
    linear-gradient(#11161b, #11161b) 13px 21px / 4px 10px no-repeat,
    linear-gradient(#11161b, #11161b) 25px 15px / 4px 22px no-repeat,
    linear-gradient(#11161b, #11161b) 37px 21px / 4px 10px no-repeat,
    #fff;
  border: 4px solid #11161b;
  border-radius: 5px;
}

.scene-customer .duration::before {
  content: "";
  position: absolute;
  left: -113px;
  bottom: 76px;
  width: 50px;
  height: 32px;
  background:
    linear-gradient(#c2c7cc, #c2c7cc) 10px 9px / 26px 3px no-repeat,
    linear-gradient(#c2c7cc, #c2c7cc) 10px 20px / 19px 3px no-repeat,
    #fff;
  border: 3px solid #11161b;
  border-radius: 4px;
}

.scene-customer .duration::after {
  content: "";
  position: absolute;
  left: -28px;
  bottom: 57px;
  width: 54px;
  height: 40px;
  background:
    linear-gradient(#7ab7f1, #7ab7f1) 11px 11px / 29px 4px no-repeat,
    linear-gradient(#7ab7f1, #7ab7f1) 11px 23px / 21px 4px no-repeat,
    #fff;
  border: 3px solid #11161b;
  border-radius: 4px;
}

.scene-market::before {
  left: 62px;
  width: 98px;
  height: 72px;
  background: #f9fbff;
  box-shadow: 64px 4px 0 -17px #fff, 64px 4px 0 -12px #4a98ec;
}

.scene-market::after {
  left: 89px;
}

.scene-chatgpt .duration::before,
.scene-nocode .duration::before {
  content: "";
  position: absolute;
  left: -112px;
  bottom: 62px;
  width: 50px;
  height: 37px;
  background:
    linear-gradient(#b7c1c8, #b7c1c8) 10px 11px / 28px 3px no-repeat,
    linear-gradient(#b7c1c8, #b7c1c8) 10px 22px / 22px 3px no-repeat,
    #fff;
  border: 3px solid #11161b;
  border-radius: 4px;
}

.scene-chatgpt .duration::after {
  content: "";
  position: absolute;
  left: -34px;
  bottom: 53px;
  width: 60px;
  height: 46px;
  background:
    linear-gradient(#4a98ec, #4a98ec) 11px 13px / 30px 7px no-repeat,
    linear-gradient(#4a98ec, #4a98ec) 11px 28px / 21px 7px no-repeat,
    #fff;
  border: 3px solid #11161b;
  border-radius: 4px;
}

.scene-ppt .duration::before {
  content: "";
  position: absolute;
  left: -95px;
  bottom: 58px;
  width: 74px;
  height: 55px;
  background:
    linear-gradient(#c1c8ce, #c1c8ce) 14px 13px / 42px 3px no-repeat,
    linear-gradient(#c1c8ce, #c1c8ce) 14px 26px / 35px 3px no-repeat,
    linear-gradient(#c1c8ce, #c1c8ce) 14px 39px / 28px 3px no-repeat,
    #fff;
  border: 4px solid #11161b;
}

.scene-project .duration::before {
  content: "";
  position: absolute;
  left: -110px;
  bottom: 48px;
  width: 86px;
  height: 52px;
  background: #18212a;
  border-radius: 6px 6px 0 0;
  box-shadow: 0 33px 0 -25px #11161b;
}

.scene-project .duration::after {
  content: "";
  position: absolute;
  left: -72px;
  bottom: 65px;
  width: 10px;
  height: 10px;
  background: #f2c72c;
  border-radius: 50%;
}

.scene-nocode .duration::after {
  content: "";
  position: absolute;
  left: -31px;
  bottom: 52px;
  width: 82px;
  height: 45px;
  background:
    linear-gradient(#11161b, #11161b) 20px 17px / 42px 3px no-repeat,
    linear-gradient(#11161b, #11161b) 40px 7px / 3px 24px no-repeat;
}

@media (max-width: 1500px) {
  .works-hero {
    padding-left: 78px;
  }

  .hero-copy h1 {
    font-size: 56px;
  }

  .hero-visual {
    left: auto;
    right: 24px;
    transform: scale(0.72);
    transform-origin: right top;
  }

  .works-board {
    padding-inline: 78px 72px;
  }

  .works-toolbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 22px;
  }

  .filter-tabs {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .view-controls {
    align-self: flex-end;
  }

  .video-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1120px) {
  .top-actions {
    top: 24px;
    right: 22px;
  }

  .works-hero {
    height: auto;
    min-height: 340px;
    padding: 54px 28px 180px;
  }

  .hero-copy h1 {
    font-size: 50px;
  }

  .hero-visual {
    left: auto;
    right: 20px;
    top: 86px;
    transform: scale(0.72);
    transform-origin: right top;
  }

  .works-board {
    padding: 26px 28px 54px;
  }

  .works-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .filter-tabs {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .view-controls {
    width: 100%;
    justify-content: flex-end;
  }

  .video-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .top-actions {
    gap: 14px;
    top: 15px;
    right: 13px;
  }

  .top-mascot {
    width: 34px;
    height: 34px;
    border-width: 3px;
  }

  .works-hero {
    min-height: 390px;
    padding: 34px 16px 185px;
  }

  .hero-copy strong {
    font-size: 20px;
  }

  .hero-copy h1 {
    max-width: 340px;
    font-size: 42px;
    line-height: 1.04;
  }

  .hero-copy p {
    max-width: 330px;
    margin-left: 0;
    font-size: 16px;
  }

  .hero-visual {
    right: -178px;
    top: 174px;
    transform: scale(0.56);
  }

  .yellow-stamp {
    left: -25px;
  }

  .hero-note {
    left: 510px;
  }

  .works-board {
    padding: 22px 12px 38px;
  }

  .works-toolbar {
    gap: 14px;
    margin-bottom: 22px;
  }

  .filter-tabs {
    gap: 6px;
    overflow-x: visible;
  }

  .filter-tab {
    flex: 1 1 0;
    min-width: 0;
    height: 38px;
    padding: 0 6px;
    font-size: 13px;
  }

  .view-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 28px 28px;
    gap: 8px;
  }

  .view-controls select {
    width: 100%;
    height: 38px;
    padding-left: 12px;
    font-size: 13px;
  }

  .video-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .video-thumb {
    height: 170px;
  }

  .video-card h2 {
    white-space: normal;
  }
}