@font-face { font-family: 'Champion Gothic'; src: url('/assets/ChampionGothic-Bantamweight.ttf') format('truetype'); font-style: normal; font-weight: 900; font-display: swap; }
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body { background: #0a0a0a; color: #eee; font-family: 'Courier Prime', ui-monospace, monospace; padding: 16px; min-height: 100vh; }
  .wrap { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; max-width: 1280px; margin: 0 auto; }
  .panel { flex: 1 1 300px; min-width: 270px; max-width: 380px; }
  .stagecol { flex: 2 1 420px; min-width: 270px; position: relative; }
  .group { margin-bottom: 18px; }
  .lab { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: #8a8a8a; margin-bottom: 6px; display: block; }
  .field { width: 100%; background: #111; border: 1px solid #333; color: #eee; padding: 10px 12px;
           font-family: 'Courier Prime', ui-monospace, monospace; font-size: 13px; outline: none; border-radius: 0; }
  .field:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid #ff2e00; outline-offset: 2px; }
  textarea.field { resize: vertical; }
  button.field { cursor: pointer; text-align: left; }
  #drop { border: 1px dashed #444; background: #101010; padding: 14px 12px; }
  #drop.over { border-color: #ff2e00; background: #171010; }
  #files { display: block; width: 100%; font-size: 12px; color: #bbb; font-family: inherit; }
  #files::file-selector-button { font-family: inherit; font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
    background: #eee; color: #000; border: none; padding: 8px 12px; margin-right: 10px; cursor: pointer; }
  .droptip { font-size: 10px; color: #666; margin-top: 8px; line-height: 1.5; }
  .urlrow { display: flex; gap: 6px; margin-top: 10px; }
  .urlrow #url { flex: 1; font-size: 12px; padding: 8px 10px; }
  .urlbtn { width: auto; cursor: pointer; text-align: center; text-transform: uppercase; letter-spacing: 1px;
            font-size: 10px; padding: 8px 14px; background: #1a1a1a; }
  .urlbtn.wide { width: 100%; margin-top: 6px; }
  .sourcebuttons { display: flex; gap: 6px; margin-top: 8px; }
  .sourcebuttons .urlbtn { flex: 1 1 50%; min-height: 38px; }
  #archive { color: #ff2e00; border-color: #ff2e00; }
  #archive:disabled { color: #777; border-color: #444; cursor: wait; }
  .seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
  .seg button { background: #111; border: 1px solid #333; color: #999; padding: 9px 4px; cursor: pointer;
    font-family: inherit; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; border-radius: 0; }
  .seg button[aria-pressed="true"] { background: #eee; color: #000; border-color: #eee; }
  .swipehint { display: none; }
  #damage button[aria-pressed="true"], #videofx button[aria-pressed="true"] { background: #ff2e00; color: #000; border-color: #ff2e00; }
  .swatches { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
  .swatches input[type="color"] { width: 44px; height: 30px; padding: 0; border: 1px solid #333; background: #111; cursor: pointer; }
  .swatches .tag { font-size: 10px; letter-spacing: 1px; color: #777; text-transform: uppercase; }
  .swatches button { margin-left: auto; background: #111; border: 1px solid #333; color: #999; font-family: inherit;
    font-size: 10px; letter-spacing: 1px; text-transform: uppercase; padding: 8px 10px; cursor: pointer; }
  .slider { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
  .slider input[type="range"] { flex: 1; accent-color: #ff2e00; }
  .slider .val { font-size: 10px; letter-spacing: 1px; color: #999; text-transform: uppercase; white-space: nowrap; }
  #randomize { position: absolute; top: 14px; right: 14px; z-index: 5; width: auto; padding: 14px 18px;
    background: #ff2e00; color: #000; border: 2px solid #000; box-shadow: 6px 6px 0 #000;
    font-family: 'Anton', sans-serif; font-size: 20px; line-height: 1; letter-spacing: 3px; cursor: pointer; }
  #mangle { width: 100%; padding: 12px; margin-top: 6px; background: #111; color: #ff2e00; border: 1px solid #ff2e00;
    font-family: 'Anton', sans-serif; font-size: 16px; letter-spacing: 4px; cursor: pointer; }
  #copyToggle { width: 100%; padding: 11px 12px; background: #111; color: #aaa; border: 1px solid #444;
    font-family: 'Courier Prime', monospace; font-size: 11px; font-weight: 700; letter-spacing: 2px; cursor: pointer; }
  #copyToggle[aria-pressed="true"] { background: #00e0c6; color: #000; border-color: #00e0c6; box-shadow: 4px 4px 0 #ff2e00; }
  #copyControls { margin-top: 9px; }
  #copyControls .field { margin-top: 6px; }
  .copyrail { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-bottom: 5px; }
  .copyrail::-webkit-scrollbar { display: none; }
  .copyrail button { flex: 0 0 auto; min-width: 76px; }
  #cover.copy-editing { touch-action: none; cursor: move; }
  #randomize:active, #mangle:active { transform: translateY(1px); }
  .ghost { margin-top: 8px; text-align: center; letter-spacing: 2px; text-transform: uppercase; font-size: 11px; }
  .exportrow { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .exportrow button { background: #eee; color: #000; border: none; padding: 13px 6px; cursor: pointer;
    font-family: inherit; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }
  .exportrow button.alt { background: #111; color: #eee; border: 1px solid #333; }
  .exportrow button:disabled { opacity: .4; cursor: not-allowed; }
  .reclen { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
  .reclen select { flex: 1; background: #111; border: 1px solid #333; color: #eee; font-family: inherit; font-size: 11px; padding: 8px; border-radius: 0; }
  .thumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
  .thumbs button { width: 46px; height: 46px; padding: 0; border: 1px solid #333; background: #111; cursor: pointer; color: #ff2e00; font-size: 9px; font-family: inherit; }
  .thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .note { margin-top: 14px; font-size: 10px; color: #555; line-height: 1.6; }
  #status { margin-top: 10px; font-size: 11px; color: #777; min-height: 16px; }
  #cover { width: 100%; height: auto; display: block; background: #111; }
  #recdot { display: inline-block; width: 8px; height: 8px; background: #ff2e00; border-radius: 50%; margin-right: 6px; }
  .site-footer { max-width: 1280px; margin: 30px auto 0; padding: 16px 0 6px; border-top: 1px solid #333;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
    font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: #666; }
  .site-footer a { color: #aaa; text-decoration: none; }
  .site-footer a:hover, .site-footer a:focus-visible { color: #ff2e00; }
  .site-footer .credit a { color: #ff2e00; }
  .site-footer nav { display: flex; gap: 18px; }
  .site-footer .social-links { font-weight: 700; letter-spacing: 1.6px; }
  .site-footer .social-links a::before { content: "//"; margin-right: 5px; color: #ff2e00; }
  @media (max-width: 720px) {
    body { padding: 10px; }
    .wrap { gap: 14px; }
    .stagecol { order: -1; flex: 1 1 100%; min-width: 0; }
    .panel { flex: 1 1 100%; min-width: 0; max-width: none; }
    #randomize { top: 10px; right: 10px; padding: 12px 14px; font-size: 16px; letter-spacing: 2px; box-shadow: 4px 4px 0 #000; }
    #formats, #damage { display: flex; grid-template-columns: none; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 0 18px 8px 0; }
    #formats::-webkit-scrollbar, #damage::-webkit-scrollbar { display: none; }
    #formats button, #damage button { flex: 0 0 auto; min-width: 108px; min-height: 44px; padding: 10px 12px; scroll-snap-align: start;
      white-space: nowrap; touch-action: manipulation; }
    .swipehint { display: inline; float: right; color: #ff2e00; letter-spacing: 1px; }
    .site-footer { margin-top: 24px; align-items: flex-start; }
    .site-footer .social-links { width: 100%; gap: 14px; overflow-x: auto; scrollbar-width: none;
      padding: 4px 0 8px; white-space: nowrap; -webkit-overflow-scrolling: touch; }
    .site-footer .social-links::-webkit-scrollbar { display: none; }
  }