/* Portrait comic composition; every form control remains live HTML. */
body:has(.comic-intro){background:#eee4c9;background-image:radial-gradient(#4b351015 1px,transparent 1px);background-size:5px 5px}
body:has(.comic-intro) header{max-width:480px;margin:auto;background:#fff4d7;padding:10px 15px}
header>span:not(.stamp){display:block!important;font-family:'Bangers',Impact,sans-serif;font-size:17px;letter-spacing:1px}
body:has(.comic-intro) header .stamp{display:none}
body:has(.comic-intro) main{max-width:480px;padding:0 9px 12px;min-height:0}
body:has(.comic-intro) footer{max-width:480px;margin:auto}
.comic-intro{background:#0db6e6;background-image:radial-gradient(#111 1.1px,transparent 1.2px);background-size:5px 5px;border:3px solid #151515;overflow:hidden;position:relative;margin-top:10px}
.comic-masthead{position:relative;z-index:2;padding:12px 6px 6px;display:flex;align-items:center;gap:2px;background:linear-gradient(160deg,#08699066,transparent)}
.comic-masthead h1{width:76%;margin:0;line-height:.94;transform:rotate(-5deg);font-family:'Bangers',Impact,sans-serif;letter-spacing:0;text-align:center;padding:8px 1px 6px;position:relative;isolation:isolate}
.comic-masthead h1:before{content:'';position:absolute;inset:0 -5px;background:#ffe331;z-index:-1;clip-path:polygon(0 12%,9% 15%,6% 0,17% 10%,21% 0,29% 10%,38% 0,43% 12%,55% 0,58% 12%,72% 2%,73% 14%,93% 5%,88% 22%,100% 25%,94% 38%,100% 49%,94% 60%,99% 75%,90% 76%,92% 100%,80% 91%,70% 100%,63% 89%,50% 100%,45% 91%,31% 100%,25% 91%,13% 100%,12% 84%,0 91%,5% 70%,0 60%,5% 40%,0 32%,6% 26%);filter:drop-shadow(3px 3px #151515)}
.comic-title{display:block;font-size:clamp(45px,13vw,67px);color:#ef3d31;-webkit-text-stroke:1.6px #101010;text-shadow:3px 3px #101010;transform:scaleY(1.17);margin:7px 0 3px}
.comic-detector{display:block;color:#ffe331;font-size:clamp(35px,10vw,51px);-webkit-text-stroke:1px #111;background:#111;clip-path:polygon(3% 0,100% 7%,96% 88%,0 100%);padding:3px 5px 7px;margin:0 0 0 13%}
.comic-detector sup{font:12px Arial;vertical-align:top;-webkit-text-stroke:0}
.comic-count{width:25%;background:#ffe331;border:2px solid #111;box-shadow:3px 3px #111;transform:rotate(-6deg);font-family:'Bangers',Impact,sans-serif;font-size:clamp(14px,4.2vw,21px);line-height:1.08;text-align:center;padding:12px 3px;align-self:center;margin-right:3px}
.comic-scene{position:relative;aspect-ratio:941/520;overflow:hidden;margin-top:-3px;border-bottom:3px solid #111}
.comic-scene img{display:block;position:absolute;width:100%;height:auto;top:-67.3077%;left:0}
.comic-bottom{position:relative;padding:0 0 22px;display:flex;justify-content:center;align-items:flex-end}
.comic-form-panel{position:relative;z-index:2;width:83%;background:#fff4d7;background-image:radial-gradient(#b28a461a .8px,transparent 1px);background-size:4px 4px;border:3px solid #111;border-radius:12px;padding:18px 15px 12px;box-shadow:4px 5px #111;margin-top:-13px}
.comic-form-panel h2{text-transform:none;font-family:'Kalam','Barlow Condensed',cursive;font-size:clamp(23px,6.2vw,30px);line-height:1.05;text-align:center;margin:0 0 12px;transform:rotate(-3deg);letter-spacing:-1px}
.comic-form-panel h2 em{font-style:normal;background:linear-gradient(transparent 72%,#ffe331 72%)}
.comic-sub{text-align:center;font-size:12px;line-height:1.45;margin:0}
.comic-form-panel .form{margin-top:18px}
.comic-form-panel .label{font-size:14px;text-transform:none;margin-bottom:8px;letter-spacing:-.3px}
.comic-form-panel .genders{gap:10px;margin-bottom:16px}
.comic-form-panel .gender{border:2px solid #111;border-radius:9px;min-height:91px;padding:10px 4px 8px;display:flex;flex-direction:column;align-items:center;position:relative;background:#06b8ed;box-shadow:2px 2px #111;font-weight:900;font-size:15px}
.comic-form-panel .gender[data-gender=perempuan]{background:#f9489c}
.comic-form-panel .gender svg{width:42px;height:42px;stroke-width:3.3;margin:0 0 5px}
.choice-dot{position:absolute;left:9px;top:9px;width:13px;height:13px;border:2px solid #111;border-radius:50%;background:#fff9e9}
.comic-form-panel .gender[aria-pressed=true] .choice-dot{background:#111;box-shadow:inset 0 0 0 2px #fff}
.comic-form-panel .gender[aria-pressed=true]{outline:3px solid #111;outline-offset:2px}
.comic-form-panel input{border:2px solid #888;border-radius:5px;padding:11px 9px;background:#f8f8f8;font-size:15px;min-height:45px}
.comic-form-panel .error{font-size:11px;min-height:0;margin:8px 0}
.comic-form-panel .primary{font-family:'Bangers',Impact,sans-serif;font-size:clamp(19px,5.2vw,25px);letter-spacing:.5px;line-height:1.2;min-height:55px;border:3px solid #111;border-radius:9px;margin-top:5px;padding:11px 4px;color:#fff;text-shadow:1.5px 1.5px #111;background:#ef3d31;background-image:radial-gradient(#1114 .8px,transparent 1px);background-size:4px 4px;box-shadow:3px 3px #111}
.comic-form-panel .fine{font-size:9px;line-height:1.45;font-weight:600;margin:13px 0 0}
.comic-side{position:absolute;bottom:22px;z-index:1;width:23%;font-family:'Bangers',Impact,sans-serif;font-size:clamp(19px,5vw,25px);line-height:1.04;border:2px solid #111;padding:16px 4px;writing-mode:horizontal-tb;text-align:center;background-image:radial-gradient(#1115 1px,transparent 1px);background-size:4px 4px}
.comic-side-left{left:-4%;transform:rotate(-8deg);background-color:#ff66a5}
.comic-side-right{right:-4%;transform:rotate(8deg);background-color:#ffe331;bottom:110px}
@media(min-width:650px){body:has(.comic-intro) header{margin-top:18px}.comic-form-panel{padding:20px}.comic-form-panel .gender{min-height:106px}.comic-scene{aspect-ratio:941/520}}
@media(max-width:340px){.comic-form-panel{width:88%;padding:15px 10px}.comic-title{font-size:43px}.comic-detector{font-size:34px}.comic-count{font-size:14px}.comic-form-panel h2{font-size:23px}}

.comic-detector .brand-mark{font:700 9px/1 Arial,sans-serif;vertical-align:super;letter-spacing:-.5px;-webkit-text-stroke:0;text-shadow:none;margin-left:1px}
header:has(.header-brand){justify-content:center;padding:11px 16px;background:var(--paper)}.header-brand{display:block;width:165px;letter-spacing:0;transform:rotate(-3deg)}.header-comic-logo{position:relative;display:block;background:var(--yellow);padding:4px 6px;isolation:isolate;line-height:1;text-align:center;clip-path:polygon(0 12%,12% 16%,10% 0,26% 8%,38% 0,48% 9%,66% 0,74% 8%,100% 3%,95% 25%,100% 44%,94% 66%,100% 95%,74% 90%,61% 100%,42% 92%,21% 100%,16% 86%,0 95%,5% 63%,0 45%,6% 27%)}.header-brand .comic-title{font:30px/.96 'Bangers',Impact,sans-serif;margin:3px 0 2px;-webkit-text-stroke:.75px #111;text-shadow:1px 1px #111;transform:none;letter-spacing:0}.header-brand .comic-detector{font:24px/.94 'Bangers',Impact,sans-serif;letter-spacing:0;padding:2px 3px 4px;margin:0 5px 0 15px;-webkit-text-stroke:.3px #111}.header-brand .comic-detector .brand-mark{font:700 6px/1 Arial,sans-serif;top:auto;vertical-align:super;margin-left:1px}.comic-form-panel h2{font-size:clamp(29px,8vw,38px);margin:4px 0 15px}