/* Account 04 — the approved window, with separate artwork and live controls. */
.account04-art,.account04-corner{display:none}
.home05 #gate:has(.account04){padding:28px;background:#030a17b8;backdrop-filter:blur(5px)}
.home05 #card.account04{--ink:#051329;--paper:#fff3db;--cut:14px;width:min(1280px,calc(100vw - 56px),calc((100dvh - 64px)*1.61));max-width:none;min-height:0;padding:0;border:0;background:linear-gradient(120deg,#fff9e8,#faeacb);color:var(--ink);container-type:inline-size;isolation:isolate;box-shadow:0 18px 55px #0009,0 0 0 2px #131d2e;clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 16px,100% calc(100% - 16px),calc(100% - 16px) 100%,16px 100%,0 calc(100% - 16px),0 16px);font-family:Barlow,sans-serif}
#card.account04:before{content:"";position:absolute;inset:0;pointer-events:none;z-index:4;border:2px solid #a97634;box-shadow:inset 0 0 0 2px #fff1b8,inset 0 0 0 5px #71627055;clip-path:inherit}
#card.account04:after{content:"";position:absolute;z-index:-1;inset:0;background:url('/assets/home05/paper-grain.svg') center/670px,radial-gradient(ellipse at 88% 80%,#d5ae7030,transparent 48%),linear-gradient(155deg,#fff8e6,#f8e7c8);pointer-events:none}
#card.account04 .account04-art{display:block;position:absolute;inset:0 auto 0 0;width:46%;overflow:hidden;pointer-events:none}
.account04-portrait{position:absolute;inset:0;clip-path:polygon(0 0,91.1% 0,99% 17.4%,90.6% 33.9%,93.3% 37%,86.8% 58%,91.6% 62.7%,86% 74.7%,89.3% 80.1%,84.2% 100%,0 100%);background:#070c26}
.account04-hero{display:block;width:93%;height:100%;object-fit:cover;object-position:center top;transform:translateX(-2%);image-rendering:auto!important}
.account04-logo{position:absolute;top:4%;left:13%;width:65%;height:auto;object-fit:contain;image-rendering:auto!important;filter:drop-shadow(0 5px 2px #000a)}
#card.account04 .account04-seam{position:absolute;right:0;top:0;height:100%;width:16%;overflow:visible}
#card.account04 .account04-corner{display:block;position:absolute;right:0;bottom:0;width:11cqw;height:6.7cqw;pointer-events:none;z-index:0;filter:drop-shadow(0 0 4px #b730ef66)}
#card.account04 .step{position:relative;z-index:1;margin-left:44%;width:56%;padding:3.5cqw 3.6cqw 2.8cqw 1.6cqw;animation:account04-content .25s ease both}
#card.account04 h3{font:900 5.7cqw/.98 'Barlow Condensed',sans-serif;letter-spacing:.04em;text-align:center;color:var(--ink);margin:0;text-shadow:1px 1px #fff9}
#card.account04 #s8{min-height:62cqw}
#card.account04 #account04Title{transform:scaleX(1.08)}
#card.account04 .account04-play>span{transform:scaleX(1.045)}
.account04-heading{text-align:center;margin:0 0 1.1cqw}
.account04-heading p{font:500 1.7cqw/1.2 'Barlow Condensed',sans-serif;color:#5d5a63;margin:.5cqw 0 0}
.account04-name{display:flex;align-items:center;justify-content:center;gap:1.4cqw;margin:.6cqw 0 0}
#card.account04 #aname{font:800 3cqw/1.1 'Barlow Condensed',sans-serif;color:#6415a8;letter-spacing:.03em;margin:0;max-width:74%;overflow-wrap:anywhere;word-break:normal}
.account04-name i{width:6cqw;height:1px;background:linear-gradient(90deg,transparent,#b459e6);position:relative}
.account04-name i:last-child{transform:rotate(180deg)}
.account04-name i:after{content:"";position:absolute;right:0;top:-2px;width:5px;height:5px;background:#b459e6;transform:rotate(45deg)}
#card.account04 .arow{display:flex;align-items:center;gap:1.4cqw;min-height:7.55cqw;border:0;border-top:1px solid #b7976655;padding:.7cqw 0;margin:0}
#card.account04 .arow:last-child{border-bottom:1px solid #b7976655}
#card.account04 .account04-icon{flex:none;width:5.5cqw;height:5.5cqw;filter:drop-shadow(0 2px 1px #ab8a4436)}
#card.account04 .arow div{min-width:0;flex:1}
#card.account04 .arow span{font:700 2.05cqw/1.1 Barlow,sans-serif;letter-spacing:0;color:var(--ink);margin:0 0 .4cqw}
#card.account04 .arow b{display:block;font:400 1.65cqw/1.1 Barlow,sans-serif;letter-spacing:0;color:#655773;overflow-wrap:anywhere;word-break:normal}
#card.account04 .arow b.ok{color:#13813b}
#card.account04 .arow b.no{color:#d32139}
#card.account04 #aemail{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#card.account04 .mini{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;flex:0 0 16cqw;height:4.4cqw;min-height:44px;border:0;padding:0 2cqw 0 .8cqw;background:linear-gradient(160deg,#ffdf90,#9b7035 24%,#233854 28%,#18293b 76%,#d0a755 80%,#5c391f);color:#fff7e7;font:900 1.8cqw/1 'Barlow Condensed',sans-serif;letter-spacing:.015em;clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px);transition:filter .18s,transform .18s}
#card.account04 .mini:before{content:"";position:absolute;z-index:-1;inset:2px;clip-path:inherit;background:linear-gradient(125deg,#132b42,#041224 56%,#07182d);box-shadow:inset 0 0 0 1px #8eabc155}
#card.account04 .mini:after{content:"";position:absolute;right:1.3cqw;width:.65cqw;height:.65cqw;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg)}
#card.account04 .mini:hover{filter:brightness(1.3);transform:translateY(-1px)}
#card.account04 .mini:disabled{opacity:.55;cursor:wait;transform:none;filter:grayscale(.4)}
#card.account04 .mini{flex-basis:17.5cqw}
.account04-play-wrap{position:relative;isolation:isolate}
#card.account04 .account04-wings{position:absolute;z-index:-1;inset:-12% -6%;width:112%;height:124%;pointer-events:none}
#card.account04 .status{font:500 1.25cqw/1.2 Barlow,sans-serif;text-align:center;min-height:0;margin:.7cqw 0 0;color:#5d4676;overflow-wrap:anywhere}
#card.account04 .status:empty{display:none}
#card.account04 .status.bad{color:#ad223b}
#card.account04 .status.new{color:#147043}
#card.account04 .account04-play{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;gap:1.3cqw;width:100%;height:10.3cqw;margin:2.6cqw 0 0;padding:.2cqw 2.1cqw .2cqw .8cqw;color:#071322;font:900 4cqw/1 'Barlow Condensed',sans-serif;letter-spacing:.025em;text-decoration:none;background:linear-gradient(150deg,#ffedb0,#ad4a00 22%,#e29b12 27%,#fff5c4 48%,#7d360a 72%,#ffd85d);clip-path:polygon(25px 0,calc(100% - 25px) 0,100% 25px,100% calc(100% - 25px),calc(100% - 25px) 100%,25px 100%,0 calc(100% - 25px),0 25px);filter:drop-shadow(0 5px 4px #8b46024d);transition:filter .2s,transform .2s}
#card.account04 .account04-play:before{content:"";position:absolute;z-index:-1;inset:4px;clip-path:inherit;background:linear-gradient(130deg,#ffe986,#ffe64b 40%,#ffcf2e 75%,#efa923);box-shadow:inset 0 0 0 2px #fff7bf,inset 0 -8px 0 #ca7b0b45}
#card.account04 .account04-play:after{content:"";position:absolute;z-index:-1;inset:7px;clip-path:inherit;background:linear-gradient(105deg,transparent 25%,#fff6 42%,transparent 58%);background-size:250% 100%;background-position:150% 0;transition:background-position .65s}
#card.account04 .account04-play:hover{filter:brightness(1.06) drop-shadow(0 4px 12px #ffb90a6b);transform:translateY(-2px)}
#card.account04 .account04-play:hover:after{background-position:-50% 0}
.account04-play img{height:100%;width:10cqw;object-fit:contain;image-rendering:auto!important;filter:drop-shadow(0 0 5px #b22bfe9c)}
.account04-play span{white-space:nowrap;flex:1;text-align:center}
#card.account04 .account04-play{font-size:4.8cqw}
.account04-play svg{width:2.1cqw;height:2.9cqw;fill:none;stroke:currentColor;stroke-width:4}
#card.account04 .account04-session{gap:1.8cqw;align-items:center;justify-content:space-between;margin:1.8cqw 0 0;padding:0 .6cqw}
#card.account04 .account04-session a{display:flex;align-items:center;justify-content:center;gap:1cqw;color:#071a31;cursor:pointer;font:600 1.45cqw/1.15 'Barlow Condensed',sans-serif;min-height:40px;transition:color .2s}
#card.account04 .account04-session a:last-child{border-left:1px solid #baa57b;padding-left:1.8cqw}
.account04-session svg{width:2.5cqw;height:2.5cqw;flex:none;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linejoin:round}
#card.account04 .account04-session a:hover{color:#7621b1;text-decoration:underline;text-underline-offset:4px}
#card.account04 .account04-session a{font-size:1.65cqw}
#card.account04 #close{z-index:6;position:absolute;top:1.05cqw;right:1.05cqw;width:3.8cqw;height:3.8cqw;min-width:38px;min-height:38px;display:grid;place-items:center;padding:0;border:0;background:linear-gradient(130deg,#fff3ac,#996223 25%,#d7d5b6 50%,#644528);clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px);font:400 0/1 Barlow,sans-serif;color:#fff6e2;isolation:isolate;transition:filter .2s}
#card.account04 #close:before{content:"";position:absolute;inset:2px;clip-path:inherit;background:linear-gradient(145deg,#142d42,#041225);z-index:-1}
#card.account04 #close:after{content:"×";font:500 3.1cqw/.8 Barlow,sans-serif}
#card.account04 #close:hover{filter:brightness(1.35)}
#card.account04 :is(a,button):focus-visible{outline:3px solid #8e26cb;outline-offset:4px}
#card.account04 :is(.mini,.account04-play,#close):focus-visible{outline:0;filter:brightness(1.2);box-shadow:inset 0 0 0 4px #d98cff}
#account04Retry{display:block;margin:10px auto 0;border:1px solid #7e52a6;color:#522b7c;background:#fff7e5;padding:8px 18px;font:600 16px Barlow,sans-serif;cursor:pointer}
#account04Retry[hidden]{display:none}
/* Account substeps retain the same window and their existing authentication handlers. */
#card.account04 .step:not(#s8){min-height:60cqw;padding-top:6cqw;display:none}
#card.account04 .step.on:not(#s8){display:flex;flex-direction:column;justify-content:center}
#card.account04 .step:not(#s8) h3{font-size:3.7cqw;margin-bottom:1.8cqw}
#card.account04 .hint{font:400 1.5cqw/1.3 Barlow,sans-serif;color:#5b5265}
#card.account04 .lbl{font:700 1.35cqw/1.2 Barlow,sans-serif;color:#183046;letter-spacing:0;margin:1.1cqw 0 .6cqw}
#card.account04 .lbl b{font:400 1.2cqw/1.2 Barlow,sans-serif;color:#5f5a66}
#card.account04 .field input{font:400 1.6cqw/1.3 Barlow,sans-serif;letter-spacing:0;background:#fffaf0;color:#0c1c30;border:1px solid #9ca3a6;padding:.85cqw 1cqw;border-radius:3px}
#card.account04 .field input:focus{border-color:#9328bd;box-shadow:0 0 0 3px #c24de826}
#card.account04 .step:not(#s8) .btn{font:900 2cqw/1.1 'Barlow Condensed',sans-serif;letter-spacing:0;padding:1.2cqw;border:1px solid #b99549;color:#fff5df;background:#081b30;clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px);margin-top:2cqw;box-shadow:inset 0 0 0 2px #e1bc6944}
#card.account04 .step:not(#s8) .btn:disabled{opacity:.45}
#card.account04 .step:not(#s8) .alt{font:500 1.35cqw/1.3 Barlow,sans-serif;gap:20px;align-items:center}
#card.account04 .step:not(#s8) .alt a{color:#662293;padding:8px 0}
#card.account04 .small{font:400 1.2cqw/1.2 Barlow,sans-serif;color:#635b64}
#card.account04 .meter i{height:5px;background:#b6a9a066}
#card.account04 .meter i.on{background:#8543b9}
#card.account04 .meter.full i.on{background:#218451}
#card.account04 #cmail{font:500 1.5cqw/1.3 Barlow,sans-serif!important;color:#622e89;overflow-wrap:anywhere}
#card.account04 .code input{background:#fff9ed;color:#17152a;border:1px solid #9b83b3;border-top:3px solid #8125b4;font:700 2cqw Barlow,sans-serif;width:4.5cqw;height:5cqw}
#card.account04 .eye{font:600 14px/1 Barlow,sans-serif;letter-spacing:0;width:80px;color:#4b2868;background:#eee3cc;border:1px solid #a994b5;min-height:44px}
#card.account04 input::-ms-reveal{display:none}
@keyframes account04-content{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:700px){
 .home05 #gate:has(.account04){padding:12px}
 .home05 #card.account04{width:100%;max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#8c61a6 #eee0c5;clip-path:none;border-radius:10px;border:2px solid #d8b36a;box-shadow:0 0 0 2px #132235,0 18px 55px #0009}
 #card.account04:before{display:none}
 #card.account04 .account04-art{position:relative;width:100%;height:100px;overflow:hidden;background:#071426;border-bottom:2px solid #b7904b}
 .account04-portrait{clip-path:none;overflow:hidden}
 .account04-hero{position:absolute;right:0;width:52%;height:290px;top:-70px;object-fit:cover;object-position:center 48%;transform:none;mask-image:linear-gradient(90deg,transparent,#000 25%)}
 .account04-logo{top:20px;left:20px;width:48%;max-width:220px;filter:drop-shadow(0 3px 2px #0009)}
 .account04-seam{display:none}
 #card.account04 .step{margin:0;width:100%;padding:22px 22px 18px}
 #card.account04 #s8{min-height:0}
 #card.account04 .account04-corner,#card.account04 .account04-seam{display:none}
 #card.account04 h3{font-size:40px;letter-spacing:.025em}
 #card.account04 #account04Title,#card.account04 .account04-play>span{transform:none}
 .account04-heading{margin-bottom:14px}
 .account04-heading p{font-size:18px;margin-top:4px}
 .account04-name{margin-top:5px;gap:16px}
 #card.account04 #aname{font-size:27px;white-space:nowrap;max-width:none;word-break:normal}
 .account04-name i{width:50px;min-width:12px;flex-shrink:1}
 .account04-name{gap:10px}
 #card.account04 .arow{gap:11px;min-height:81px;padding:12px 0}
 #card.account04 .account04-icon{width:46px;height:46px}
 #card.account04 .arow span{font-size:22px;margin-bottom:4px}
 #card.account04 .arow b{font-size:17px;line-height:1.15}
 #card.account04 .mini{flex-basis:98px;height:44px;padding:0 15px 0 6px;font-size:19px}
 #card.account04 .mini:after{right:9px;width:5px;height:5px}
 #card.account04 .status{font-size:14px;margin-top:10px}
 #card.account04 .account04-play{height:80px;margin-top:22px;gap:7px;padding:0 15px 0 6px;font-size:33px}
 .account04-play img{width:72px;height:76px}
 .account04-play svg{width:17px;height:25px}
 #card.account04 .account04-session{gap:12px;margin-top:13px;padding:0}
 #card.account04 .account04-session a{font-size:16px;gap:8px;min-height:46px}
 #card.account04 .account04-session a:last-child{padding-left:12px}
 .account04-session svg{width:25px;height:25px}
 #card.account04 #close{top:10px;right:10px;width:38px;height:38px;position:absolute}
 #card.account04 #close:after{font-size:32px}
 #card.account04 .step.on:not(#s8){min-height:470px;padding:30px 25px}
 #card.account04 .step:not(#s8) h3{font-size:34px;margin-bottom:22px}
 #card.account04 .hint{font-size:16px}
 #card.account04 .lbl{font-size:15px;margin:15px 0 7px}
 #card.account04 .lbl b,#card.account04 .small{font-size:13px}
 #card.account04 .field input{font-size:17px;padding:12px}
 #card.account04 .step:not(#s8) .btn{font-size:25px;min-height:50px;margin-top:22px;padding:12px}
 #card.account04 .step:not(#s8) .alt{font-size:15px}
 #card.account04 #cmail{font-size:16px!important}
 #card.account04 .code{gap:6px}
 #card.account04 .code input{width:36px;height:50px;font-size:24px}
 #card.account04 .code input:nth-child(3){margin-right:3px}
}
@media(max-height:580px) and (min-width:540px) and (orientation:landscape){
 .home05 #gate:has(.account04){padding:12px}
 .home05 #card.account04{width:100%;height:calc(100dvh - 24px);max-height:none;clip-path:none;border-radius:9px;overflow:hidden}
 #card.account04 .account04-art{position:absolute;inset:0 auto 0 0;width:31%;height:100%;border:0;background:transparent}
 .account04-portrait{clip-path:polygon(0 0,91.1% 0,99% 17.4%,90.6% 33.9%,93.3% 37%,86.8% 58%,91.6% 62.7%,86% 74.7%,89.3% 80.1%,84.2% 100%,0 100%)}
 .account04-hero{position:static;width:100%;height:100%;object-position:center top;transform:none;mask-image:none}
 .account04-logo{top:4%;left:7%;width:78%;max-width:none}
 #card.account04 .account04-corner{display:none}
 #card.account04 .account04-seam{display:block}
 #card.account04 .step{margin-left:30%;width:70%;height:100%;overflow-y:auto;padding:11px 24px 8px 12px;scrollbar-width:thin;scrollbar-color:#8657a2 #ede1c7}
 #card.account04 #s8{min-height:0}
 #card.account04 .step:not(#s8){min-height:0;padding:25px}
 #card.account04 .step.on:not(#s8){justify-content:flex-start}
 #card.account04 .step.on:not(#s8)>*{flex-shrink:0}
 #card.account04 h3{font-size:30px}
 .account04-heading{margin-bottom:5px}
 .account04-heading p{font-size:14px;margin-top:2px}
 .account04-name{margin-top:3px}
 #card.account04 #aname{font-size:21px}
 #card.account04 .arow{min-height:52px;padding:5px 0;gap:12px}
 #card.account04 .account04-icon{width:41px;height:41px}
 #card.account04 .arow span{font-size:19px;margin-bottom:2px}
 #card.account04 .arow b{font-size:15px}
 #card.account04 .mini{flex-basis:125px;height:40px;min-height:40px;font-size:18px}
 #card.account04 .account04-play{height:60px;margin-top:10px;font-size:32px}
 .account04-play img{width:68px}
 #card.account04 .account04-session{margin-top:5px;gap:10px}
 #card.account04 .account04-session a{font-size:15px;min-height:32px}
 .account04-session svg{width:23px;height:23px}
 #card.account04 #close{top:9px;right:8px;width:32px;height:32px;min-width:32px;min-height:32px}
 #card.account04 #close:after{font-size:28px}
 #card.account04 .status{font-size:13px}
 #card.account04 .step:not(#s8) h3{font-size:29px;margin-bottom:12px}
 #card.account04 .lbl{font-size:15px;margin:10px 0 5px}
 #card.account04 .field input{font-size:16px;padding:8px}
 #card.account04 .step:not(#s8) .btn{font-size:22px;min-height:44px}
 #card.account04 .step:not(#s8) .alt{font-size:15px}
}
@media(max-height:370px) and (min-width:540px) and (orientation:landscape){
 #card.account04 .account04-heading p{display:none}
 #card.account04 h3{font-size:28px}
 #card.account04 #aname{font-size:19px}
 #card.account04 .arow{min-height:48px;padding:2px 0}
 #card.account04 .account04-icon{width:36px;height:36px}
 #card.account04 .mini{height:44px;min-height:44px}
 #card.account04 .account04-play{height:53px;margin-top:8px;font-size:29px}
 .account04-play img{height:57px;width:58px}
 #card.account04 .account04-session a{font-size:14px}
}
@media(max-width:359px){#card.account04 .step{padding-inline:16px}#card.account04 .mini{flex-basis:86px;font-size:17px}#card.account04 .account04-icon{width:38px;height:38px}#card.account04 .arow{gap:8px}#card.account04 .account04-play{font-size:29px}.account04-play img{width:62px}}
@media(prefers-reduced-motion:reduce){#card.account04 *,#card.account04 *:before,#card.account04 *:after{animation:none!important;transition:none!important}}