:root{--ink:#284535;--muted:#7c816f;--paper:#f7f3e8;--line:#dcdccc;--orange:#d96d48;--lime:#e2eaa8;--white:#fffdf5;--font:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);line-height:1.7;font-size:14px}button,input,select{font:inherit;color:inherit}button{cursor:pointer;border:0;background:none;-webkit-tap-highlight-color:transparent}button:disabled{opacity:.35;cursor:not-allowed}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #bd723d;outline-offset:4px}h1,h2,h3,p{margin:0}h1,h2,h3{line-height:1.25}a{color:inherit}.shell{max-width:1120px;margin:auto;padding:42px 20px 60px}.narrow{max-width:760px}header{max-width:1120px;padding:24px 20px;display:flex;justify-content:space-between;align-items:center;margin:auto;border-bottom:1px solid var(--line)}.brand{display:flex;gap:12px;align-items:center;font-size:24px;font-weight:800;padding:0;text-align:left;line-height:1.2;flex-shrink:0}.brand>span:last-child{display:flex;flex-direction:column;align-items:flex-start;white-space:nowrap}.brand-mark{width:42px;height:42px;flex:0 0 42px;border:1.5px solid var(--ink);border-radius:50%;display:grid;place-items:center;font-size:27px;font-weight:500;line-height:1}.brand small{font-size:8px;letter-spacing:1.15px;display:block;line-height:1.3;font-weight:600;text-align:left;margin-top:5px;color:var(--muted)}nav{display:flex;gap:24px}nav button{font-size:12px;padding:6px 0;color:var(--muted)}nav .active{color:var(--ink);box-shadow:0 2px var(--ink)}.eyebrow{font-family:var(--font);font-size:10px;letter-spacing:2px;font-weight:650;text-transform:uppercase}.hero{display:grid;grid-template-columns:1fr 1.05fr;gap:40px;align-items:center;padding:16px 0 40px}.hero h1{font-size:58px;letter-spacing:-3px;line-height:1.22;margin:21px 0}.hero h1 em{font-style:normal;display:inline-block;position:relative;isolation:isolate}.hero h1 em:after{content:'';height:14px;background:#dddfa3;position:absolute;bottom:3px;left:-3px;right:-3px;z-index:-1;transform:rotate(-2deg)}.sub{font-size:14px;color:#7b806d;line-height:1.9}.buttons{display:flex;flex-wrap:wrap;gap:12px;margin-top:27px}.primary,.secondary{min-height:48px;border-radius:8px;padding:12px 23px;font-size:14px;font-weight:650;display:inline-flex;align-items:center;justify-content:center;gap:25px}.primary{color:#fffbed;background:var(--ink);box-shadow:0 3px 0 #172e22}.primary:hover{background:#3a5c41}.secondary{border:1px solid var(--ink);background:transparent}.secondary:hover{background:#eeeddc}.smallmeta{display:flex;gap:18px;margin-top:23px;font-size:10px;color:var(--muted)}.hero-art{position:relative;border:1px solid #d4d8bf;background:#e8eccf;border-radius:48% 48% 12px 12px;min-height:395px;display:flex;justify-content:center;align-items:end;padding:24px 0 0;overflow:hidden}.hero-art:before{content:'';position:absolute;inset:38px;border:1px dashed #a6b38e;border-radius:50%}.hero-art .lead{width:255px;z-index:2;position:relative;transform:rotate(5deg)}.hero-art .friend{position:absolute;width:175px;left:-10px;bottom:12px;transform:rotate(-13deg);z-index:1}.hero-art .friend.right{left:auto;right:-10px;transform:rotate(13deg)}.hero-art svg{width:100%;height:auto;display:block}.sticker{position:absolute;background:#fff8e5;padding:7px 12px;border:1px solid var(--ink);border-radius:6px;font-size:12px;z-index:4;box-shadow:2px 3px 0 #28453516}.sticker.one{top:44px;left:22px;transform:rotate(-9deg)}.sticker.two{top:92px;right:16px;transform:rotate(8deg);background:#e7bf8d}.hero-art .tagline{position:absolute;bottom:14px;font-size:10px;letter-spacing:3px;background:#e8eccfe6;padding:4px 10px;z-index:5}.ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:17px 0;display:flex;justify-content:space-between;gap:12px;font-size:12px;font-weight:600}.ticker span{color:#929675;margin:0 8px}.section-head{display:flex;justify-content:space-between;align-items:end;margin:38px 0 22px}.section-head h2{font-size:25px;letter-spacing:-.6px}.section-head p{font-size:12px;color:var(--muted);margin-top:7px}.text-btn{padding:0;text-decoration:underline;text-underline-offset:4px;font-size:12px}.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.person-card{position:relative;text-align:center;background:#fffaf0;border:1px solid var(--line);border-radius:12px;padding:17px 10px 22px;transition:transform .18s,box-shadow .18s;width:100%}.person-card:hover{transform:translateY(-4px);box-shadow:0 8px 0 #2845350b}.person-card .serial{position:absolute;left:13px;top:12px;font-size:9px;color:#8a8e7a;letter-spacing:1px}.person-card .art{width:155px;max-width:100%;margin:auto;position:relative}.person-card .art:before{content:'';position:absolute;background:var(--accent);opacity:.17;width:120px;height:120px;border-radius:50%;top:36px;left:calc(50% - 60px)}.person-card svg{width:100%;height:auto;position:relative;display:block}.person-card h3{font-size:18px;font-weight:750}.person-card .quote{font-size:11px;line-height:1.6;color:var(--muted);margin-top:10px;min-height:36px}.person-card .code{font-family:monospace;font-size:9px;letter-spacing:2px;color:#8a8e7a;margin-top:10px}.explain{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:30px 0 0;border-top:1px solid var(--line);padding-top:28px}.explain b{display:block;font-size:14px;margin:8px 0}.explain p{font-size:12px;color:var(--muted)}.note{color:var(--muted);font-size:12px;line-height:1.9}.footnote{padding:20px 0 0;margin-top:25px;border-top:1px solid var(--line)}footer{max-width:1080px;margin:auto;border-top:1px solid var(--line);padding:21px 0 30px;display:flex;justify-content:space-between;font-size:10px;color:var(--muted)}.back{padding:0;font-size:12px;color:var(--muted);margin-bottom:24px}.pagehead{margin-bottom:27px}.pagehead h1{font-size:34px;letter-spacing:-1px;margin:12px 0}.pagehead p{font-size:13px;color:var(--muted)}.card{background:var(--white);border:1px solid var(--line);border-radius:13px;padding:28px}.profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.field{display:flex;flex-direction:column;gap:8px;font-size:12px;font-weight:600}input,select{background:#faf8ee;border:1px solid #d2d5c4;border-radius:7px;height:46px;padding:0 12px;width:100%}.check{display:flex;gap:9px;align-items:start;font-size:12px;margin-top:23px}.check input{width:16px;height:16px;margin-top:4px;flex-shrink:0}.banner{background:#ebedcf;border:1px solid #d6dabe;border-radius:9px;padding:13px 17px;font-size:12px;line-height:1.8;margin-bottom:22px}.checkpoint{display:flex;justify-content:space-between;gap:10px;align-items:center}.progress-head{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:10px}.progress{height:4px;background:#dfe0cc;border-radius:4px;overflow:hidden;margin-bottom:28px}.progress i{display:block;height:100%;background:var(--ink)}.quiz-top{display:flex;justify-content:space-between;align-items:center;gap:16px}.quiz-top h1{font-size:28px;letter-spacing:-.8px;margin:13px 0 15px}.quiz-top svg{width:94px;height:auto;flex-shrink:0}.question-stem{font-size:15px;color:#64715b;line-height:1.9}.duel{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:25px 0}.statement{border-radius:10px;padding:22px 21px;background:#edeed7;border:1px solid #d9ddc3;font-size:15px;line-height:1.85}.statement.b{background:#f5e9d7;border-color:#e4d4ba}.statement b{font-family:monospace;font-size:12px;display:block;margin-bottom:10px}.choices{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:22px 0 8px}.choice{border:1px solid #ced4bc;border-radius:10px;background:var(--white);padding:13px 4px;font-size:11px;min-height:74px}.choice:before{content:'';display:block;width:20px;height:20px;border:1.5px solid #8e9b7a;border-radius:50%;margin:0 auto 8px}.choice:first-child:before,.choice:last-child:before{width:26px;height:26px;margin-bottom:2px}.choice.selected{background:#e5ecc9;border:2px solid #33523b;padding:12px 3px}.choice.selected:before{background:#33523b;box-shadow:inset 0 0 0 4px #e5ecc9}.choice:hover{background:#eef1df}.quiz-actions{display:flex;justify-content:space-between;gap:12px;margin-top:25px}.quiz-note{display:flex;justify-content:space-between;gap:10px;margin-top:17px;font-size:10px;color:var(--muted)}.detail-hero{display:grid;grid-template-columns:320px 1fr;gap:45px;align-items:center;padding:25px 0 35px}.detail-art{background:var(--accent);border-radius:50% 50% 14px 14px;position:relative;padding:12px 22px}.detail-art svg{width:100%;height:auto;display:block}.detail-art:after{content:'FOOTBALL PERSONALITY';font-size:9px;letter-spacing:2px;position:absolute;bottom:14px;left:0;right:0;text-align:center;color:#284535a0}.detail-info h1{font-size:42px;letter-spacing:-1px;margin:12px 0}.catchphrase{font-size:17px;margin:12px 0;color:#707b5a}.tag-row{display:flex;gap:7px;flex-wrap:wrap;margin-top:18px}.tag{font-size:10px;border:1px solid #d0d6c0;padding:3px 8px;border-radius:20px}.detail-info .description{font-size:14px;line-height:1.95;margin-top:20px;color:#67725d}.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.result-grid h2,.result-section h2{font-size:20px;margin-bottom:20px}.dimension{margin:20px 0}.dimension:first-of-type{margin-top:0}.dimension .heading{display:flex;justify-content:space-between;font-size:12px;margin-bottom:11px}.dimension .heading b{font-size:11px;font-weight:500;color:#7e876e}.axis-track{height:8px;background:linear-gradient(90deg,#bad2ad,#eee9cc,#e5b18e);border-radius:7px;position:relative}.axis-track i{position:absolute;width:13px;height:13px;top:-3px;border:2px solid var(--white);background:#284535;border-radius:50%;transform:translateX(-50%);box-shadow:0 0 0 1px #284535}.axis-labels{display:flex;justify-content:space-between;color:var(--muted);font-size:10px;margin-top:8px}.feature-block{padding:17px 0;border-bottom:1px solid var(--line)}.feature-block:first-of-type{padding-top:0}.feature-block:last-child{border:0;padding-bottom:0}.feature-block h3{font-size:14px;margin-bottom:8px}.feature-block p{font-size:12px;color:#7b816e;line-height:1.9}.result-section{margin-top:20px}.result-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:25px}.result-actions .primary{background:#bd653f;box-shadow:0 3px 0 #924d30}.mini-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}.mini-grid .person-card{padding:15px 8px}.mini-grid .art{width:110px}.mini-grid h3{font-size:14px}.mini-grid .quote{display:none}.mini-grid .art:before{width:90px;height:90px;left:calc(50% - 45px);top:25px}.history-row{display:flex;align-items:center;gap:20px;border:1px solid var(--line);border-radius:12px;background:var(--white);padding:15px;margin-bottom:13px}.history-row svg{width:75px;height:auto;flex-shrink:0}.history-row h3{font-size:17px}.history-row p{font-size:11px;color:var(--muted);margin-top:5px}.history-row .text-btn{margin-left:auto;white-space:nowrap}.empty{text-align:center;padding:40px 25px}.empty h2{font-size:24px;margin-bottom:15px}.review-item{border-bottom:1px solid var(--line);padding:16px 0}.review-item summary{font-size:13px;font-weight:600;cursor:pointer;display:flex;justify-content:space-between;gap:15px}.review-item p{font-size:12px;color:var(--muted);margin-top:12px}.review-item .mychoice{color:var(--ink)}.filter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}.filter button{border:1px solid var(--line);border-radius:20px;padding:7px 14px;font-size:11px}.filter .on{background:var(--ink);color:#fff9e8}.share-preview{width:270px;max-width:100%;display:block;margin:20px auto;border-radius:12px;box-shadow:0 8px 30px #2845351a}.dialog{position:fixed;inset:0;z-index:20;background:#203a2a88;display:flex;align-items:center;justify-content:center;padding:20px;overflow:auto}.dialog-inner{background:var(--paper);border-radius:15px;padding:25px;max-width:450px;width:100%;max-height:90vh;overflow:auto}.dialog-head{display:flex;justify-content:space-between;gap:12px;align-items:center}.dialog-head h2{font-size:21px}.dialog-head button{font-size:25px;line-height:1}.dialog .primary{width:100%}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff9e8;padding:12px 20px;border-radius:8px;z-index:50;font-size:12px;max-width:90vw;display:none}.mixed-badge{background:#ede9ca;padding:8px 12px;border-radius:8px;font-size:12px;margin:18px 0}.full-width{width:100%}@media(max-width:900px){.hero h1{font-size:45px}.hero-art{min-height:350px}.hero-art .lead{width:220px}.hero-art .friend{width:150px}.hero-art .sticker{font-size:10px}.gallery{gap:12px}.person-card h3{font-size:16px}.person-card .art{width:140px}.detail-hero{grid-template-columns:270px 1fr;gap:30px}.detail-info h1{font-size:35px}footer{margin:0 20px}}@media(max-width:600px){header{padding:19px 20px}.brand{font-size:20px;gap:9px}.brand small{font-size:6.5px;letter-spacing:.65px;margin-top:4px}.brand-mark{width:34px;height:34px;flex-basis:34px;font-size:23px}nav{gap:16px}nav button{font-size:11px}.shell{padding:28px 20px 40px}.hero{grid-template-columns:1fr;gap:29px;padding:0 0 27px}.hero h1{font-size:clamp(32px,10vw,40px);letter-spacing:-2px;margin:17px 0}.hero .sub{font-size:13px}.hero .buttons{margin-top:22px;gap:10px}.primary,.secondary{padding:12px 19px;font-size:13px;gap:16px}.smallmeta{margin-top:19px;font-size:10px;gap:16px}.hero-art{min-height:300px;border-radius:45% 45% 12px 12px}.hero-art .lead{width:208px}.hero-art .friend{width:145px;left:-1px;bottom:8px}.hero-art .friend.right{right:-3px}.sticker.one{top:32px;left:15px}.sticker.two{top:69px;right:12px}.hero-art .tagline{bottom:8px;font-size:8px}.ticker{font-size:10px;gap:5px;padding:14px 0}.ticker span{margin:0 3px}.section-head{margin-top:28px;gap:13px}.section-head h2{font-size:22px}.section-head p{font-size:11px}.section-head .text-btn{white-space:nowrap;font-size:11px}.gallery{grid-template-columns:1fr 1fr;gap:11px}.person-card{padding:15px 10px 17px}.person-card .art{width:143px}.person-card h3{font-size:17px}.person-card .quote{font-size:10px;margin-top:8px;min-height:32px}.person-card .serial{font-size:8px}.explain{grid-template-columns:1fr;gap:18px}.explain>div{display:grid;grid-template-columns:26px 1fr;gap:0 10px}.explain b{margin:0 0 4px}.explain p{grid-column:2}.explain .eyebrow{grid-row:1/3;margin-top:3px}.explain p{font-size:11px}.footnote{font-size:10px}.pagehead h1{font-size:28px}.pagehead p{font-size:12px}.card{padding:21px 18px}.profile-grid{gap:18px 13px}.check{font-size:11px}.quiz-top h1{font-size:24px}.quiz-top svg{width:70px}.quiz-top .eyebrow{font-size:9px}.question-stem{font-size:14px}.duel{gap:10px;margin:22px 0}.statement{padding:17px 14px;font-size:13px;min-height:146px}.statement b{margin-bottom:9px}.choices{gap:6px}.choice{font-size:10px;padding:12px 2px;min-height:72px}.choice.selected{padding:11px 1px}.quiz-note{font-size:9px}.detail-hero{display:flex;flex-direction:column;gap:25px;padding-top:0;align-items:stretch}.detail-art{width:240px;margin:auto}.detail-info{text-align:center}.detail-info h1{font-size:36px;margin:12px 0}.detail-info .eyebrow{font-size:10px}.detail-info .description{text-align:left;font-size:13px;margin-top:18px}.catchphrase{font-size:15px}.tag-row{justify-content:center;margin-top:14px}.result-grid{grid-template-columns:1fr;gap:14px}.result-grid h2,.result-section h2{font-size:19px}.mini-grid{grid-template-columns:1fr 1fr;gap:10px}.mini-grid .person-card h3{font-size:15px}.result-actions{gap:9px}.result-actions .primary{width:100%}.result-actions .secondary{flex:1;padding:12px;font-size:12px}.history-row{gap:12px;padding:11px}.history-row h3{font-size:15px}.history-row svg{width:60px}.history-row .text-btn{font-size:11px}.history-row p{font-size:10px}.review-item summary{font-size:12px}.review-item summary span:last-child{white-space:nowrap;font-size:10px}footer{font-size:9px;gap:14px}.dialog-inner{padding:20px}.dialog{padding:16px}.share-preview{width:240px}.banner{font-size:11px;padding:12px 14px}}@media(prefers-reduced-motion:no-preference){.hero-art .lead{animation:bob 4s ease-in-out infinite}@keyframes bob{0%,100%{transform:rotate(5deg) translateY(0)}50%{transform:rotate(3deg) translateY(-6px)}}}@media print{header,footer,.back,.result-actions,.dialog,#toast{display:none!important}.shell{padding:0}.detail-hero{display:flex;flex-direction:row}.detail-art{width:240px}.result-grid{display:block}.card{break-inside:avoid;margin-bottom:15px}body{background:#fff}.mini-grid{grid-template-columns:repeat(4,1fr)}}

@media(max-width:360px){header{padding-left:16px;padding-right:16px}header nav{gap:10px}.brand{gap:7px}.brand small{font-size:6px;letter-spacing:.4px}}

/* Original football club emblem, crisp at every screen size. */
.brand-mark{border:0;background:none;overflow:visible}.brand-mark svg{display:block;width:100%;height:100%;filter:drop-shadow(0 2px 2px #28453518)}

.persona-title{font-size:11px;letter-spacing:1px;color:var(--muted);margin-top:6px;line-height:1.5}.detail-info .persona-title{font-size:15px;margin:8px 0 15px}.mini-grid .persona-title{font-size:10px}