/* Project showcase and the relocated background control only. */
.footer-right { flex-wrap: wrap; justify-content: flex-end; }
.footer-right .background-control { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 30px; color: var(--ink); font-size: 11px; line-height: 1.4; background: var(--glass); white-space: nowrap; transition: background .2s; }
.footer-right .background-control svg { width: 17px; height: 17px; color: var(--rose); }
.footer-right .background-control:hover { background: color-mix(in srgb, var(--rose) 12%, var(--glass)); }
.footer-right .background-control:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }
#works {
  --works-unit: clamp(1px, min(.0694444vw, .111111svh), 1.8px);
  --works-paper: #fffaf8;
  width: min(calc(900 * var(--works-unit)), calc(100% - 40px));
  max-width: none;
  max-height: 90svh;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: calc(18 * var(--works-unit));
  color: var(--ink);
  background: var(--works-paper);
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--rose) transparent;
}
body[data-theme="soft"] #works { --works-paper: #fff8f4; }
body[data-theme="neon"] #works { --works-paper: #241b2d; }
body[data-theme="warm"] #works { --works-paper: #fff8ed; }
body[data-theme="dream"] #works { --works-paper: #37333f; }
#works .works-header { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: calc(24 * var(--works-unit)) calc(32 * var(--works-unit)) calc(20 * var(--works-unit)); border-bottom: 1px solid var(--line); background: var(--works-paper); }
#works .modal-kicker { color: var(--muted); font-size: calc(8 * var(--works-unit)); letter-spacing: 2px; }
#works h2 { margin: 6px 0 0; font-size: calc(27 * var(--works-unit)); line-height: 1.5; letter-spacing: 3px; }
#works h2 > span { color: var(--rose); font-size: .85em; }
#works .close-dialog { position: static; flex: 0 0 calc(40 * var(--works-unit)); width: calc(40 * var(--works-unit)); height: calc(40 * var(--works-unit)); border: 1px solid var(--line); border-radius: 50%; padding: 0; color: var(--ink); font: calc(26 * var(--works-unit))/1 Georgia, serif; }
#works .close-dialog:hover { background: color-mix(in srgb, var(--rose) 12%, transparent); }
#works .works-body { padding: 0 calc(32 * var(--works-unit)) calc(27 * var(--works-unit)); }
#works .works-intro { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(21 * var(--works-unit)) 0; }
#works .works-intro p { margin: 0; color: var(--muted); font-size: calc(12 * var(--works-unit)); line-height: 1.8; }
#works .works-intro > span { color: var(--muted); font-size: calc(7 * var(--works-unit)); letter-spacing: 1.5px; white-space: nowrap; }
#works .project-card { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.1fr); border: 1px solid var(--line); border-radius: calc(12 * var(--works-unit)); overflow: hidden; }
#works .project-art { position: relative; display: flex; flex-direction: column; min-width: 0; padding: calc(23 * var(--works-unit)); color: #e2bdca; background: radial-gradient(ellipse at 55% 40%, #79576640, transparent 65%), #2b2430; }
#works .project-art-top { display: flex; justify-content: space-between; align-items: center; color: #c3a0b1; font-size: calc(7 * var(--works-unit)); letter-spacing: 2px; }
#works .project-art-top > span:last-child { font: italic calc(18 * var(--works-unit))/1 Georgia, serif; letter-spacing: 0; }
#works .arena-emblem { display: block; width: 100%; height: calc(238 * var(--works-unit)); margin: calc(10 * var(--works-unit)) 0; stroke-width: 1; color: #cfa3b5; }
#works .arena-emblem > circle { stroke: #dcb7c23b; stroke-dasharray: 2 5; }
#works .arena-emblem > ellipse { stroke: #dcb7c24d; }
#works .arena-emblem > path:nth-child(3) { fill: #dcb7c20f; stroke-width: 1.5; }
#works .project-art-name { margin-top: auto; text-align: center; color: #f1d9e2; font: calc(41 * var(--works-unit))/1 Georgia, serif; letter-spacing: calc(6 * var(--works-unit)); }
#works .project-art-name > span { display: block; margin-top: calc(12 * var(--works-unit)); color: #c3a0b1; font: calc(6 * var(--works-unit))/1.5 "Segoe UI", sans-serif; letter-spacing: 2.5px; }
#works .project-copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: calc(33 * var(--works-unit)); }
#works .project-kicker { color: var(--rose); font-size: calc(9 * var(--works-unit)); letter-spacing: 1.5px; }
#works h3 { display: flex; align-items: center; justify-content: space-between; width: 100%; margin: calc(17 * var(--works-unit)) 0 calc(19 * var(--works-unit)); color: var(--ink); font: calc(43 * var(--works-unit))/1.3 "STSong", "SimSun", serif; letter-spacing: 5px; }
#works h3 > span { font: calc(24 * var(--works-unit))/1 Georgia, serif; color: var(--rose); }
#works .project-description { margin: 0; color: var(--muted); font-size: calc(13 * var(--works-unit)); line-height: 2; }
#works .project-tags { display: flex; flex-wrap: wrap; gap: calc(7 * var(--works-unit)); list-style: none; padding: 0; margin: calc(20 * var(--works-unit)) 0 calc(30 * var(--works-unit)); }
#works .project-tags li { padding: calc(5 * var(--works-unit)) calc(9 * var(--works-unit)); border: 1px solid var(--line); border-radius: 4px; color: var(--muted); font-size: calc(9 * var(--works-unit)); line-height: 1.5; }
#works .project-link { display: flex; justify-content: space-between; align-items: center; gap: 20px; width: 100%; min-height: calc(46 * var(--works-unit)); margin-top: auto; padding: calc(13 * var(--works-unit)) calc(18 * var(--works-unit)); color: var(--works-paper); background: var(--ink); border: 1px solid var(--ink); border-radius: 5px; font-size: calc(12 * var(--works-unit)); letter-spacing: 1px; transition: transform .2s, background .2s; }
#works .project-link:hover { transform: translateY(-2px); background: var(--rose); border-color: var(--rose); }
#works .project-link > span { font-size: 1.4em; }
#works .project-access { display: block; align-self: center; margin-top: calc(10 * var(--works-unit)); color: var(--muted); font-size: calc(9 * var(--works-unit)); line-height: 1.6; }
#works .works-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: calc(22 * var(--works-unit)); color: var(--muted); font-size: calc(8 * var(--works-unit)); letter-spacing: .6px; }
#works .works-footer > span:first-child { font: calc(7 * var(--works-unit))/1.5 Georgia, serif; letter-spacing: 1.6px; }
#works .works-footer b { color: var(--rose); margin-left: 5px; font-weight: 400; }
#works :focus-visible { outline: 2px solid var(--rose); outline-offset: 4px; }
@media (min-width: 1600px) {
  .footer-right .background-control { padding: calc(8 * var(--layout-unit)) calc(13 * var(--layout-unit)); gap: calc(7 * var(--layout-unit)); font-size: calc(11 * var(--layout-unit)); }
  .footer-right .background-control svg { width: calc(17 * var(--layout-unit)); height: calc(17 * var(--layout-unit)); }
}
@media (max-width: 760px) {
  .footer-right { justify-content: center; }
  .footer-right .background-control { min-height: 36px; padding: 7px 11px; font-size: 10px; }
  #works { width: calc(100% - 24px); max-height: 94svh; border-radius: 16px; }
  #works .works-header { padding: 18px 22px; }
  #works h2 { font-size: 24px; }
  #works .works-body { padding: 0 22px 22px; }
  #works .works-intro { padding: 16px 0; }
  #works .works-intro p { font-size: 11px; }
  #works .works-intro > span { display: none; }
  #works .project-card { grid-template-columns: minmax(0, 1fr); }
  #works .project-art { min-height: 170px; padding: 20px; }
  #works .project-art-top { font-size: 6px; }
  #works .arena-emblem { position: absolute; width: 180px; height: 160px; right: 2px; top: 8px; opacity: .65; margin: 0; }
  #works .project-art-name { position: relative; text-align: left; font-size: 31px; letter-spacing: 4px; }
  #works .project-art-name > span { font-size: 5px; letter-spacing: 1.8px; }
  #works .project-copy { padding: 24px; }
  #works h3 { margin: 12px 0 15px; font-size: 36px; }
  #works .project-tags { margin: 17px 0 23px; }
  #works .project-description { font-size: 13px; }
  #works .works-footer { flex-wrap: wrap; row-gap: 10px; font-size: 8px; }
}
@media (max-width: 360px) {
  #works .works-header { padding-inline: 17px; }
  #works .works-body { padding-inline: 17px; }
  #works .project-copy { padding: 20px; }
  #works .arena-emblem { right: -12px; width: 160px; }
  #works .project-art-name { font-size: 28px; }
  .footer-right { gap: 8px; }
}