.material-compass{position:relative;padding:115px 6vw;background:#dfe3dc;color:#111a23;overflow:hidden}.material-compass:before{content:'MATERIAL';position:absolute;right:-.04em;top:-.18em;font:500 clamp(110px,19vw,300px)/1 var(--body);letter-spacing:-.08em;color:#cfd5cd;pointer-events:none}.compass-heading{position:relative;display:grid;grid-template-columns:1.35fr .65fr;gap:7vw;align-items:end;margin-bottom:48px}.compass-heading h2{font:500 clamp(48px,5.5vw,84px)/.98 var(--body);letter-spacing:-.07em;margin:22px 0 0}.compass-heading h2 em{font-weight:400;color:#788579}.compass-heading>p{font-size:14px;line-height:1.9;color:#536159;max-width:390px}.compass-shell{position:relative;display:grid;grid-template-columns:290px minmax(360px,.95fr) minmax(360px,1.05fr);min-height:680px;background:#101923;border-radius:8px 86px 8px 8px;overflow:hidden;box-shadow:0 35px 90px #2331271c}.compass-controls{padding:34px 28px;color:#fff;border-right:1px solid #ffffff20;display:flex;flex-direction:column;gap:30px}.compass-control-group>span{display:block;color:#8696a5;font-size:8px;letter-spacing:.16em;margin-bottom:12px}.compass-control-group>div{display:grid;gap:7px}.compass-control-group button{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:48px;padding:9px 12px;border:1px solid #ffffff18;border-radius:5px;background:#ffffff05;color:#cbd4dc;font:500 11px var(--body);text-align:left;cursor:pointer;transition:background .25s,border .25s,translate .25s}.compass-control-group button:after{content:'+';color:#748391;font-size:16px}.compass-control-group button:hover{translate:4px 0;border-color:#ffffff45}.compass-control-group button[aria-pressed=true]{background:#f3f0e8;color:#101923;border-color:#f3f0e8}.compass-control-group button[aria-pressed=true]:after{content:'●';color:#ff3540;font-size:10px}.compass-control-group.layers button[aria-pressed=true]{background:#ff3540;color:#fff;border-color:#ff3540}.compass-control-group.layers button[aria-pressed=true]:after{color:#fff}.compass-visual{position:relative;min-height:680px;overflow:hidden;background:#29343d}.compass-visual img{width:100%;height:100%;object-fit:cover;filter:saturate(.55) contrast(1.05);transition:opacity .35s,scale .8s}.compass-visual img.is-changing{opacity:.32;scale:1.04}.compass-visual:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#10192380,transparent 45%),linear-gradient(0deg,#101923c7,transparent 55%)}.compass-beam{position:absolute;z-index:2;top:-15%;bottom:-15%;left:48%;width:3px;background:#fff;box-shadow:0 0 8px #fff,0 0 25px #ff3540,0 0 65px 25px #ff354055;rotate:8deg;animation:compassScan 4.8s ease-in-out infinite alternate}.compass-beam:before{content:'';position:absolute;top:48%;left:50%;width:86px;height:86px;border:1px solid #fff9;border-radius:50%;translate:-50% -50%;box-shadow:0 0 0 15px #ff354018,0 0 40px #ff354080}.compass-visual-label{position:absolute;z-index:3;left:27px;top:28px;color:#fff;font-size:7px;letter-spacing:.16em}.compass-readout{position:absolute;z-index:3;left:28px;right:28px;bottom:28px;color:#fff}.compass-readout span{font-size:8px;letter-spacing:.16em;color:#ff9fa5}.compass-readout strong{display:block;font:500 26px/1.15 var(--body);letter-spacing:-.045em;margin-top:11px}.compass-result{padding:48px 44px;color:#eef3f6;display:flex;flex-direction:column}.compass-result-top{display:flex;align-items:center;gap:12px;font-size:8px;letter-spacing:.15em;color:#93a2b0}.compass-result-top i{width:8px;height:8px;border-radius:50%;background:#ff3540;box-shadow:0 0 0 7px #ff354020}.compass-result h3{font:500 clamp(32px,3vw,48px)/1.05 var(--body);letter-spacing:-.055em;margin:34px 0 22px}.compass-result>p{font-size:13px;line-height:1.85;color:#bdc8d1}.compass-result h4{font-size:9px;letter-spacing:.15em;color:#ff7880;margin:33px 0 10px}.compass-result ul{margin:0 0 30px;padding:0;list-style:none;border-top:1px solid #ffffff20}.compass-result li{position:relative;padding:13px 10px 13px 25px;border-bottom:1px solid #ffffff20;color:#d4dde4;font-size:11px;line-height:1.5}.compass-result li:before{content:'↗';position:absolute;left:0;color:#ff5963}.compass-result .button{margin-top:auto;width:100%;justify-content:space-between}.compass-footnote{font-size:9px!important;color:#8293a2!important;margin:17px 0 0!important}.material-compass button:focus-visible{outline:2px solid white;outline-offset:3px}@keyframes compassScan{from{translate:-38px 0}to{translate:38px 0}}
@media(max-width:1100px){.compass-shell{grid-template-columns:245px 1fr}.compass-result{grid-column:1/-1;min-height:510px}.compass-visual{min-height:600px}.compass-controls{grid-row:1}.compass-heading{grid-template-columns:1fr .8fr}}
@media(max-width:700px){.material-compass{padding:72px 6vw}.material-compass:before{font-size:125px;top:-15px}.compass-heading{display:block;margin-bottom:28px}.compass-heading h2{font-size:45px}.compass-heading>p{font-size:12px;margin-top:24px}.compass-shell{display:flex;flex-direction:column;border-top-right-radius:55px}.compass-controls{padding:26px 20px;border-right:0}.compass-control-group>div{display:flex;overflow-x:auto;padding-bottom:4px}.compass-control-group button{flex:0 0 auto;min-height:42px;white-space:nowrap}.compass-visual{min-height:420px}.compass-result{padding:38px 24px;min-height:560px}.compass-result h3{font-size:36px}.compass-result>p{font-size:12px}.compass-beam{animation-duration:5.5s}}
@media(prefers-reduced-motion:reduce){.compass-beam{animation:none}.compass-visual img,.compass-control-group button{transition:none}}

.compass-actions{margin-top:auto;display:grid;gap:10px}.compass-actions .button{margin-top:0}.compass-actions .text-link{font-size:9px;color:#fff;padding:9px 0}.compass-actions button.text-link{border:0;background:none;text-align:left;cursor:pointer}