StudioPanel {
 position: absolute; width: 100%; height: 100%; font-family: Inter; color: #f0eee6; pointer-events: none;
 button { pointer-events: all; cursor: pointer; padding: 11px 17px; border-radius: 6px; background-color: #ffffff0a; border: 1px solid #ffffff20; color: #e9ebe6; font-size: 14px; flex-shrink: 0; align-items: center; justify-content: center; gap: 10px; }
 button:hover { background-color: #ffffff20; border-color: #c5e4a7; }
 button.primary { background-color: #d6ebaf; border-color: #d6ebaf; color: #263425; font-weight: 600; }
 button.primary:hover { background-color: #eaf9cc; }
 button.chosen { color: #d6ebaf; border-color: #d6ebaf88; }
 h1, h2, p { margin: 0; flex-shrink: 0; }
 h1 { font-size: 48px; font-weight: 500; letter-spacing: -1.5px; }
 h2 { font-size: 22px; font-weight: 500; }
 p { font-size: 15px; line-height: 25px; color: #aeb8ab; white-space: normal; }
 .eyebrow { font-size: 11px; letter-spacing: 2px; color: #c6d9b2; margin-bottom: 13px; }
 .collection { position: absolute; width: 100%; height: 100%; background-color: #17221ff9; padding: 30px 54px 20px; flex-direction: column; pointer-events: all; }
 .topbar { justify-content: space-between; align-items: center; flex-shrink: 0; }
 .brand { gap: 13px; align-items: center; letter-spacing: 2px; font-size: 12px; font-weight: 600; }
 .brandmark { width: 37px; height: 37px; border-radius: 50%; border: 2px solid #d6ebaf; color: #d6ebaf; font-size: 25px; align-items: center; justify-content: center; }
 .actions { gap: 10px; align-items: center; flex-shrink: 0; }
 .intro { margin: 42px 0 30px; justify-content: space-between; align-items: center; flex-shrink: 0; }
 .intro > div { flex-direction: column; gap: 9px; }
 .intro .eyebrow { margin-bottom: 0; }
 .plazalink { width: 235px; height: 100px; background-color: #354b3e; justify-content: space-between; padding: 25px; font-size: 19px; border-color: #a5c08466; }
 .arrow { font-size: 36px; color: #d6ebaf; }
 .librarybar { justify-content: space-between; align-items: center; border-bottom: 1px solid #ffffff20; padding-bottom: 17px; flex-shrink: 0; }
 TextEntry.search { width: 240px; padding: 12px 15px; background-color: #0e1916; border: 1px solid #ffffff20; border-radius: 6px; color: #edf2e5; font-size: 14px; }
 .cards { flex-grow: 1; min-height: 0; overflow-y: auto; flex-wrap: wrap; align-content: flex-start; gap: 20px; padding: 22px 0; }
 .card { width: 220px; flex-shrink: 0; flex-direction: column; background-color: #25312c; border: 1px solid #ffffff18; border-radius: 9px; overflow: hidden; }
 button.portrait { width: 100%; height: 190px; padding: 0; border: 0; border-radius: 0; background-color: #435146; position: relative; }
 .portrait CharacterCreatorPreview { position: absolute; width: 100%; height: 100%; pointer-events: none; }
 .cardtitle { align-items: center; justify-content: space-between; padding: 10px 14px 4px; }
 .cardtitle h2 { font-size: 17px; max-width: 153px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
 button.favorite { padding: 0; border: 0; background-color: transparent; font-size: 26px; }
 .cardactions { gap: 5px; padding: 8px 12px 14px; }
 .cardactions button { font-size: 11px; padding: 7px 10px; }
 button.delete { color: #d5aaa1; }
 .empty { width: 100%; padding: 45px 0; flex-direction: column; align-items: center; gap: 17px; }
 .empty p { max-width: 450px; text-align: center; }
 .emptyicon { font-size: 54px; color: #d6ebaf; }
 .bottomline { justify-content: space-between; color: #809487; font-size: 11px; padding-top: 14px; border-top: 1px solid #ffffff18; flex-shrink: 0; }
 .plazahead { position: absolute; left: 38px; right: 38px; top: 30px; align-items: flex-start; justify-content: space-between; text-shadow: 0 2px 4px #000a; }
 .plazahead > div { flex-direction: column; gap: 5px; }
 .plazahead h1 { font-size: 34px; }
 .plazahead button { background-color: #17221fee; }
 .plazahead p { color: #edf2e5; }
 .residents { position: absolute; left: 30px; top: 190px; width: 245px; max-height: 65%; overflow-y: auto; flex-direction: column; padding: 20px; background-color: #17221fe8; border: 1px solid #ffffff25; border-radius: 8px; pointer-events: all; gap: 8px; }
 .resident { gap: 6px; flex-shrink: 0; }
 .resident button { font-size: 12px; padding: 8px; }
 .resident button:first-child { flex-grow: 1; justify-content: flex-start; }
 .plazatools { position: absolute; bottom: 25px; right: 30px; gap: 6px; padding: 10px; background-color: #17221fe8; border-radius: 8px; }
 .plazatools button { font-size: 12px; padding: 10px; }
 .shade { position: absolute; width: 100%; height: 100%; background-color: #07140eea; align-items: center; justify-content: center; pointer-events: all; z-index: 50; }
 .dialog { width: 490px; padding: 35px; background-color: #25352b; border: 1px solid #acc79666; border-radius: 12px; flex-direction: column; gap: 22px; }
 .dialog .actions { justify-content: flex-end; }
 .transfer { width: 700px; }
 TextEntry.json { height: 260px; padding: 15px; background-color: #121f18; color: #d6ebaf; font-size: 12px; overflow-y: auto; white-space: pre-wrap; }
 .toast { position: absolute; bottom: 65px; left: 35%; max-width: 60%; padding: 14px 22px; background-color: #d6ebaf; color: #263425; border-radius: 8px; pointer-events: all; z-index: 100; font-size: 14px; }
 .warning { position: absolute; bottom: 110px; left: 30px; max-width: 70%; background-color: #633f24; padding: 15px; pointer-events: all; z-index: 101; }
 button.savecopy { position: absolute; right: 250px; bottom: 27px; z-index: 6; background-color: #25352b; }
}