body {
    margin: 0;
    font-family: system-ui, sans-serif;
    background: linear-gradient(135deg, #e0f2fe, #fef3c7);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    padding: 40px 20px;
    box-sizing: border-box;
}
.wrap { width: 100%; max-width: 800px; }
.card { background: #fff; border-radius: 24px; box-shadow: 0 15px 40px rgba(0,0,0,.12); padding: 32px; text-align: center; animation: fadeIn 1s ease; }
h1.title { font-size: 2rem; margin-bottom: 1rem; color: #0f172a; }
p { margin: 0.6rem 0; line-height: 1.6; color: #334155; }
p.highlight { font-weight: bold; color: #2563eb; }
.frame { width: 100%; aspect-ratio: 3/2; background: #111; border-radius: 16px; overflow: hidden; margin: 28px 0; box-shadow: 0 10px 30px rgba(0,0,0,.1); }
.frame img { width: 100%; height: 100%; object-fit: contain; background: #111; display: block; }
.btn { display: inline-block; padding: 10px 20px; background: #2563eb; color: #fff; border-radius: 10px; text-decoration: none; font-weight: 600; margin-top: 16px; }
@keyframes fadeIn { from { opacity:0; transform: translateY(20px);} to { opacity:1; transform: translateY(0);} }