.trail-compass-section{max-width:1180px;margin:auto;padding:72px 24px}.trail-compass-warning{display:grid;gap:3px;margin-bottom:18px;padding:14px 16px;border-left:6px solid #d46a4c;border-radius:9px;background:#fff2ec;color:#67291c}.trail-compass-warning span{font-size:12px}.trail-mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:720px;margin:0 auto 24px}.trail-mode-switch button{display:grid;grid-template-columns:42px 1fr;grid-template-rows:auto auto;align-items:center;min-height:70px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);padding:11px;text-align:left;cursor:pointer}.trail-mode-switch button>span{grid-row:1/3;font-size:26px;text-align:center}.trail-mode-switch button strong{font-size:14px}.trail-mode-switch button small{color:var(--muted);font-size:10px}.trail-mode-switch button[aria-pressed="true"]{border-color:#12645f;background:#e4f1ee;box-shadow:0 0 0 2px rgba(18,100,95,.12)}
.trail-skin-picker{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:15px;margin:0 0 20px;padding:14px;border:1px solid var(--line);border-radius:16px;background:#fffaf2;box-shadow:0 8px 24px rgba(18,59,58,.08)}.trail-skin-picker>div:first-child{display:grid;min-width:150px}.trail-skin-picker>div:first-child span{color:var(--coral);font-size:10px;font-weight:900;letter-spacing:.09em;text-transform:uppercase}.trail-skin-picker>div:first-child strong{font:400 19px Georgia,serif}.trail-skin-picker>div:last-child{display:flex;gap:8px;overflow-x:auto;padding:3px 2px 7px;scrollbar-width:thin}.trail-skin-picker button{display:grid;grid-template-columns:32px auto;grid-template-rows:auto auto;align-items:center;flex:0 0 auto;min-width:126px;min-height:57px;border:2px solid transparent;border-radius:12px;background:#eee9df;color:#123b3a;padding:7px 10px;text-align:left;cursor:pointer}.trail-skin-picker button>span{grid-row:1/3;font-size:23px}.trail-skin-picker button strong{font-size:12px}.trail-skin-picker button small{color:#61716e;font-size:9px}.trail-skin-picker button[aria-pressed="true"]{border-color:#f47c15;background:#fff;box-shadow:0 4px 13px rgba(0,0,0,.12)}
.trail-compass-layout{display:grid;grid-template-columns:minmax(310px,.82fr) minmax(340px,1.18fr);gap:18px}.trail-compass-card,.trail-information>article,.trail-online-panel{border:1px solid var(--line);border-radius:18px;background:#fffaf2;box-shadow:var(--shadow)}.trail-compass-card{position:relative;display:grid;justify-items:center;align-content:start;padding:25px;overflow:hidden}.trail-compass-dial{position:relative;width:min(330px,82vw);aspect-ratio:1;border:9px solid #123b3a;border-radius:50%;background:radial-gradient(circle,#fff 0 53%,transparent 54%),repeating-conic-gradient(from -1deg,#123b3a 0 2deg,transparent 2deg 10deg),#e5efec;box-shadow:inset 0 0 0 6px #fff,0 15px 30px rgba(18,59,58,.18)}.trail-compass-rose{position:absolute;inset:20px;border-radius:50%;transition:transform .15s linear}.trail-compass-rose i{position:absolute;color:#123b3a;font:900 22px Inter,sans-serif;font-style:normal}.trail-compass-rose .trail-north{top:2px;left:50%;transform:translateX(-50%);color:#d04b34}.trail-compass-rose .trail-east{right:4px;top:50%;transform:translateY(-50%)}.trail-compass-rose .trail-south{bottom:2px;left:50%;transform:translateX(-50%)}.trail-compass-rose .trail-west{left:4px;top:50%;transform:translateY(-50%)}.trail-compass-rose span{position:absolute;left:50%;top:50%;width:5px;height:44%;border-radius:5px;background:linear-gradient(#d04b34 0 50%,#60726e 50%);transform:translate(-50%,-50%)}.trail-compass-rose span:after{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;border-radius:50%;background:#123b3a;transform:translate(-50%,-50%)}.trail-heading-marker{position:absolute;z-index:3;top:-2px;left:50%;color:#f47c15;font-size:25px;transform:translateX(-50%)}.trail-heading-readout{display:flex;align-items:baseline;gap:10px;margin-top:12px}.trail-heading-readout strong{font:750 38px Inter,sans-serif}.trail-heading-readout span{color:var(--muted);font-weight:750}.trail-compass-card>p{min-height:42px;margin:5px 0 13px;color:var(--muted);font-size:12px;text-align:center}.trail-compass-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}.trail-compass-actions button:last-child{grid-column:1/-1}.trail-target-arrow{position:absolute;z-index:5;right:14px;top:14px;display:grid;place-items:center;width:82px;min-height:72px;padding:6px;border-radius:12px;background:#6d4593;color:#fff;box-shadow:0 8px 20px rgba(0,0,0,.2)}.trail-target-arrow[hidden]{display:none}.trail-target-arrow span{font-size:30px;line-height:1;transition:transform .15s linear}.trail-target-arrow small{font-size:9px;text-align:center}
.trail-skin-identity{display:flex;align-items:center;gap:9px;justify-self:start;width:100%;margin-bottom:14px}.trail-skin-identity>span{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.72);font-size:23px;box-shadow:0 4px 12px rgba(0,0,0,.1)}.trail-skin-identity>div{display:grid}.trail-skin-identity strong{font:400 21px Georgia,serif}.trail-skin-identity small{font-size:10px;letter-spacing:.04em}.trail-compass-card,.trail-compass-dial,.trail-compass-rose i,.trail-compass-rose span,.trail-heading-marker,.trail-skin-identity{transition:background .25s,border-color .25s,color .25s,box-shadow .25s}
.trail-compass-card[data-compass-skin="coastal"]{background:linear-gradient(160deg,#eafcff,#c5ebe8);color:#073c4b}.trail-compass-card[data-compass-skin="coastal"] .trail-compass-dial{border-color:#087c8c;background:radial-gradient(circle,#f8ffff 0 53%,transparent 54%),repeating-conic-gradient(from -1deg,#087c8c 0 2deg,transparent 2deg 10deg),#80d7dc;box-shadow:inset 0 0 0 6px #dfffff,0 15px 30px rgba(8,124,140,.25)}.trail-compass-card[data-compass-skin="coastal"] .trail-compass-rose i{color:#075c6d}.trail-compass-card[data-compass-skin="coastal"] .trail-compass-rose .trail-north{color:#f2673a}.trail-compass-card[data-compass-skin="coastal"] .trail-heading-marker{color:#f2673a}
.trail-compass-card[data-compass-skin="mountain"]{background:linear-gradient(155deg,#edf0dc,#b8c397);color:#26351d}.trail-compass-card[data-compass-skin="mountain"] .trail-compass-dial{border-color:#34462b;background:radial-gradient(circle,#f7f3df 0 53%,transparent 54%),repeating-conic-gradient(from -1deg,#34462b 0 2deg,transparent 2deg 10deg),#a6b38c;box-shadow:inset 0 0 0 6px #e2dfc6,0 15px 30px rgba(38,53,29,.28)}.trail-compass-card[data-compass-skin="mountain"] .trail-compass-rose i{color:#26351d}.trail-compass-card[data-compass-skin="mountain"] .trail-compass-rose .trail-north,.trail-compass-card[data-compass-skin="mountain"] .trail-heading-marker{color:#d56335}
.trail-compass-card[data-compass-skin="heritage"]{background:linear-gradient(145deg,#efe1bd,#b79354);color:#38250e}.trail-compass-card[data-compass-skin="heritage"] .trail-compass-dial{border-color:#674619;background:radial-gradient(circle,#f8edcb 0 53%,transparent 54%),repeating-conic-gradient(from -1deg,#674619 0 2deg,transparent 2deg 10deg),#c7a665;box-shadow:inset 0 0 0 6px #d9bc7d,0 15px 30px rgba(56,37,14,.32)}.trail-compass-card[data-compass-skin="heritage"] .trail-compass-rose i{color:#4a3011}.trail-compass-card[data-compass-skin="heritage"] .trail-compass-rose .trail-north,.trail-compass-card[data-compass-skin="heritage"] .trail-heading-marker{color:#9e2d20}
.trail-compass-card[data-compass-skin="camper"]{background:linear-gradient(155deg,#fff1d8,#df8769);color:#3b2920}.trail-compass-card[data-compass-skin="camper"] .trail-compass-dial{border-color:#285a61;background:radial-gradient(circle,#fff9e9 0 53%,transparent 54%),repeating-conic-gradient(from -1deg,#285a61 0 2deg,transparent 2deg 10deg),#7fb7b1;box-shadow:inset 0 0 0 6px #f5d8aa,0 15px 30px rgba(59,41,32,.25)}.trail-compass-card[data-compass-skin="camper"] .trail-compass-rose i{color:#234b51}.trail-compass-card[data-compass-skin="camper"] .trail-compass-rose .trail-north,.trail-compass-card[data-compass-skin="camper"] .trail-heading-marker{color:#d94f32}
.trail-compass-card[data-compass-skin="night"]{background:radial-gradient(circle at 50% 15%,#263347,#090d14 68%);border-color:#40516c;color:#eaf1fa}.trail-compass-card[data-compass-skin="night"] .trail-compass-dial{border-color:#93a9bd;background:radial-gradient(circle,#111b27 0 53%,transparent 54%),repeating-conic-gradient(from -1deg,#9fb2c3 0 2deg,transparent 2deg 10deg),#26374a;box-shadow:inset 0 0 0 6px #1c2938,0 0 30px rgba(113,180,220,.22)}.trail-compass-card[data-compass-skin="night"] .trail-compass-rose i{color:#d9e6f1}.trail-compass-card[data-compass-skin="night"] .trail-compass-rose .trail-north,.trail-compass-card[data-compass-skin="night"] .trail-heading-marker{color:#ff6c58}.trail-compass-card[data-compass-skin="night"] .trail-compass-rose span{background:linear-gradient(#ff6c58 0 50%,#8ca6b8 50%)}.trail-compass-card[data-compass-skin="night"] .trail-heading-readout span,.trail-compass-card[data-compass-skin="night"]>p{color:#b6c8d8}
.trail-degree-ring,.trail-compass-star{display:none}.trail-degree-ring{position:absolute;inset:0}.trail-degree-ring b{position:absolute;font:800 11px Inter,sans-serif}.trail-degree-ring b:nth-child(1){left:50%;top:-4px;transform:translateX(-50%)}.trail-degree-ring b:nth-child(2){right:20%;top:4px}.trail-degree-ring b:nth-child(3){right:1px;top:22%}.trail-degree-ring b:nth-child(4){right:-8px;top:50%;transform:translateY(-50%)}.trail-degree-ring b:nth-child(5){bottom:22%;right:1px}.trail-degree-ring b:nth-child(6){bottom:4px;right:20%}.trail-degree-ring b:nth-child(7){bottom:-4px;left:50%;transform:translateX(-50%)}.trail-degree-ring b:nth-child(8){bottom:4px;left:20%}.trail-degree-ring b:nth-child(9){bottom:22%;left:1px}.trail-degree-ring b:nth-child(10){left:-8px;top:50%;transform:translateY(-50%)}.trail-degree-ring b:nth-child(11){left:1px;top:22%}.trail-degree-ring b:nth-child(12){left:20%;top:4px}
/* The skins below change the physical face, bezel, markings and needle—not only the colour. */
.trail-compass-card[data-compass-skin="pocket"]{background:linear-gradient(155deg,#f4f4f2,#c9cbc9);color:#242828}.trail-compass-card[data-compass-skin="pocket"] .trail-compass-dial{margin-top:22px;border:15px ridge #777b7b;background:radial-gradient(circle,#f6f6f4 0 58%,transparent 59%),repeating-conic-gradient(#202424 0 1deg,transparent 1deg 6deg),#d5d8d7;box-shadow:inset 0 0 0 5px #a7aaa9,inset 0 0 20px rgba(0,0,0,.22),0 17px 28px rgba(0,0,0,.25)}.trail-compass-card[data-compass-skin="pocket"] .trail-compass-dial:before{content:"";position:absolute;z-index:-1;left:50%;top:-37px;width:56px;height:30px;border:7px solid #777b7b;border-radius:50% 50% 20% 20%;background:#bfc2c1;transform:translateX(-50%)}.trail-compass-card[data-compass-skin="pocket"] .trail-compass-rose span{width:12px;background:linear-gradient(#a94f3f 0 50%,#cfd2d1 50%);clip-path:polygon(50% 0,100% 50%,64% 50%,50% 100%,36% 50%,0 50%)}
.trail-compass-card[data-compass-skin="precision"]{background:#eef0f2;color:#20262b}.trail-compass-card[data-compass-skin="precision"] .trail-compass-dial{border:14px double #353a3e;background:radial-gradient(circle,#f8f9fa 0 55%,transparent 56%),repeating-conic-gradient(#30363b 0 1deg,transparent 1deg 3deg),#bfc4c8;box-shadow:inset 0 0 0 7px #e7e9eb,inset 0 0 20px rgba(0,0,0,.2),0 15px 30px rgba(0,0,0,.2)}.trail-compass-card[data-compass-skin="precision"] .trail-degree-ring{display:block}.trail-compass-card[data-compass-skin="precision"] .trail-compass-rose i{font-size:18px}.trail-compass-card[data-compass-skin="precision"] .trail-compass-rose .trail-north{top:31px}.trail-compass-card[data-compass-skin="precision"] .trail-compass-rose .trail-east{right:34px}.trail-compass-card[data-compass-skin="precision"] .trail-compass-rose .trail-south{bottom:31px}.trail-compass-card[data-compass-skin="precision"] .trail-compass-rose .trail-west{left:34px}.trail-compass-card[data-compass-skin="precision"] .trail-compass-rose span{width:10px;background:linear-gradient(#e11c25 0 50%,#1760b4 50%);clip-path:polygon(50% 0,100% 50%,62% 50%,50% 100%,38% 50%,0 50%)}
.trail-compass-card[data-compass-skin="digital"]{background:#f1f1ef;color:#111}.trail-compass-card[data-compass-skin="digital"] .trail-compass-dial{border:8px solid #050505;background:radial-gradient(circle,#050505 0 58%,transparent 59%),repeating-conic-gradient(#fff 0 2deg,transparent 2deg 10deg),#050505;box-shadow:0 15px 30px rgba(0,0,0,.28)}.trail-compass-card[data-compass-skin="digital"] .trail-degree-ring{display:block;color:#fff}.trail-compass-card[data-compass-skin="digital"] .trail-compass-rose i{color:#fff;font-size:34px}.trail-compass-card[data-compass-skin="digital"] .trail-compass-rose .trail-north{color:#fff}.trail-compass-card[data-compass-skin="digital"] .trail-compass-rose span{width:13px;background:linear-gradient(#fa1833 0 50%,#fff 50%);clip-path:polygon(50% 0,100% 48%,62% 50%,50% 100%,38% 50%,0 48%)}.trail-compass-card[data-compass-skin="digital"] .trail-heading-marker{color:#fa1833}
.trail-compass-card[data-compass-skin="luminous"]{background:radial-gradient(circle at 50% 25%,#202722,#090b0a);border-color:#313b35;color:#f1fff5}.trail-compass-card[data-compass-skin="luminous"] .trail-compass-dial{border:10px solid #e6ece8;background:radial-gradient(circle,#080b09 0 58%,transparent 59%),repeating-conic-gradient(#f5fff8 0 2deg,transparent 2deg 5deg),#080b09;box-shadow:inset 0 0 0 5px #18201b,0 0 24px rgba(0,255,111,.22)}.trail-compass-card[data-compass-skin="luminous"] .trail-degree-ring{display:block;color:#f5fff8}.trail-compass-card[data-compass-skin="luminous"] .trail-compass-rose i{color:#00f56b;text-shadow:0 0 8px rgba(0,245,107,.45)}.trail-compass-card[data-compass-skin="luminous"] .trail-compass-rose span{width:13px;background:linear-gradient(#fff 0 50%,#e22a24 50%);clip-path:polygon(50% 0,100% 50%,62% 50%,50% 100%,38% 50%,0 50%)}.trail-compass-card[data-compass-skin="luminous"] .trail-heading-marker{color:#00f56b}.trail-compass-card[data-compass-skin="luminous"] .trail-heading-readout span,.trail-compass-card[data-compass-skin="luminous"]>p{color:#c4d5cb}
.trail-compass-card[data-compass-skin="nautical"]{background:linear-gradient(145deg,#211a14,#050403);border-color:#5e4937;color:#dbc5aa}.trail-compass-card[data-compass-skin="nautical"] .trail-compass-dial{border:9px double #b29473;background:radial-gradient(circle,#080604 0 64%,transparent 65%),repeating-conic-gradient(#a78a69 0 1deg,transparent 1deg 3deg),#090705;box-shadow:inset 0 0 0 5px #2a2018,0 14px 32px rgba(0,0,0,.45)}.trail-compass-card[data-compass-skin="nautical"] .trail-degree-ring{display:block;color:#b29473}.trail-compass-card[data-compass-skin="nautical"] .trail-compass-star{display:block;position:absolute;left:50%;top:50%;color:#b29473;font-size:176px;line-height:1;opacity:.82;transform:translate(-50%,-50%)}.trail-compass-card[data-compass-skin="nautical"] .trail-compass-rose i{z-index:2;color:#dbc5aa;font-family:Georgia,serif;font-size:26px}.trail-compass-card[data-compass-skin="nautical"] .trail-compass-rose span{z-index:3;width:7px;background:linear-gradient(#eee0c8 0 50%,#7f6248 50%)}.trail-compass-card[data-compass-skin="nautical"] .trail-heading-marker{color:#dbc5aa}.trail-compass-card[data-compass-skin="nautical"] .trail-heading-readout span,.trail-compass-card[data-compass-skin="nautical"]>p{color:#b9a58d}
.trail-compass-card[data-compass-skin="map"]{background:linear-gradient(rgba(234,219,174,.84),rgba(206,183,125,.9)),repeating-linear-gradient(25deg,transparent 0 18px,rgba(81,106,79,.2) 19px 20px),#d4bd82;color:#382b18}.trail-compass-card[data-compass-skin="map"] .trail-compass-dial{border:14px ridge #8a5a2e;background:radial-gradient(circle,rgba(245,240,216,.94) 0 58%,transparent 59%),repeating-conic-gradient(#49361e 0 1deg,transparent 1deg 5deg),#dac692;box-shadow:inset 0 0 0 5px #b88b53,0 16px 30px rgba(55,36,18,.34)}.trail-compass-card[data-compass-skin="map"] .trail-degree-ring{display:block;color:#4a371f}.trail-compass-card[data-compass-skin="map"] .trail-compass-star{display:block;position:absolute;left:50%;top:50%;color:#739086;font-size:165px;line-height:1;opacity:.55;transform:translate(-50%,-50%)}.trail-compass-card[data-compass-skin="map"] .trail-compass-rose i{z-index:2;color:#302314;font-family:Georgia,serif;font-size:28px}.trail-compass-card[data-compass-skin="map"] .trail-compass-rose span{z-index:3;width:12px;background:linear-gradient(#d21f22 0 50%,#e9e8df 50%);clip-path:polygon(50% 0,100% 50%,62% 50%,50% 100%,38% 50%,0 50%)}
.trail-information{display:grid;gap:18px}.trail-information>article{padding:20px}.trail-position-card header,.trail-start-card header{display:flex;align-items:center;justify-content:space-between;gap:12px}.trail-position-card header div,.trail-start-card header div{display:grid}.trail-position-card small,.trail-start-card small,.trail-online-panel small{color:var(--coral);font-size:10px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.trail-position-card header>span{padding:5px 8px;border-radius:999px;background:#eee3d4;color:#785c38;font-size:10px;font-weight:850}.trail-position-card header>span.is-good{background:#dcefe7;color:#17653f}.trail-position-card header>span.is-poor{background:#f8dddd;color:#8a2929}.trail-position-card dl{display:grid;grid-template-columns:1fr 1fr;margin:18px 0}.trail-position-card dl div{display:grid;gap:2px;padding:11px;border:1px solid var(--line)}.trail-position-card dt{color:var(--muted);font-size:10px;text-transform:uppercase}.trail-position-card dd{margin:0;font-weight:800}.trail-position-actions,.trail-start-card>div:last-child,.trail-waypoint-actions{display:flex;flex-wrap:wrap;gap:8px}.trail-position-actions button,.trail-start-card button,.trail-waypoint-actions button{min-height:40px;border:1px solid #12645f;border-radius:8px;background:#fff;color:#12645f;padding:8px 11px;font-weight:800;cursor:pointer}.trail-position-actions button:disabled,.trail-start-card button:disabled,.trail-waypoint-actions button:disabled{opacity:.45;cursor:not-allowed}.trail-start-card header{justify-content:flex-start}.trail-start-card header>span{font-size:28px}.trail-start-card p{min-height:44px;color:var(--muted);font-size:12px}.trail-start-card button:first-child{background:#12645f;color:#fff}
.trail-online-panel{margin-top:18px;padding:22px}.trail-online-panel[hidden]{display:none}.trail-online-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:15px}.trail-online-heading h3{margin:0;font:400 28px Georgia,serif}.trail-online-heading>span{padding:5px 8px;border-radius:999px;background:#eee3d4;color:#785c38;font-size:10px;font-weight:850}.trail-online-heading>span.is-online{background:#dcefe7;color:#17653f}.trail-online-panel form{display:grid;gap:7px;margin:18px 0 10px}.trail-online-panel form label{font-size:12px;font-weight:800}.trail-online-panel form>div{display:grid;grid-template-columns:1fr auto;gap:8px}.trail-online-panel input{min-width:0;min-height:48px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:10px;font:inherit}.trail-online-panel form button{border:0;border-radius:8px;background:#12645f;color:#fff;padding:0 18px;font-weight:850;cursor:pointer}.trail-online-grid{display:grid;grid-template-columns:1.4fr .6fr;gap:15px;margin-top:16px}.trail-online-grid #trail-compass-map{min-height:360px;border-radius:12px;background:#dceae7}.trail-online-grid article{padding:16px;border-radius:12px;background:#e8f1ef}.trail-online-grid h4{margin:4px 0;font:400 24px Georgia,serif}.trail-online-grid p{color:var(--muted);font-size:12px}.trail-weather{display:grid;gap:3px;margin-top:16px;padding-top:14px;border-top:1px solid #bdcfca}.trail-weather span{color:var(--muted);font-size:11px}.trail-calibration{margin-top:18px;border:1px solid var(--line);border-radius:12px;background:#fffaf2}.trail-calibration summary{padding:15px 18px;font-weight:850;cursor:pointer}.trail-calibration div{padding:0 18px 16px;color:var(--muted);font-size:12px}.trail-calibration p{margin:8px 0}
@media(max-width:760px){.trail-compass-section{padding:50px 15px}.trail-skin-picker{grid-template-columns:1fr}.trail-skin-picker>div:first-child{min-width:0}.trail-compass-layout{grid-template-columns:1fr}.trail-online-grid{grid-template-columns:1fr}.trail-online-grid #trail-compass-map{min-height:310px}}
@media(max-width:430px){.trail-mode-switch{grid-template-columns:1fr}.trail-compass-card{padding:18px 10px}.trail-compass-actions{grid-template-columns:1fr}.trail-compass-actions button:last-child{grid-column:auto}.trail-position-card dl{grid-template-columns:1fr 1fr}.trail-online-panel{padding:15px}.trail-online-panel form>div{grid-template-columns:1fr}.trail-online-panel form button{min-height:46px}.trail-online-heading{display:grid}}

/* Photorealistic instrument skins. The artwork rotates with the live compass card; the hiking baseplate stays fixed. */
.trail-compass-card:is([data-compass-skin="adventure"],[data-compass-skin="hiking"],[data-compass-skin="pocket"],[data-compass-skin="precision"],[data-compass-skin="digital"],[data-compass-skin="luminous"],[data-compass-skin="nautical"],[data-compass-skin="map"]) .trail-compass-dial{border:0;background:transparent;box-shadow:0 18px 34px rgba(0,0,0,.24)}
.trail-compass-card:is([data-compass-skin="adventure"],[data-compass-skin="hiking"],[data-compass-skin="pocket"],[data-compass-skin="precision"],[data-compass-skin="digital"],[data-compass-skin="luminous"],[data-compass-skin="nautical"],[data-compass-skin="map"]) .trail-compass-rose{inset:0;overflow:hidden;border-radius:50%;transform-origin:50% 50%}
.trail-compass-skin-image{position:absolute;z-index:0;inset:0;width:100%;height:100%;border-radius:inherit;object-fit:cover;pointer-events:none;user-select:none}
.trail-compass-card .trail-compass-rose>i{z-index:4;padding:2px 4px;border-radius:5px;background:rgba(255,255,255,.72);color:#172524;text-shadow:0 1px 1px rgba(255,255,255,.8)}
.trail-compass-card .trail-compass-rose .trail-north{top:18%;color:#c93636}.trail-compass-card .trail-compass-rose .trail-east{right:18%}.trail-compass-card .trail-compass-rose .trail-south{bottom:18%}.trail-compass-card .trail-compass-rose .trail-west{left:18%}
.trail-compass-card .trail-compass-rose>span{z-index:5;width:15px;height:44%;background:linear-gradient(#ed5c34 0 50%,#f0eee7 50%);clip-path:polygon(50% 0,100% 50%,63% 50%,50% 100%,37% 50%,0 50%);filter:drop-shadow(0 3px 3px rgba(0,0,0,.38))}.trail-compass-card .trail-compass-rose>span:after{width:20px;height:20px;border:3px solid #eee3c7;background:#8f6b38;box-sizing:border-box}.trail-compass-card .trail-degree-ring{z-index:3;inset:13%;color:#fff;text-shadow:0 1px 3px #000}.trail-compass-card .trail-compass-star{display:none}
.trail-compass-card[data-compass-skin="adventure"]{background:linear-gradient(150deg,#e1d1aa,#0d4145);color:#f8f3e7}.trail-compass-card[data-compass-skin="adventure"] .trail-compass-rose>i{background:rgba(9,52,56,.78);color:#f1dcad;text-shadow:none}.trail-compass-card[data-compass-skin="adventure"] .trail-compass-rose .trail-north,.trail-compass-card[data-compass-skin="adventure"] .trail-heading-marker{color:#f47c15}.trail-compass-card[data-compass-skin="adventure"] .trail-heading-readout span,.trail-compass-card[data-compass-skin="adventure"]>p{color:#e5ded0}
.trail-compass-card[data-compass-skin="pocket"]{background:linear-gradient(150deg,#f0eee8,#9da09f);color:#252a29}.trail-compass-card[data-compass-skin="pocket"] .trail-compass-dial{margin-top:0}.trail-compass-card[data-compass-skin="pocket"] .trail-compass-dial:before{display:none}.trail-compass-card[data-compass-skin="pocket"] .trail-compass-rose>span{background:linear-gradient(#a24f40 0 50%,#d8d8d4 50%)}
.trail-compass-card[data-compass-skin="precision"]{background:linear-gradient(150deg,#eff0ed,#555d60);color:#1e2729}.trail-compass-card[data-compass-skin="precision"] .trail-degree-ring{display:block}.trail-compass-card[data-compass-skin="precision"] .trail-compass-rose>span{background:linear-gradient(#e22f30 0 50%,#2871ad 50%)}
.trail-compass-card[data-compass-skin="digital"]{background:linear-gradient(150deg,#363a3a,#090b0b);color:#fff}.trail-compass-card[data-compass-skin="digital"] .trail-degree-ring{display:block}.trail-compass-card[data-compass-skin="digital"] .trail-compass-rose>i{background:rgba(0,0,0,.74);color:#fff;text-shadow:none}.trail-compass-card[data-compass-skin="digital"] .trail-compass-rose .trail-north,.trail-compass-card[data-compass-skin="digital"] .trail-heading-marker{color:#ff2947}.trail-compass-card[data-compass-skin="digital"] .trail-heading-readout span,.trail-compass-card[data-compass-skin="digital"]>p{color:#d3d9d8}.trail-compass-card[data-compass-skin="digital"] .trail-compass-rose>span{background:linear-gradient(#ff2947 0 50%,#fff 50%)}
.trail-compass-card[data-compass-skin="luminous"]{background:radial-gradient(circle at 50% 20%,#263229,#080a09 70%);color:#effff4}.trail-compass-card[data-compass-skin="luminous"] .trail-degree-ring{display:block;color:#dffff0}.trail-compass-card[data-compass-skin="luminous"] .trail-compass-rose>i{background:rgba(0,0,0,.72);color:#7cff91;text-shadow:0 0 7px rgba(65,255,99,.55)}.trail-compass-card[data-compass-skin="luminous"] .trail-compass-rose .trail-north,.trail-compass-card[data-compass-skin="luminous"] .trail-heading-marker{color:#7cff91}.trail-compass-card[data-compass-skin="luminous"] .trail-heading-readout span,.trail-compass-card[data-compass-skin="luminous"]>p{color:#c4d5cb}.trail-compass-card[data-compass-skin="luminous"] .trail-compass-rose>span{background:linear-gradient(#effff4 0 50%,#d6332f 50%)}
.trail-compass-card[data-compass-skin="nautical"]{background:linear-gradient(150deg,#34271a,#080604);color:#e3c99f}.trail-compass-card[data-compass-skin="nautical"] .trail-compass-rose>i{background:rgba(20,13,8,.72);color:#e3c99f;font-family:Georgia,serif;text-shadow:none}.trail-compass-card[data-compass-skin="nautical"] .trail-compass-rose .trail-north,.trail-compass-card[data-compass-skin="nautical"] .trail-heading-marker{color:#d4ad70}.trail-compass-card[data-compass-skin="nautical"] .trail-heading-readout span,.trail-compass-card[data-compass-skin="nautical"]>p{color:#bca88b}.trail-compass-card[data-compass-skin="nautical"] .trail-compass-rose>span{width:8px;background:linear-gradient(#f2dcb8 0 50%,#7c5a36 50%)}
.trail-compass-card[data-compass-skin="map"]{background:linear-gradient(150deg,#e4d0a0,#aa7b42);color:#382817}.trail-compass-card[data-compass-skin="map"] .trail-degree-ring{display:block;color:#3b2b19;text-shadow:0 1px 1px rgba(255,255,255,.5)}.trail-compass-card[data-compass-skin="map"] .trail-compass-rose>i{background:rgba(239,219,169,.76);color:#332416;font-family:Georgia,serif}.trail-compass-card[data-compass-skin="map"] .trail-compass-rose>span{background:linear-gradient(#ca2e2b 0 50%,#e9e4d8 50%)}
.trail-compass-card[data-compass-skin="hiking"]{background:linear-gradient(150deg,#e5e7e4,#7c827e);color:#1d2929}.trail-compass-card[data-compass-skin="hiking"] .trail-compass-dial{border-radius:16px}.trail-compass-card[data-compass-skin="hiking"] .trail-compass-rose{border-radius:16px;transform-origin:50% 32%}.trail-compass-card[data-compass-skin="hiking"] .trail-compass-skin-image{transform:rotate(var(--compass-heading,0deg));transform-origin:50% 32%}.trail-compass-card[data-compass-skin="hiking"] .trail-compass-rose .trail-north{top:12%;left:50%}.trail-compass-card[data-compass-skin="hiking"] .trail-compass-rose .trail-east{right:27%;top:32%}.trail-compass-card[data-compass-skin="hiking"] .trail-compass-rose .trail-south{bottom:auto;left:50%;top:49%}.trail-compass-card[data-compass-skin="hiking"] .trail-compass-rose .trail-west{left:27%;top:32%}.trail-compass-card[data-compass-skin="hiking"] .trail-compass-rose>span{top:32%;height:31%;background:linear-gradient(#e83b2f 0 50%,#f3f2ed 50%)}.trail-compass-card[data-compass-skin="hiking"] .trail-heading-marker{color:#f47c15}

/* Build 97: clean instrument faces replace the cropped photographic artwork. */
.trail-compass-card:is([data-compass-skin="adventure"],[data-compass-skin="hiking"],[data-compass-skin="pocket"],[data-compass-skin="precision"],[data-compass-skin="digital"],[data-compass-skin="luminous"],[data-compass-skin="nautical"],[data-compass-skin="map"]) .trail-compass-dial{border:10px solid var(--dial-edge,#244b4a);background:repeating-conic-gradient(from -1deg,var(--dial-tick,#244b4a) 0 1.1deg,transparent 1.1deg 5deg),radial-gradient(circle at center,var(--dial-centre,#fbfaf2) 0 61%,var(--dial-ring,#dce7e2) 62% 100%);box-shadow:inset 0 0 0 5px var(--dial-inner,#fff),inset 0 0 28px rgba(0,0,0,.13),0 18px 34px rgba(0,0,0,.2)}
.trail-compass-card:is([data-compass-skin="adventure"],[data-compass-skin="hiking"],[data-compass-skin="pocket"],[data-compass-skin="precision"],[data-compass-skin="digital"],[data-compass-skin="luminous"],[data-compass-skin="nautical"],[data-compass-skin="map"]) .trail-compass-rose{inset:20px;overflow:visible;border-radius:50%;transform-origin:50% 50%}
.trail-compass-skin-image{display:none!important}

.trail-compass-card[data-compass-skin="adventure"]{--dial-edge:#0d5355;--dial-tick:#e5d29d;--dial-centre:#0d4145;--dial-ring:#173f42;--dial-inner:#d6c28e}.trail-compass-card[data-compass-skin="adventure"] .trail-compass-dial{background:linear-gradient(145deg,transparent 44%,rgba(225,209,170,.12) 45% 47%,transparent 48%),repeating-conic-gradient(from -1deg,#e5d29d 0 1.2deg,transparent 1.2deg 5deg),radial-gradient(circle,#0d4145 0 61%,#173f42 62%)}
.trail-compass-card[data-compass-skin="hiking"]{--dial-edge:#e06a24;--dial-tick:#31443b;--dial-centre:#e8ece4;--dial-ring:#b9c7b6;--dial-inner:#f5f7f1}.trail-compass-card[data-compass-skin="hiking"] .trail-compass-dial{border-radius:24px;background:linear-gradient(90deg,transparent 49.6%,rgba(49,68,59,.16) 50%,transparent 50.4%),linear-gradient(0deg,transparent 49.6%,rgba(49,68,59,.16) 50%,transparent 50.4%),repeating-conic-gradient(from -1deg,#31443b 0 1deg,transparent 1deg 10deg),radial-gradient(circle,#edf1e9 0 61%,#c2cec0 62%)}.trail-compass-card[data-compass-skin="hiking"] .trail-compass-rose{border-radius:20px;transform-origin:50% 50%}.trail-compass-card[data-compass-skin="hiking"] .trail-compass-rose .trail-north{top:18%}.trail-compass-card[data-compass-skin="hiking"] .trail-compass-rose .trail-east{right:18%;top:50%}.trail-compass-card[data-compass-skin="hiking"] .trail-compass-rose .trail-south{bottom:18%;top:auto}.trail-compass-card[data-compass-skin="hiking"] .trail-compass-rose .trail-west{left:18%;top:50%}.trail-compass-card[data-compass-skin="hiking"] .trail-compass-rose>span{top:50%;height:44%}
.trail-compass-card[data-compass-skin="pocket"]{--dial-edge:#777d7c;--dial-tick:#303534;--dial-centre:#f4f1e8;--dial-ring:#c6c9c7;--dial-inner:#aeb2b0}.trail-compass-card[data-compass-skin="pocket"] .trail-compass-dial{border:14px ridge #888e8c;background:repeating-conic-gradient(from -1deg,#343938 0 1deg,transparent 1deg 6deg),radial-gradient(circle,#f5f2e9 0 61%,#c8cbc9 62%)}
.trail-compass-card[data-compass-skin="precision"]{--dial-edge:#30383e;--dial-tick:#252d33;--dial-centre:#f9fafb;--dial-ring:#cfd5d9;--dial-inner:#edf0f2}.trail-compass-card[data-compass-skin="precision"] .trail-compass-dial{border:13px double #30383e;background:repeating-conic-gradient(from -.5deg,#242b30 0 .7deg,transparent .7deg 2.5deg),radial-gradient(circle,#fafafa 0 61%,#d3d8dc 62%)}
.trail-compass-card[data-compass-skin="digital"]{--dial-edge:#090b0c;--dial-tick:#eef6f5;--dial-centre:#080b0c;--dial-ring:#151b1c;--dial-inner:#333b3d}.trail-compass-card[data-compass-skin="digital"] .trail-compass-dial{background:repeating-conic-gradient(from -1deg,#fff 0 1.7deg,transparent 1.7deg 10deg),radial-gradient(circle,#080a0b 0 61%,#15191a 62%)}
.trail-compass-card[data-compass-skin="luminous"]{--dial-edge:#bfe7cf;--dial-tick:#7cff91;--dial-centre:#050907;--dial-ring:#101a14;--dial-inner:#25372c}.trail-compass-card[data-compass-skin="luminous"] .trail-compass-dial{background:repeating-conic-gradient(from -1deg,#7cff91 0 1.5deg,transparent 1.5deg 5deg),radial-gradient(circle,#050907 0 61%,#101a14 62%);box-shadow:inset 0 0 0 5px #1d2e24,inset 0 0 25px rgba(80,255,128,.12),0 0 30px rgba(66,255,116,.18)}
.trail-compass-card[data-compass-skin="nautical"]{--dial-edge:#b99661;--dial-tick:#d6b67f;--dial-centre:#101b27;--dial-ring:#293746;--dial-inner:#5b452b}.trail-compass-card[data-compass-skin="nautical"] .trail-compass-dial{border:12px double #b99661;background:repeating-conic-gradient(from -1deg,#d7bb8a 0 1deg,transparent 1deg 5deg),radial-gradient(circle,#101b27 0 61%,#273747 62%)}.trail-compass-card[data-compass-skin="nautical"] .trail-compass-star{display:block;z-index:1;opacity:.22;color:#d7bb8a}
.trail-compass-card[data-compass-skin="map"]{--dial-edge:#8e6234;--dial-tick:#55401f;--dial-centre:#efe3bd;--dial-ring:#cbb27c;--dial-inner:#e0c68e}.trail-compass-card[data-compass-skin="map"] .trail-compass-dial{background:linear-gradient(32deg,transparent 36%,rgba(76,115,92,.14) 37% 39%,transparent 40%),linear-gradient(145deg,transparent 58%,rgba(68,100,131,.13) 59% 61%,transparent 62%),repeating-conic-gradient(from -1deg,#55401f 0 1deg,transparent 1deg 5deg),radial-gradient(circle,#efe3bd 0 61%,#cbb27c 62%)}.trail-compass-card[data-compass-skin="map"] .trail-compass-star{display:block;z-index:1;opacity:.2;color:#416d63}

.trail-compass-actions button{border-radius:14px}.trail-compass-card>p{font-weight:600}.trail-compass-card[data-compass-skin="hiking"]>p,.trail-compass-card[data-compass-skin="pocket"]>p,.trail-compass-card[data-compass-skin="precision"]>p,.trail-compass-card[data-compass-skin="map"]>p{color:#405453}