#resultScreen:has(.compat64){animation:none;width:calc(100% + 32px);margin-inline:-16px}
body:has(.compat64){background:#2E2C2A}
body:has(.compat64) .app{padding-bottom:0}
.compat64{background:#2E2C2A;color:#EFEBE4;overflow-x:clip;font-family:'M PLUS Rounded 1c',sans-serif;-webkit-font-smoothing:antialiased}
.compat64 *{box-sizing:border-box}
.compat64-top{position:relative;overflow:hidden;padding:24px 16px 28px}
.compat64-ticker{position:absolute;left:-10px;top:0;height:200%;pointer-events:none}
.compat64-ticker div{font:400 112px/.86 'Anton',sans-serif;color:transparent;-webkit-text-stroke:1.3px rgba(227,204,142,.11);animation:compat64-drift 40s linear infinite}
.compat64-heading,.compat64-gauge,.compat64-summary,.compat64-stage{position:relative}
.compat64-heading{padding:0 2px}
.compat64-kicker{font:800 11px/1 'Outfit',sans-serif;letter-spacing:.3em;color:#E9A27F}
.compat64-heading h1{margin:6px 0 0;font:400 26px/1.2 'Dela Gothic One',sans-serif;color:#fff;text-shadow:3px 3px 0 #B0603F}
.compat64-gauge{margin:26px auto 0;width:256px;height:256px}
.compat64-gauge-glow{position:absolute;inset:-14px;border-radius:50%;background:radial-gradient(closest-side,rgba(233,162,127,.22),rgba(233,162,127,0));animation:compat64-pulse 2.6s ease-in-out infinite}
.compat64-tick{position:absolute;left:50%;top:0;width:5px;margin-left:-2.5px;border-radius:3px;transform-origin:2.5px 128px}
.compat64-tick--base{background:#3A3734}
.compat64-tick--lit{background:var(--tick-color);box-shadow:0 0 6px var(--tick-color),0 0 12px var(--tick-color)}
.compat64.is-entering .compat64-tick--lit{animation:compat64-on .01s linear var(--tick-delay) both}
.compat64-gauge-ring{position:absolute;inset:34px;border:1.5px solid rgba(227,204,142,.3);border-radius:50%}
.compat64-gauge-core{position:absolute;inset:40px;border-radius:50%;background:#1F1E1C;box-shadow:inset 0 0 20px rgba(0,0,0,.6)}
.compat64-gauge-center{position:absolute;inset:40px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.compat64-gauge-match{margin-left:.45em;font:800 10.5px/1 'Outfit',sans-serif;letter-spacing:.45em;color:#A8A097}
.compat64-gauge-score{display:flex;align-items:baseline;margin-top:6px}
.compat64-gauge-number{font:400 86px/.88 'Anton',sans-serif;color:#FFF1C9;text-shadow:0 0 12px rgba(233,162,127,.8),3px 3px 0 #B0603F}
.compat64-gauge-unit{margin-left:3px;font:400 28px/1 'Anton',sans-serif;color:#FFF1C9}
.compat64-gauge-label{margin-top:8px;font:400 17px/1.2 'Dela Gothic One',sans-serif;color:#fff}
.compat64-summary{margin:18px 0 0;text-align:center;font:700 13px/1.85 'M PLUS Rounded 1c',sans-serif;color:#CFC8BE}
.compat64-stage{margin:22px -16px 0;height:330px;overflow:hidden}
.compat64-stage-bg{position:absolute;inset:0;width:100%;height:100%;display:block}
.compat64-stage-outline{position:absolute;top:26px;font:400 96px/.85 'Anton',sans-serif;letter-spacing:.02em;writing-mode:vertical-rl;color:transparent;-webkit-text-stroke:1.5px var(--outline-color)}
.compat64-stage-outline--you{left:4px}.compat64-stage-outline--friend{right:4px}
.compat64-stage-tag{position:absolute;top:12px;padding:5px 14px;background:var(--tag-color);transform:skewX(-12deg);box-shadow:3px 3px 0 #1A1917}
.compat64-stage-tag--you{left:14px;--tag-color:#E3CC8E}.compat64-stage-tag--friend{right:14px;--tag-color:#95C2AE}
.compat64-stage-tag span{display:block;transform:skewX(12deg);font:900 13px/1 'M PLUS Rounded 1c',sans-serif;color:#1A1917}
.compat64-stage-character{position:absolute;top:48px;width:200px;height:210px}
.compat64-stage-character--you{left:-4px}.compat64-stage-character--friend{right:-4px}
.compat64.is-entering .compat64-stage-character--you{animation:compat64-slideL .5s ease-out .2s both}
.compat64.is-entering .compat64-stage-character--friend{animation:compat64-slideR .5s ease-out .3s both}
.compat64-stage-character .compat64-stage-glow{position:absolute;left:-12px;top:-42px;width:224px;height:294px;display:block}
.compat64-stage-character .compat64-stage-image{position:absolute;left:0;top:0;width:200px;height:210px;object-fit:contain;object-position:center bottom;display:block}
.compat64-stage-person{position:absolute;bottom:14px}
.compat64-stage-person--you{left:18px}.compat64-stage-person--friend{right:18px;text-align:right}
.compat64-stage-code{font:400 34px/1 'Anton',sans-serif;letter-spacing:.06em;color:var(--group-color);text-shadow:3px 3px 0 #1A1917}
.compat64-stage-name{margin-top:6px;font:400 16px/1.2 'Dela Gothic One',sans-serif;color:#fff}
.compat64-bottom{padding:8px 18px 34px}
.compat64-axes-heading{display:flex;align-items:center;gap:10px;white-space:nowrap}
.compat64-axes-kicker{font:400 15px/1 'Anton',sans-serif;letter-spacing:.14em;color:#E3CC8E}
.compat64-axes-heading h2{margin:0;font:400 22px/1.2 'Dela Gothic One',sans-serif;color:#fff}
.compat64-axes-rule{flex:1;border-top:2px dashed rgba(227,204,142,.45)}
.compat64-radar-band{position:relative;margin:16px -18px 0;background:#1A1917;border-top:1.5px solid #3A3734;border-bottom:1.5px solid #3A3734;padding:18px 0 16px;overflow:hidden}
.compat64-radar{position:relative;width:min(100%,375px);aspect-ratio:375/320;margin:0 auto}
.compat64-radar svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.compat64-radar__sweep{transform-box:view-box;transform-origin:187.5px 160px;animation:compat64-sweep 6s linear infinite}
.compat64-radar__person{transform-box:view-box;transform-origin:187.5px 160px}
.compat64.is-entering .compat64-radar__person{animation:compat64-grow 1.5s cubic-bezier(.33,1,.68,1) .4s both}
.compat64-radar__dot{transform:translate(var(--dx),var(--dy))}
.compat64.is-entering .compat64-radar__dot{animation:compat64-dot 1.5s cubic-bezier(.33,1,.68,1) .4s both}
.compat64-radar-label{position:absolute;left:var(--x);top:var(--y);transform:translate(var(--tx),-50%);color:var(--axis-color);font:900 14px/1.15 'M PLUS Rounded 1c',sans-serif;text-align:center;white-space:nowrap;text-shadow:0 0 8px rgba(0,0,0,.8)}
.compat64-radar-legend{display:flex;justify-content:center;gap:22px;margin-top:6px;font:900 13px/1 'M PLUS Rounded 1c',sans-serif;color:#EFEBE4}
.compat64-radar-legend span{display:flex;align-items:center;gap:7px}
.compat64-radar-legend i{position:relative;width:24px;height:4px;border-radius:2px;background:var(--legend-color);box-shadow:0 0 6px var(--legend-color)}
.compat64-radar-legend i:after{content:'';position:absolute;left:7px;top:-3.5px;width:11px;height:11px;border-radius:50%;background:var(--dot-bg);border:2px solid var(--dot-border)}
.compat64-radar-legend .you{--legend-color:#E3CC8E;--dot-bg:#FFF1C9;--dot-border:#1A1917}
.compat64-radar-legend .friend{--legend-color:#95C2AE;--dot-bg:#1A1917;--dot-border:#95C2AE}
.compat64-axis-list{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.compat64-axis{background:#1F1E1C;border:1.5px solid #3A3734;border-top:4px solid var(--axis-color);border-radius:14px;padding:14px 14px 16px}
.compat64-axis-head{display:flex;align-items:center;justify-content:space-between;gap:4px}
.compat64-axis-title{display:flex;align-items:baseline;gap:8px;min-width:0}
.compat64-axis-index{flex:none;font:400 16px/1 'Anton',sans-serif;color:var(--axis-color)}
.compat64-axis-title h3{margin:0;font:400 16px/1.25 'Dela Gothic One',sans-serif;color:#fff}
.compat64-axis-percent{display:flex;align-items:baseline;flex:none;color:var(--axis-color)}
.compat64-axis-percent [data-compat-axis-number]{font:400 38px/.9 'Anton',sans-serif}
.compat64-axis-percent span:last-child{margin-left:2px;font:400 15px/1 'Anton',sans-serif}
.compat64-graph{position:relative;margin:14px 20px 0;height:106px}
.compat64-graph-bar{position:absolute;left:-20px;right:-20px;top:48px;height:10px;border-radius:5px;background:linear-gradient(90deg,var(--axis-color),#3A3734 50%,var(--axis-color))}
.compat64-graph-center{position:absolute;left:50%;top:40px;width:3px;height:26px;margin-left:-1.5px;border-radius:2px;background:#8C8378}
.compat64-graph-marker{position:absolute;left:0;right:0;height:0;transform:translateX(var(--offset))}
.compat64.is-entering .compat64-graph-marker{animation:compat64-move 1.5s cubic-bezier(.33,1,.68,1) .4s both}
.compat64-graph-marker--you{top:0}.compat64-graph-marker--friend{top:59px}
.compat64-marker-inner{position:absolute;left:50%;top:0;margin-left:-20px;width:40px;display:flex;flex-direction:column;align-items:center}
.compat64-avatar{position:relative;width:40px;height:40px;border-radius:50%;background:#FBE3D6;border:3px solid;overflow:hidden}
.compat64-graph-marker--you .compat64-avatar{border-color:#E3CC8E;box-shadow:0 0 10px rgba(227,204,142,.7)}
.compat64-graph-marker--friend .compat64-avatar{border-color:#95C2AE;box-shadow:0 0 10px rgba(149,194,174,.7)}
.compat64-avatar img{position:absolute;left:0;right:0;bottom:-2px;width:100%;height:37px;object-fit:contain;object-position:center bottom}
.compat64-marker-tail{width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent}
.compat64-graph-marker--you .compat64-marker-tail{border-top:7px solid #E3CC8E}
.compat64-graph-marker--friend .compat64-marker-tail{border-bottom:7px solid #95C2AE}
.compat64-axis-ends{display:flex;justify-content:space-between;margin-top:6px}
.compat64-axis-ends span{padding:5px 12px;border-radius:999px;background:var(--axis-color);color:#1A1917;font:900 14px/1 'M PLUS Rounded 1c',sans-serif}
.compat64-axis-labels{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;margin-top:14px;color:#EFEBE4;font:700 12.5px/1.5 'M PLUS Rounded 1c',sans-serif}
.compat64-axis-labels .you{font-weight:900;color:#E3CC8E}.compat64-axis-labels .friend{font-weight:900;color:#95C2AE}
.compat64-axis-body{margin:10px 0 0;padding-top:10px;border-top:1.5px dashed rgba(255,255,255,.18);font:700 13px/1.75 'M PLUS Rounded 1c',sans-serif;color:#CFC8BE}
.compat64-note{margin:14px 0 0;font:700 10.5px/1.6 'M PLUS Rounded 1c',sans-serif;color:#8C8378}
.compat64-actions{margin-top:18px;background:#1F1E1C;border:2px solid #4A4744;border-radius:18px;padding:18px 16px}
.compat64-actions button{display:block;width:100%;height:56px;border:2.5px solid #E3CC8E;border-radius:14px;background:linear-gradient(180deg,#2A2826,#1A1917);color:#E3CC8E;font:400 18px/1 'Dela Gothic One',sans-serif;box-shadow:inset 0 1px 0 rgba(255,241,201,.25),4px 5px 0 #B0603F;cursor:pointer}
.compat64-actions button:disabled{cursor:wait;opacity:1}
.compat64-actions a{display:flex;align-items:center;justify-content:center;margin-top:12px;width:100%;height:50px;border:2px solid #CFC8BE;border-radius:14px;background:#2A2826;color:#EFEBE4;font:900 15px/1 'M PLUS Rounded 1c',sans-serif;text-decoration:none}
.compat64-actions button:focus-visible,.compat64-actions a:focus-visible{outline:3px solid #E3CC8E;outline-offset:3px}
@keyframes compat64-drift{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes compat64-pulse{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes compat64-sweep{to{transform:rotate(360deg)}}
@keyframes compat64-on{from{opacity:0}to{opacity:1}}
@keyframes compat64-slideL{from{opacity:0;transform:translateX(-50px)}to{opacity:1;transform:none}}
@keyframes compat64-slideR{from{opacity:0;transform:translateX(50px)}to{opacity:1;transform:none}}
@keyframes compat64-grow{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes compat64-dot{from{transform:translate(0,0)}to{transform:translate(var(--dx),var(--dy))}}
@keyframes compat64-move{from{transform:translateX(0)}to{transform:translateX(var(--offset))}}
@media(min-width:600px){body:has(.compat64){background:#EFEBE4}main > #resultScreen:has(.compat64){width:min(calc(100% - 32px),480px);margin-inline:auto}}
@media(prefers-reduced-motion:reduce){.compat64,.compat64 *{animation:none!important;transition:none!important}}