.dy-frame-simulator{margin:18px 0;padding:16px;border:1px solid #31546d;border-radius:8px;background:linear-gradient(145deg,#102a40,#081927);color:#cce7f5}.dy-frame-simulator h3{margin:0 0 16px}.dy-frame-preview{position:relative;display:grid;place-items:center;width:180px;height:180px;margin:12px auto 20px;background:radial-gradient(#183953,#0a1d2c);border-radius:8px}.dy-frame-preview [data-preview-frame]{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}.dy-frame-preview [data-preview-face]{object-fit:cover}.dy-frame-preview [data-preview-letter]{display:grid;place-items:center;font-size:48px;font-weight:600;color:#e9faff;background:#225476}.dy-frame-preview [hidden]{display:none!important}.dy-frame-controls{display:grid;gap:14px;margin-top:14px}.dy-frame-controls label{display:grid;grid-template-columns:1fr auto;gap:8px}.dy-frame-controls input{grid-column:1/-1;width:100%}.dy-frame-controls output{color:#60d7fa}.dy-frame-simulator p{font-size:13px;line-height:1.5;margin:16px 0 0;color:#98bdce}
@font-face{font-family:KlexHUD;src:url('fonts/BarlowSemiCondensed-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}
.dy-frame-profile-sample{width:230px;max-width:100%;box-sizing:border-box;margin:16px auto;padding:18px 12px;display:flex;flex-direction:column;align-items:center;gap:14px;background:linear-gradient(150deg,#12324b66,#081e32);border:1px solid #2d526c;border-radius:5px;font-family:KlexHUD,"Segoe UI",sans-serif}
.dy-frame-profile-sample .dy-frame-preview{width:130px;height:130px;flex:0 0 130px;margin:0;background:none;border:0;border-radius:0}
.dy-frame-profile-sample [data-preview-name]{margin:0!important;padding:0!important;font:600 23px/1.2 KlexHUD,"Segoe UI",sans-serif!important;color:#e4f7ff!important;text-align:center;overflow-wrap:anywhere}
.dy-frame-profile-sample [data-preview-letter]{font-family:KlexHUD,"Segoe UI",sans-serif;font-size:34px;background:#19405a;color:#dcefff}
@media(max-width:600px){.dy-frame-profile-sample{width:100%;flex-direction:row;align-items:center;gap:15px;padding:10px 12px}.dy-frame-profile-sample .dy-frame-preview{width:100px;height:100px;flex-basis:100px}.dy-frame-profile-sample [data-preview-name]{text-align:left}}