.pack-view-tabs{display:flex;width:max-content;max-width:100%;margin:0 auto 30px;padding:5px;border:1px solid #e9e6ee;border-radius:999px;background:#fff;gap:4px}
.pack-view-tabs button{border:0;border-radius:999px;padding:12px 23px;background:transparent;color:#777;font:300 15px Figtree,sans-serif;cursor:pointer}
.pack-view-tabs button[aria-selected=true]{background:linear-gradient(110deg,#ff0870,#ef2a8a);color:#fff}
.pack-view-tabs button:focus-visible{outline:2px solid #ff1f6e;outline-offset:3px}
.pack-features h2{margin-bottom:28px}
.pack-features [role=tabpanel][hidden]{display:none!important}
#pack-person-view{max-width:1240px;margin:auto;text-align:center;min-height:560px}
.pack-person-stage{height:500px;display:flex;justify-content:center;cursor:grab;touch-action:pan-y}
.pack-person-stage:active{cursor:grabbing}
.pack-person-stage img{height:100%;max-width:100%;object-fit:contain;mix-blend-mode:multiply;user-select:none}
#pack-person-view label{display:block;font:300 14px Figtree,sans-serif;color:#777;margin:10px 0}
#pack-angle{display:block;width:220px;max-width:75%;margin:12px auto 0;accent-color:#ff1f6e;cursor:ew-resize}
.pack-angle-labels{display:flex;justify-content:space-between;width:220px;max-width:75%;margin:7px auto;font:300 12px Figtree,sans-serif;color:#888}
@media(max-width:600px){.pack-view-tabs{margin-bottom:20px}.pack-view-tabs button{font-size:13px;padding:10px 16px}#pack-person-view{min-height:390px}.pack-person-stage{height:330px}}

.pack-view-tabs{border:0;background:transparent;border-radius:0;padding:0;gap:28px;margin-bottom:24px}
.pack-view-tabs button{border-radius:0;padding:8px 0;background:transparent;color:#929092;font-size:14px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.pack-view-tabs button[aria-selected=true]{background:transparent;color:#333;border-bottom-color:#ff1f6e}
.pack-view-tabs button:hover{color:#ff1f6e}
#pack-person-view{min-width:0;max-width:100%;width:100%;min-height:0;align-self:center}
.pack-person-stage{height:clamp(360px,40vw,560px)}
@media(max-width:600px){.pack-view-tabs{gap:24px;margin-bottom:18px}.pack-view-tabs button{font-size:12px}#pack-person-view{order:-1;min-height:0}.pack-person-stage{height:290px}#pack-angle,.pack-angle-labels{width:150px}#pack-person-view label{font-size:11px}}
@media(max-width:600px){#pack-person-view{order:0}}
/* A quiet, touch-friendly view control. */
.pack-angle-control{width:196px;max-width:80%;margin:20px auto 32px}
#pack-person-view #pack-angle{appearance:none;-webkit-appearance:none;display:block;box-sizing:border-box;width:100%;max-width:none;height:36px;margin:0;background:transparent;cursor:ew-resize;touch-action:pan-y}
#pack-angle::-webkit-slider-runnable-track{height:2px;border:0;border-radius:2px;background:#dcd8e1}
#pack-angle::-moz-range-track{height:2px;border:0;border-radius:2px;background:#dcd8e1}
.pack-angle-control[data-angle="1"] #pack-angle::-webkit-slider-runnable-track{background:#f3aec9}
.pack-angle-control[data-angle="1"] #pack-angle::-moz-range-track{background:#f3aec9}
#pack-angle::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:32px;height:32px;margin-top:-15px;border:1px solid #ece6ed;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='m7 7-3 3 3 3m6-6 3 3-3 3' fill='none' stroke='%23ff1f6e' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat;box-shadow:0 2px 7px #35223c0d}
#pack-angle::-moz-range-thumb{width:32px;height:32px;border:1px solid #ece6ed;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='m7 7-3 3 3 3m6-6 3 3-3 3' fill='none' stroke='%23ff1f6e' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat;box-shadow:0 2px 7px #35223c0d}
#pack-angle:focus-visible{outline:2px solid #ff1f6e;outline-offset:5px;border-radius:20px}
#pack-person-view .pack-angle-labels{width:100%;max-width:none;margin:3px 0 0;color:#aaa5ad;font:300 12px Figtree,sans-serif}
.pack-angle-control[data-angle="0"] .pack-angle-labels span:first-child,.pack-angle-control[data-angle="1"] .pack-angle-labels span:last-child{color:#343137}
@media(max-width:600px){.pack-angle-control{width:170px;margin:18px auto 34px}}
