:root{color-scheme:light;--blue:#4c9eea;--gray:#f3f5f7}*{box-sizing:border-box}html{background:var(--blue);scroll-behavior:smooth}body{margin:0;font:16px/1.25 -apple-system,BlinkMacSystemFont,"PingFang HK","Microsoft JhengHei",sans-serif;color:#333;background:var(--gray);min-height:100vh;min-height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}header{height:60px;background:var(--blue);padding:12px;display:flex;align-items:center;justify-content:space-between}header>div{display:flex;gap:12px}header button{width:30px;height:30px;border:0;border-radius:50%;background:#ffffff33;display:grid;place-items:center;box-shadow:0 4px 8px #00000014,inset 1px 1px #ffffff4d}main{padding:12px;background:white;border-radius:16px;display:flex;flex-direction:column;gap:12px;min-height:calc(100vh - 60px);min-height:calc(100dvh - 60px)}.hero{background:var(--gray);border-radius:16px;overflow:hidden;display:flex;align-items:center;justify-content:center;flex:1;min-height:240px}.art{position:relative;width:100%;aspect-ratio:1}.art>div{position:absolute;overflow:hidden;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%}.stadium{inset:7.8% -38.67% 3.94% -10.67%;opacity:.5;filter:grayscale(1);mask-image:url(assets/img52112StqOsPky2.svg);-webkit-mask-image:url(assets/img52112StqOsPky2.svg)}.stadium img{width:100%;height:100%;object-fit:cover}.jersey{inset:26.73% 8.27% 47.93% 73.87%;mask-image:url(assets/imgConceptJerseyFootballDesignGraphicDesignerFootballKitDesi6.svg);-webkit-mask-image:url(assets/imgConceptJerseyFootballDesignGraphicDesignerFootballKitDesi6.svg)}.jersey img{position:absolute;width:153.05%;height:134.9%;left:-28.02%;top:-24.27%}.player{inset:7.8% 19.73% 3.94% 7.47%;mask-image:url(assets/imgEmboloSlider221.svg);-webkit-mask-image:url(assets/imgEmboloSlider221.svg)}.player img{position:absolute;width:248.75%;height:115.44%;left:-51.97%;top:-15.41%}.content{padding:12px 12px 24px;display:flex;flex-direction:column;gap:12px;justify-content:center;min-width:0}.card{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;background:var(--gray);text-decoration:none;color:inherit;min-height:60px}.label{display:flex;flex:1;min-width:0;flex-direction:column}.label strong{font-size:16px;line-height:20px;font-weight:600}.label small{font-size:12px;line-height:16px;color:#959799}.action{width:32px;height:32px;border:1px solid var(--blue);border-radius:50%;display:grid;place-items:center;flex-shrink:0}.app-icon{width:36px;height:36px;background:var(--blue);border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;flex-shrink:0}.app-icon small{font:5px/7px sans-serif;background:white;border-radius:5px;color:var(--blue);padding:0 3px;align-self:flex-start;margin-left:2px}.teaching{min-height:44px;display:flex;justify-content:center;align-items:center;gap:8px;color:#333;text-decoration:none;font-size:12px;text-align:center}#guide{background:white;padding:24px;min-height:100vh}#guide[hidden]{display:none}dialog{border:0;border-radius:16px;max-width:85%;box-shadow:0 8px 40px #0003}dialog::backdrop{background:#0005}dialog button,#guide button{background:var(--blue);color:white;border:0;border-radius:20px;padding:10px 24px}@media(min-width:740px) and (orientation:landscape){main{flex-direction:row;padding:24px 12px}.hero{flex:1.32;min-width:0}.content{flex:1;padding:12px}.art{max-width:680px}}@media(max-width:480px){.hero{max-height:52vh}.content{padding-inline:0}main{min-height:calc(100dvh - 60px)}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
main{height:calc(100vh - 60px);height:calc(100dvh - 60px);min-height:500px}.hero{min-height:0;flex-basis:0}.content{flex-shrink:0}.art{flex-shrink:0}header button{overflow:hidden}@media(min-width:740px) and (orientation:landscape){main{min-height:320px}.hero{flex-basis:0}.content{flex-shrink:1}}
/* Compact landscape uses available viewport height, not a phone model name. */
main{min-height:0}
.hero{position:relative}
.art{width:min(100%, calc(100dvh - 300px));min-width:0}
@media(orientation:landscape){
 header{height:48px;padding-block:8px}
 main{height:calc(100vh - 48px);height:calc(100dvh - 48px);min-height:0;flex-direction:row;gap:12px;padding:12px}
 .hero{flex:1.2;min-width:0;max-height:none}
 .art{width:min(100%, calc(100dvh - 72px));aspect-ratio:1}
 .content{flex:1;min-width:0;flex-shrink:1;padding:0;gap:8px}
 .card{padding:10px;gap:8px;min-height:56px}
 .teaching{min-height:36px}
}
@media(max-height:330px) and (orientation:landscape){
 header{height:42px}
 main{height:auto;min-height:calc(100vh - 42px);min-height:calc(100dvh - 42px)}
 .hero{min-height:170px}.art{width:170px}.content{padding-block:4px}
}
/* Place the installation hint closer to the bottom of the content surface. */
@media(orientation:portrait){
 .content{padding-bottom:8px}
 .teaching{transform:translateY(8px)}
}

/* Narrow Duo landscape: keep controls above the browser's floating address bar. */
@media(orientation:landscape) and (max-width:739px){
 main{padding:10px 12px 24px;gap:10px}
 .hero{flex:1;max-height:none}
 .art{width:min(100%, calc(100dvh - 96px))}
 .content{flex:1.05;gap:8px;padding:0}
 .card{padding:8px;gap:6px;min-height:56px}
 .label strong{font-size:14px}
 .label small{font-size:11px}
 .teaching{font-size:11px;min-height:36px;transform:none}
}

/* Reset browser button padding so native image dimensions fit the glass circles. */
header button{padding:0;line-height:0;flex-shrink:0;overflow:visible;appearance:none;-webkit-appearance:none}
header button img{display:block;flex-shrink:0;max-width:none}
#language img{width:20px;height:20px;object-fit:cover;border-radius:50%}
/* Both landscape rotations: browser-reserved rails may swap sides. */
@media(orientation:landscape){
 header{padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
 header>div{padding-right:4px}
 main{padding-left:12px;padding-right:12px}
}
/* Extend the white page surface beneath Safari's bottom controls. */
html,body{background:#fff}

/* White outer canvas for both side rails and the bottom browser surface. */
html{background:#fff!important;color-scheme:light}
body{background:#fff!important;isolation:isolate}
body::before{content:"";position:fixed;inset:0;background:#fff;z-index:-1;pointer-events:none}