#pfp-generator {
  width: min(1180px, calc(100% - 224px));
  margin: 70px auto 100px max(24px, calc((100% - 1404px) / 2));
  padding: 32px 0 40px;
  position: relative;
  isolation: isolate;
  scroll-margin-top: 30px;
  color: #34372f;
}
#pfp-generator * { box-sizing: border-box; }
.pfp-heading { text-align: center; margin-bottom: 35px; }
.pfp-eyebrow { font: bold 12px monospace; letter-spacing: 3px; color: #d9d8c9; }
#pfp-generator h2 { font-size: clamp(28px, 4vw, 48px); font-weight: 900; letter-spacing: -1px; color: #eeeade; text-shadow: 3px 4px 0 #34372f; margin: 8px 0; }
.pfp-heading p { color: #e1dfd3; font-size: 14px; margin: 8px 0; }
.pfp-workstation { display: grid; width: 100%; grid-template-columns: minmax(0, 1fr) minmax(280px, 320px); gap: 16px; align-items: center; }
.pfp-monitor { position: relative; width: 80%; justify-self: center; aspect-ratio: 1.12; overflow: hidden; border-radius: 7%; filter: drop-shadow(0 20px 18px #0008); container-type: inline-size; }
.pfp-monitor-frame { position: absolute; top: 0; left: -14%; width: 128%; max-width: none; height: auto; z-index: 2; pointer-events: none; }
.pfp-screen { position: absolute; top: 14.3%; left: 14.16%; width: 73.6%; height: 62.8%; background: radial-gradient(ellipse at 74% 106%, #467315 0 27%, transparent 28%), radial-gradient(ellipse at 10% 108%, #70a82b 0 37%, transparent 38%), radial-gradient(ellipse at 20% 23%, #fff9 0 5%, transparent 14%), radial-gradient(ellipse at 82% 40%, #ffffffbb 0 6%, transparent 17%), linear-gradient(#1772d9, #77c3ef 72%, #75ad25 73%); display: flex; justify-content: center; align-items: center; overflow: hidden; border-radius: 5%; font-family: Arial, sans-serif; }
.pfp-screen canvas { display: block; height: 100%; width: 100%; aspect-ratio: 1; object-fit: contain; }
.pfp-desktop-icons { position: absolute; top: 7%; left: 2%; width: 16%; display: grid; gap: 2cqw; color: white; text-align: center; font-size: 3cqw; text-shadow: 1px 1px #245189; }
.pfp-desktop-icons small { display: block; font: 1.2cqw/1.15 Arial, sans-serif; }
.pfp-viewer { position: absolute; top: 7%; left: 20%; width: 65%; height: 84%; display: flex; flex-direction: column; padding: .45cqw; background: #c7c7bf; border: .3cqw outset #eeeee4; box-shadow: .4cqw .5cqw .5cqw #0007; }
.pfp-viewer-title { background: linear-gradient(90deg, #061974, #1551b5); color: white; font: bold 1.35cqw/1.6 Arial, sans-serif; display: flex; justify-content: space-between; padding: 0 .4cqw; white-space: nowrap; }
.pfp-viewer-title > span:last-child { color: #111; background: #c8c8c0; font-size: 1.4cqw; line-height: 1.1; align-self: center; }
.pfp-viewer-menu { color: #111; font: 1.35cqw/1.8 Arial, sans-serif; padding-left: .6cqw; }
.pfp-viewer-image { flex: 1; min-height: 0; background: #999b94; border: .25cqw inset #f1f1e7; display: flex; justify-content: center; }
.pfp-viewer-tools { display: flex; gap: .3cqw; padding-top: .4cqw; color: #16346c; }
.pfp-viewer-tools span { width: 4cqw; text-align: center; border: .2cqw outset #eee; font: bold 1.5cqw/1.6 Arial, sans-serif; background: linear-gradient(#e5e5dc, #b5b6b0); }
.pfp-taskbar { position: absolute; bottom: 0; left: 0; right: 0; height: 5.5%; display: flex; align-items: center; gap: 1cqw; background: linear-gradient(#5595ff, #1460db 28%, #164fc5); color: white; font: 1.4cqw Arial, sans-serif; border-top: .2cqw solid #81b8ff; }
.pfp-start { height: 100%; padding: 0 1.3cqw; display: flex; align-items: center; background: linear-gradient(#80bc72, #268229 45%, #479c37); border-radius: 0 1cqw 1cqw 0; font: italic bold 1.7cqw Arial, sans-serif; text-shadow: 1px 1px #245c20; }
.pfp-clock { margin-left: auto; height: 100%; display: flex; align-items: center; background: #188de1; padding: 0 .7cqw; font-size: 1.1cqw; }
.pfp-screen::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, #00000012 0 1px, transparent 1px 3px); box-shadow: inset 0 0 15px #0005; }
.pfp-console {
  border: 1px solid #e9e6d9; border-radius: 22px; padding: 22px;
  background: linear-gradient(145deg, #dedccf, #bab9ac);
  box-shadow: inset 3px 3px 3px #fff9, inset -4px -5px 3px #77796d66, 0 9px 0 #77786b, 0 20px 30px #0005;
}
.pfp-console-top { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #a5a69a; padding-bottom: 12px; margin-bottom: 16px; font: bold 11px monospace; letter-spacing: 1px; }
.pfp-power { display: flex; align-items: center; gap: 7px; }
.pfp-power::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #bcf264; box-shadow: 0 0 6px #73a235; }
.pfp-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 0 20px; padding: 5px; background: #a8aa9d; border-radius: 10px; box-shadow: inset 1px 2px 4px #53574966, 0 1px 0 #f4f2e7; }
#pfp-generator .pfp-tabs button { min-width: 0; padding: 12px 3px; border: 1px solid #a6a899; border-radius: 6px; background: linear-gradient(#e9e7db, #c4c5b7); color: #575c4c; box-shadow: inset 1px 1px 1px #fff9, 0 3px 0 #858a79; font: bold 10px monospace; letter-spacing: .5px; cursor: pointer; }
#pfp-generator .pfp-tabs button[aria-selected="true"] { background: #c5d6ae; color: #354627; box-shadow: inset 1px 2px 4px #60744755; transform: translateY(2px); border-color: #8a9c74; }
#pfp-generator [role="tabpanel"][hidden] { display: none; }
.pfp-picker { border: 0; padding: 0; margin: 0 0 19px; min-width: 0; }
.pfp-picker legend { display: flex; width: 100%; justify-content: space-between; padding: 0 0 9px; font: bold 11px monospace; letter-spacing: 1.5px; }
.pfp-picker output { color: #616657; letter-spacing: 0; }
.pfp-keys { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
#pfp-generator .pfp-key {
  position: relative; min-width: 0; aspect-ratio: 1.12; padding: 5px 5px 12px;
  border: 1px solid #9b9e8f; border-radius: 7px; cursor: pointer; color: #4a4e41;
  background: linear-gradient(140deg, #efede2, #c6c6b8);
  box-shadow: inset 2px 2px 1px #ffffffe0, inset -2px -3px 2px #90928377, 0 4px 0 #898d7f, 0 5px 3px #0003;
  transition: transform .12s, box-shadow .12s;
}
.pfp-key img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 3px; pointer-events: none; }
.pfp-picker-bg .pfp-key img { object-fit: cover; }
.pfp-key span { position: absolute; right: 5px; bottom: 1px; font: bold 9px monospace; }
#pfp-generator .pfp-key:hover { background: #f5f3e7; transform: translateY(-1px); }
#pfp-generator .pfp-key[aria-pressed="true"] { background: #c2d5a6; border-color: #536d39; transform: translateY(3px); box-shadow: inset 2px 2px 4px #49623255, inset -1px -1px 1px #effcda, 0 1px 0 #6b7d56; }
#pfp-generator button:focus-visible, .pfp-jump:focus-visible { outline: 3px solid #456db5; outline-offset: 4px; }
.pfp-actions { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; }
#pfp-generator .pfp-action { font: bold 12px monospace; letter-spacing: 1px; padding: 14px 8px; border-radius: 8px; border: 1px solid #97998a; color: #34372f; background: linear-gradient(#eeecdf, #c2c2b3); box-shadow: inset 2px 2px 2px #fff9, inset -2px -2px 2px #70756555, 0 4px 0 #7c8170; cursor: pointer; }
#pfp-generator .pfp-download { background: linear-gradient(#c5dca5, #9fb980); }
#pfp-generator .pfp-action:active { transform: translateY(3px); box-shadow: inset 1px 2px 3px #0003, 0 1px 0 #7c8170; }
#pfp-generator button:disabled { opacity: .5; cursor: wait; }
.pfp-status { min-height: 28px; margin: 14px 0 0; font: 10px/1.5 monospace; letter-spacing: .5px; }
.pfp-jump { position: fixed; right: 18px; bottom: 18px; z-index: 30; text-decoration: none; color: #34372f; background: #d7d5c7; padding: 12px 16px; border: 1px solid #eee; border-radius: 9px; box-shadow: inset 2px 2px 3px #fff, 0 4px 0 #85877a, 0 8px 18px #0005; font: bold 12px monospace; }
body.pfp-in-view .pfp-jump { visibility: hidden; }
@media (max-width: 800px) {
  body.pfp-in-view .rail { visibility: hidden; pointer-events: none; }
  #pfp-generator { width: min(560px, calc(100% - 28px)); margin: 45px auto 100px; }
  .pfp-workstation { grid-template-columns: 1fr; gap: 18px; }
  .pfp-heading { margin-bottom: 18px; }
  .pfp-console { padding: 18px; width: 100%; max-width: 400px; justify-self: center; }
  .pfp-jump { right: 10px; bottom: 10px; font-size: 10px; padding: 10px 12px; }
}
@media (prefers-reduced-motion: reduce) { #pfp-generator .pfp-key { transition: none; } }