*{box-sizing:border-box}body{margin:0;min-height:100dvh;padding:24px;font-family:Arial,Helvetica,sans-serif;background:linear-gradient(145deg,#311821,#6f3042 48%,#1c1117);color:#111;display:flex;align-items:center;justify-content:center}button{font:inherit;cursor:pointer}button:focus-visible{outline:3px solid #17458f;outline-offset:5px}[hidden]{display:none!important}.content{width:100%;max-width:1100px;min-height:650px;position:relative;border-radius:12px;background:rgba(255,255,255,.85);overflow:hidden;display:flex;align-items:center}.surface{width:100%;padding:28px 42px 36px;text-align:center}#timer{font-size:20px;font-weight:bold;margin-bottom:26px}h1{font-size:48px;margin:10px 0 36px}h2{font-size:28px;line-height:1.5;margin:12px auto 28px;max-width:850px}h3{font-size:21px}p{font-size:18px;line-height:1.6}.actions{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;margin:22px 0}.actions button{border:0;border-radius:40px;background:#111;color:#fff;min-height:48px;padding:12px 28px;font-weight:bold;font-size:18px}.choice-actions{margin-top:52px}.choice-actions .yes{background:#348f3c}.choice-actions .no{background:#dc352a}.text-button{background:transparent;border:0;padding:12px;text-decoration:underline;font-size:16px}.with-sidebar .surface{padding-left:175px}#sidebar{position:absolute;left:0;top:50%;transform:translateY(-50%);width:135px}#stepList{padding:0;margin:0;list-style:none;display:flex;flex-direction:column;gap:12px}#stepList li{min-height:72px;background:#fff;border-radius:0 60px 60px 0;padding:12px 15px;text-align:center;display:flex;align-items:center;justify-content:center;flex-direction:column;border-right:6px solid transparent;font-size:16px}#stepList li[aria-current]{border-color:#f57381}.step-icon{font-size:24px;line-height:1.2;color:#935945;margin-top:4px}.photo-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:30px}.photo-options button{padding:0;background:none;border:0;font-weight:700;font-size:18px;line-height:1.4}.portrait{display:block;aspect-ratio:1;width:100%;background-image:url("portraits.png");background-size:200% 200%;border-radius:18px;box-shadow:0 0 0 4px transparent;margin-bottom:15px}.portrait-0{background-position:0 0}.portrait-1{background-position:100% 0}.portrait-2{background-position:0 100%}.portrait-3{background-position:100% 100%}.photo-options button:hover .portrait{box-shadow:0 0 0 4px #de061d}.muted{font-size:14px;color:#505a65}.contact{display:block;width:100%;padding:22px 32px;background:linear-gradient(135deg,#2aabee,#168ac4);border:0;border-radius:16px;font-size:28px;font-weight:800;color:#fff;position:relative;cursor:default}.contact span{position:absolute;right:20px}.guidelines{text-align:left;padding-left:24px;font-size:17px;line-height:1.65}.guidelines li{margin-bottom:12px}#result{max-width:850px;margin:auto}#result h2{font-size:24px}#summary{text-align:left}#question{min-height:450px;display:flex;flex-direction:column;justify-content:center}#imageNote{margin-top:26px}
@media(max-width:800px){.photo-options{grid-template-columns:repeat(2,minmax(0,1fr));max-width:550px;margin:20px auto;width:100%}.with-sidebar .surface{padding-left:155px;padding-right:20px}}
@media(max-width:575px){body{padding:12px;align-items:flex-start}.content{min-height:calc(100dvh - 24px);align-items:center}.surface{padding:22px 18px 26px}.with-sidebar{padding-bottom:100px}.with-sidebar .surface{padding:22px 18px 26px}h1{font-size:32px;margin-bottom:24px}h2{font-size:21px;line-height:1.5}p{font-size:16px}#sidebar{position:fixed;z-index:10;top:auto;bottom:0;left:0;transform:none;width:100%;background:#f3eded;box-shadow:0 -3px 18px #0002;padding:9px 8px calc(9px + env(safe-area-inset-bottom))}#stepList{flex-direction:row;gap:5px;overflow-x:auto}#stepList li{flex:0 0 74px;min-height:66px;border-radius:12px;border-right:0;border-bottom:4px solid transparent;font-size:13px;padding:6px 3px}.step-icon{font-size:22px}.photo-options{gap:16px}.photo-options button{font-size:16px}.actions{gap:14px}.actions button{font-size:17px;padding:12px 23px}.contact{font-size:23px;padding:21px 30px 21px 12px}.muted{font-size:14px}#question{min-height:380px}.guidelines{font-size:16px}}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.contact{font-size:clamp(18px,3vw,28px)}

.standalone-portrait{background:none;height:auto;object-fit:cover}

/* Replaceable photograph wall: assets/background/1.png through 12.png. */
body{isolation:isolate;background:#342a2e}
.photo-wall{position:fixed;inset:0;z-index:-2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:8px;background:#ddd;overflow:hidden;pointer-events:none}
.photo-wall-column{display:flex;flex-direction:column;gap:8px;min-width:0;height:calc(100% + 180px);transform:translateY(-70px)}
.photo-wall-column:nth-child(even){transform:translateY(-135px)}
.photo-wall img{display:block;width:100%;min-height:0;height:calc((100% - 16px)/3);flex:1 1 0;object-fit:cover;object-position:center 35%}
.background-shade{position:fixed;inset:0;background:rgba(0,0,0,.48);z-index:-1;pointer-events:none}
.content{background:rgba(255,255,255,.88)}
@media(max-width:575px){
 .photo-wall{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:6px;padding:6px}
 .photo-wall-column{height:100%;transform:none;gap:6px}
 .photo-wall-column:nth-child(even){transform:none}
 .photo-wall img{height:calc((100% - 12px)/3)}
 .content{background:rgba(255,255,255,.9)}
}

/* Compact panel, fitted to the available viewport without page scrolling. */
html,body{height:100%;overflow:hidden}
body{min-height:0;padding:0}
.content{position:fixed;left:50%;top:50%;width:calc(100% - 40px);max-width:980px;min-height:0;transform:translate(-50%,-50%);transform-origin:center center}
.surface{padding:18px 28px 20px}
#timer{font-size:17px;margin-bottom:12px}
#result h1{font-size:34px;line-height:1.15;margin:0 0 14px}
#result h2{font-size:21px;line-height:1.3;margin:0 0 12px}
#result h3{font-size:17px;line-height:1.35;margin:12px 0}
#result p{font-size:16px;line-height:1.35;margin:10px 0}
#result p.muted{font-size:14px;margin:8px 0}
#result .contact{font-size:24px;padding:14px 30px;border-radius:14px}
#result .guidelines{font-size:15px;line-height:1.4;margin:12px 0 4px}
#result .guidelines li{margin-bottom:8px}
#result .text-button{padding:6px 10px;font-size:14px}
.content.with-sidebar{min-height:610px}
@media(max-width:575px){
 .content{width:calc(100% - 24px)}
 .surface,.with-sidebar .surface{padding:16px 16px 18px}
 .content.with-sidebar{min-height:0;padding-bottom:94px}
 #sidebar{position:absolute}
 #result h1{font-size:28px;margin-bottom:10px}
 #result h2{font-size:18px;line-height:1.3}
 #result h3{font-size:15px;line-height:1.3;margin:10px 0}
 #result p{font-size:14px;margin:8px 0}
 #result .guidelines{font-size:14px;line-height:1.35;padding-left:20px}
 #result .contact{font-size:21px;padding:12px 28px}
}

/* Equal image frames and reserved title/label rows across photo questions. */
#question.photo-question{justify-content:flex-start}
.photo-question #questionTitle{width:100%;min-height:84px;display:flex;align-items:center;justify-content:center;margin:0 0 24px;line-height:1.4}
.photo-question .photo-options{align-items:start;margin:0 auto;width:100%}
.photo-options button{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;min-width:0;position:relative;align-self:start}
.photo-frame{display:block;position:relative;width:100%;aspect-ratio:1;flex:none;border-radius:18px}
.photo-frame .portrait{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:center;margin:0;display:block}
.option-label{display:block;width:100%;min-height:28px;margin-top:12px;line-height:28px;text-align:center;white-space:nowrap}
.option-label.empty-label{visibility:hidden}
@media(max-width:575px){
 .photo-question #questionTitle{min-height:88px;margin-bottom:18px}
 .option-label{min-height:24px;line-height:24px;margin-top:10px}
}

/* Telegram is now an active link with the existing button styling. */
a.contact { cursor: pointer; text-decoration: none; }
a.contact:focus-visible { outline: 3px solid #17458f; outline-offset: 4px; }