/* Generated by build.py from site-v6/assets/css/style.css. Do not edit here. */ /* WordPress: calm theme defaults inside the tool (rules below override these) */ #ozpl button, #ozpl input, #ozpl select, #ozpl textarea { text-transform: none; letter-spacing: normal; text-shadow: none; box-shadow: none; margin: 0; min-height: 0; } #ozpl h1, #ozpl h2, #ozpl h3, #ozpl h4, #ozpl p, #ozpl ul, #ozpl ol, #ozpl dl, #ozpl figure, #ozpl table { text-transform: none; } #ozpl table, #ozpl th, #ozpl td { border: 0; background: none; } #ozpl a:hover, #ozpl a:focus { box-shadow: none; } #ozpl img { height: auto; border: 0; border-radius: 0; box-shadow: none; } #ozpl, #ozpl-print, #ozpl-layer {--mist: #f2f1ed; --surface: #ffffff; --tint: #f6f5f1; --ink: #1d3335; --deep: #042a2d; --muted: #536668; --line: #dce4e4; --field: #7a8f91; --teal: #1aa19c; --teal-ink: #0b7470; --teal-wash: #e3f3f2; --amber-ink: #7a4a00; --amber-wash: #fff3d6; --red: #a3271c; --display: 'Archivo', 'Plus Jakarta Sans', system-ui, sans-serif; --sans: 'Plus Jakarta Sans', system-ui, 'Segoe UI', sans-serif; --r-s: 6px; --r-m: 10px; --r-l: 16px; --shell: 1280px; --s: .26;} #ozpl *, #ozpl-print *, #ozpl-layer *, #ozpl *::before, #ozpl-print *::before, #ozpl-layer *::before, #ozpl *::after, #ozpl-print *::after, #ozpl-layer *::after {box-sizing: border-box;} #ozpl, #ozpl-print, #ozpl-layer {margin: 0; background: var(--mist); color: var(--ink); font: 400 15.5px/1.55 var(--sans);} #ozpl img, #ozpl-print img, #ozpl-layer img {max-width: 100%; display: block;} #ozpl button, #ozpl-print button, #ozpl-layer button, #ozpl input, #ozpl-print input, #ozpl-layer input, #ozpl select, #ozpl-print select, #ozpl-layer select, #ozpl textarea, #ozpl-print textarea, #ozpl-layer textarea {font: inherit; color: inherit;} #ozpl h1, #ozpl-print h1, #ozpl-layer h1, #ozpl h2, #ozpl-print h2, #ozpl-layer h2, #ozpl h3, #ozpl-print h3, #ozpl-layer h3, #ozpl h4, #ozpl-print h4, #ozpl-layer h4 {margin: 0; color: var(--deep); font-family: var(--display);} #ozpl p, #ozpl-print p, #ozpl-layer p {margin: 0;} #ozpl a, #ozpl-print a, #ozpl-layer a {color: var(--teal-ink); text-underline-offset: 3px;} #ozpl .mono, #ozpl-print .mono, #ozpl-layer .mono {font: inherit; font-variant-numeric: tabular-nums;} #ozpl .sr, #ozpl-print .sr, #ozpl-layer .sr {position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;} #ozpl .skip, #ozpl-print .skip, #ozpl-layer .skip {position: absolute; left: 16px; top: -60px; background: var(--deep); color: #fff; padding: 10px 14px; border-radius: var(--r-s); z-index: 60;} #ozpl .skip:focus, #ozpl-print .skip:focus, #ozpl-layer .skip:focus {top: 10px;} #ozpl :focus-visible, #ozpl-print :focus-visible, #ozpl-layer :focus-visible {outline: 3px solid var(--teal); outline-offset: 2px;} #ozpl .shell, #ozpl-print .shell, #ozpl-layer .shell {max-width: var(--shell); margin: 0 auto; padding: 0 32px;} #ozpl .top, #ozpl-print .top, #ozpl-layer .top {background: var(--surface);} #ozpl .top__row, #ozpl-print .top__row, #ozpl-layer .top__row {display: flex; align-items: center; gap: 20px; min-height: 72px;} #ozpl .top__logo img, #ozpl-print .top__logo img, #ozpl-layer .top__logo img {height: 34px; width: auto;} #ozpl .top__tool, #ozpl-print .top__tool, #ozpl-layer .top__tool {font-weight: 600; font-size: 14px; color: var(--muted);} #ozpl .top__preview, #ozpl-print .top__preview, #ozpl-layer .top__preview {margin-left: auto; font-size: 12.5px; color: var(--muted); background: var(--tint); padding: 5px 10px; border-radius: var(--r-s);} #ozpl .lang, #ozpl-print .lang, #ozpl-layer .lang {display: flex; background: var(--mist); border-radius: var(--r-s); padding: 3px;} #ozpl .lang button, #ozpl-print .lang button, #ozpl-layer .lang button {background: none; border: 0; padding: 6px 12px; min-height: 32px; font-weight: 700; font-size: 12.5px; border-radius: 4px; cursor: pointer; color: var(--muted);} #ozpl .lang button[aria-pressed="true"], #ozpl-print .lang button[aria-pressed="true"], #ozpl-layer .lang button[aria-pressed="true"] {background: var(--surface); color: var(--deep); box-shadow: 0 1px 2px rgba(4, 42, 45, .12);} #ozpl .hero, #ozpl-print .hero, #ozpl-layer .hero {background: var(--surface);} #ozpl .hero__grid, #ozpl-print .hero__grid, #ozpl-layer .hero__grid {display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: end; padding-top: 48px;} #ozpl .hero__copy, #ozpl-print .hero__copy, #ozpl-layer .hero__copy {padding-bottom: 56px;} #ozpl .hero h1, #ozpl-print .hero h1, #ozpl-layer .hero h1 {font-size: clamp(38px, 4.6vw, 64px); font-stretch: 125%; font-weight: 800; letter-spacing: -.03em; line-height: .98;} #ozpl .hero__lead, #ozpl-print .hero__lead, #ozpl-layer .hero__lead {margin-top: 20px; font-size: 17px; color: var(--muted); max-width: 44ch;} #ozpl .hero__label, #ozpl-print .hero__label, #ozpl-layer .hero__label {display: block; margin-top: 32px; font-weight: 700; font-size: 14px; color: var(--deep);} #ozpl .hero__field, #ozpl-print .hero__field, #ozpl-layer .hero__field {display: flex; gap: 10px; margin-top: 8px; max-width: 520px;} #ozpl .hero__field input, #ozpl-print .hero__field input, #ozpl-layer .hero__field input {flex: 1; min-width: 0; height: 58px; padding: 0 16px; border: 2px solid var(--deep); border-radius: var(--r-m); background: var(--surface); font-family: var(--display); font-stretch: 78%; font-weight: 800; font-size: 26px; letter-spacing: .02em; text-transform: uppercase; color: var(--deep);} #ozpl .hero__field input::placeholder, #ozpl-print .hero__field input::placeholder, #ozpl-layer .hero__field input::placeholder {color: #66797b; text-transform: none; font-weight: 600; font-size: 20px; letter-spacing: 0; font-stretch: 100%;} #ozpl .hero__field input:focus, #ozpl-print .hero__field input:focus, #ozpl-layer .hero__field input:focus {outline: 3px solid var(--teal); outline-offset: 2px;} #ozpl .hero__note, #ozpl-print .hero__note, #ozpl-layer .hero__note {margin-top: 14px; font-size: 13.5px; color: var(--muted);} #ozpl .hero__ex, #ozpl-print .hero__ex, #ozpl-layer .hero__ex {margin-top: 6px; font-size: 13.5px; color: var(--muted);} #ozpl .linkbtn, #ozpl-print .linkbtn, #ozpl-layer .linkbtn {background: none; border: 0; padding: 0; color: var(--teal-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;} #ozpl .linkbtn:hover, #ozpl-print .linkbtn:hover, #ozpl-layer .linkbtn:hover {color: var(--deep);} #ozpl .lineup, #ozpl-print .lineup, #ozpl-layer .lineup {display: flex; align-items: flex-end; justify-content: flex-end; gap: 4px; position: relative; padding-bottom: 34px; min-width: 0;} #ozpl .lu, #ozpl-print .lu, #ozpl-layer .lu {position: relative; margin: 0; height: calc(var(--h) * var(--s) * 1px); flex: none;} #ozpl .lu img, #ozpl-print .lu img, #ozpl-layer .lu img {height: 100%; width: auto;} #ozpl .lineup__cap, #ozpl-print .lineup__cap, #ozpl-layer .lineup__cap {position: absolute; right: 0; bottom: 10px; font-size: 12px; color: var(--muted);} #ozpl .lbl-ov, #ozpl-print .lbl-ov, #ozpl-layer .lbl-ov {position: absolute; container-type: size; overflow: hidden; color: var(--deep); font-family: var(--display); pointer-events: none;} #ozpl .lbl-in, #ozpl-print .lbl-in, #ozpl-layer .lbl-in {position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 9cqh 7cqw 7cqh; gap: 2.5cqh;} #ozpl .lbl-ov__brand, #ozpl-print .lbl-ov__brand, #ozpl-layer .lbl-ov__brand {font-stretch: 68%; font-weight: 900; text-transform: uppercase; font-size: min(21cqw, 17cqh); line-height: .9; letter-spacing: .01em; overflow-wrap: anywhere; max-width: 100%;} #ozpl .lbl-ov__brand.is-ph, #ozpl-print .lbl-ov__brand.is-ph, #ozpl-layer .lbl-ov__brand.is-ph {color: #a9b8b9;} #ozpl .lbl-ov__logo, #ozpl-print .lbl-ov__logo, #ozpl-layer .lbl-ov__logo {max-width: 82cqw; max-height: 26cqh; object-fit: contain;} #ozpl .lbl-ov__line, #ozpl-print .lbl-ov__line, #ozpl-layer .lbl-ov__line {font-stretch: 85%; font-weight: 600; font-size: min(7.5cqw, 6.5cqh); line-height: 1.1; color: #3f585a;} #ozpl .lbl-ov__grade, #ozpl-print .lbl-ov__grade, #ozpl-layer .lbl-ov__grade {align-self: stretch; margin: 0 -7cqw; background: var(--teal); color: #fff; font-stretch: 80%; font-weight: 800; font-size: min(13cqw, 11cqh); line-height: 1; padding: 2.4cqh 0; font-variant-numeric: tabular-nums;} #ozpl .lbl-ov__spec, #ozpl-print .lbl-ov__spec, #ozpl-layer .lbl-ov__spec {font-weight: 700; font-size: min(6.5cqw, 6cqh);} #ozpl .lbl-ov__vol, #ozpl-print .lbl-ov__vol, #ozpl-layer .lbl-ov__vol {margin-top: auto; font-stretch: 80%; font-weight: 800; font-size: min(9cqw, 9cqh);} @container (min-aspect-ratio: 3 / 2) { #ozpl .lbl-in, #ozpl-print .lbl-in, #ozpl-layer .lbl-in {flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; padding: 6cqh 4cqw; gap: 1cqh 5cqw;} #ozpl .lbl-ov__brand, #ozpl-print .lbl-ov__brand, #ozpl-layer .lbl-ov__brand {font-size: min(11cqw, 42cqh);} #ozpl .lbl-ov__grade, #ozpl-print .lbl-ov__grade, #ozpl-layer .lbl-ov__grade {align-self: center; margin: 0; padding: 4cqh 3cqw; font-size: min(6cqw, 28cqh);} #ozpl .lbl-ov__line, #ozpl-print .lbl-ov__line, #ozpl-layer .lbl-ov__line, #ozpl .lbl-ov__spec, #ozpl-print .lbl-ov__spec, #ozpl-layer .lbl-ov__spec {display: none;} #ozpl .lbl-ov__vol, #ozpl-print .lbl-ov__vol, #ozpl-layer .lbl-ov__vol {margin: 0; font-size: min(5.5cqw, 26cqh);} } #ozpl .resume, #ozpl-print .resume, #ozpl-layer .resume {display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 20px; padding: 14px 18px; background: var(--surface); border-radius: var(--r-m);} #ozpl .resume p, #ozpl-print .resume p, #ozpl-layer .resume p {margin-right: auto; font-size: 14.5px; font-weight: 600; color: var(--deep);} #ozpl .app, #ozpl-print .app, #ozpl-layer .app {display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 40px; align-items: start; padding-top: 32px; padding-bottom: 96px;} #ozpl .app__main, #ozpl-print .app__main, #ozpl-layer .app__main {min-width: 0;} #ozpl .basket, #ozpl-print .basket, #ozpl-layer .basket {order: -1; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; scrollbar-width: thin;} #ozpl .stepnav, #ozpl-print .stepnav, #ozpl-layer .stepnav {position: sticky; top: 0; z-index: 20; background: var(--mist); padding: 12px 0; margin-bottom: 20px; scroll-margin-top: 0;} #ozpl .stepnav ol, #ozpl-print .stepnav ol, #ozpl-layer .stepnav ol {list-style: none; display: flex; gap: 6px; margin: 0; padding: 0;} #ozpl .stepnav li, #ozpl-print .stepnav li, #ozpl-layer .stepnav li {flex: 1;} #ozpl .stepnav button, #ozpl-print .stepnav button, #ozpl-layer .stepnav button {width: 100%; display: flex; align-items: center; gap: 10px; background: none; border: 0; border-radius: var(--r-m); padding: 8px 10px; text-align: left; font-size: 13.5px; font-weight: 600; color: var(--muted); cursor: pointer; min-height: 44px; line-height: 1.25;} #ozpl .stepnav button:not(:disabled):hover, #ozpl-print .stepnav button:not(:disabled):hover, #ozpl-layer .stepnav button:not(:disabled):hover {background: var(--surface);} #ozpl .stepnav__n, #ozpl-print .stepnav__n, #ozpl-layer .stepnav__n {flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1.5px solid var(--field); font-family: var(--display); font-weight: 800; font-size: 13px; color: var(--deep);} #ozpl .stepnav button.done, #ozpl-print .stepnav button.done, #ozpl-layer .stepnav button.done {color: var(--teal-ink);} #ozpl .stepnav button.done .stepnav__n, #ozpl-print .stepnav button.done .stepnav__n, #ozpl-layer .stepnav button.done .stepnav__n {background: var(--teal); border-color: var(--teal); color: transparent; position: relative;} #ozpl .stepnav button.done .stepnav__n::after, #ozpl-print .stepnav button.done .stepnav__n::after, #ozpl-layer .stepnav button.done .stepnav__n::after {content: ''; position: absolute; width: 10px; height: 6px; border: solid #fff; border-width: 0 0 2.5px 2.5px; transform: translateY(-1px) rotate(-45deg);} #ozpl .stepnav button[aria-current="step"], #ozpl-print .stepnav button[aria-current="step"], #ozpl-layer .stepnav button[aria-current="step"] {color: var(--deep); background: var(--surface);} #ozpl .stepnav button[aria-current="step"] .stepnav__n, #ozpl-print .stepnav button[aria-current="step"] .stepnav__n, #ozpl-layer .stepnav button[aria-current="step"] .stepnav__n {background: var(--deep); border-color: var(--deep); color: #fff;} #ozpl .stepnav button:disabled, #ozpl-print .stepnav button:disabled, #ozpl-layer .stepnav button:disabled {cursor: default; opacity: .6;} #ozpl .step__head, #ozpl-print .step__head, #ozpl-layer .step__head {margin-bottom: 28px;} #ozpl .step__num, #ozpl-print .step__num, #ozpl-layer .step__num {font-size: 13.5px; font-weight: 600; color: var(--teal-ink); margin-bottom: 6px;} #ozpl .step h2, #ozpl-print .step h2, #ozpl-layer .step h2 {font-size: clamp(28px, 3vw, 36px); font-stretch: 112%; font-weight: 800; letter-spacing: -.025em; line-height: 1.05;} #ozpl .step h2:focus, #ozpl-print .step h2:focus, #ozpl-layer .step h2:focus {outline: none;} #ozpl .step__lead, #ozpl-print .step__lead, #ozpl-layer .step__lead {margin-top: 10px; color: var(--muted); max-width: 62ch; font-size: 16px;} #ozpl .sub, #ozpl-print .sub, #ozpl-layer .sub {font-size: 19px; font-stretch: 105%; font-weight: 750; margin: 40px 0 12px; display: flex; align-items: center; gap: 10px;} #ozpl .count, #ozpl-print .count, #ozpl-layer .count {display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 13px; background: var(--deep); color: #fff; font-size: 13px; font-weight: 700; font-family: var(--display);} #ozpl .note, #ozpl-print .note, #ozpl-layer .note {margin-top: 16px; font-size: 13.5px; color: var(--muted); max-width: 74ch;} #ozpl .hint, #ozpl-print .hint, #ozpl-layer .hint {font-size: 13px; color: var(--muted); margin-bottom: 8px;} #ozpl .empty, #ozpl-print .empty, #ozpl-layer .empty {color: var(--muted); font-size: 14.5px; padding: 18px 20px; background: var(--surface); border-radius: var(--r-m);} #ozpl .lbl, #ozpl-print .lbl, #ozpl-layer .lbl {font-size: 14px; font-weight: 700; color: var(--deep); margin: 0 0 10px;} #ozpl .opt, #ozpl-print .opt, #ozpl-layer .opt {font-weight: 500; font-size: 12.5px; color: var(--muted);} #ozpl .req, #ozpl-print .req, #ozpl-layer .req {font-weight: 600; font-size: 12.5px; color: var(--teal-ink);} #ozpl .two, #ozpl-print .two, #ozpl-layer .two {display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; margin-top: 20px; align-items: start;} #ozpl .btn, #ozpl-print .btn, #ozpl-layer .btn {display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; background: var(--deep); color: #fff; border: 2px solid var(--deep); border-radius: var(--r-m); font-weight: 700; font-size: 15px; text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s; white-space: nowrap;} #ozpl .btn:hover, #ozpl-print .btn:hover, #ozpl-layer .btn:hover {background: var(--teal-ink); border-color: var(--teal-ink);} #ozpl .btn--lg, #ozpl-print .btn--lg, #ozpl-layer .btn--lg {min-height: 58px; padding: 0 26px; font-size: 16px;} #ozpl .btn--ghost, #ozpl-print .btn--ghost, #ozpl-layer .btn--ghost {background: var(--surface); color: var(--deep); border-color: var(--field);} #ozpl .btn--ghost:hover, #ozpl-print .btn--ghost:hover, #ozpl-layer .btn--ghost:hover {background: var(--surface); border-color: var(--deep); color: var(--deep);} #ozpl .btn--sm, #ozpl-print .btn--sm, #ozpl-layer .btn--sm {min-height: 40px; padding: 0 16px; font-size: 14px;} #ozpl .stepfoot, #ozpl-print .stepfoot, #ozpl-layer .stepfoot {display: flex; justify-content: space-between; gap: 12px; margin-top: 44px;} #ozpl .fld label, #ozpl-print .fld label, #ozpl-layer .fld label, #ozpl .fgroup legend, #ozpl-print .fgroup legend, #ozpl-layer .fgroup legend {display: block; font-size: 14px; font-weight: 700; color: var(--deep); margin-bottom: 7px;} #ozpl .fld input, #ozpl-print .fld input, #ozpl-layer .fld input, #ozpl .fld select, #ozpl-print .fld select, #ozpl-layer .fld select, #ozpl .fld textarea, #ozpl-print .fld textarea, #ozpl-layer .fld textarea, #ozpl .qrow__in input, #ozpl-print .qrow__in input, #ozpl-layer .qrow__in input, #ozpl .qrow__in select, #ozpl-print .qrow__in select, #ozpl-layer .qrow__in select, #ozpl .gsearch input, #ozpl-print .gsearch input, #ozpl-layer .gsearch input {width: 100%; background: var(--surface); border: 1.5px solid var(--field); border-radius: var(--r-s); padding: 11px 13px; min-height: 48px;} #ozpl .fld textarea, #ozpl-print .fld textarea, #ozpl-layer .fld textarea {resize: vertical;} #ozpl .fld input:hover, #ozpl-print .fld input:hover, #ozpl-layer .fld input:hover, #ozpl .fld select:hover, #ozpl-print .fld select:hover, #ozpl-layer .fld select:hover, #ozpl .fld textarea:hover, #ozpl-print .fld textarea:hover, #ozpl-layer .fld textarea:hover, #ozpl .qrow__in input:hover, #ozpl-print .qrow__in input:hover, #ozpl-layer .qrow__in input:hover {border-color: var(--deep);} #ozpl .fld input:focus, #ozpl-print .fld input:focus, #ozpl-layer .fld input:focus, #ozpl .fld select:focus, #ozpl-print .fld select:focus, #ozpl-layer .fld select:focus, #ozpl .fld textarea:focus, #ozpl-print .fld textarea:focus, #ozpl-layer .fld textarea:focus, #ozpl .qrow__in input:focus, #ozpl-print .qrow__in input:focus, #ozpl-layer .qrow__in input:focus, #ozpl .qrow__in select:focus, #ozpl-print .qrow__in select:focus, #ozpl-layer .qrow__in select:focus, #ozpl .gsearch input:focus, #ozpl-print .gsearch input:focus, #ozpl-layer .gsearch input:focus {outline: 3px solid var(--teal); outline-offset: 0; border-color: var(--deep);} #ozpl .fld [aria-invalid="true"], #ozpl-print .fld [aria-invalid="true"], #ozpl-layer .fld [aria-invalid="true"] {border-color: var(--red); border-width: 2px;} #ozpl .ferr, #ozpl-print .ferr, #ozpl-layer .ferr {color: var(--red); font-size: 13.5px; font-weight: 600; margin-top: 6px;} #ozpl .fgroup, #ozpl-print .fgroup, #ozpl-layer .fgroup {border: 0; padding: 0; margin: 0; min-width: 0;} #ozpl .rrow, #ozpl-print .rrow, #ozpl-layer .rrow {display: flex; gap: 10px; align-items: center; padding: 8px 0; min-height: 40px; cursor: pointer; font-size: 15px;} #ozpl .rrow input, #ozpl-print .rrow input, #ozpl-layer .rrow input, #ozpl .check input, #ozpl-print .check input, #ozpl-layer .check input {accent-color: var(--deep); width: 20px; height: 20px; margin: 0; flex: none;} #ozpl .check, #ozpl-print .check, #ozpl-layer .check {display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; font-size: 14.5px; cursor: pointer; max-width: 72ch;} #ozpl .check input, #ozpl-print .check input, #ozpl-layer .check input {margin-top: 1px;} #ozpl .check--pad, #ozpl-print .check--pad, #ozpl-layer .check--pad {margin-top: 38px;} #ozpl .fld--note, #ozpl-print .fld--note, #ozpl-layer .fld--note {margin-top: 18px;} #ozpl .routes, #ozpl-print .routes, #ozpl-layer .routes, #ozpl .dcards, #ozpl-print .dcards, #ozpl-layer .dcards, #ozpl .ccards, #ozpl-print .ccards, #ozpl-layer .ccards {border: 0; padding: 0; margin: 0; display: grid; gap: 12px; min-width: 0;} #ozpl .routes, #ozpl-print .routes, #ozpl-layer .routes {grid-template-columns: repeat(2, 1fr);} #ozpl .dcards, #ozpl-print .dcards, #ozpl-layer .dcards {grid-template-columns: repeat(2, 1fr);} #ozpl .ccards, #ozpl-print .ccards, #ozpl-layer .ccards {grid-template-columns: repeat(3, 1fr);} #ozpl .rcard, #ozpl-print .rcard, #ozpl-layer .rcard {position: relative; display: flex; flex-direction: column; gap: 6px; padding: 20px 20px 18px; background: var(--surface); border: 2px solid transparent; border-radius: var(--r-m); cursor: pointer; transition: border-color .15s;} #ozpl .rcard input, #ozpl-print .rcard input, #ozpl-layer .rcard input {position: absolute; opacity: 0; pointer-events: none;} #ozpl .rcard:hover, #ozpl-print .rcard:hover, #ozpl-layer .rcard:hover {border-color: var(--field);} #ozpl .rcard:has(input:focus-visible), #ozpl-print .rcard:has(input:focus-visible), #ozpl-layer .rcard:has(input:focus-visible) {outline: 3px solid var(--teal); outline-offset: 2px;} #ozpl .rcard.is-on, #ozpl-print .rcard.is-on, #ozpl-layer .rcard.is-on {border-color: var(--deep);} #ozpl .rcard strong, #ozpl-print .rcard strong, #ozpl-layer .rcard strong {font-family: var(--display); font-stretch: 100%; font-size: 17px; font-weight: 750; color: var(--deep); line-height: 1.25; padding-right: 28px;} #ozpl .rcard::after, #ozpl-print .rcard::after, #ozpl-layer .rcard::after {content: ''; position: absolute; top: 20px; right: 18px; width: 20px; height: 20px; border: 2px solid var(--field); border-radius: 50%; background: var(--surface);} #ozpl .rcard.is-on::after, #ozpl-print .rcard.is-on::after, #ozpl-layer .rcard.is-on::after {border: 6px solid var(--deep);} #ozpl .rcard__d, #ozpl-print .rcard__d, #ozpl-layer .rcard__d {font-size: 14px; color: var(--muted);} #ozpl .rcard__m, #ozpl-print .rcard__m, #ozpl-layer .rcard__m {margin-top: auto; padding-top: 14px; color: var(--deep); font-weight: 600; font-size: 13.5px; line-height: 1.6;} #ozpl .routes .rcard, #ozpl-print .routes .rcard, #ozpl-layer .routes .rcard {min-height: 200px;} #ozpl .routes .rcard__m, #ozpl-print .routes .rcard__m, #ozpl-layer .routes .rcard__m {background: var(--tint); margin: auto -8px -6px; padding: 10px 12px; border-radius: var(--r-s);} #ozpl .gsearch input, #ozpl-print .gsearch input, #ozpl-layer .gsearch input {min-height: 54px; padding-left: 46px; font-size: 16px; border-radius: var(--r-m); background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23042a2d' stroke-width='2'%3E%3Ccircle cx='8.5' cy='8.5' r='6'/%3E%3Cpath d='m13 13 5 5'/%3E%3C/svg%3E") no-repeat 16px center;} #ozpl .catalog, #ozpl-print .catalog, #ozpl-layer .catalog {margin-top: 14px;} #ozpl .catnav, #ozpl-print .catnav, #ozpl-layer .catnav {display: flex; flex-wrap: wrap; gap: 6px;} #ozpl .catnav button, #ozpl-print .catnav button, #ozpl-layer .catnav button {display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1.5px solid transparent; border-radius: var(--r-s); padding: 8px 12px; min-height: 40px; font-size: 13.5px; font-weight: 600; color: var(--ink); cursor: pointer;} #ozpl .catnav button:hover, #ozpl-print .catnav button:hover, #ozpl-layer .catnav button:hover {border-color: var(--field);} #ozpl .catnav button[aria-selected="true"], #ozpl-print .catnav button[aria-selected="true"], #ozpl-layer .catnav button[aria-selected="true"] {background: var(--deep); color: #fff;} #ozpl .catnav__n, #ozpl-print .catnav__n, #ozpl-layer .catnav__n {display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--teal); color: #fff; font-size: 11.5px; font-weight: 800;} #ozpl .catpanel, #ozpl-print .catpanel, #ozpl-layer .catpanel {background: var(--surface); border-radius: var(--r-l); padding: 8px 22px 20px; margin-top: 10px;} #ozpl .catpanel h3, #ozpl-print .catpanel h3, #ozpl-layer .catpanel h3 {font-size: 15px; font-weight: 750; margin: 18px 0 2px; color: var(--teal-ink);} #ozpl .hits, #ozpl-print .hits, #ozpl-layer .hits {padding-top: 14px; font-size: 14px; color: var(--muted); font-weight: 600;} #ozpl .gtable, #ozpl-print .gtable, #ozpl-layer .gtable {width: 100%; border-collapse: collapse;} #ozpl .gtable tr, #ozpl-print .gtable tr, #ozpl-layer .gtable tr {display: grid; grid-template-columns: 210px minmax(0, 1fr); grid-template-areas: "type chips" "spec chips"; column-gap: 20px; padding: 14px 0; border-top: 1px solid var(--line);} #ozpl .gtable tbody tr:first-child, #ozpl-print .gtable tbody tr:first-child, #ozpl-layer .gtable tbody tr:first-child {border-top: 0;} #ozpl .gtable th, #ozpl-print .gtable th, #ozpl-layer .gtable th, #ozpl .gtable td, #ozpl-print .gtable td, #ozpl-layer .gtable td {padding: 0; text-align: left;} #ozpl .gtable tbody th, #ozpl-print .gtable tbody th, #ozpl-layer .gtable tbody th {grid-area: type; font-size: 15px; font-weight: 700; color: var(--deep);} #ozpl .gtable td.spec, #ozpl-print .gtable td.spec, #ozpl-layer .gtable td.spec {grid-area: spec; font-size: 13.5px; font-weight: 600; color: var(--teal-ink);} #ozpl .gtable td:last-child, #ozpl-print .gtable td:last-child, #ozpl-layer .gtable td:last-child {grid-area: chips;} #ozpl .chips, #ozpl-print .chips, #ozpl-layer .chips {display: flex; flex-wrap: wrap; gap: 6px;} #ozpl .chip, #ozpl-print .chip, #ozpl-layer .chip {font-family: var(--display); font-stretch: 92%; font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; background: var(--surface); color: var(--deep); border: 1.5px solid var(--field); border-radius: var(--r-s); padding: 0 12px; min-height: 40px; cursor: pointer;} #ozpl .chip:hover, #ozpl-print .chip:hover, #ozpl-layer .chip:hover {border-color: var(--deep); background: var(--tint);} #ozpl .chip[aria-pressed="true"], #ozpl-print .chip[aria-pressed="true"], #ozpl-layer .chip[aria-pressed="true"] {background: var(--deep); color: #fff; border-color: var(--deep); padding-left: 30px; position: relative;} #ozpl .chip[aria-pressed="true"]::before, #ozpl-print .chip[aria-pressed="true"]::before, #ozpl-layer .chip[aria-pressed="true"]::before {content: ''; position: absolute; left: 12px; top: 50%; width: 9px; height: 5px; border: solid #fff; border-width: 0 0 2px 2px; transform: translateY(-70%) rotate(-45deg);} #ozpl .advise, #ozpl-print .advise, #ozpl-layer .advise {margin-top: 16px; width: 100%; text-align: left; background: var(--tint); border: 1.5px dashed var(--field); border-radius: var(--r-m); padding: 13px 16px; min-height: 48px; font-size: 14.5px; font-weight: 600; color: var(--deep); cursor: pointer;} #ozpl .advise:hover, #ozpl-print .advise:hover, #ozpl-layer .advise:hover {border-color: var(--deep);} #ozpl .advise[aria-pressed="true"], #ozpl-print .advise[aria-pressed="true"], #ozpl-layer .advise[aria-pressed="true"] {border-style: solid; border-color: var(--teal-ink); background: var(--teal-wash); color: var(--teal-ink);} #ozpl .items, #ozpl-print .items, #ozpl-layer .items {list-style: none; padding: 0; margin: 0; display: grid; gap: 8px;} #ozpl .item, #ozpl-print .item, #ozpl-layer .item {display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 16px 18px; background: var(--surface); border-radius: var(--r-m); align-items: start;} #ozpl .item__t, #ozpl-print .item__t, #ozpl-layer .item__t {font-size: 15.5px;} #ozpl .item__t strong, #ozpl-print .item__t strong, #ozpl-layer .item__t strong {font-family: var(--display); font-stretch: 92%; font-size: 17px; color: var(--deep);} #ozpl .item__s, #ozpl-print .item__s, #ozpl-layer .item__s {color: var(--teal-ink); font-weight: 600; font-size: 13.5px; margin-left: 6px;} #ozpl .item__ex, #ozpl-print .item__ex, #ozpl-layer .item__ex {display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px;} #ozpl .fld--inline, #ozpl-print .fld--inline, #ozpl-layer .fld--inline {width: 160px;} #ozpl .fld--grow, #ozpl-print .fld--grow, #ozpl-layer .fld--grow {flex: 1; min-width: 220px;} #ozpl .item__ex .fld label, #ozpl-print .item__ex .fld label, #ozpl-layer .item__ex .fld label {font-size: 12.5px; font-weight: 600; color: var(--muted);} #ozpl .item__ex .fld input, #ozpl-print .item__ex .fld input, #ozpl-layer .item__ex .fld input, #ozpl .item__ex .fld select, #ozpl-print .item__ex .fld select, #ozpl-layer .item__ex .fld select {min-height: 42px; padding: 8px 11px; font-size: 14.5px;} #ozpl .item__rm, #ozpl-print .item__rm, #ozpl-layer .item__rm {font-size: 13.5px; font-weight: 600; color: var(--muted); padding: 6px 0;} #ozpl .item__rm:hover, #ozpl-print .item__rm:hover, #ozpl-layer .item__rm:hover {color: var(--red);} #ozpl .pitem, #ozpl-print .pitem, #ozpl-layer .pitem {background: var(--surface); border-radius: var(--r-l); padding: 22px 24px 20px; margin-top: 14px; border: 2px solid transparent;} #ozpl .pitem.is-bad, #ozpl-print .pitem.is-bad, #ozpl-layer .pitem.is-bad {border-color: var(--red);} #ozpl .pitem__h, #ozpl-print .pitem__h, #ozpl-layer .pitem__h {display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 18px;} #ozpl .pitem__h h3, #ozpl-print .pitem__h h3, #ozpl-layer .pitem__h h3 {font-size: 19px; font-weight: 600; font-stretch: 100%; color: var(--ink);} #ozpl .pitem__h h3 strong, #ozpl-print .pitem__h h3 strong, #ozpl-layer .pitem__h h3 strong {font-stretch: 92%; font-weight: 800; color: var(--deep);} #ozpl .pitem__s, #ozpl-print .pitem__s, #ozpl-layer .pitem__s {color: var(--teal-ink); font-weight: 600; font-size: 14px;} #ozpl .pitem__rm, #ozpl-print .pitem__rm, #ozpl-layer .pitem__rm {margin-left: auto; font-size: 13.5px; font-weight: 600; color: var(--muted);} #ozpl .pitem__rm:hover, #ozpl-print .pitem__rm:hover, #ozpl-layer .pitem__rm:hover {color: var(--red);} #ozpl .ptiles, #ozpl-print .ptiles, #ozpl-layer .ptiles {display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px;} #ozpl .ptile, #ozpl-print .ptile, #ozpl-layer .ptile {display: flex; flex-direction: column; align-items: center; gap: 6px; background: var(--surface); border: 2px solid var(--line); border-radius: var(--r-m); padding: 10px 6px 9px; cursor: pointer; font-size: 12.5px; font-weight: 600; line-height: 1.25; color: var(--muted); text-align: center;} #ozpl .ptile:hover, #ozpl-print .ptile:hover, #ozpl-layer .ptile:hover {border-color: var(--field); color: var(--deep);} #ozpl .ptile[aria-pressed="true"], #ozpl-print .ptile[aria-pressed="true"], #ozpl-layer .ptile[aria-pressed="true"] {border-color: var(--deep); color: var(--deep); background: var(--tint);} #ozpl .ptile__img, #ozpl-print .ptile__img, #ozpl-layer .ptile__img {height: 64px; width: 100%; object-fit: contain;} #ozpl .ptile[aria-pressed="true"] .ptile__img, #ozpl-print .ptile[aria-pressed="true"] .ptile__img, #ozpl-layer .ptile[aria-pressed="true"] .ptile__img {mix-blend-mode: multiply;} #ozpl .ph, #ozpl-print .ph, #ozpl-layer .ph {display: flex; align-items: center; justify-content: center; background: var(--tint); border: 1.5px dashed var(--field); border-radius: var(--r-s); font-size: 11px; line-height: 1.2; color: var(--muted); text-align: center; padding: 4px;} #ozpl .qrows, #ozpl-print .qrows, #ozpl-layer .qrows {margin-top: 18px; display: grid; gap: 10px;} #ozpl .qrow, #ozpl-print .qrow, #ozpl-layer .qrow {display: grid; grid-template-columns: 56px minmax(0, 1fr) 250px minmax(150px, .9fr); gap: 10px 16px; align-items: center; padding: 14px 16px; background: var(--tint); border-radius: var(--r-m);} #ozpl .qrow__img, #ozpl-print .qrow__img, #ozpl-layer .qrow__img {height: 56px; width: 56px; object-fit: contain; mix-blend-mode: multiply;} #ozpl .qrow .ph.qrow__img, #ozpl-print .qrow .ph.qrow__img, #ozpl-layer .qrow .ph.qrow__img {font-size: 8px; mix-blend-mode: normal;} #ozpl .qrow__p strong, #ozpl-print .qrow__p strong, #ozpl-layer .qrow__p strong {display: block; font-family: var(--display); font-size: 16px; font-weight: 750; color: var(--deep);} #ozpl .qrow__p .mono, #ozpl-print .qrow__p .mono, #ozpl-layer .qrow__p .mono {font-size: 12.5px; color: var(--muted);} #ozpl .qrow__in, #ozpl-print .qrow__in, #ozpl-layer .qrow__in {display: grid; grid-template-columns: 1fr 108px; gap: 6px;} #ozpl .qrow__in input, #ozpl-print .qrow__in input, #ozpl-layer .qrow__in input {font-family: var(--display); font-weight: 700; font-size: 19px; text-align: right; font-variant-numeric: tabular-nums;} #ozpl .qrow__o, #ozpl-print .qrow__o, #ozpl-layer .qrow__o {display: flex; flex-direction: column; line-height: 1.25;} #ozpl .qrow__o .vol, #ozpl-print .qrow__o .vol, #ozpl-layer .qrow__o .vol {font-family: var(--display); font-stretch: 92%; font-weight: 800; font-size: 22px; color: var(--deep); font-variant-numeric: tabular-nums;} #ozpl .qrow__o .eq, #ozpl-print .qrow__o .eq, #ozpl-layer .qrow__o .eq {font-size: 12.5px; color: var(--muted);} #ozpl .qrow__fill, #ozpl-print .qrow__fill, #ozpl-layer .qrow__fill {grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 6px;} #ozpl .fill, #ozpl-print .fill, #ozpl-layer .fill {background: var(--surface); color: var(--deep); border: 1.5px solid var(--field); border-radius: var(--r-s); padding: 0 12px; min-height: 36px; font-size: 13px; font-weight: 600; cursor: pointer; font-variant-numeric: tabular-nums;} #ozpl .fill:hover, #ozpl-print .fill:hover, #ozpl-layer .fill:hover {border-color: var(--deep);} #ozpl .fill[aria-pressed="true"], #ozpl-print .fill[aria-pressed="true"], #ozpl-layer .fill[aria-pressed="true"] {background: var(--deep); color: #fff; border-color: var(--deep);} #ozpl .warns, #ozpl-print .warns, #ozpl-layer .warns {list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 6px;} #ozpl .warns li, #ozpl-print .warns li, #ozpl-layer .warns li {display: flex; gap: 10px; align-items: flex-start; background: var(--amber-wash); color: var(--amber-ink); font-size: 14px; font-weight: 500; padding: 10px 14px; border-radius: var(--r-s);} #ozpl .warns li::before, #ozpl-print .warns li::before, #ozpl-layer .warns li::before {content: '!'; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--amber-ink); color: #fff; font: 800 13px/20px var(--display); text-align: center; margin-top: 1px;} #ozpl .sec, #ozpl-print .sec, #ozpl-layer .sec {padding: 0 0 36px;} #ozpl .sec h3, #ozpl-print .sec h3, #ozpl-layer .sec h3 {font-size: 20px; font-stretch: 105%; font-weight: 750; margin-bottom: 14px;} #ozpl .sec .two, #ozpl-print .sec .two, #ozpl-layer .sec .two {margin-top: 0;} #ozpl .sec .two + .two, #ozpl-print .sec .two + .two, #ozpl-layer .sec .two + .two {margin-top: 18px;} #ozpl .two--files, #ozpl-print .two--files, #ozpl-layer .two--files {margin-top: 18px !important;} #ozpl .filepick, #ozpl-print .filepick, #ozpl-layer .filepick {display: flex;} #ozpl .files, #ozpl-print .files, #ozpl-layer .files {list-style: none; padding: 0; margin: 10px 0 0; font-size: 14px; display: grid; gap: 6px;} #ozpl .files li, #ozpl-print .files li, #ozpl-layer .files li {display: flex; gap: 10px; align-items: baseline; padding: 8px 12px; background: var(--surface); border-radius: var(--r-s);} #ozpl .files li span:first-child, #ozpl-print .files li span:first-child, #ozpl-layer .files li span:first-child {overflow-wrap: anywhere; font-weight: 600;} #ozpl .files .mono, #ozpl-print .files .mono, #ozpl-layer .files .mono {color: var(--muted);} #ozpl .files .linkbtn, #ozpl-print .files .linkbtn, #ozpl-layer .files .linkbtn {margin-left: auto; font-size: 13px;} #ozpl .lead, #ozpl-print .lead, #ozpl-layer .lead {background: var(--deep); color: #cfe8e6; border-radius: var(--r-l); padding: 22px 26px; display: grid; gap: 10px;} #ozpl .lead__h, #ozpl-print .lead__h, #ozpl-layer .lead__h {color: #9fd6d3; font-weight: 700; font-size: 14px;} #ozpl .lead p, #ozpl-print .lead p, #ozpl-layer .lead p {font-size: 15px; transition: opacity .2s;} #ozpl .lead b, #ozpl-print .lead b, #ozpl-layer .lead b {color: #fff; font-family: var(--display); font-stretch: 92%; font-size: 22px; font-weight: 800; margin-right: 4px;} #ozpl .lead .is-dim, #ozpl-print .lead .is-dim, #ozpl-layer .lead .is-dim {opacity: .45;} #ozpl .review, #ozpl-print .review, #ozpl-layer .review {background: var(--surface); border-radius: var(--r-l); padding: 6px 24px 20px;} #ozpl .rvh, #ozpl-print .rvh, #ozpl-layer .rvh {display: flex; justify-content: space-between; align-items: baseline; margin-top: 20px; padding-bottom: 6px;} #ozpl .rvh h4, #ozpl-print .rvh h4, #ozpl-layer .rvh h4 {font-size: 15px; font-weight: 750; color: var(--teal-ink);} #ozpl .rvh .linkbtn, #ozpl-print .rvh .linkbtn, #ozpl-layer .rvh .linkbtn {font-size: 13.5px;} #ozpl .rv, #ozpl-print .rv, #ozpl-layer .rv {margin: 0;} #ozpl .rv div, #ozpl-print .rv div, #ozpl-layer .rv div {display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14.5px;} #ozpl .rv dt, #ozpl-print .rv dt, #ozpl-layer .rv dt {color: var(--muted);} #ozpl .rv dd, #ozpl-print .rv dd, #ozpl-layer .rv dd {margin: 0; overflow-wrap: anywhere; color: var(--deep); font-weight: 500;} #ozpl .nv, #ozpl-print .nv, #ozpl-layer .nv {color: var(--muted); font-style: italic; font-weight: 400;} #ozpl .rvt, #ozpl-print .rvt, #ozpl-layer .rvt {width: 100%; border-collapse: collapse; font-size: 14px;} #ozpl .rvt td, #ozpl-print .rvt td, #ozpl-layer .rvt td {padding: 9px 10px 9px 0; border-top: 1px solid var(--line); vertical-align: top;} #ozpl .rvt td.mono:first-child, #ozpl-print .rvt td.mono:first-child, #ozpl-layer .rvt td.mono:first-child {color: var(--muted); width: 32px;} #ozpl .rvt td .mono, #ozpl-print .rvt td .mono, #ozpl-layer .rvt td .mono {color: var(--teal-ink); font-weight: 600;} #ozpl .rvt td em, #ozpl-print .rvt td em, #ozpl-layer .rvt td em {color: var(--muted); font-size: 13px;} #ozpl .rvt .num, #ozpl-print .rvt .num, #ozpl-layer .rvt .num {text-align: right; white-space: nowrap;} #ozpl .rvt tfoot td, #ozpl-print .rvt tfoot td, #ozpl-layer .rvt tfoot td {font-family: var(--display); font-weight: 800; color: var(--deep); padding-top: 12px;} #ozpl .ok, #ozpl-print .ok, #ozpl-layer .ok {background: var(--deep); color: #cfe8e6; border-radius: var(--r-l); padding: 32px;} #ozpl .ok__k, #ozpl-print .ok__k, #ozpl-layer .ok__k {color: #9fd6d3; font-weight: 700;} #ozpl .ok__ref, #ozpl-print .ok__ref, #ozpl-layer .ok__ref {font-family: var(--display); font-stretch: 115%; font-weight: 800; font-size: 44px; color: #fff; margin: 4px 0 10px; letter-spacing: -.01em;} #ozpl .nexts, #ozpl-print .nexts, #ozpl-layer .nexts {margin: 0; padding: 0; list-style: none; counter-reset: n; display: grid; gap: 8px;} #ozpl .nexts li, #ozpl-print .nexts li, #ozpl-layer .nexts li {counter-increment: n; display: grid; grid-template-columns: 40px 1fr; align-items: center; padding: 14px 18px; background: var(--surface); border-radius: var(--r-m); font-size: 15px;} #ozpl .nexts li::before, #ozpl-print .nexts li::before, #ozpl-layer .nexts li::before {content: counter(n); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--teal); color: #fff; font: 800 13px var(--display);} #ozpl .internal, #ozpl-print .internal, #ozpl-layer .internal {margin-top: 40px; border-radius: var(--r-l); padding: 0 22px; background: var(--surface); border: 2px dashed var(--field);} #ozpl .internal summary, #ozpl-print .internal summary, #ozpl-layer .internal summary {cursor: pointer; padding: 16px 0; font-weight: 700; font-size: 14.5px; color: var(--deep);} #ozpl .internal[open], #ozpl-print .internal[open], #ozpl-layer .internal[open] {padding-bottom: 20px;} #ozpl .tabs, #ozpl-print .tabs, #ozpl-layer .tabs {display: flex; gap: 4px; background: var(--mist); padding: 4px; border-radius: var(--r-s); width: max-content; margin-bottom: 16px;} #ozpl .tabs button, #ozpl-print .tabs button, #ozpl-layer .tabs button {background: none; border: 0; padding: 8px 14px; border-radius: 4px; font-weight: 700; font-size: 13.5px; color: var(--muted); cursor: pointer;} #ozpl .tabs button[aria-selected="true"], #ozpl-print .tabs button[aria-selected="true"], #ozpl-layer .tabs button[aria-selected="true"] {background: var(--surface); color: var(--deep);} #ozpl .mail__h, #ozpl-print .mail__h, #ozpl-layer .mail__h {margin: 0 0 14px; font-size: 14px;} #ozpl .mail__h div, #ozpl-print .mail__h div, #ozpl-layer .mail__h div {display: grid; grid-template-columns: 90px 1fr; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line);} #ozpl .mail__h dt, #ozpl-print .mail__h dt, #ozpl-layer .mail__h dt {color: var(--muted);} #ozpl .mail__h dd, #ozpl-print .mail__h dd, #ozpl-layer .mail__h dd {margin: 0; overflow-wrap: anywhere;} #ozpl .mail__flags, #ozpl-print .mail__flags, #ozpl-layer .mail__flags {background: var(--amber-wash); color: var(--amber-ink); border-radius: var(--r-m); padding: 14px 18px; margin-bottom: 14px; font-size: 14px;} #ozpl .mail__flags .mono, #ozpl-print .mail__flags .mono, #ozpl-layer .mail__flags .mono {font-weight: 700;} #ozpl .mail__flags ul, #ozpl-print .mail__flags ul, #ozpl-layer .mail__flags ul {margin: 6px 0 0; padding-left: 18px;} #ozpl .mail .review, #ozpl-print .mail .review, #ozpl-layer .mail .review {padding: 0;} #ozpl .mail__att, #ozpl-print .mail__att, #ozpl-layer .mail__att {margin-top: 14px; font-size: 13.5px; color: var(--muted);} #ozpl pre[data-pane], #ozpl-print pre[data-pane], #ozpl-layer pre[data-pane] {background: var(--deep); color: #cfe8e6; font: 12px/1.55 ui-monospace, Consolas, monospace; padding: 16px; border-radius: var(--r-m); overflow: auto; max-height: 520px;} #ozpl .stage, #ozpl-print .stage, #ozpl-layer .stage {background: var(--surface); border-radius: var(--r-l); padding: 22px 22px 14px;} #ozpl .stage__fig, #ozpl-print .stage__fig, #ozpl-layer .stage__fig {display: flex; justify-content: center; align-items: flex-end; height: 300px;} #ozpl .stage__pack, #ozpl-print .stage__pack, #ozpl-layer .stage__pack {position: relative; height: 100%;} #ozpl .stage__pack img, #ozpl-print .stage__pack img, #ozpl-layer .stage__pack img {height: 100%; width: auto;} #ozpl .stage__cap, #ozpl-print .stage__cap, #ozpl-layer .stage__cap {margin-top: 10px; font-size: 12px; color: var(--muted); text-align: center;} #ozpl .bk__in, #ozpl-print .bk__in, #ozpl-layer .bk__in {background: var(--surface); border-radius: var(--r-l); padding: 20px 22px 20px; margin-top: 12px;} #ozpl .bk__h, #ozpl-print .bk__h, #ozpl-layer .bk__h {display: flex; align-items: baseline; gap: 10px;} #ozpl .bk__h h2, #ozpl-print .bk__h h2, #ozpl-layer .bk__h h2 {font-size: 19px; font-stretch: 105%; font-weight: 800;} #ozpl .bk__h .mono, #ozpl-print .bk__h .mono, #ozpl-layer .bk__h .mono {color: var(--muted); font-size: 13px; margin-left: auto; font-weight: 600;} #ozpl .bk__close, #ozpl-print .bk__close, #ozpl-layer .bk__close {display: none; font-size: 14px;} #ozpl .bk__route, #ozpl-print .bk__route, #ozpl-layer .bk__route {margin-top: 6px; color: var(--teal-ink); font-size: 13.5px; font-weight: 600;} #ozpl .bk__items, #ozpl-print .bk__items, #ozpl-layer .bk__items {list-style: none; margin: 10px 0 0; padding: 0;} #ozpl .bk__items li, #ozpl-print .bk__items li, #ozpl-layer .bk__items li {padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px;} #ozpl .bk__items strong, #ozpl-print .bk__items strong, #ozpl-layer .bk__items strong {font-family: var(--display); font-stretch: 92%;} #ozpl .bk__spec, #ozpl-print .bk__spec, #ozpl-layer .bk__spec {color: var(--teal-ink); font-size: 12.5px; font-weight: 600;} #ozpl .bk__row, #ozpl-print .bk__row, #ozpl-layer .bk__row {display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--muted); margin-top: 2px;} #ozpl .bk__tot, #ozpl-print .bk__tot, #ozpl-layer .bk__tot {display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 14px 0 0;} #ozpl .bk__tot div, #ozpl-print .bk__tot div, #ozpl-layer .bk__tot div {background: var(--tint); border-radius: var(--r-s); padding: 10px 12px;} #ozpl .bk__tot dt, #ozpl-print .bk__tot dt, #ozpl-layer .bk__tot dt {font-size: 12px; color: var(--muted); line-height: 1.3; font-weight: 600;} #ozpl .bk__tot dd, #ozpl-print .bk__tot dd, #ozpl-layer .bk__tot dd {margin: 4px 0 0; font-family: var(--display); font-stretch: 92%; font-size: 22px; font-weight: 800; color: var(--deep); font-variant-numeric: tabular-nums;} #ozpl .meter, #ozpl-print .meter, #ozpl-layer .meter {position: relative; height: 10px; background: var(--line); margin-top: 16px; border-radius: 5px; overflow: visible;} #ozpl .meter__bar, #ozpl-print .meter__bar, #ozpl-layer .meter__bar {position: absolute; inset: 0 auto 0 0; background: var(--teal); border-radius: 5px; transition: width .3s;} #ozpl .meter__min, #ozpl-print .meter__min, #ozpl-layer .meter__min {position: absolute; top: -4px; bottom: -4px; width: 3px; border-radius: 2px; background: var(--deep);} #ozpl .meter__lbl, #ozpl-print .meter__lbl, #ozpl-layer .meter__lbl {display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: 12.5px; color: var(--muted); font-weight: 600;} #ozpl .bk__warn, #ozpl-print .bk__warn, #ozpl-layer .bk__warn {margin-top: 12px; font-size: 13.5px; font-weight: 600; color: var(--amber-ink); background: var(--amber-wash); padding: 9px 12px; border-radius: var(--r-s);} #ozpl .basketbar, #ozpl-print .basketbar, #ozpl-layer .basketbar {display: none;} #ozpl .dlg, #ozpl-print .dlg, #ozpl-layer .dlg {border: 0; border-radius: var(--r-l); padding: 0; width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 48px); background: var(--mist); color: var(--ink);} #ozpl .dlg::backdrop, #ozpl-print .dlg::backdrop, #ozpl-layer .dlg::backdrop {background: rgba(4, 42, 45, .6);} #ozpl .dlg__f, #ozpl-print .dlg__f, #ozpl-layer .dlg__f {padding: 30px;} #ozpl .dlg h2, #ozpl-print .dlg h2, #ozpl-layer .dlg h2 {font-size: 28px; font-stretch: 112%; font-weight: 800; letter-spacing: -.02em;} #ozpl .dlg .fld, #ozpl-print .dlg .fld, #ozpl-layer .dlg .fld {margin-top: 16px;} #ozpl .dlg .two .fld, #ozpl-print .dlg .two .fld, #ozpl-layer .dlg .two .fld {margin-top: 0;} #ozpl .foot, #ozpl-print .foot, #ozpl-layer .foot {background: var(--deep); color: #b8d8d6; padding: 30px 0 38px; font-size: 14px;} #ozpl .foot__small, #ozpl-print .foot__small, #ozpl-layer .foot__small {margin-top: 6px; font-size: 12.5px; color: #8fb6b3;} #ozpl .printcopy, #ozpl-print .printcopy, #ozpl-layer .printcopy {display: none;} @media (max-width: 1100px) { #ozpl .lineup, #ozpl-print .lineup, #ozpl-layer .lineup {--s: .2;} #ozpl .app, #ozpl-print .app, #ozpl-layer .app {grid-template-columns: minmax(0, 1fr);} #ozpl .basket, #ozpl-print .basket, #ozpl-layer .basket {order: 0; position: fixed; inset: auto 0 0 0; top: auto; z-index: 40; max-height: 88vh; overflow: auto; transform: translateY(105%); transition: transform .25s; background: var(--mist); border-radius: var(--r-l) var(--r-l) 0 0; padding: 12px; box-shadow: 0 -10px 30px rgba(4, 42, 45, .2);} #ozpl .basket.is-open, #ozpl-print .basket.is-open, #ozpl-layer .basket.is-open {transform: none;} #ozpl .stage__fig, #ozpl-print .stage__fig, #ozpl-layer .stage__fig {height: 220px;} #ozpl .bk__close, #ozpl-print .bk__close, #ozpl-layer .bk__close {display: inline;} #ozpl .basketbar, #ozpl-print .basketbar, #ozpl-layer .basketbar {display: flex; position: sticky; bottom: 0; z-index: 30; align-items: center; justify-content: space-between; gap: 12px; background: var(--deep); color: #fff; padding: 10px 16px; font-size: 13.5px; font-weight: 600;} #ozpl .basketbar .btn, #ozpl-print .basketbar .btn, #ozpl-layer .basketbar .btn {background: #fff; color: var(--deep); border-color: #fff;} body.is-done #ozpl .basketbar, body.is-done #ozpl-print .basketbar, body.is-done #ozpl-layer .basketbar {display: none;} #ozpl .routes, #ozpl-print .routes, #ozpl-layer .routes {grid-template-columns: 1fr;} #ozpl .routes .rcard, #ozpl-print .routes .rcard, #ozpl-layer .routes .rcard {min-height: 0;} } @media (max-width: 860px) { #ozpl .shell, #ozpl-print .shell, #ozpl-layer .shell {padding: 0 16px;} #ozpl .top__row, #ozpl-print .top__row, #ozpl-layer .top__row {gap: 12px; min-height: 60px;} #ozpl .top__logo img, #ozpl-print .top__logo img, #ozpl-layer .top__logo img {height: 28px;} #ozpl .top__tool, #ozpl-print .top__tool, #ozpl-layer .top__tool, #ozpl .top__preview, #ozpl-print .top__preview, #ozpl-layer .top__preview {display: none;} #ozpl .lang, #ozpl-print .lang, #ozpl-layer .lang {margin-left: auto;} #ozpl .hero__grid, #ozpl-print .hero__grid, #ozpl-layer .hero__grid {grid-template-columns: 1fr; gap: 0; padding-top: 32px;} #ozpl .hero__copy, #ozpl-print .hero__copy, #ozpl-layer .hero__copy {padding-bottom: 24px;} #ozpl .hero__field, #ozpl-print .hero__field, #ozpl-layer .hero__field {flex-direction: column;} #ozpl .hero__field .btn, #ozpl-print .hero__field .btn, #ozpl-layer .hero__field .btn {width: 100%;} #ozpl .lineup, #ozpl-print .lineup, #ozpl-layer .lineup {--s: .135; justify-content: center; gap: 2px; padding-bottom: 30px;} #ozpl .lineup__cap, #ozpl-print .lineup__cap, #ozpl-layer .lineup__cap {left: 0; text-align: center;} #ozpl .app, #ozpl-print .app, #ozpl-layer .app {padding-top: 16px;} #ozpl .stepnav ol, #ozpl-print .stepnav ol, #ozpl-layer .stepnav ol {gap: 4px;} #ozpl .stepnav li, #ozpl-print .stepnav li, #ozpl-layer .stepnav li {flex: none;} #ozpl .stepnav li:has([aria-current="step"]), #ozpl-print .stepnav li:has([aria-current="step"]), #ozpl-layer .stepnav li:has([aria-current="step"]) {flex: 1;} #ozpl .stepnav button, #ozpl-print .stepnav button, #ozpl-layer .stepnav button {padding: 8px 6px; gap: 8px;} #ozpl .stepnav button:not([aria-current="step"]) .stepnav__t, #ozpl-print .stepnav button:not([aria-current="step"]) .stepnav__t, #ozpl-layer .stepnav button:not([aria-current="step"]) .stepnav__t {display: none;} #ozpl .two, #ozpl-print .two, #ozpl-layer .two, #ozpl .dcards, #ozpl-print .dcards, #ozpl-layer .dcards, #ozpl .ccards, #ozpl-print .ccards, #ozpl-layer .ccards {grid-template-columns: 1fr;} #ozpl .check--pad, #ozpl-print .check--pad, #ozpl-layer .check--pad {margin-top: 0;} #ozpl .catnav, #ozpl-print .catnav, #ozpl-layer .catnav {flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x mandatory;} #ozpl .catnav button, #ozpl-print .catnav button, #ozpl-layer .catnav button {flex: none; white-space: nowrap; scroll-snap-align: start;} #ozpl .catpanel, #ozpl-print .catpanel, #ozpl-layer .catpanel {padding: 4px 16px 16px;} #ozpl .gtable tr, #ozpl-print .gtable tr, #ozpl-layer .gtable tr {grid-template-columns: 1fr; grid-template-areas: "type" "spec" "chips"; row-gap: 2px;} #ozpl .gtable td:last-child, #ozpl-print .gtable td:last-child, #ozpl-layer .gtable td:last-child {margin-top: 10px;} #ozpl .chip, #ozpl-print .chip, #ozpl-layer .chip {min-height: 44px;} #ozpl .pitem, #ozpl-print .pitem, #ozpl-layer .pitem {padding: 18px 14px;} #ozpl .ptiles, #ozpl-print .ptiles, #ozpl-layer .ptiles {grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));} #ozpl .ptile__img, #ozpl-print .ptile__img, #ozpl-layer .ptile__img {height: 52px;} #ozpl .qrow, #ozpl-print .qrow, #ozpl-layer .qrow {grid-template-columns: 44px minmax(0, 1fr); padding: 12px;} #ozpl .qrow__img, #ozpl-print .qrow__img, #ozpl-layer .qrow__img {width: 44px; height: 44px; grid-row: span 4; align-self: start;} #ozpl .qrow__in, #ozpl-print .qrow__in, #ozpl-layer .qrow__in, #ozpl .qrow__o, #ozpl-print .qrow__o, #ozpl-layer .qrow__o, #ozpl .qrow__fill, #ozpl-print .qrow__fill, #ozpl-layer .qrow__fill {grid-column: 2;} #ozpl .rv div, #ozpl-print .rv div, #ozpl-layer .rv div {grid-template-columns: 1fr; gap: 0;} #ozpl .review, #ozpl-print .review, #ozpl-layer .review {padding: 4px 16px 16px;} #ozpl .stepfoot .btn, #ozpl-print .stepfoot .btn, #ozpl-layer .stepfoot .btn {flex: 1;} #ozpl .ok__ref, #ozpl-print .ok__ref, #ozpl-layer .ok__ref {font-size: 32px;} } @media (prefers-reduced-motion: reduce) { #ozpl *, #ozpl-print *, #ozpl-layer * {transition: none !important; scroll-behavior: auto !important;} } @media print { @page { margin: 16mm; } #ozpl, #ozpl-print, #ozpl-layer {background: #fff; font-size: 11pt;} body > *:not(#ozpl-print) {display: none !important;} #ozpl .printcopy, #ozpl-print .printcopy, #ozpl-layer .printcopy {display: block; color: #000;} #ozpl .printcopy header, #ozpl-print .printcopy header, #ozpl-layer .printcopy header {display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 12px; border-bottom: 1px solid #000;} #ozpl .printcopy header img, #ozpl-print .printcopy header img, #ozpl-layer .printcopy header img {width: 160px; height: auto;} #ozpl .printcopy header p, #ozpl-print .printcopy header p, #ozpl-layer .printcopy header p {text-align: right;} #ozpl .printcopy h1, #ozpl-print .printcopy h1, #ozpl-layer .printcopy h1 {font-size: 22pt; margin: 18px 0 6px; color: #000;} #ozpl .printcopy .review, #ozpl-print .printcopy .review, #ozpl-layer .printcopy .review {padding: 0;} #ozpl .printcopy footer, #ozpl-print .printcopy footer, #ozpl-layer .printcopy footer {margin-top: 24px; padding-top: 8px; border-top: 1px solid #999; font-size: 9pt; color: #444;} #ozpl .rvh .linkbtn, #ozpl-print .rvh .linkbtn, #ozpl-layer .rvh .linkbtn {display: none;} #ozpl .rvt tr, #ozpl-print .rvt tr, #ozpl-layer .rvt tr, #ozpl .rv div, #ozpl-print .rv div, #ozpl-layer .rv div {break-inside: avoid;} } #ozpl, #ozpl-print, #ozpl-layer {--check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 8.4l2.9 2.9 5.9-6.6' fill='none' stroke='white' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --ctl: #c3d0d1; --lift: 0 1px 2px rgba(4, 42, 45, .06), 0 6px 14px -8px rgba(4, 42, 45, .28); --ring: 0 0 0 4px var(--teal-wash); --ease: cubic-bezier(.2, .7, .3, 1);} #ozpl .btn, #ozpl-print .btn, #ozpl-layer .btn {min-height: 50px; padding: 0 26px; border-radius: 12px; letter-spacing: .005em; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 2px rgba(4, 42, 45, .3), 0 8px 18px -10px rgba(4, 42, 45, .6); transition: background .15s var(--ease), box-shadow .15s var(--ease), transform .1s var(--ease), border-color .15s;} #ozpl .btn:hover, #ozpl-print .btn:hover, #ozpl-layer .btn:hover {background: #0c4246; border-color: #0c4246; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 2px 4px rgba(4, 42, 45, .25), 0 12px 22px -10px rgba(4, 42, 45, .6);} #ozpl .btn:active, #ozpl-print .btn:active, #ozpl-layer .btn:active {transform: translateY(0); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .25);} #ozpl .btn:disabled, #ozpl-print .btn:disabled, #ozpl-layer .btn:disabled {opacity: .5; cursor: not-allowed; transform: none; box-shadow: none;} #ozpl .btn--lg, #ozpl-print .btn--lg, #ozpl-layer .btn--lg {min-height: 58px;} #ozpl .btn--ghost, #ozpl-print .btn--ghost, #ozpl-layer .btn--ghost {background: var(--surface); color: var(--deep); border: 1.5px solid var(--ctl); box-shadow: 0 1px 2px rgba(4, 42, 45, .06);} #ozpl .btn--ghost:hover, #ozpl-print .btn--ghost:hover, #ozpl-layer .btn--ghost:hover {background: var(--surface); border-color: var(--deep); color: var(--deep); box-shadow: var(--lift);} #ozpl .btn--ghost:active, #ozpl-print .btn--ghost:active, #ozpl-layer .btn--ghost:active {background: var(--tint); box-shadow: none;} #ozpl .btn--sm, #ozpl-print .btn--sm, #ozpl-layer .btn--sm {min-height: 40px; border-radius: 10px;} #ozpl .basketbar .btn, #ozpl-print .basketbar .btn, #ozpl-layer .basketbar .btn {box-shadow: none;} #ozpl .chip[aria-pressed="true"]::before, #ozpl-print .chip[aria-pressed="true"]::before, #ozpl-layer .chip[aria-pressed="true"]::before, #ozpl .ptile[aria-pressed="true"]::after, #ozpl-print .ptile[aria-pressed="true"]::after, #ozpl-layer .ptile[aria-pressed="true"]::after, #ozpl .rcard.is-on::after, #ozpl-print .rcard.is-on::after, #ozpl-layer .rcard.is-on::after, #ozpl .rrow:has(input:checked)::after, #ozpl-print .rrow:has(input:checked)::after, #ozpl-layer .rrow:has(input:checked)::after, #ozpl .fill[aria-pressed="true"]::before, #ozpl-print .fill[aria-pressed="true"]::before, #ozpl-layer .fill[aria-pressed="true"]::before, #ozpl .advise[aria-pressed="true"]::before, #ozpl-print .advise[aria-pressed="true"]::before, #ozpl-layer .advise[aria-pressed="true"]::before {content: ''; border: 0; border-radius: 50%; background: var(--teal) var(--check) center / 62% no-repeat; transform: none;} #ozpl .chip, #ozpl-print .chip, #ozpl-layer .chip {position: relative; background: var(--surface); border: 1.5px solid var(--ctl); border-radius: 9px; min-height: 42px; padding: 0 14px; transition: border-color .12s, background .12s, box-shadow .15s var(--ease), transform .1s var(--ease);} #ozpl .chip:hover, #ozpl-print .chip:hover, #ozpl-layer .chip:hover {border-color: var(--deep); background: var(--surface); transform: translateY(-1px); box-shadow: var(--lift);} #ozpl .chip:active, #ozpl-print .chip:active, #ozpl-layer .chip:active {transform: translateY(0) scale(.97); box-shadow: none;} #ozpl .chip[aria-pressed="true"], #ozpl-print .chip[aria-pressed="true"], #ozpl-layer .chip[aria-pressed="true"] {background: var(--deep); border-color: var(--deep); color: #fff; padding-left: 36px; box-shadow: 0 6px 14px -8px rgba(4, 42, 45, .7);} #ozpl .chip[aria-pressed="true"]::before, #ozpl-print .chip[aria-pressed="true"]::before, #ozpl-layer .chip[aria-pressed="true"]::before {position: absolute; left: 9px; top: 50%; width: 20px; height: 20px; margin-top: -10px;} #ozpl .chip[aria-pressed="true"]:hover, #ozpl-print .chip[aria-pressed="true"]:hover, #ozpl-layer .chip[aria-pressed="true"]:hover {background: #0c4246;} #ozpl .catnav button, #ozpl-print .catnav button, #ozpl-layer .catnav button {background: var(--surface); border: 1.5px solid transparent; border-radius: 10px; min-height: 42px; padding: 8px 14px; box-shadow: 0 1px 2px rgba(4, 42, 45, .06); transition: border-color .12s, box-shadow .15s var(--ease), transform .1s var(--ease);} #ozpl .catnav button:hover, #ozpl-print .catnav button:hover, #ozpl-layer .catnav button:hover {border-color: var(--ctl); transform: translateY(-1px); box-shadow: var(--lift);} #ozpl .catnav button:active, #ozpl-print .catnav button:active, #ozpl-layer .catnav button:active {transform: none;} #ozpl .catnav button[aria-selected="true"], #ozpl-print .catnav button[aria-selected="true"], #ozpl-layer .catnav button[aria-selected="true"] {background: var(--deep); border-color: var(--deep); color: #fff; box-shadow: 0 6px 14px -8px rgba(4, 42, 45, .7);} #ozpl .catnav button[aria-selected="true"] .catnav__n, #ozpl-print .catnav button[aria-selected="true"] .catnav__n, #ozpl-layer .catnav button[aria-selected="true"] .catnav__n {background: #fff; color: var(--deep);} #ozpl .ptile, #ozpl-print .ptile, #ozpl-layer .ptile {position: relative; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); padding: 12px 6px 10px; transition: border-color .12s, box-shadow .15s var(--ease), transform .12s var(--ease);} #ozpl .ptile:hover, #ozpl-print .ptile:hover, #ozpl-layer .ptile:hover {border-color: var(--ctl); transform: translateY(-2px); box-shadow: var(--lift);} #ozpl .ptile:active, #ozpl-print .ptile:active, #ozpl-layer .ptile:active {transform: none; box-shadow: none;} #ozpl .ptile__img, #ozpl-print .ptile__img, #ozpl-layer .ptile__img {transition: transform .2s var(--ease);} #ozpl .ptile:hover .ptile__img, #ozpl-print .ptile:hover .ptile__img, #ozpl-layer .ptile:hover .ptile__img {transform: scale(1.04);} #ozpl .ptile[aria-pressed="true"], #ozpl-print .ptile[aria-pressed="true"], #ozpl-layer .ptile[aria-pressed="true"] {border: 2px solid var(--deep); background: var(--surface); box-shadow: var(--ring); padding: 11.5px 5.5px 9.5px; color: var(--deep);} #ozpl .ptile[aria-pressed="true"] .ptile__img, #ozpl-print .ptile[aria-pressed="true"] .ptile__img, #ozpl-layer .ptile[aria-pressed="true"] .ptile__img {mix-blend-mode: normal;} #ozpl .ptile[aria-pressed="true"]::after, #ozpl-print .ptile[aria-pressed="true"]::after, #ozpl-layer .ptile[aria-pressed="true"]::after {position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; box-shadow: 0 0 0 3px var(--surface);} #ozpl .rcard, #ozpl-print .rcard, #ozpl-layer .rcard {border: 1.5px solid var(--line); box-shadow: 0 1px 2px rgba(4, 42, 45, .05); transition: border-color .12s, box-shadow .15s var(--ease), transform .12s var(--ease);} #ozpl .rcard:hover, #ozpl-print .rcard:hover, #ozpl-layer .rcard:hover {border-color: var(--ctl); transform: translateY(-1px); box-shadow: var(--lift);} #ozpl .rcard.is-on, #ozpl-print .rcard.is-on, #ozpl-layer .rcard.is-on {border: 2px solid var(--deep); box-shadow: var(--ring); padding: 19.5px 19.5px 17.5px; transform: none;} #ozpl .rcard::after, #ozpl-print .rcard::after, #ozpl-layer .rcard::after {width: 22px; height: 22px; top: 19px; right: 17px; border: 2px solid var(--ctl);} #ozpl .rcard.is-on::after, #ozpl-print .rcard.is-on::after, #ozpl-layer .rcard.is-on::after {width: 24px; height: 24px; top: 18px; right: 16px;} #ozpl .rrow, #ozpl-print .rrow, #ozpl-layer .rrow {position: relative; padding: 11px 44px 11px 14px; margin-bottom: 8px; min-height: 48px; background: var(--surface); border: 1.5px solid var(--line); border-radius: 10px; font-weight: 500; transition: border-color .12s, box-shadow .15s var(--ease);} #ozpl .rrow:hover, #ozpl-print .rrow:hover, #ozpl-layer .rrow:hover {border-color: var(--ctl); box-shadow: var(--lift);} #ozpl .rrow input, #ozpl-print .rrow input, #ozpl-layer .rrow input {position: absolute; opacity: 0; pointer-events: none;} #ozpl .rrow::after, #ozpl-print .rrow::after, #ozpl-layer .rrow::after {content: ''; position: absolute; right: 14px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border: 2px solid var(--ctl); border-radius: 50%;} #ozpl .rrow:has(input:checked), #ozpl-print .rrow:has(input:checked), #ozpl-layer .rrow:has(input:checked) {border: 2px solid var(--deep); box-shadow: var(--ring); padding: 10.5px 43.5px 10.5px 13.5px; color: var(--deep); font-weight: 650;} #ozpl .rrow:has(input:checked)::after, #ozpl-print .rrow:has(input:checked)::after, #ozpl-layer .rrow:has(input:checked)::after {width: 22px; height: 22px; margin-top: -11px; right: 13px;} #ozpl .rrow:has(input:focus-visible), #ozpl-print .rrow:has(input:focus-visible), #ozpl-layer .rrow:has(input:focus-visible) {outline: 3px solid var(--teal); outline-offset: 2px;} #ozpl .fill, #ozpl-print .fill, #ozpl-layer .fill {position: relative; border: 1.5px solid var(--ctl); border-radius: 9px; min-height: 38px; padding: 0 13px; background: var(--surface); transition: border-color .12s, box-shadow .15s var(--ease), transform .1s var(--ease);} #ozpl .fill:hover, #ozpl-print .fill:hover, #ozpl-layer .fill:hover {border-color: var(--deep); transform: translateY(-1px); box-shadow: var(--lift);} #ozpl .fill:active, #ozpl-print .fill:active, #ozpl-layer .fill:active {transform: scale(.97); box-shadow: none;} #ozpl .fill[aria-pressed="true"], #ozpl-print .fill[aria-pressed="true"], #ozpl-layer .fill[aria-pressed="true"] {background: var(--deep); border-color: var(--deep); color: #fff; padding-left: 34px;} #ozpl .fill[aria-pressed="true"]::before, #ozpl-print .fill[aria-pressed="true"]::before, #ozpl-layer .fill[aria-pressed="true"]::before {position: absolute; left: 9px; top: 50%; width: 18px; height: 18px; margin-top: -9px;} #ozpl .advise, #ozpl-print .advise, #ozpl-layer .advise {position: relative; border: 1.5px dashed var(--ctl); border-radius: 12px; background: var(--surface); min-height: 52px; padding: 14px 18px; transition: border-color .12s, box-shadow .15s var(--ease);} #ozpl .advise:hover, #ozpl-print .advise:hover, #ozpl-layer .advise:hover {border-color: var(--deep); border-style: solid; box-shadow: var(--lift);} #ozpl .advise[aria-pressed="true"], #ozpl-print .advise[aria-pressed="true"], #ozpl-layer .advise[aria-pressed="true"] {border: 2px solid var(--teal-ink); background: var(--teal-wash); color: var(--deep); padding-left: 50px; box-shadow: none;} #ozpl .advise[aria-pressed="true"]::before, #ozpl-print .advise[aria-pressed="true"]::before, #ozpl-layer .advise[aria-pressed="true"]::before {position: absolute; left: 16px; top: 50%; width: 24px; height: 24px; margin-top: -12px;} #ozpl .item__rm, #ozpl-print .item__rm, #ozpl-layer .item__rm, #ozpl .pitem__rm, #ozpl-print .pitem__rm, #ozpl-layer .pitem__rm {display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 10px; min-height: 34px; border-radius: 8px; text-decoration: none; font-size: 13px; font-weight: 600; color: var(--muted); transition: background .12s, color .12s;} #ozpl .item__rm::before, #ozpl-print .item__rm::before, #ozpl-layer .item__rm::before, #ozpl .pitem__rm::before, #ozpl-print .pitem__rm::before, #ozpl-layer .pitem__rm::before {content: '\00D7'; font-size: 18px; line-height: 1; font-weight: 500;} #ozpl .item__rm:hover, #ozpl-print .item__rm:hover, #ozpl-layer .item__rm:hover, #ozpl .pitem__rm:hover, #ozpl-print .pitem__rm:hover, #ozpl-layer .pitem__rm:hover {background: #fbe9e7; color: var(--red);} #ozpl .stepnav button.done .stepnav__n, #ozpl-print .stepnav button.done .stepnav__n, #ozpl-layer .stepnav button.done .stepnav__n {background: var(--teal) var(--check) center / 62% no-repeat; border-color: var(--teal); color: transparent;} #ozpl .stepnav button.done .stepnav__n::after, #ozpl-print .stepnav button.done .stepnav__n::after, #ozpl-layer .stepnav button.done .stepnav__n::after {content: none;} #ozpl .stepnav button[aria-current="step"], #ozpl-print .stepnav button[aria-current="step"], #ozpl-layer .stepnav button[aria-current="step"] {box-shadow: 0 1px 2px rgba(4, 42, 45, .06);} #ozpl .lang button, #ozpl-print .lang button, #ozpl-layer .lang button {transition: background .12s, color .12s;} #ozpl .chip:focus-visible, #ozpl-print .chip:focus-visible, #ozpl-layer .chip:focus-visible, #ozpl .fill:focus-visible, #ozpl-print .fill:focus-visible, #ozpl-layer .fill:focus-visible, #ozpl .ptile:focus-visible, #ozpl-print .ptile:focus-visible, #ozpl-layer .ptile:focus-visible, #ozpl .catnav button:focus-visible, #ozpl-print .catnav button:focus-visible, #ozpl-layer .catnav button:focus-visible, #ozpl .advise:focus-visible, #ozpl-print .advise:focus-visible, #ozpl-layer .advise:focus-visible, #ozpl .btn:focus-visible, #ozpl-print .btn:focus-visible, #ozpl-layer .btn:focus-visible {outline: 3px solid var(--teal); outline-offset: 2px;} @media (max-width: 860px) { #ozpl .chip, #ozpl-print .chip, #ozpl-layer .chip {min-height: 44px;} #ozpl .ptile[aria-pressed="true"]::after, #ozpl-print .ptile[aria-pressed="true"]::after, #ozpl-layer .ptile[aria-pressed="true"]::after {top: -6px; right: -6px; width: 22px; height: 22px;} } @media (prefers-reduced-motion: reduce) { #ozpl .btn:hover, #ozpl-print .btn:hover, #ozpl-layer .btn:hover, #ozpl .chip:hover, #ozpl-print .chip:hover, #ozpl-layer .chip:hover, #ozpl .catnav button:hover, #ozpl-print .catnav button:hover, #ozpl-layer .catnav button:hover, #ozpl .ptile:hover, #ozpl-print .ptile:hover, #ozpl-layer .ptile:hover, #ozpl .rcard:hover, #ozpl-print .rcard:hover, #ozpl-layer .rcard:hover, #ozpl .fill:hover, #ozpl-print .fill:hover, #ozpl-layer .fill:hover {transform: none;} #ozpl .ptile:hover .ptile__img, #ozpl-print .ptile:hover .ptile__img, #ozpl-layer .ptile:hover .ptile__img {transform: none;} } #ozpl .qrow__pg, #ozpl-print .qrow__pg, #ozpl-layer .qrow__pg {display: block; margin-top: 3px; font-size: 12px; font-weight: 600;} #ozpl .qrow__pg .pg-ok, #ozpl-print .qrow__pg .pg-ok, #ozpl-layer .qrow__pg .pg-ok {color: var(--teal-ink);} #ozpl .qrow__pg .pg-low, #ozpl-print .qrow__pg .pg-low, #ozpl-layer .qrow__pg .pg-low {color: var(--amber-ink);} #ozpl .rcard__link, #ozpl-print .rcard__link, #ozpl-layer .rcard__link {display: block; width: auto; margin: auto -8px -6px; padding: 10px 12px; border: 0; border-radius: var(--r-s); background: var(--tint); text-align: left; font: inherit; font-weight: 700; font-size: 13.5px; color: var(--teal-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; transition: background .12s, color .12s;} #ozpl .rcard__link:hover, #ozpl-print .rcard__link:hover, #ozpl-layer .rcard__link:hover {background: var(--teal-wash); color: var(--deep);} #ozpl .rcard__link:focus-visible, #ozpl-print .rcard__link:focus-visible, #ozpl-layer .rcard__link:focus-visible {outline: 3px solid var(--teal); outline-offset: 2px;} #ozpl .rpanel, #ozpl-print .rpanel, #ozpl-layer .rpanel {margin-top: 14px; background: var(--surface); border-radius: var(--r-l); padding: 22px 24px 20px; border: 2px solid var(--deep); box-shadow: 0 0 0 4px var(--teal-wash);} #ozpl .rpanel__head h3, #ozpl-print .rpanel__head h3, #ozpl-layer .rpanel__head h3 {font-size: 19px; font-stretch: 105%; font-weight: 800;} #ozpl .rpanel__head p, #ozpl-print .rpanel__head p, #ozpl-layer .rpanel__head p {margin-top: 4px; color: var(--muted); font-size: 14.5px; max-width: 60ch;} #ozpl .rp-bottles, #ozpl-print .rp-bottles, #ozpl-layer .rp-bottles {list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; align-items: end;} #ozpl .rp-bottles li, #ozpl-print .rp-bottles li, #ozpl-layer .rp-bottles li {display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 10px 6px 12px; background: var(--tint); border-radius: var(--r-m);} #ozpl .rp-bottles img, #ozpl-print .rp-bottles img, #ozpl-layer .rp-bottles img {height: calc(var(--h) * .36px); width: auto; mix-blend-mode: multiply; margin-bottom: 6px;} #ozpl .rp-bottles strong, #ozpl-print .rp-bottles strong, #ozpl-layer .rp-bottles strong {font-family: var(--display); font-size: 15px; font-weight: 800; color: var(--deep);} #ozpl .rp-bottles span, #ozpl-print .rp-bottles span, #ozpl-layer .rp-bottles span {font-size: 12.5px; font-weight: 600; color: var(--teal-ink);} #ozpl .rpanel--own, #ozpl-print .rpanel--own, #ozpl-layer .rpanel--own {display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 24px; align-items: center;} #ozpl .rp-draw, #ozpl-print .rp-draw, #ozpl-layer .rp-draw {color: var(--deep); background: var(--tint); border-radius: var(--r-m); padding: 8px;} #ozpl .bp, #ozpl-print .bp, #ozpl-layer .bp {width: 100%; height: auto; display: block;} #ozpl .rp-mins, #ozpl-print .rp-mins, #ozpl-layer .rp-mins {list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px;} #ozpl .rp-mins li, #ozpl-print .rp-mins li, #ozpl-layer .rp-mins li {display: grid; gap: 1px; padding: 8px 12px; background: var(--tint); border-radius: var(--r-s); min-width: 96px;} #ozpl .rp-mins strong, #ozpl-print .rp-mins strong, #ozpl-layer .rp-mins strong {font-family: var(--display); font-size: 16px; font-weight: 800; color: var(--deep);} #ozpl .rp-mins span, #ozpl-print .rp-mins span, #ozpl-layer .rp-mins span {font-size: 12.5px; font-weight: 600; color: var(--muted);} @media (max-width: 860px) { #ozpl .rpanel, #ozpl-print .rpanel, #ozpl-layer .rpanel {padding: 18px 16px;} #ozpl .rp-bottles, #ozpl-print .rp-bottles, #ozpl-layer .rp-bottles {grid-template-columns: repeat(3, minmax(0, 1fr));} #ozpl .rpanel--own, #ozpl-print .rpanel--own, #ozpl-layer .rpanel--own {grid-template-columns: 1fr;} #ozpl .rp-draw, #ozpl-print .rp-draw, #ozpl-layer .rp-draw {max-width: 180px;} } #ozpl .btiles, #ozpl-print .btiles, #ozpl-layer .btiles {display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; margin-top: 6px;} #ozpl .btile, #ozpl-print .btile, #ozpl-layer .btile {position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; font: inherit; color: var(--deep); background: var(--surface); border: 1.5px solid var(--line); border-radius: 12px; padding: 14px 8px 14px; cursor: pointer; transition: border-color .12s, box-shadow .15s var(--ease), transform .12s var(--ease);} #ozpl .btile:hover, #ozpl-print .btile:hover, #ozpl-layer .btile:hover {border-color: var(--ctl); transform: translateY(-2px); box-shadow: var(--lift);} #ozpl .btile:active, #ozpl-print .btile:active, #ozpl-layer .btile:active {transform: none; box-shadow: none;} #ozpl .btile[aria-pressed="true"], #ozpl-print .btile[aria-pressed="true"], #ozpl-layer .btile[aria-pressed="true"] {border: 2px solid var(--deep); box-shadow: var(--ring); padding: 13.5px 7.5px 13.5px;} #ozpl .btile[aria-pressed="true"]::after, #ozpl-print .btile[aria-pressed="true"]::after, #ozpl-layer .btile[aria-pressed="true"]::after {content: ''; position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%; background: var(--teal) var(--check) center / 62% no-repeat; box-shadow: 0 0 0 3px var(--surface);} #ozpl .btile:focus-visible, #ozpl-print .btile:focus-visible, #ozpl-layer .btile:focus-visible {outline: 3px solid var(--teal); outline-offset: 2px;} #ozpl .btile__box, #ozpl-print .btile__box, #ozpl-layer .btile__box {height: 182px; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 10px;} #ozpl .btile__fig, #ozpl-print .btile__fig, #ozpl-layer .btile__fig {position: relative; display: block; height: calc(clamp(210, var(--h), 440) * .4px);} #ozpl .btile__fig img, #ozpl-print .btile__fig img, #ozpl-layer .btile__fig img {height: 100%; width: auto; display: block;} #ozpl .btile__n, #ozpl-print .btile__n, #ozpl-layer .btile__n {font-family: var(--display); font-size: 17px; font-weight: 800;} #ozpl .btile__u, #ozpl-print .btile__u, #ozpl-layer .btile__u {font-size: 13px; line-height: 1.35; color: var(--muted); min-height: 2.7em;} #ozpl .btile__m, #ozpl-print .btile__m, #ozpl-layer .btile__m {font-size: 13px; font-weight: 700; color: var(--teal-ink); margin-top: 6px;} #ozpl .btile__c, #ozpl-print .btile__c, #ozpl-layer .btile__c {font-size: 11.5px; color: var(--muted);} #ozpl .tips, #ozpl-print .tips, #ozpl-layer .tips {margin-top: 16px; display: grid; gap: 6px; font-size: 14px; color: var(--muted); max-width: 74ch;} #ozpl .tips strong, #ozpl-print .tips strong, #ozpl-layer .tips strong {color: var(--deep);} #ozpl .starters, #ozpl-print .starters, #ozpl-layer .starters {display: grid; gap: 10px;} #ozpl .starter, #ozpl-print .starter, #ozpl-layer .starter {display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 18px; align-items: center; background: var(--surface); border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 18px 12px 12px; transition: border-color .12s, box-shadow .15s var(--ease);} #ozpl .starter.is-on, #ozpl-print .starter.is-on, #ozpl-layer .starter.is-on {border: 2px solid var(--deep); box-shadow: var(--ring); padding: 11.5px 17.5px 11.5px 11.5px;} #ozpl .starter__fig, #ozpl-print .starter__fig, #ozpl-layer .starter__fig {display: flex; align-items: flex-end; justify-content: center; overflow: hidden; height: 118px; background: var(--tint); border-radius: 9px; padding: 8px 6px 6px;} #ozpl .starter__b, #ozpl-print .starter__b, #ozpl-layer .starter__b {position: relative; display: block; height: calc(min(var(--h), 340) * .3px); flex: none;} #ozpl .starter__b + .starter__b, #ozpl-print .starter__b + .starter__b, #ozpl-layer .starter__b + .starter__b {margin-left: -22px;} #ozpl .starter__b img, #ozpl-print .starter__b img, #ozpl-layer .starter__b img {height: 100%; width: auto; display: block; mix-blend-mode: multiply;} #ozpl .starter h4, #ozpl-print .starter h4, #ozpl-layer .starter h4 {font-family: var(--display); font-size: 17px; font-weight: 800; color: var(--deep);} #ozpl .starter p, #ozpl-print .starter p, #ozpl-layer .starter p {font-size: 13.5px; color: var(--muted); margin: 2px 0 10px;} #ozpl .starter .chips, #ozpl-print .starter .chips, #ozpl-layer .starter .chips {margin-bottom: 10px;} #ozpl .chip small, #ozpl-print .chip small, #ozpl-layer .chip small {font-size: 11.5px; font-weight: 600; font-stretch: 100%; opacity: .72; margin-left: 3px;} #ozpl #adv-team, #ozpl-print #adv-team, #ozpl-layer #adv-team {margin-top: 10px;} #ozpl .gx, #ozpl-print .gx, #ozpl-layer .gx {margin-top: 18px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 28px; align-items: center; background: var(--tint); border-radius: 12px; padding: 18px 22px;} #ozpl .gx h4, #ozpl-print .gx h4, #ozpl-layer .gx h4 {grid-column: 1 / -1; font-family: var(--display); font-size: 15px; font-weight: 800; color: var(--deep);} #ozpl .gx__g, #ozpl-print .gx__g, #ozpl-layer .gx__g {font-family: var(--display); font-size: 46px; font-weight: 900; font-stretch: 78%; line-height: 1; color: var(--deep); letter-spacing: -.01em;} #ozpl .gx__g span:first-child, #ozpl-print .gx__g span:first-child, #ozpl-layer .gx__g span:first-child {color: var(--teal-ink);} #ozpl .gx dl, #ozpl-print .gx dl, #ozpl-layer .gx dl {margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;} #ozpl .gx dt, #ozpl-print .gx dt, #ozpl-layer .gx dt {font-family: var(--display); font-weight: 800; font-size: 14px; color: var(--deep);} #ozpl .gx dd, #ozpl-print .gx dd, #ozpl-layer .gx dd {margin: 2px 0 0; font-size: 13px; line-height: 1.4; color: var(--muted);} #ozpl .fullcat, #ozpl-print .fullcat, #ozpl-layer .fullcat {margin-top: 22px;} #ozpl .fullcat > summary, #ozpl-print .fullcat > summary, #ozpl-layer .fullcat > summary {list-style: none; position: relative; cursor: pointer; display: grid; gap: 3px; padding: 18px 64px 18px 22px; background: var(--deep); color: #fff; border-radius: 12px; box-shadow: var(--lift); transition: background .12s, transform .12s var(--ease), box-shadow .15s var(--ease);} #ozpl .fullcat > summary::-webkit-details-marker, #ozpl-print .fullcat > summary::-webkit-details-marker, #ozpl-layer .fullcat > summary::-webkit-details-marker {display: none;} #ozpl .fullcat > summary:hover, #ozpl-print .fullcat > summary:hover, #ozpl-layer .fullcat > summary:hover {background: #0c4246; transform: translateY(-1px);} #ozpl .fullcat > summary:focus-visible, #ozpl-print .fullcat > summary:focus-visible, #ozpl-layer .fullcat > summary:focus-visible {outline: 3px solid var(--teal); outline-offset: 3px;} #ozpl .fullcat__t, #ozpl-print .fullcat__t, #ozpl-layer .fullcat__t {font-family: var(--display); font-size: 18px; font-weight: 800;} #ozpl .fullcat__s, #ozpl-print .fullcat__s, #ozpl-layer .fullcat__s {font-size: 13.5px; color: #cfe3e4;} #ozpl .fullcat__i, #ozpl-print .fullcat__i, #ozpl-layer .fullcat__i {position: absolute; right: 18px; top: 50%; width: 32px; height: 32px; margin-top: -16px; border-radius: 50%; background: var(--teal);} #ozpl .fullcat__i::before, #ozpl-print .fullcat__i::before, #ozpl-layer .fullcat__i::before {content: ''; position: absolute; left: 11px; top: 9px; width: 9px; height: 9px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); transition: transform .2s var(--ease);} #ozpl .fullcat[open] > summary, #ozpl-print .fullcat[open] > summary, #ozpl-layer .fullcat[open] > summary {border-radius: 12px 12px 0 0;} #ozpl .fullcat[open] .fullcat__i::before, #ozpl-print .fullcat[open] .fullcat__i::before, #ozpl-layer .fullcat[open] .fullcat__i::before {top: 13px; transform: rotate(-135deg);} #ozpl .fullcat__b, #ozpl-print .fullcat__b, #ozpl-layer .fullcat__b {border: 2px solid var(--deep); border-top: 0; border-radius: 0 0 12px 12px; padding: 4px 16px 18px; background: var(--surface);} @media (prefers-reduced-motion: reduce) { #ozpl .fullcat > summary, #ozpl-print .fullcat > summary, #ozpl-layer .fullcat > summary, #ozpl .fullcat__i::before, #ozpl-print .fullcat__i::before, #ozpl-layer .fullcat__i::before {transition: none;} #ozpl .fullcat > summary:hover, #ozpl-print .fullcat > summary:hover, #ozpl-layer .fullcat > summary:hover {transform: none;} } @media (max-width: 860px) { #ozpl .btiles, #ozpl-print .btiles, #ozpl-layer .btiles {grid-template-columns: repeat(2, minmax(0, 1fr));} #ozpl .btile__box, #ozpl-print .btile__box, #ozpl-layer .btile__box {height: 156px;} #ozpl .btile__fig, #ozpl-print .btile__fig, #ozpl-layer .btile__fig {height: calc(clamp(210, var(--h), 440) * .34px);} #ozpl .starter, #ozpl-print .starter, #ozpl-layer .starter {grid-template-columns: 1fr; padding: 12px;} #ozpl .starter.is-on, #ozpl-print .starter.is-on, #ozpl-layer .starter.is-on {padding: 11.5px;} #ozpl .gx, #ozpl-print .gx, #ozpl-layer .gx {grid-template-columns: 1fr;} #ozpl .gx dl, #ozpl-print .gx dl, #ozpl-layer .gx dl {grid-template-columns: 1fr; gap: 10px;} } #ozpl .bgroup, #ozpl-print .bgroup, #ozpl-layer .bgroup {font-family: var(--display); font-size: 16px; font-weight: 800; color: var(--deep); margin: 26px 0 8px;} #ozpl .bgroup:first-of-type, #ozpl-print .bgroup:first-of-type, #ozpl-layer .bgroup:first-of-type {margin-top: 8px;} #ozpl .gmt, #ozpl-print .gmt, #ozpl-layer .gmt {width: 100%; margin-top: 16px; border-collapse: collapse; font-size: 14px;} #ozpl .gmt th, #ozpl-print .gmt th, #ozpl-layer .gmt th, #ozpl .gmt td, #ozpl-print .gmt td, #ozpl-layer .gmt td {text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-top: 1px solid var(--line);} #ozpl .gmt thead th, #ozpl-print .gmt thead th, #ozpl-layer .gmt thead th {border-top: 0; font-family: var(--display); font-size: 15px; font-weight: 800; color: var(--deep);} #ozpl .gmt thead td, #ozpl-print .gmt thead td, #ozpl-layer .gmt thead td {border-top: 0;} #ozpl .gmt tbody th, #ozpl-print .gmt tbody th, #ozpl-layer .gmt tbody th {font-weight: 600; color: var(--muted); width: 26%;} #ozpl .gmt td, #ozpl-print .gmt td, #ozpl-layer .gmt td {color: var(--deep);} #ozpl .gmt tfoot td, #ozpl-print .gmt tfoot td, #ozpl-layer .gmt tfoot td {border-top: 0; padding-top: 6px;} #ozpl .rough, #ozpl-print .rough, #ozpl-layer .rough {background: var(--tint); border-radius: var(--r-m); padding: 14px 16px; margin-bottom: 16px;} #ozpl .rough .lbl, #ozpl-print .rough .lbl, #ozpl-layer .rough .lbl {display: block; margin-bottom: 2px;} #ozpl .rough__in, #ozpl-print .rough__in, #ozpl-layer .rough__in {display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-weight: 600; color: var(--deep);} #ozpl .rough__in input, #ozpl-print .rough__in input, #ozpl-layer .rough__in input {width: 140px;} @media (max-width: 860px) { #ozpl .gmt, #ozpl-print .gmt, #ozpl-layer .gmt {font-size: 13px;} #ozpl .gmt tbody th, #ozpl-print .gmt tbody th, #ozpl-layer .gmt tbody th {width: 30%;} #ozpl .gmt .btn, #ozpl-print .gmt .btn, #ozpl-layer .gmt .btn {padding-left: 10px; padding-right: 10px;} } #ozpl .unused, #ozpl-print .unused, #ozpl-layer .unused {margin-top: 18px; padding: 12px 16px; border-radius: var(--r-m); background: #fff4e0; color: #6b4300; font-size: 14px; font-weight: 600;} #ozpl .ibot, #ozpl-print .ibot, #ozpl-layer .ibot {grid-column: 1 / -1; margin: 10px 0 4px;} #ozpl .ibot__l, #ozpl-print .ibot__l, #ozpl-layer .ibot__l {font-size: 13px; font-weight: 700; color: var(--deep); margin-bottom: 6px;} #ozpl .chip--b, #ozpl-print .chip--b, #ozpl-layer .chip--b {display: inline-flex; align-items: center; gap: 6px;} #ozpl .chip--b img, #ozpl-print .chip--b img, #ozpl-layer .chip--b img {width: auto; height: 26px; mix-blend-mode: multiply;} #ozpl .chip--b[aria-pressed="true"] img, #ozpl-print .chip--b[aria-pressed="true"] img, #ozpl-layer .chip--b[aria-pressed="true"] img {mix-blend-mode: normal; filter: drop-shadow(0 0 1px #fff);} #ozpl .ibot__none, #ozpl-print .ibot__none, #ozpl-layer .ibot__none {margin-top: 6px; font-size: 13px; color: #6b4300;} #ozpl .ditems, #ozpl-print .ditems, #ozpl-layer .ditems {margin-top: 18px;} #ozpl .ditems__g, #ozpl-print .ditems__g, #ozpl-layer .ditems__g {display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 8px;} #ozpl .ditem, #ozpl-print .ditem, #ozpl-layer .ditem {position: relative; display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 14px 44px 14px 16px; background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-m); cursor: pointer; font: inherit; color: var(--ink); transition: border-color .12s, box-shadow .15s var(--ease);} #ozpl .ditem strong, #ozpl-print .ditem strong, #ozpl-layer .ditem strong {font-family: var(--display); font-size: 16px; font-weight: 750; color: var(--deep);} #ozpl .ditem span, #ozpl-print .ditem span, #ozpl-layer .ditem span {font-size: 13px; color: var(--muted);} #ozpl .ditem::after, #ozpl-print .ditem::after, #ozpl-layer .ditem::after {content: ''; position: absolute; top: 14px; right: 14px; width: 20px; height: 20px; border: 2px solid var(--ctl); border-radius: 5px; background: var(--surface);} #ozpl .ditem:hover, #ozpl-print .ditem:hover, #ozpl-layer .ditem:hover {border-color: var(--ctl); box-shadow: var(--lift);} #ozpl .ditem[aria-pressed="true"], #ozpl-print .ditem[aria-pressed="true"], #ozpl-layer .ditem[aria-pressed="true"] {border: 2px solid var(--deep); padding: 13.5px 43.5px 13.5px 15.5px; box-shadow: var(--ring);} #ozpl .ditem[aria-pressed="true"]::after, #ozpl-print .ditem[aria-pressed="true"]::after, #ozpl-layer .ditem[aria-pressed="true"]::after {background: var(--deep); border-color: var(--deep);} #ozpl .ditem[aria-pressed="true"]::before, #ozpl-print .ditem[aria-pressed="true"]::before, #ozpl-layer .ditem[aria-pressed="true"]::before {content: ''; position: absolute; top: 20px; right: 20px; width: 9px; height: 5px; border: solid #fff; border-width: 0 0 2px 2px; transform: rotate(-45deg); z-index: 1;} #ozpl .ditem:focus-visible, #ozpl-print .ditem:focus-visible, #ozpl-layer .ditem:focus-visible {outline: 3px solid var(--teal); outline-offset: 2px;} #ozpl .tiers, #ozpl-print .tiers, #ozpl-layer .tiers {margin-top: 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--tint);} #ozpl .tiers__h, #ozpl-print .tiers__h, #ozpl-layer .tiers__h {font-size: 14px; font-weight: 700; color: var(--deep);} #ozpl .tiers dl, #ozpl-print .tiers dl, #ozpl-layer .tiers dl {display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px; margin-top: 8px;} #ozpl .tiers dt, #ozpl-print .tiers dt, #ozpl-layer .tiers dt {font-family: var(--display); font-weight: 750; font-size: 14.5px; color: var(--deep);} #ozpl .tiers dd, #ozpl-print .tiers dd, #ozpl-layer .tiers dd {margin: 2px 0 0; font-size: 13.5px; color: var(--muted);} #ozpl .drumnote, #ozpl-print .drumnote, #ozpl-layer .drumnote {margin-top: 14px; padding: 12px 16px; border-radius: var(--r-m); background: #fff4e0; color: #6b4300; font-size: 14px; font-weight: 600;} @media (max-width: 640px) { #ozpl .ditems__g, #ozpl-print .ditems__g, #ozpl-layer .ditems__g, #ozpl .tiers dl, #ozpl-print .tiers dl, #ozpl-layer .tiers dl {grid-template-columns: 1fr;} } #ozpl .hp, #ozpl-print .hp, #ozpl-layer .hp {position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0;} #ozpl .btn[disabled], #ozpl-print .btn[disabled], #ozpl-layer .btn[disabled] {opacity: .65; cursor: progress;} @media (max-width: 600px) { #ozpl .stepfoot .btn, #ozpl-print .stepfoot .btn, #ozpl-layer .stepfoot .btn {min-width: 0; white-space: normal; text-align: center; line-height: 1.25; padding: 10px 14px;} #ozpl .done .stepfoot, #ozpl-print .done .stepfoot, #ozpl-layer .done .stepfoot {flex-direction: column-reverse;} } @media (max-width: 600px) { #ozpl .rvt, #ozpl-print .rvt, #ozpl-layer .rvt, #ozpl .rvt tbody, #ozpl-print .rvt tbody, #ozpl-layer .rvt tbody, #ozpl .rvt tfoot, #ozpl-print .rvt tfoot, #ozpl-layer .rvt tfoot {display: block;} #ozpl .rvt tr, #ozpl-print .rvt tr, #ozpl-layer .rvt tr {display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; padding: 0 0 8px;} #ozpl .rvt tr:has(> td.mono:first-child), #ozpl-print .rvt tr:has(> td.mono:first-child), #ozpl-layer .rvt tr:has(> td.mono:first-child) {border-top: 1px solid var(--line); padding-top: 10px;} #ozpl .rvt td, #ozpl-print .rvt td, #ozpl-layer .rvt td {display: block; border: 0; padding: 0;} #ozpl .rvt td.mono:first-child, #ozpl-print .rvt td.mono:first-child, #ozpl-layer .rvt td.mono:first-child {width: auto;} #ozpl .rvt td:has(> strong), #ozpl-print .rvt td:has(> strong), #ozpl-layer .rvt td:has(> strong) {flex: 1 1 70%; margin-bottom: 4px;} #ozpl .rvt td:not(.num):not(.mono):not(:has(> strong)), #ozpl-print .rvt td:not(.num):not(.mono):not(:has(> strong)), #ozpl-layer .rvt td:not(.num):not(.mono):not(:has(> strong)) {flex: 1 1 auto;} #ozpl .rvt tfoot tr, #ozpl-print .rvt tfoot tr, #ozpl-layer .rvt tfoot tr {justify-content: space-between; border-top: 1px solid var(--line); padding-top: 10px;} #ozpl .rvt tfoot td, #ozpl-print .rvt tfoot td, #ozpl-layer .rvt tfoot td {padding: 0;} #ozpl .rvt tfoot td.num, #ozpl-print .rvt tfoot td.num, #ozpl-layer .rvt tfoot td.num {white-space: normal;} } #ozpl .bk__top, #ozpl-print .bk__top, #ozpl-layer .bk__top, #ozpl .bk-backdrop, #ozpl-print .bk-backdrop, #ozpl-layer .bk-backdrop {display: none;} @media (max-width: 1100px) { #ozpl .app, #ozpl-print .app, #ozpl-layer .app {padding-bottom: 32px;} #ozpl .lineup, #ozpl-print .lineup, #ozpl-layer .lineup {flex-wrap: wrap; padding-bottom: 0;} #ozpl .lineup__cap, #ozpl-print .lineup__cap, #ozpl-layer .lineup__cap {position: static; flex: 0 0 100%; margin-top: 10px; text-align: center; line-height: 1.4;} #ozpl .basket, #ozpl-print .basket, #ozpl-layer .basket {z-index: 2147483001; max-height: 86vh; max-height: 86dvh; padding: 0 12px 16px; overscroll-behavior: contain;} #ozpl .bk-backdrop, #ozpl-print .bk-backdrop, #ozpl-layer .bk-backdrop {display: block; position: fixed; inset: 0; z-index: 2147483000; background: rgba(4, 42, 45, .55); opacity: 0; pointer-events: none; transition: opacity .2s;} body.bk-open #ozpl .bk-backdrop, body.bk-open #ozpl-print .bk-backdrop, body.bk-open #ozpl-layer .bk-backdrop {opacity: 1; pointer-events: auto;} #ozpl .bk__top, #ozpl-print .bk__top, #ozpl-layer .bk__top {display: flex; position: sticky; top: 0; z-index: 3; justify-content: flex-end; align-items: center; margin: 0 -12px; padding: 18px 12px 10px; background: var(--mist);} #ozpl .bk__grab, #ozpl-print .bk__grab, #ozpl-layer .bk__grab {position: absolute; left: 50%; top: 7px; width: 44px; height: 5px; margin-left: -22px; border-radius: 3px; background: #a9babb;} #ozpl .bk__x, #ozpl-print .bk__x, #ozpl-layer .bk__x {display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 18px; border: 1.5px solid var(--deep); border-radius: 999px; background: var(--surface); color: var(--deep); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;} #ozpl .bk__x:focus-visible, #ozpl-print .bk__x:focus-visible, #ozpl-layer .bk__x:focus-visible {outline: 3px solid var(--teal); outline-offset: 2px;} #ozpl .bk__close, #ozpl-print .bk__close, #ozpl-layer .bk__close {display: none;} } @media (prefers-reduced-motion: reduce) { #ozpl .basket, #ozpl-print .basket, #ozpl-layer .basket, #ozpl .bk-backdrop, #ozpl-print .bk-backdrop, #ozpl-layer .bk-backdrop {transition: none;} } #ozpl .stepnav__now, #ozpl-print .stepnav__now, #ozpl-layer .stepnav__now {display: none;} #ozpl .rvbox__s, #ozpl-print .rvbox__s, #ozpl-layer .rvbox__s {list-style: none; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; pointer-events: none;} #ozpl .rvbox__s::-webkit-details-marker, #ozpl-print .rvbox__s::-webkit-details-marker, #ozpl-layer .rvbox__s::-webkit-details-marker {display: none;} #ozpl .rvbox__m, #ozpl-print .rvbox__m, #ozpl-layer .rvbox__m {display: none;} @media (max-width: 1100px) { #ozpl .stepfoot--nav, #ozpl-print .stepfoot--nav, #ozpl-layer .stepfoot--nav {display: none;} #ozpl .app, #ozpl-print .app, #ozpl-layer .app {padding-bottom: 20px;} #ozpl .basketbar, #ozpl-print .basketbar, #ozpl-layer .basketbar {display: block; padding: 8px 12px; padding-bottom: max(8px, env(safe-area-inset-bottom)); box-shadow: 0 -6px 18px rgba(4, 42, 45, .18); transition: transform .22s, visibility .22s;} #ozpl .basketbar:not(.is-live), #ozpl-print .basketbar:not(.is-live), #ozpl-layer .basketbar:not(.is-live) {transform: translateY(110%); visibility: hidden;} #ozpl .dock, #ozpl-print .dock, #ozpl-layer .dock {display: flex; align-items: center; gap: 8px; max-width: 720px; margin: 0 auto;} #ozpl .dock__back, #ozpl-print .dock__back, #ozpl-layer .dock__back {flex: none; width: 46px; height: 46px; display: grid; place-items: center; border: 1.5px solid rgba(255, 255, 255, .35); border-radius: var(--r-m); background: none; color: #fff; cursor: pointer;} #ozpl .dock__sum, #ozpl-print .dock__sum, #ozpl-layer .dock__sum {flex: 1; min-width: 0; min-height: 46px; display: flex; align-items: center; gap: 6px; padding: 0 6px; border: 0; background: none; color: #fff; text-align: left; font: inherit; cursor: pointer; border-radius: var(--r-m);} #ozpl .dock__t, #ozpl-print .dock__t, #ozpl-layer .dock__t {display: grid; min-width: 0; line-height: 1.25;} #ozpl .dock__n, #ozpl-print .dock__n, #ozpl-layer .dock__n {font-size: 14.5px; font-weight: 700;} #ozpl .dock__v, #ozpl-print .dock__v, #ozpl-layer .dock__v {font-size: 12px; color: #a8d4d0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} #ozpl .dock__sum svg, #ozpl-print .dock__sum svg, #ozpl-layer .dock__sum svg {flex: none; color: #a8d4d0;} #ozpl .dock__go, #ozpl-print .dock__go, #ozpl-layer .dock__go {flex: none; min-height: 46px; padding: 0 22px; font-size: 16px;} #ozpl .dock button:focus-visible, #ozpl-print .dock button:focus-visible, #ozpl-layer .dock button:focus-visible {outline: 3px solid var(--teal); outline-offset: 2px;} #ozpl .basket, #ozpl-print .basket, #ozpl-layer .basket {display: flex; flex-direction: column;} #ozpl .basket > *, #ozpl-print .basket > *, #ozpl-layer .basket > * {flex: none;} #ozpl .basket .bk__in, #ozpl-print .basket .bk__in, #ozpl-layer .basket .bk__in {order: 1; margin-top: 0;} #ozpl .basket .stage, #ozpl-print .basket .stage, #ozpl-layer .basket .stage {order: 2; margin-top: 12px; padding: 12px;} #ozpl .basket .stage__fig, #ozpl-print .basket .stage__fig, #ozpl-layer .basket .stage__fig {height: 150px;} } @media (prefers-reduced-motion: reduce) { #ozpl .basketbar, #ozpl-print .basketbar, #ozpl-layer .basketbar {transition: none;} } @media (max-width: 760px) { #ozpl .stepnav, #ozpl-print .stepnav, #ozpl-layer .stepnav {padding: 10px 0 8px; margin-bottom: 14px; box-shadow: 0 1px 0 var(--line);} #ozpl .stepnav__now, #ozpl-print .stepnav__now, #ozpl-layer .stepnav__now {display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 6px; color: var(--deep);} #ozpl .stepnav__now strong, #ozpl-print .stepnav__now strong, #ozpl-layer .stepnav__now strong {font-family: var(--display); font-size: 16px; font-weight: 800;} #ozpl .stepnav__now .mono, #ozpl-print .stepnav__now .mono, #ozpl-layer .stepnav__now .mono {font-size: 12.5px; color: var(--muted);} #ozpl .stepnav ol, #ozpl-print .stepnav ol, #ozpl-layer .stepnav ol {gap: 4px;} #ozpl .stepnav li, #ozpl-print .stepnav li, #ozpl-layer .stepnav li, #ozpl .stepnav li:has([aria-current="step"]), #ozpl-print .stepnav li:has([aria-current="step"]), #ozpl-layer .stepnav li:has([aria-current="step"]) {flex: 1;} #ozpl .stepnav button, #ozpl-print .stepnav button, #ozpl-layer .stepnav button, #ozpl .stepnav button[aria-current="step"], #ozpl-print .stepnav button[aria-current="step"], #ozpl-layer .stepnav button[aria-current="step"] {height: 24px; padding: 0; background: none; box-shadow: none; display: flex; align-items: center;} #ozpl .stepnav button::before, #ozpl-print .stepnav button::before, #ozpl-layer .stepnav button::before {content: ''; flex: 1; height: 5px; border-radius: 3px; background: var(--field);} #ozpl .stepnav button.done::before, #ozpl-print .stepnav button.done::before, #ozpl-layer .stepnav button.done::before {background: var(--teal);} #ozpl .stepnav button[aria-current="step"]::before, #ozpl-print .stepnav button[aria-current="step"]::before, #ozpl-layer .stepnav button[aria-current="step"]::before {background: var(--deep);} #ozpl .stepnav button:disabled, #ozpl-print .stepnav button:disabled, #ozpl-layer .stepnav button:disabled {opacity: 1;} #ozpl .stepnav__n, #ozpl-print .stepnav__n, #ozpl-layer .stepnav__n {display: none;} #ozpl .stepnav__t, #ozpl-print .stepnav__t, #ozpl-layer .stepnav__t, #ozpl .stepnav button:not([aria-current="step"]) .stepnav__t, #ozpl-print .stepnav button:not([aria-current="step"]) .stepnav__t, #ozpl-layer .stepnav button:not([aria-current="step"]) .stepnav__t {display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;} #ozpl .step__num, #ozpl-print .step__num, #ozpl-layer .step__num {display: none;} #ozpl .step__head h2, #ozpl-print .step__head h2, #ozpl-layer .step__head h2 {font-size: 26px; line-height: 1.15;} #ozpl .step__lead, #ozpl-print .step__lead, #ozpl-layer .step__lead {font-size: 14.5px;} #ozpl .routes, #ozpl-print .routes, #ozpl-layer .routes {gap: 10px;} #ozpl .rcard, #ozpl-print .rcard, #ozpl-layer .rcard {padding: 16px 16px 14px;} #ozpl .rcard::after, #ozpl-print .rcard::after, #ozpl-layer .rcard::after {top: 16px; right: 14px;} #ozpl .rcard__d, #ozpl-print .rcard__d, #ozpl-layer .rcard__d {font-size: 14px;} #ozpl .rcard:not(.is-on) .rcard__m:not(.rcard__link), #ozpl-print .rcard:not(.is-on) .rcard__m:not(.rcard__link), #ozpl-layer .rcard:not(.is-on) .rcard__m:not(.rcard__link) {display: none;} #ozpl .rpanel:has(.rp-bottles), #ozpl-print .rpanel:has(.rp-bottles), #ozpl-layer .rpanel:has(.rp-bottles) {display: none;} #ozpl .btiles, #ozpl-print .btiles, #ozpl-layer .btiles {grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;} #ozpl .btile, #ozpl-print .btile, #ozpl-layer .btile {padding: 10px 4px 10px;} #ozpl .btile[aria-pressed="true"], #ozpl-print .btile[aria-pressed="true"], #ozpl-layer .btile[aria-pressed="true"] {padding: 9.5px 3.5px;} #ozpl .btile[aria-pressed="true"]::after, #ozpl-print .btile[aria-pressed="true"]::after, #ozpl-layer .btile[aria-pressed="true"]::after {top: -6px; right: -6px; width: 20px; height: 20px;} #ozpl .btile__box, #ozpl-print .btile__box, #ozpl-layer .btile__box {height: 104px; margin-bottom: 6px;} #ozpl .btile__fig, #ozpl-print .btile__fig, #ozpl-layer .btile__fig {height: calc(clamp(210, var(--h), 440) * .225px);} #ozpl .btile__n, #ozpl-print .btile__n, #ozpl-layer .btile__n {font-size: 14.5px; line-height: 1.2;} #ozpl .btile__u, #ozpl-print .btile__u, #ozpl-layer .btile__u, #ozpl .btile__c, #ozpl-print .btile__c, #ozpl-layer .btile__c {display: none;} #ozpl .btile__m, #ozpl-print .btile__m, #ozpl-layer .btile__m {font-size: 11.5px; line-height: 1.3; margin-top: 2px;} #ozpl .starter, #ozpl-print .starter, #ozpl-layer .starter {grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px;} #ozpl .starter.is-on, #ozpl-print .starter.is-on, #ozpl-layer .starter.is-on {padding: 11.5px;} #ozpl .starter__fig, #ozpl-print .starter__fig, #ozpl-layer .starter__fig {height: 100px; padding: 6px 2px 4px;} #ozpl .starter__b, #ozpl-print .starter__b, #ozpl-layer .starter__b {height: calc(min(var(--h), 340) * .2px);} #ozpl .starter__b + .starter__b, #ozpl-print .starter__b + .starter__b, #ozpl-layer .starter__b + .starter__b {margin-left: -26px;} #ozpl .starter h4, #ozpl-print .starter h4, #ozpl-layer .starter h4 {font-size: 16px;} #ozpl .starter p, #ozpl-print .starter p, #ozpl-layer .starter p {font-size: 13px; margin-bottom: 8px;} #ozpl .starter, #ozpl-print .starter, #ozpl-layer .starter {row-gap: 0;} #ozpl .starter__body, #ozpl-print .starter__body, #ozpl-layer .starter__body {display: contents;} #ozpl .starter__fig, #ozpl-print .starter__fig, #ozpl-layer .starter__fig {grid-row: 1 / span 2; height: 84px;} #ozpl .starter h4, #ozpl-print .starter h4, #ozpl-layer .starter h4, #ozpl .starter p, #ozpl-print .starter p, #ozpl-layer .starter p {grid-column: 2;} #ozpl .starter .chips, #ozpl-print .starter .chips, #ozpl-layer .starter .chips {grid-column: 1 / -1; margin-top: 10px;} #ozpl .starter__all, #ozpl-print .starter__all, #ozpl-layer .starter__all {grid-column: 1 / -1; width: 100%;} #ozpl .pitem, #ozpl-print .pitem, #ozpl-layer .pitem {padding: 16px 14px 14px; border-radius: var(--r-m);} #ozpl .pitem__h h3, #ozpl-print .pitem__h h3, #ozpl-layer .pitem__h h3 {font-size: 17px;} #ozpl .ptiles, #ozpl-print .ptiles, #ozpl-layer .ptiles {display: flex; overflow-x: auto; gap: 6px; margin: 0 -14px; padding: 2px 14px 6px; scroll-snap-type: x proximity; scrollbar-width: none;} #ozpl .ptiles::-webkit-scrollbar, #ozpl-print .ptiles::-webkit-scrollbar, #ozpl-layer .ptiles::-webkit-scrollbar {display: none;} #ozpl .ptile, #ozpl-print .ptile, #ozpl-layer .ptile {flex: 0 0 74px; padding: 6px 4px; gap: 2px; scroll-snap-align: start; font-size: 12px;} #ozpl .ptile__img, #ozpl-print .ptile__img, #ozpl-layer .ptile__img {height: 38px;} #ozpl .qrows, #ozpl-print .qrows, #ozpl-layer .qrows {margin-top: 12px; gap: 8px;} #ozpl .qrow, #ozpl-print .qrow, #ozpl-layer .qrow {grid-template-columns: 36px minmax(0, 1fr); gap: 8px 10px; padding: 12px;} #ozpl .qrow__img, #ozpl-print .qrow__img, #ozpl-layer .qrow__img {width: 36px; height: 36px; grid-row: span 1;} #ozpl .qrow__p strong, #ozpl-print .qrow__p strong, #ozpl-layer .qrow__p strong {font-size: 15px;} #ozpl .qrow__p .mono, #ozpl-print .qrow__p .mono, #ozpl-layer .qrow__p .mono {font-size: 11.5px;} #ozpl .qrow__in, #ozpl-print .qrow__in, #ozpl-layer .qrow__in, #ozpl .qrow__o, #ozpl-print .qrow__o, #ozpl-layer .qrow__o, #ozpl .qrow__fill, #ozpl-print .qrow__fill, #ozpl-layer .qrow__fill {grid-column: 1 / -1;} #ozpl .qrow__in, #ozpl-print .qrow__in, #ozpl-layer .qrow__in {grid-template-columns: minmax(0, 1fr) 112px;} #ozpl .qrow__in input, #ozpl-print .qrow__in input, #ozpl-layer .qrow__in input, #ozpl .qrow__in select, #ozpl-print .qrow__in select, #ozpl-layer .qrow__in select {min-height: 50px;} #ozpl .qrow__o, #ozpl-print .qrow__o, #ozpl-layer .qrow__o {flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 0 10px;} #ozpl .qrow__o .vol, #ozpl-print .qrow__o .vol, #ozpl-layer .qrow__o .vol {font-size: 19px;} #ozpl .qrow__fill, #ozpl-print .qrow__fill, #ozpl-layer .qrow__fill {flex-wrap: nowrap; overflow-x: auto; margin: 0 -12px; padding: 0 12px 2px; scrollbar-width: none;} #ozpl .qrow__fill::-webkit-scrollbar, #ozpl-print .qrow__fill::-webkit-scrollbar, #ozpl-layer .qrow__fill::-webkit-scrollbar {display: none;} #ozpl .fill, #ozpl-print .fill, #ozpl-layer .fill {flex: none; min-height: 40px;} #ozpl .rvbox__s, #ozpl-print .rvbox__s, #ozpl-layer .rvbox__s {pointer-events: auto; cursor: pointer; align-items: center; background: var(--surface); border-radius: var(--r-m); padding: 14px 16px;} #ozpl .rvbox__s h3, #ozpl-print .rvbox__s h3, #ozpl-layer .rvbox__s h3 {margin: 0; font-size: 17px;} #ozpl .rvbox__m, #ozpl-print .rvbox__m, #ozpl-layer .rvbox__m {display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); white-space: nowrap;} #ozpl .rvbox__m::after, #ozpl-print .rvbox__m::after, #ozpl-layer .rvbox__m::after {content: ''; width: 8px; height: 8px; border: solid var(--deep); border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); transition: transform .15s;} #ozpl .rvbox[open] .rvbox__m::after, #ozpl-print .rvbox[open] .rvbox__m::after, #ozpl-layer .rvbox[open] .rvbox__m::after {transform: rotate(-135deg) translateY(-2px);} #ozpl .rvbox[open] .rvbox__s, #ozpl-print .rvbox[open] .rvbox__s, #ozpl-layer .rvbox[open] .rvbox__s {border-radius: var(--r-m) var(--r-m) 0 0;} #ozpl .rvbox .review, #ozpl-print .rvbox .review, #ozpl-layer .rvbox .review {border-radius: 0 0 var(--r-m) var(--r-m); padding-top: 0;} #ozpl .rvbox > .sec__b, #ozpl-print .rvbox > .sec__b, #ozpl-layer .rvbox > .sec__b, #ozpl .rvbox .review, #ozpl-print .rvbox .review, #ozpl-layer .rvbox .review {margin: 0;} #ozpl .rvbox .rvh:first-child, #ozpl-print .rvbox .rvh:first-child, #ozpl-layer .rvbox .rvh:first-child {margin-top: 0; padding-top: 6px;} #ozpl .rv div:has(.nv), #ozpl-print .rv div:has(.nv), #ozpl-layer .rv div:has(.nv) {display: none;} } @media (max-width: 760px) { #ozpl .fold, #ozpl-print .fold, #ozpl-layer .fold {margin-top: 12px;} #ozpl .fold__s, #ozpl-print .fold__s, #ozpl-layer .fold__s {list-style: none; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 16px; background: var(--surface); border-radius: var(--r-m); cursor: pointer; color: var(--deep); font-weight: 700; font-size: 15px;} #ozpl .fold__s::-webkit-details-marker, #ozpl-print .fold__s::-webkit-details-marker, #ozpl-layer .fold__s::-webkit-details-marker {display: none;} #ozpl .fold__s > span:first-child, #ozpl-print .fold__s > span:first-child, #ozpl-layer .fold__s > span:first-child {flex: 1; min-width: 0;} #ozpl .fold__n, #ozpl-print .fold__n, #ozpl-layer .fold__n {font-size: 12.5px; font-weight: 500; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%;} #ozpl .fold__s::after, #ozpl-print .fold__s::after, #ozpl-layer .fold__s::after {content: ''; flex: none; width: 8px; height: 8px; border: solid var(--deep); border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); transition: transform .15s;} #ozpl .fold[open] > .fold__s::after, #ozpl-print .fold[open] > .fold__s::after, #ozpl-layer .fold[open] > .fold__s::after {transform: rotate(-135deg) translateY(-2px);} #ozpl .fold[open] > .fold__s, #ozpl-print .fold[open] > .fold__s, #ozpl-layer .fold[open] > .fold__s {border-radius: var(--r-m) var(--r-m) 0 0;} #ozpl .fold__b, #ozpl-print .fold__b, #ozpl-layer .fold__b {background: var(--surface); border-radius: 0 0 var(--r-m) var(--r-m); padding: 2px 16px 16px;} #ozpl .fold__b > .two, #ozpl-print .fold__b > .two, #ozpl-layer .fold__b > .two, #ozpl .fold__b > .sec, #ozpl-print .fold__b > .sec, #ozpl-layer .fold__b > .sec, #ozpl .fold__b .sec__b, #ozpl-print .fold__b .sec__b, #ozpl-layer .fold__b .sec__b {margin: 0; padding: 0;} #ozpl .fold__b .sec h3, #ozpl-print .fold__b .sec h3, #ozpl-layer .fold__b .sec h3 {display: none;} #ozpl .fold__b .gx, #ozpl-print .fold__b .gx, #ozpl-layer .fold__b .gx, #ozpl .fold__b .tiers, #ozpl-print .fold__b .tiers, #ozpl-layer .fold__b .tiers {margin: 0; padding: 0; background: none; box-shadow: none;} #ozpl .fold__b .gx h4, #ozpl-print .fold__b .gx h4, #ozpl-layer .fold__b .gx h4, #ozpl .fold__b .tiers__h, #ozpl-print .fold__b .tiers__h, #ozpl-layer .fold__b .tiers__h {display: none;} #ozpl .fold__b .item__ex, #ozpl-print .fold__b .item__ex, #ozpl-layer .fold__b .item__ex {margin-top: 0;} #ozpl .item .fold, #ozpl-print .item .fold, #ozpl-layer .item .fold {margin-top: 8px;} #ozpl .item .fold__s, #ozpl-print .item .fold__s, #ozpl-layer .item .fold__s {min-height: 44px; padding: 8px 12px; background: var(--tint); font-size: 14px;} #ozpl .item .fold__b, #ozpl-print .item .fold__b, #ozpl-layer .item .fold__b {background: var(--tint); padding: 2px 12px 12px;} #ozpl .pitem--shut, #ozpl-print .pitem--shut, #ozpl-layer .pitem--shut {padding: 0; border-color: transparent;} #ozpl .pitem--shut.is-bad, #ozpl-print .pitem--shut.is-bad, #ozpl-layer .pitem--shut.is-bad {border-color: var(--red);} #ozpl .pitem__tog, #ozpl-print .pitem__tog, #ozpl-layer .pitem__tog {width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; min-height: 64px; padding: 12px 16px; border: 0; background: none; text-align: left; font: inherit; color: var(--deep); cursor: pointer; border-radius: var(--r-m);} #ozpl .pitem__tog::after, #ozpl-print .pitem__tog::after, #ozpl-layer .pitem__tog::after {content: ''; grid-column: 2; grid-row: 1 / span 2; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--field);} #ozpl .pitem--shut.is-ok .pitem__tog::after, #ozpl-print .pitem--shut.is-ok .pitem__tog::after, #ozpl-layer .pitem--shut.is-ok .pitem__tog::after {border: 0; background: var(--teal) var(--check) center / 60% no-repeat;} #ozpl .pitem__tt, #ozpl-print .pitem__tt, #ozpl-layer .pitem__tt {font-size: 15.5px; line-height: 1.3;} #ozpl .pitem__sum, #ozpl-print .pitem__sum, #ozpl-layer .pitem__sum {grid-column: 1; font-size: 12.5px; color: var(--muted); line-height: 1.45;} #ozpl .pitem--shut:not(.is-ok) .pitem__sum, #ozpl-print .pitem--shut:not(.is-ok) .pitem__sum, #ozpl-layer .pitem--shut:not(.is-ok) .pitem__sum {color: var(--teal-ink); font-weight: 600;} #ozpl .pitem, #ozpl-print .pitem, #ozpl-layer .pitem {scroll-margin-top: calc(var(--ozpl-top, 0px) + 84px); margin-top: 10px;} #ozpl .pitem__next, #ozpl-print .pitem__next, #ozpl-layer .pitem__next {width: 100%; margin-top: 14px;} #ozpl .sec, #ozpl-print .sec, #ozpl-layer .sec {padding-bottom: 22px;} #ozpl .sec h3, #ozpl-print .sec h3, #ozpl-layer .sec h3 {font-size: 18px; margin-bottom: 10px;} #ozpl .step__head, #ozpl-print .step__head, #ozpl-layer .step__head {margin-bottom: 18px;} #ozpl .lead, #ozpl-print .lead, #ozpl-layer .lead {padding: 16px 18px; gap: 6px; font-size: 14px;} #ozpl .note, #ozpl-print .note, #ozpl-layer .note {font-size: 13.5px;} } @media (max-width: 760px) { #ozpl .bgroup, #ozpl-print .bgroup, #ozpl-layer .bgroup {margin: 18px 0 8px; font-size: 16px;} #ozpl .btile, #ozpl-print .btile, #ozpl-layer .btile {padding: 8px 4px 9px;} #ozpl .btile[aria-pressed="true"], #ozpl-print .btile[aria-pressed="true"], #ozpl-layer .btile[aria-pressed="true"] {padding: 7.5px 3.5px 8.5px;} #ozpl .btile__box, #ozpl-print .btile__box, #ozpl-layer .btile__box {height: 80px; margin-bottom: 4px;} #ozpl .btile__fig, #ozpl-print .btile__fig, #ozpl-layer .btile__fig {height: calc(clamp(210, var(--h), 440) * .18px);} #ozpl .btile__m, #ozpl-print .btile__m, #ozpl-layer .btile__m {min-height: 2.6em;} #ozpl .starter__fig, #ozpl-print .starter__fig, #ozpl-layer .starter__fig {height: 70px;} #ozpl .starter__b, #ozpl-print .starter__b, #ozpl-layer .starter__b {height: calc(min(var(--h), 340) * .15px);} #ozpl .starter__b + .starter__b, #ozpl-print .starter__b + .starter__b, #ozpl-layer .starter__b + .starter__b {margin-left: -20px;} #ozpl .starter .chip, #ozpl-print .starter .chip, #ozpl-layer .starter .chip, #ozpl .ibot .chip, #ozpl-print .ibot .chip, #ozpl-layer .ibot .chip {min-height: 40px; padding: 0 10px; font-size: 14px;} #ozpl .starter__all, #ozpl-print .starter__all, #ozpl-layer .starter__all {min-height: 44px;} #ozpl .item, #ozpl-print .item, #ozpl-layer .item {grid-template-columns: minmax(0, 1fr); position: relative; padding: 14px;} #ozpl .item__t, #ozpl-print .item__t, #ozpl-layer .item__t {padding-right: 86px;} #ozpl .item__rm, #ozpl-print .item__rm, #ozpl-layer .item__rm {position: absolute; top: 8px; right: 6px; min-height: 40px;} #ozpl .chip--b img, #ozpl-print .chip--b img, #ozpl-layer .chip--b img {height: 22px;} } @media (max-width: 760px) { #ozpl .btabs, #ozpl-print .btabs, #ozpl-layer .btabs {display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px;} #ozpl .btab, #ozpl-print .btab, #ozpl-layer .btab {display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border: 1.5px solid var(--ctl); border-radius: 9px; background: var(--surface); color: var(--deep); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;} #ozpl .btab[aria-pressed="true"], #ozpl-print .btab[aria-pressed="true"], #ozpl-layer .btab[aria-pressed="true"] {background: var(--deep); border-color: var(--deep); color: #fff;} #ozpl .btab__n, #ozpl-print .btab__n, #ozpl-layer .btab__n {min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; display: inline-grid; place-items: center; background: var(--teal); color: #fff; font-size: 12px;} #ozpl .btab:focus-visible, #ozpl-print .btab:focus-visible, #ozpl-layer .btab:focus-visible {outline: 3px solid var(--teal); outline-offset: 2px;} #ozpl .btabs + .bgroup, #ozpl-print .btabs + .bgroup, #ozpl-layer .btabs + .bgroup {position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0;} #ozpl .btiles, #ozpl-print .btiles, #ozpl-layer .btiles {margin-top: 10px;} #ozpl .starters .fold, #ozpl-print .starters .fold, #ozpl-layer .starters .fold {margin-top: 0;} #ozpl .starters .fold__b, #ozpl-print .starters .fold__b, #ozpl-layer .starters .fold__b {background: none; padding: 10px 0 0;} #ozpl .starters .fold__b .starters, #ozpl-print .starters .fold__b .starters, #ozpl-layer .starters .fold__b .starters {display: grid; gap: 10px;} #ozpl .ditems__g, #ozpl-print .ditems__g, #ozpl-layer .ditems__g {grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;} #ozpl .ditem, #ozpl-print .ditem, #ozpl-layer .ditem {min-height: 48px; padding: 8px 6px; text-align: center; justify-content: center;} #ozpl .ditem span, #ozpl-print .ditem span, #ozpl-layer .ditem span {display: none;} } @media (max-width: 760px) { #ozpl .ditem, #ozpl-print .ditem, #ozpl-layer .ditem {padding: 8px 6px 8px 34px; text-align: left; align-items: flex-start;} #ozpl .ditem::after, #ozpl-print .ditem::after, #ozpl-layer .ditem::after {left: 8px; right: auto; top: 50%; margin-top: -10px;} #ozpl .ditem strong, #ozpl-print .ditem strong, #ozpl-layer .ditem strong {font-size: 14.5px;} } @media (max-width: 760px) { #ozpl .ditem[aria-pressed="true"], #ozpl-print .ditem[aria-pressed="true"], #ozpl-layer .ditem[aria-pressed="true"] {padding: 7.5px 5.5px 7.5px 33.5px;} #ozpl .ditem[aria-pressed="true"]::after, #ozpl-print .ditem[aria-pressed="true"]::after, #ozpl-layer .ditem[aria-pressed="true"]::after {left: 7px;} #ozpl .ditem[aria-pressed="true"]::before, #ozpl-print .ditem[aria-pressed="true"]::before, #ozpl-layer .ditem[aria-pressed="true"]::before {left: 12px; right: auto; top: 50%; margin-top: -4px;} } @media (max-width: 760px) { #ozpl .starter .chip[aria-pressed="true"], #ozpl-print .starter .chip[aria-pressed="true"], #ozpl-layer .starter .chip[aria-pressed="true"], #ozpl .ibot .chip[aria-pressed="true"], #ozpl-print .ibot .chip[aria-pressed="true"], #ozpl-layer .ibot .chip[aria-pressed="true"] {padding-left: 34px;} #ozpl .starter .chip[aria-pressed="true"]::before, #ozpl-print .starter .chip[aria-pressed="true"]::before, #ozpl-layer .starter .chip[aria-pressed="true"]::before, #ozpl .ibot .chip[aria-pressed="true"]::before, #ozpl-print .ibot .chip[aria-pressed="true"]::before, #ozpl-layer .ibot .chip[aria-pressed="true"]::before {left: 8px; width: 18px; height: 18px; margin-top: -9px;} } @media (max-width: 760px) { #ozpl .fld input, #ozpl-print .fld input, #ozpl-layer .fld input, #ozpl .fld select, #ozpl-print .fld select, #ozpl-layer .fld select, #ozpl .fld textarea, #ozpl-print .fld textarea, #ozpl-layer .fld textarea, #ozpl .qrow__in select, #ozpl-print .qrow__in select, #ozpl-layer .qrow__in select, #ozpl .gsearch input, #ozpl-print .gsearch input, #ozpl-layer .gsearch input, #ozpl .rough__in input, #ozpl-print .rough__in input, #ozpl-layer .rough__in input, #ozpl .hero__field input, #ozpl-print .hero__field input, #ozpl-layer .hero__field input, #ozpl .item__ex input, #ozpl-print .item__ex input, #ozpl-layer .item__ex input, #ozpl .item__ex select, #ozpl-print .item__ex select, #ozpl-layer .item__ex select {font-size: 16px;} #ozpl .btab, #ozpl-print .btab, #ozpl-layer .btab, #ozpl .starter .chip, #ozpl-print .starter .chip, #ozpl-layer .starter .chip, #ozpl .ibot .chip, #ozpl-print .ibot .chip, #ozpl-layer .ibot .chip, #ozpl .chip, #ozpl-print .chip, #ozpl-layer .chip, #ozpl .fill, #ozpl-print .fill, #ozpl-layer .fill, #ozpl .item__rm, #ozpl-print .item__rm, #ozpl-layer .item__rm, #ozpl .ditem, #ozpl-print .ditem, #ozpl-layer .ditem, #ozpl .linkbtn.pitem__rm, #ozpl-print .linkbtn.pitem__rm, #ozpl-layer .linkbtn.pitem__rm {min-height: 44px;} #ozpl .btabs, #ozpl-print .btabs, #ozpl-layer .btabs, #ozpl .chips, #ozpl-print .chips, #ozpl-layer .chips, #ozpl .qrow__fill, #ozpl-print .qrow__fill, #ozpl-layer .qrow__fill, #ozpl .ditems__g, #ozpl-print .ditems__g, #ozpl-layer .ditems__g {gap: 8px;} #ozpl .btile__m, #ozpl-print .btile__m, #ozpl-layer .btile__m, #ozpl .qrow__p .mono, #ozpl-print .qrow__p .mono, #ozpl-layer .qrow__p .mono, #ozpl .ptile, #ozpl-print .ptile, #ozpl-layer .ptile, #ozpl .fold__n, #ozpl-print .fold__n, #ozpl-layer .fold__n, #ozpl .pitem__sum, #ozpl-print .pitem__sum, #ozpl-layer .pitem__sum, #ozpl .dock__v, #ozpl-print .dock__v, #ozpl-layer .dock__v {font-size: 12px;} } @media (max-width: 1100px) { #ozpl .bk__x, #ozpl-print .bk__x, #ozpl-layer .bk__x {min-height: 44px;} } @media (max-width: 760px) { #ozpl .rcard__link, #ozpl-print .rcard__link, #ozpl-layer .rcard__link {min-height: 44px; display: flex; align-items: center;} #ozpl .catnav button, #ozpl-print .catnav button, #ozpl-layer .catnav button {min-height: 44px;} #ozpl .item__ex input, #ozpl-print .item__ex input, #ozpl-layer .item__ex input, #ozpl .item__ex select, #ozpl-print .item__ex select, #ozpl-layer .item__ex select {min-height: 48px;} } @media (max-width: 760px) { #ozpl .btiles, #ozpl-print .btiles, #ozpl-layer .btiles {display: flex; overflow-x: auto; gap: 8px; margin: 10px -16px 0; padding: 8px 16px 10px; scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none; overscroll-behavior-x: contain;} #ozpl .btiles::-webkit-scrollbar, #ozpl-print .btiles::-webkit-scrollbar, #ozpl-layer .btiles::-webkit-scrollbar {display: none;} #ozpl .btile, #ozpl-print .btile, #ozpl-layer .btile {flex: 0 0 34%; scroll-snap-align: start;} #ozpl .btile__box, #ozpl-print .btile__box, #ozpl-layer .btile__box {height: 96px;} #ozpl .btile__fig, #ozpl-print .btile__fig, #ozpl-layer .btile__fig {height: calc(clamp(210, var(--h), 440) * .21px);} #ozpl .gmc, #ozpl-print .gmc, #ozpl-layer .gmc {display: grid; gap: 10px; margin-top: 12px;} #ozpl .gmc__c, #ozpl-print .gmc__c, #ozpl-layer .gmc__c {background: var(--tint); border-radius: var(--r-m); padding: 14px;} #ozpl .gmc__c h4, #ozpl-print .gmc__c h4, #ozpl-layer .gmc__c h4 {font-family: var(--display); font-size: 16px; font-weight: 800; color: var(--deep); margin: 0 0 6px;} #ozpl .gmc__c dl, #ozpl-print .gmc__c dl, #ozpl-layer .gmc__c dl {margin: 0 0 12px;} #ozpl .gmc__c dl div, #ozpl-print .gmc__c dl div, #ozpl-layer .gmc__c dl div {display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 14px;} #ozpl .gmc__c dt, #ozpl-print .gmc__c dt, #ozpl-layer .gmc__c dt {color: var(--muted);} #ozpl .gmc__c dd, #ozpl-print .gmc__c dd, #ozpl-layer .gmc__c dd {margin: 0; color: var(--deep);} #ozpl .gmc__c .btn, #ozpl-print .gmc__c .btn, #ozpl-layer .gmc__c .btn {width: 100%; min-height: 44px;} } @media (max-width: 1100px) { #ozpl #app button, #ozpl-print #app button, #ozpl-layer #app button, #ozpl #app label, #ozpl-print #app label, #ozpl-layer #app label, #ozpl #app summary, #ozpl-print #app summary, #ozpl-layer #app summary, #ozpl #basketbar button, #ozpl-print #basketbar button, #ozpl-layer #basketbar button, #ozpl .basket button, #ozpl-print .basket button, #ozpl-layer .basket button {touch-action: manipulation; -webkit-tap-highlight-color: transparent;} #ozpl #app .btn, #ozpl-print #app .btn, #ozpl-layer #app .btn, #ozpl #app .btile, #ozpl-print #app .btile, #ozpl-layer #app .btile, #ozpl #app .ptile, #ozpl-print #app .ptile, #ozpl-layer #app .ptile, #ozpl #app .chip, #ozpl-print #app .chip, #ozpl-layer #app .chip, #ozpl #app .fill, #ozpl-print #app .fill, #ozpl-layer #app .fill, #ozpl #app .ditem, #ozpl-print #app .ditem, #ozpl-layer #app .ditem, #ozpl #app .rcard, #ozpl-print #app .rcard, #ozpl-layer #app .rcard, #ozpl #app .btab, #ozpl-print #app .btab, #ozpl-layer #app .btab, #ozpl #app .fold__s, #ozpl-print #app .fold__s, #ozpl-layer #app .fold__s, #ozpl #app .pitem__tog, #ozpl-print #app .pitem__tog, #ozpl-layer #app .pitem__tog, #ozpl #basketbar button, #ozpl-print #basketbar button, #ozpl-layer #basketbar button {transition: transform .12s ease, background-color .15s, border-color .15s, color .15s;} #ozpl #app .btn:active, #ozpl-print #app .btn:active, #ozpl-layer #app .btn:active, #ozpl #app .btile:active, #ozpl-print #app .btile:active, #ozpl-layer #app .btile:active, #ozpl #app .ptile:active, #ozpl-print #app .ptile:active, #ozpl-layer #app .ptile:active, #ozpl #app .chip:active, #ozpl-print #app .chip:active, #ozpl-layer #app .chip:active, #ozpl #app .fill:active, #ozpl-print #app .fill:active, #ozpl-layer #app .fill:active, #ozpl #app .ditem:active, #ozpl-print #app .ditem:active, #ozpl-layer #app .ditem:active, #ozpl #app .rcard:active, #ozpl-print #app .rcard:active, #ozpl-layer #app .rcard:active, #ozpl #app .btab:active, #ozpl-print #app .btab:active, #ozpl-layer #app .btab:active, #ozpl #app .pitem__tog:active, #ozpl-print #app .pitem__tog:active, #ozpl-layer #app .pitem__tog:active, #ozpl #basketbar button:active, #ozpl-print #basketbar button:active, #ozpl-layer #basketbar button:active {transform: scale(.97);} #ozpl .undo, #ozpl-print .undo, #ozpl-layer .undo {display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 720px; margin: 0 auto 8px; padding: 6px 6px 6px 14px; border-radius: var(--r-m); background: #fff; color: var(--deep); font-size: 14px; font-weight: 600;} #ozpl .undo button, #ozpl-print .undo button, #ozpl-layer .undo button {min-height: 40px; padding: 0 16px; border: 0; border-radius: var(--r-s); background: var(--tint); color: var(--deep); font: inherit; font-weight: 800; cursor: pointer;} } @media (prefers-reduced-motion: reduce) { #ozpl #app .btn:active, #ozpl-print #app .btn:active, #ozpl-layer #app .btn:active, #ozpl #app .btile:active, #ozpl-print #app .btile:active, #ozpl-layer #app .btile:active, #ozpl #app .ptile:active, #ozpl-print #app .ptile:active, #ozpl-layer #app .ptile:active, #ozpl #app .chip:active, #ozpl-print #app .chip:active, #ozpl-layer #app .chip:active, #ozpl #app .fill:active, #ozpl-print #app .fill:active, #ozpl-layer #app .fill:active, #ozpl #app .ditem:active, #ozpl-print #app .ditem:active, #ozpl-layer #app .ditem:active, #ozpl #app .rcard:active, #ozpl-print #app .rcard:active, #ozpl-layer #app .rcard:active, #ozpl #app .btab:active, #ozpl-print #app .btab:active, #ozpl-layer #app .btab:active, #ozpl #app .pitem__tog:active, #ozpl-print #app .pitem__tog:active, #ozpl-layer #app .pitem__tog:active, #ozpl #basketbar button:active, #ozpl-print #basketbar button:active, #ozpl-layer #basketbar button:active {transform: none;} } @media (max-width: 760px) { #ozpl .step__head h2, #ozpl-print .step__head h2, #ozpl-layer .step__head h2 {font-size: 24px; text-wrap: balance;} #ozpl .step__head, #ozpl-print .step__head, #ozpl-layer .step__head {margin-bottom: 14px;} #ozpl .fullcat, #ozpl-print .fullcat, #ozpl-layer .fullcat {margin-top: 12px;} #ozpl .fullcat > summary, #ozpl-print .fullcat > summary, #ozpl-layer .fullcat > summary {padding: 12px 52px 12px 16px; border-radius: var(--r-m);} #ozpl .fullcat__t, #ozpl-print .fullcat__t, #ozpl-layer .fullcat__t {font-size: 15.5px;} #ozpl .fullcat__s, #ozpl-print .fullcat__s, #ozpl-layer .fullcat__s {font-size: 12.5px;} #ozpl .pitem .fold, #ozpl-print .pitem .fold, #ozpl-layer .pitem .fold {margin-top: 0; margin-bottom: 10px;} #ozpl .pitem .fold__s, #ozpl-print .pitem .fold__s, #ozpl-layer .pitem .fold__s {background: var(--tint); min-height: 46px; font-size: 14px;} #ozpl .pitem .fold__b, #ozpl-print .pitem .fold__b, #ozpl-layer .pitem .fold__b {background: var(--tint); padding: 4px 0 8px;} #ozpl .pitem .fold__b .lbl, #ozpl-print .pitem .fold__b .lbl, #ozpl-layer .pitem .fold__b .lbl {display: none;} #ozpl .pitem .fold__b .ptiles, #ozpl-print .pitem .fold__b .ptiles, #ozpl-layer .pitem .fold__b .ptiles {margin: 0; padding: 2px 10px 6px;} } #ozpl .hero__how, #ozpl-print .hero__how, #ozpl-layer .hero__how {display: none;} #ozpl .ic, #ozpl-print .ic, #ozpl-layer .ic {flex: none; display: block;} @media (max-width: 760px) { #ozpl .hero__grid, #ozpl-print .hero__grid, #ozpl-layer .hero__grid {display: flex; flex-direction: column; padding-top: 22px; padding-bottom: 8px;} #ozpl .hero__copy, #ozpl-print .hero__copy, #ozpl-layer .hero__copy {display: contents;} #ozpl .hero h1, #ozpl-print .hero h1, #ozpl-layer .hero h1 {order: 1; font-size: 34px; line-height: 1;} #ozpl .hero__lead, #ozpl-print .hero__lead, #ozpl-layer .hero__lead {order: 2; margin-top: 10px; font-size: 15.5px;} #ozpl .lineup, #ozpl-print .lineup, #ozpl-layer .lineup {order: 3; margin: 16px -4px 0;} #ozpl .lineup__cap, #ozpl-print .lineup__cap, #ozpl-layer .lineup__cap {font-size: 11.5px; margin-top: 6px;} #ozpl .hero__label, #ozpl-print .hero__label, #ozpl-layer .hero__label {order: 4; margin-top: 18px;} #ozpl .hero__field, #ozpl-print .hero__field, #ozpl-layer .hero__field {order: 5;} #ozpl .hero__how, #ozpl-print .hero__how, #ozpl-layer .hero__how {order: 6; display: grid; margin: 20px 0 0; padding: 0; list-style: none;} #ozpl .hero__how li, #ozpl-print .hero__how li, #ozpl-layer .hero__how li {display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 14.5px; font-weight: 600; color: var(--deep);} #ozpl .hero__how li:last-child, #ozpl-print .hero__how li:last-child, #ozpl-layer .hero__how li:last-child {border-bottom: 1px solid var(--line);} #ozpl .hero__how .ic, #ozpl-print .hero__how .ic, #ozpl-layer .hero__how .ic {color: var(--teal-ink);} #ozpl .hero__note, #ozpl-print .hero__note, #ozpl-layer .hero__note {display: none;} #ozpl .hero__ex, #ozpl-print .hero__ex, #ozpl-layer .hero__ex {order: 7; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 14px 0 18px; font-size: 14px;} #ozpl .hero__ex .ic, #ozpl-print .hero__ex .ic, #ozpl-layer .hero__ex .ic {width: 18px; height: 18px; color: var(--muted);} #ozpl .hero__ex .linkbtn, #ozpl-print .hero__ex .linkbtn, #ozpl-layer .hero__ex .linkbtn {min-height: 44px;} #ozpl .step__lead, #ozpl-print .step__lead, #ozpl-layer .step__lead, #ozpl .step > .note, #ozpl-print .step > .note, #ozpl-layer .step > .note, #ozpl .step > .hint, #ozpl-print .step > .hint, #ozpl-layer .step > .hint, #ozpl .sub + .hint, #ozpl-print .sub + .hint, #ozpl-layer .sub + .hint {display: none;} #ozpl .rcard strong, #ozpl-print .rcard strong, #ozpl-layer .rcard strong {display: flex; align-items: center; gap: 10px;} #ozpl .rcard strong .ic, #ozpl-print .rcard strong .ic, #ozpl-layer .rcard strong .ic, #ozpl .rrow .ic, #ozpl-print .rrow .ic, #ozpl-layer .rrow .ic, #ozpl .fold__s .ic, #ozpl-print .fold__s .ic, #ozpl-layer .fold__s .ic {color: var(--teal-ink);} #ozpl .rcard.is-on strong .ic, #ozpl-print .rcard.is-on strong .ic, #ozpl-layer .rcard.is-on strong .ic {color: var(--deep);} #ozpl .rrow span, #ozpl-print .rrow span, #ozpl-layer .rrow span {display: inline-flex; align-items: center; gap: 10px;} #ozpl .rrow .ic, #ozpl-print .rrow .ic, #ozpl-layer .rrow .ic {width: 20px; height: 20px;} #ozpl .fold__s .ic, #ozpl-print .fold__s .ic, #ozpl-layer .fold__s .ic {width: 20px; height: 20px;} #ozpl .ditem, #ozpl-print .ditem, #ozpl-layer .ditem {flex-direction: row; align-items: center; gap: 6px;} #ozpl .ditem .ic, #ozpl-print .ditem .ic, #ozpl-layer .ditem .ic {width: 18px; height: 18px; color: var(--teal-ink);} #ozpl .ditem[aria-pressed="true"] .ic, #ozpl-print .ditem[aria-pressed="true"] .ic, #ozpl-layer .ditem[aria-pressed="true"] .ic {color: var(--deep);} } @media (max-width: 760px) { #ozpl .hero__grid, #ozpl-print .hero__grid, #ozpl-layer .hero__grid {align-items: stretch;} #ozpl .hero__label, #ozpl-print .hero__label, #ozpl-layer .hero__label {text-align: left;} #ozpl .hero__field input, #ozpl-print .hero__field input, #ozpl-layer .hero__field input {flex: none; height: 56px; width: 100%;} #ozpl .ditem, #ozpl-print .ditem, #ozpl-layer .ditem, #ozpl .ditem[aria-pressed="true"], #ozpl-print .ditem[aria-pressed="true"], #ozpl-layer .ditem[aria-pressed="true"] {flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px; padding: 12px 4px 10px;} #ozpl .ditem[aria-pressed="true"], #ozpl-print .ditem[aria-pressed="true"], #ozpl-layer .ditem[aria-pressed="true"] {padding: 11px 3px 9px;} #ozpl .ditem .ic, #ozpl-print .ditem .ic, #ozpl-layer .ditem .ic {width: 22px; height: 22px;} #ozpl .ditem::after, #ozpl-print .ditem::after, #ozpl-layer .ditem::after, #ozpl .ditem[aria-pressed="true"]::after, #ozpl-print .ditem[aria-pressed="true"]::after, #ozpl-layer .ditem[aria-pressed="true"]::after {left: auto; right: 6px; top: 6px; margin-top: 0; width: 16px; height: 16px; border-radius: 4px;} #ozpl .ditem[aria-pressed="true"]::before, #ozpl-print .ditem[aria-pressed="true"]::before, #ozpl-layer .ditem[aria-pressed="true"]::before {left: auto; right: 10.5px; top: 11px; margin-top: 0; width: 7px; height: 4px;} #ozpl .lead .is-dim, #ozpl-print .lead .is-dim, #ozpl-layer .lead .is-dim, #ozpl .sec__b > .note, #ozpl-print .sec__b > .note, #ozpl-layer .sec__b > .note {display: none;} } @media (max-width: 760px) { #ozpl .fold__s > span:first-of-type, #ozpl-print .fold__s > span:first-of-type, #ozpl-layer .fold__s > span:first-of-type {flex: 1; min-width: 0;} } @media (max-width: 1100px) { #ozpl #app .btile:hover, #ozpl-print #app .btile:hover, #ozpl-layer #app .btile:hover, #ozpl #app .btile:active, #ozpl-print #app .btile:active, #ozpl-layer #app .btile:active, #ozpl #app .chip:active, #ozpl-print #app .chip:active, #ozpl-layer #app .chip:active, #ozpl #app .ptile:active, #ozpl-print #app .ptile:active, #ozpl-layer #app .ptile:active, #ozpl #app .fill:active, #ozpl-print #app .fill:active, #ozpl-layer #app .fill:active, #ozpl #app .ditem:active, #ozpl-print #app .ditem:active, #ozpl-layer #app .ditem:active, #ozpl #app .rcard:active, #ozpl-print #app .rcard:active, #ozpl-layer #app .rcard:active, #ozpl #app .pitem__tog:active, #ozpl-print #app .pitem__tog:active, #ozpl-layer #app .pitem__tog:active {transform: none; box-shadow: none;} #ozpl #app .btile[aria-pressed="true"], #ozpl-print #app .btile[aria-pressed="true"], #ozpl-layer #app .btile[aria-pressed="true"] {box-shadow: var(--ring);} } @media (max-width: 760px) { #ozpl .btiles, #ozpl-print .btiles, #ozpl-layer .btiles {scroll-snap-type: none;} #ozpl .pick, #ozpl-print .pick, #ozpl-layer .pick {margin: 6px 0 4px;} #ozpl .pick label, #ozpl-print .pick label, #ozpl-layer .pick label {font-size: 13.5px;} #ozpl .pick select, #ozpl-print .pick select, #ozpl-layer .pick select {font-weight: 700; color: var(--deep);} #ozpl .starters .pick, #ozpl-print .starters .pick, #ozpl-layer .starters .pick {margin: 0 0 4px;} #ozpl .catpanel .pick, #ozpl-print .catpanel .pick, #ozpl-layer .catpanel .pick {margin: 12px 0 4px;} } @media (max-width: 760px) { #ozpl .pick + .bgroup, #ozpl-print .pick + .bgroup, #ozpl-layer .pick + .bgroup, #ozpl .starters .pick label, #ozpl-print .starters .pick label, #ozpl-layer .starters .pick label {position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; white-space: nowrap;} #ozpl .pick + .bgroup + .btiles, #ozpl-print .pick + .bgroup + .btiles, #ozpl-layer .pick + .bgroup + .btiles {margin-top: 2px;} } #ozpl .pk, #ozpl-print .pk, #ozpl-layer .pk {position: relative; margin: 6px 0 8px;} #ozpl .pk__l, #ozpl-print .pk__l, #ozpl-layer .pk__l {display: block; font-size: 13.5px; font-weight: 700; color: var(--deep); margin-bottom: 6px;} #ozpl .pk__b, #ozpl-print .pk__b, #ozpl-layer .pk__b {width: 100%; min-height: 54px; display: flex; align-items: center; gap: 12px; padding: 8px 14px; border: 1.5px solid var(--field); border-radius: var(--r-m); background: var(--surface); color: var(--deep); font: inherit; font-size: 16px; font-weight: 700; text-align: left; cursor: pointer;} #ozpl .pk__b > .ic:first-child, #ozpl-print .pk__b > .ic:first-child, #ozpl-layer .pk__b > .ic:first-child {color: var(--teal-ink);} #ozpl .pk__b > .ic:last-child, #ozpl-print .pk__b > .ic:last-child, #ozpl-layer .pk__b > .ic:last-child {margin-left: auto; width: 20px; height: 20px; transition: transform .15s;} #ozpl .pk.is-open .pk__b, #ozpl-print .pk.is-open .pk__b, #ozpl-layer .pk.is-open .pk__b {border-color: var(--deep); border-radius: var(--r-m) var(--r-m) 0 0;} #ozpl .pk.is-open .pk__b > .ic:last-child, #ozpl-print .pk.is-open .pk__b > .ic:last-child, #ozpl-layer .pk.is-open .pk__b > .ic:last-child {transform: rotate(180deg);} #ozpl .pk__c, #ozpl-print .pk__c, #ozpl-layer .pk__c {flex: 1; min-width: 0; line-height: 1.3;} #ozpl .pk__n, #ozpl-print .pk__n, #ozpl-layer .pk__n {flex: none; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; display: inline-grid; place-items: center; background: var(--teal); color: #fff; font-size: 12px; font-weight: 800;} #ozpl .pk__list, #ozpl-print .pk__list, #ozpl-layer .pk__list {list-style: none; margin: 0; padding: 4px; background: var(--surface); border: 1.5px solid var(--deep); border-top: 0; border-radius: 0 0 var(--r-m) var(--r-m); box-shadow: 0 12px 24px -12px rgba(4, 42, 45, .35); max-height: 60vh; overflow: auto; overscroll-behavior: contain;} #ozpl .pk__o, #ozpl-print .pk__o, #ozpl-layer .pk__o {width: 100%; min-height: 50px; display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 0; border-radius: var(--r-s); background: none; color: var(--deep); font: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer;} #ozpl .pk__o + .pk__o, #ozpl-print .pk__o + .pk__o, #ozpl-layer .pk__o + .pk__o, #ozpl li + li .pk__o, #ozpl-print li + li .pk__o, #ozpl-layer li + li .pk__o {border-top: 0;} #ozpl .pk__o > .ic:first-child, #ozpl-print .pk__o > .ic:first-child, #ozpl-layer .pk__o > .ic:first-child {color: var(--teal-ink);} #ozpl .pk__o[aria-selected="true"], #ozpl-print .pk__o[aria-selected="true"], #ozpl-layer .pk__o[aria-selected="true"] {background: var(--tint);} #ozpl .pk__o[aria-selected="true"] > .ic:last-child, #ozpl-print .pk__o[aria-selected="true"] > .ic:last-child, #ozpl-layer .pk__o[aria-selected="true"] > .ic:last-child {color: var(--teal-ink); width: 20px; height: 20px;} #ozpl .pk__t, #ozpl-print .pk__t, #ozpl-layer .pk__t {flex: 1; min-width: 0; display: grid; line-height: 1.3;} #ozpl .pk__t small, #ozpl-print .pk__t small, #ozpl-layer .pk__t small {font-size: 12.5px; font-weight: 500; color: var(--muted); margin-top: 2px;} #ozpl .pk__b:focus-visible, #ozpl-print .pk__b:focus-visible, #ozpl-layer .pk__b:focus-visible, #ozpl .pk__o:focus-visible, #ozpl-print .pk__o:focus-visible, #ozpl-layer .pk__o:focus-visible {outline: 3px solid var(--teal); outline-offset: 2px;} @media (max-width: 760px) { #ozpl .catpanel .pk, #ozpl-print .catpanel .pk, #ozpl-layer .catpanel .pk {margin: 12px 0 6px;} #ozpl .catpanel .pk + .pk, #ozpl-print .catpanel .pk + .pk, #ozpl-layer .catpanel .pk + .pk {margin-top: 4px;} #ozpl .catpanel .gtable tr, #ozpl-print .catpanel .gtable tr, #ozpl-layer .catpanel .gtable tr {border: 0; padding-top: 4px;} } #ozpl .pk__list, #ozpl-print .pk__list, #ozpl-layer .pk__list {position: absolute; left: 0; right: 0; top: 100%; z-index: 25;} @media (max-width: 760px) { #ozpl .btiles.btiles--list, #ozpl-print .btiles.btiles--list, #ozpl-layer .btiles.btiles--list {display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; overflow: visible; margin: 6px 0 0; padding: 0;} #ozpl .btiles--list .btile, #ozpl-print .btiles--list .btile, #ozpl-layer .btiles--list .btile, #ozpl .btiles--list .btile[aria-pressed="true"], #ozpl-print .btiles--list .btile[aria-pressed="true"], #ozpl-layer .btiles--list .btile[aria-pressed="true"] {display: grid; grid-template-columns: 60px minmax(0, 1fr); grid-template-areas: "img name" "img min"; column-gap: 14px; row-gap: 2px; align-items: center; text-align: left; min-height: 80px; padding: 8px 52px 8px 10px;} #ozpl .btiles--list .btile[aria-pressed="true"], #ozpl-print .btiles--list .btile[aria-pressed="true"], #ozpl-layer .btiles--list .btile[aria-pressed="true"] {padding: 7.5px 51.5px 7.5px 9.5px;} #ozpl .btiles--list .btile__box, #ozpl-print .btiles--list .btile__box, #ozpl-layer .btiles--list .btile__box {grid-area: img; height: 64px; margin: 0; align-items: center;} #ozpl .btiles--list .btile__fig, #ozpl-print .btiles--list .btile__fig, #ozpl-layer .btiles--list .btile__fig {height: calc(clamp(210, var(--h), 440) * .14px);} #ozpl .btiles--list .btile__n, #ozpl-print .btiles--list .btile__n, #ozpl-layer .btiles--list .btile__n {grid-area: name; align-self: end; font-size: 16px;} #ozpl .btiles--list .btile__m, #ozpl-print .btiles--list .btile__m, #ozpl-layer .btiles--list .btile__m {grid-area: min; align-self: start; min-height: 0; margin: 0; font-size: 13px;} #ozpl .btiles--list .btile::after, #ozpl-print .btiles--list .btile::after, #ozpl-layer .btiles--list .btile::after, #ozpl .btiles--list .btile[aria-pressed="true"]::after, #ozpl-print .btiles--list .btile[aria-pressed="true"]::after, #ozpl-layer .btiles--list .btile[aria-pressed="true"]::after {content: ''; position: absolute; top: 50%; right: 16px; left: auto; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%;} #ozpl .btiles--list .btile:not([aria-pressed="true"])::after, #ozpl-print .btiles--list .btile:not([aria-pressed="true"])::after, #ozpl-layer .btiles--list .btile:not([aria-pressed="true"])::after {border: 2px solid var(--field); background: var(--surface);} #ozpl .pitem__h, #ozpl-print .pitem__h, #ozpl-layer .pitem__h {display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 2px 10px; margin-bottom: 12px;} #ozpl .pitem__h h3, #ozpl-print .pitem__h h3, #ozpl-layer .pitem__h h3 {grid-column: 1; font-size: 17px; line-height: 1.3;} #ozpl .pitem__s, #ozpl-print .pitem__s, #ozpl-layer .pitem__s {grid-column: 1; grid-row: 2; font-size: 13px;} #ozpl .pitem__rm, #ozpl-print .pitem__rm, #ozpl-layer .pitem__rm {grid-column: 2; grid-row: 1; margin: -6px -8px 0 0;} #ozpl .qrows, #ozpl-print .qrows, #ozpl-layer .qrows {gap: 10px; margin-top: 0;} #ozpl .qrow, #ozpl-print .qrow, #ozpl-layer .qrow {row-gap: 10px;} #ozpl .pitem__next, #ozpl-print .pitem__next, #ozpl-layer .pitem__next {margin-top: 12px;} #ozpl .lead, #ozpl-print .lead, #ozpl-layer .lead {margin-top: 16px;} #ozpl .fold + .fold, #ozpl-print .fold + .fold, #ozpl-layer .fold + .fold, #ozpl .fold + .sec, #ozpl-print .fold + .sec, #ozpl-layer .fold + .sec, #ozpl .sec + .fold, #ozpl-print .sec + .fold, #ozpl-layer .sec + .fold {margin-top: 12px;} #ozpl #form[data-swipe="next"] .step, #ozpl-print #form[data-swipe="next"] .step, #ozpl-layer #form[data-swipe="next"] .step {animation: ozSwipeNext .26s ease-out;} #ozpl #form[data-swipe="back"] .step, #ozpl-print #form[data-swipe="back"] .step, #ozpl-layer #form[data-swipe="back"] .step {animation: ozSwipeBack .26s ease-out;} } @keyframes ozSwipeNext { from { opacity: .3; transform: translateX(32px); } to { opacity: 1; transform: none; } } @keyframes ozSwipeBack { from { opacity: .3; transform: translateX(-32px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { #ozpl #form[data-swipe] .step, #ozpl-print #form[data-swipe] .step, #ozpl-layer #form[data-swipe] .step {animation: none;} } @media (max-width: 760px) { #ozpl .pitem .fold__s > span:first-of-type, #ozpl-print .pitem .fold__s > span:first-of-type, #ozpl-layer .pitem .fold__s > span:first-of-type {white-space: nowrap;} #ozpl .pitem .fold__n, #ozpl-print .pitem .fold__n, #ozpl-layer .pitem .fold__n {max-width: 42%;} #ozpl .qrow__fill, #ozpl-print .qrow__fill, #ozpl-layer .qrow__fill {flex-wrap: wrap; overflow: visible; margin: 0; padding: 0;} } @media (max-width: 760px) { #ozpl .pk + .bgroup, #ozpl-print .pk + .bgroup, #ozpl-layer .pk + .bgroup {position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; white-space: nowrap;} #ozpl .pk + .bgroup + .btiles, #ozpl-print .pk + .bgroup + .btiles, #ozpl-layer .pk + .bgroup + .btiles {margin-top: 10px;} } #ozpl .hero h1, #ozpl-print .hero h1, #ozpl-layer .hero h1 {font-stretch: 100%; font-weight: 750; letter-spacing: -.035em; line-height: 1.02; text-wrap: balance;} #ozpl .step h2, #ozpl-print .step h2, #ozpl-layer .step h2 {font-stretch: 100%; font-weight: 750; letter-spacing: -.03em;} #ozpl .ok__ref, #ozpl-print .ok__ref, #ozpl-layer .ok__ref {font-stretch: 100%;} @media (max-width: 760px) { #ozpl .hero h1, #ozpl-print .hero h1, #ozpl-layer .hero h1 {font-size: 36px;} } #ozpl .hero__ex > .ic, #ozpl-print .hero__ex > .ic, #ozpl-layer .hero__ex > .ic {display: none;} @media (max-width: 760px) { #ozpl .hero__ex > .ic, #ozpl-print .hero__ex > .ic, #ozpl-layer .hero__ex > .ic {display: block;} } @media (max-width: 760px) { #ozpl .pitem .fold__s > span:first-of-type, #ozpl-print .pitem .fold__s > span:first-of-type, #ozpl-layer .pitem .fold__s > span:first-of-type {flex: none;} #ozpl .pitem .fold__n, #ozpl-print .pitem .fold__n, #ozpl-layer .pitem .fold__n {flex: 1; min-width: 0; max-width: none; text-align: right;} #ozpl .qrow__fill, #ozpl-print .qrow__fill, #ozpl-layer .qrow__fill {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;} #ozpl .qrow__fill .fill, #ozpl-print .qrow__fill .fill, #ozpl-layer .qrow__fill .fill {white-space: normal; line-height: 1.25; padding: 6px 8px; font-size: 12.5px; text-align: center;} } #ozpl .rp-tanks, #ozpl-print .rp-tanks, #ozpl-layer .rp-tanks {list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;} #ozpl .rp-tanks li, #ozpl-print .rp-tanks li, #ozpl-layer .rp-tanks li {display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; padding: 8px 10px 14px; background: var(--tint); border-radius: var(--r-m);} #ozpl .rp-tanks img, #ozpl-print .rp-tanks img, #ozpl-layer .rp-tanks img {width: 100%; max-width: 230px; height: auto; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply;} #ozpl .rp-tanks strong, #ozpl-print .rp-tanks strong, #ozpl-layer .rp-tanks strong {font-family: var(--display); font-size: 15px; font-weight: 800; color: var(--deep);} #ozpl .rp-tanks span, #ozpl-print .rp-tanks span, #ozpl-layer .rp-tanks span {font-size: 12.5px; font-weight: 600; color: var(--teal-ink);} #ozpl .rp-tanks__min, #ozpl-print .rp-tanks__min, #ozpl-layer .rp-tanks__min {margin: 12px 0 0; font-size: 14px; font-weight: 600; color: var(--deep);} #ozpl .stage--bulk .stage__pack img, #ozpl-print .stage--bulk .stage__pack img, #ozpl-layer .stage--bulk .stage__pack img {mix-blend-mode: multiply;} @media (max-width: 760px) { #ozpl .rp-tanks, #ozpl-print .rp-tanks, #ozpl-layer .rp-tanks {margin-top: 12px; gap: 8px;} #ozpl .rp-tanks li, #ozpl-print .rp-tanks li, #ozpl-layer .rp-tanks li {padding: 6px 6px 10px;} #ozpl .rp-tanks img, #ozpl-print .rp-tanks img, #ozpl-layer .rp-tanks img {max-width: 100px;} #ozpl .rpanel__head p, #ozpl-print .rpanel__head p, #ozpl-layer .rpanel__head p {font-size: 14px;} } #ozpl .tiers .dcards, #ozpl-print .tiers .dcards, #ozpl-layer .tiers .dcards {margin-top: 10px;} #ozpl .tiers .rcard, #ozpl-print .tiers .rcard, #ozpl-layer .tiers .rcard {min-height: 0;} #ozpl .rl, #ozpl-print .rl, #ozpl-layer .rl {position: absolute; max-width: none; pointer-events: none; display: block;} #ozpl .rl-wait, #ozpl-print .rl-wait, #ozpl-layer .rl-wait {visibility: hidden;} #ozpl .sy, #ozpl-print .sy, #ozpl-layer .sy {--sy-ink: #111111; --sy-soft: #5a5f60; --sy-acc: #1aa19c; --sy-track: #e6e8e8; --sy-h: 100vh; --sy-m: clamp(16px, 4vw, 64px); position: relative; background: #fff; border-radius: 30px; color: var(--sy-ink); min-height: var(--sy-h); max-width: 1800px; margin: 0 max(15px, calc((100% - 1800px) / 2)); padding: clamp(18px, calc(var(--sy-h) * .045), 64px) max(var(--sy-m), calc((100% - 1400px) / 2)); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto auto auto; column-gap: clamp(28px, 5vw, 88px); align-items: start; align-content: center; font: 400 18px/1.55 var(--sans);} #ozpl .sy-h1, #ozpl-print .sy-h1, #ozpl-layer .sy-h1 {grid-column: 1; font-family: var(--display); font-weight: 820; font-size: clamp(32px, min(5vw, calc(var(--sy-h) * .085)), 78px); line-height: .94; letter-spacing: -.045em; margin: 0; max-width: 11ch; color: var(--sy-ink);} #ozpl .sy-steps, #ozpl-print .sy-steps, #ozpl-layer .sy-steps {grid-column: 1; list-style: none; margin: clamp(16px, calc(var(--sy-h) * .04), 48px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;} #ozpl .sy-steps button, #ozpl-print .sy-steps button, #ozpl-layer .sy-steps button {width: 100%; background: none; border: 0; padding: 8px 0 0; text-align: left; font: 700 15px var(--sans); color: var(--sy-soft); cursor: pointer; min-height: 44px; box-shadow: none; text-transform: none; letter-spacing: normal;} #ozpl .sy-steps button[aria-current="step"], #ozpl-print .sy-steps button[aria-current="step"], #ozpl-layer .sy-steps button[aria-current="step"] {color: var(--sy-ink);} #ozpl .sy-steps button:focus-visible, #ozpl-print .sy-steps button:focus-visible, #ozpl-layer .sy-steps button:focus-visible {outline: 3px solid var(--sy-acc); outline-offset: 3px;} #ozpl .sy-bar, #ozpl-print .sy-bar, #ozpl-layer .sy-bar {display: block; height: 3px; background: var(--sy-track); margin-bottom: 10px; overflow: hidden;} #ozpl .sy-bar b, #ozpl-print .sy-bar b, #ozpl-layer .sy-bar b {display: block; height: 100%; width: 100%; background: var(--sy-ink); transform-origin: left; transform: scaleX(0);} #ozpl .sy-steps .done .sy-bar b, #ozpl-print .sy-steps .done .sy-bar b, #ozpl-layer .sy-steps .done .sy-bar b {transform: none;} #ozpl .sy-steps button[aria-current="step"] .sy-bar b, #ozpl-print .sy-steps button[aria-current="step"] .sy-bar b, #ozpl-layer .sy-steps button[aria-current="step"] .sy-bar b {background: var(--sy-acc);} #ozpl .sy-texts, #ozpl-print .sy-texts, #ozpl-layer .sy-texts {grid-column: 1; display: grid; margin-top: clamp(12px, calc(var(--sy-h) * .03), 36px);} #ozpl .sy-short, #ozpl-print .sy-short, #ozpl-layer .sy-short {display: none;} #ozpl .sy-tx, #ozpl-print .sy-tx, #ozpl-layer .sy-tx {grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s;} #ozpl .sy-tx.is-on, #ozpl-print .sy-tx.is-on, #ozpl-layer .sy-tx.is-on {opacity: 1; visibility: visible; transition: opacity .45s ease .2s;} #ozpl .sy-tx > *, #ozpl-print .sy-tx > *, #ozpl-layer .sy-tx > * {transform: translateY(14px); opacity: 0; transition: transform .7s cubic-bezier(.2, .7, .2, 1), opacity .7s ease;} #ozpl .sy-tx.is-on > *, #ozpl-print .sy-tx.is-on > *, #ozpl-layer .sy-tx.is-on > * {transform: none; opacity: 1; transition-delay: calc(.25s + var(--i, 0) * .09s);} #ozpl .sy-tx h2, #ozpl-print .sy-tx h2, #ozpl-layer .sy-tx h2 {font-family: var(--display); font-weight: 820; font-size: clamp(28px, min(4vw, calc(var(--sy-h) * .065)), 62px); line-height: .95; letter-spacing: -.04em; margin: 0; color: var(--sy-ink);} #ozpl .sy-tx p, #ozpl-print .sy-tx p, #ozpl-layer .sy-tx p, #ozpl .sy-tx li, #ozpl-print .sy-tx li, #ozpl-layer .sy-tx li, #ozpl .sy-alt, #ozpl-print .sy-alt, #ozpl-layer .sy-alt {font-family: var(--sans); letter-spacing: normal; text-transform: none;} #ozpl .sy-tx p, #ozpl-print .sy-tx p, #ozpl-layer .sy-tx p, #ozpl .sy-tx li, #ozpl-print .sy-tx li, #ozpl-layer .sy-tx li {font-size: clamp(16px, calc(var(--sy-h) * .023), 18px); color: var(--sy-ink);} #ozpl .sy-tx p, #ozpl-print .sy-tx p, #ozpl-layer .sy-tx p {margin: clamp(8px, calc(var(--sy-h) * .018), 16px) 0 0; max-width: 34ch;} #ozpl .sy-tx ul, #ozpl-print .sy-tx ul, #ozpl-layer .sy-tx ul {margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; max-width: 38ch;} #ozpl .sy-tx li, #ozpl-print .sy-tx li, #ozpl-layer .sy-tx li {padding-left: 22px; position: relative; margin: 0;} #ozpl .sy-tx li::before, #ozpl-print .sy-tx li::before, #ozpl-layer .sy-tx li::before {content: ''; position: absolute; left: 0; top: .72em; width: 12px; height: 2px; background: var(--sy-ink);} #ozpl .sy-tx .sy-big, #ozpl-print .sy-tx .sy-big, #ozpl-layer .sy-tx .sy-big {font-family: var(--display); font-weight: 800; font-size: clamp(22px, min(2.6vw, calc(var(--sy-h) * .044)), 40px); letter-spacing: -.03em; line-height: 1.05; margin-top: clamp(8px, calc(var(--sy-h) * .02), 18px);} #ozpl .sy-tx .sy-small, #ozpl-print .sy-tx .sy-small, #ozpl-layer .sy-tx .sy-small {font-size: 15px; color: var(--sy-soft); max-width: 44ch;} #ozpl .sy-cta, #ozpl-print .sy-cta, #ozpl-layer .sy-cta {grid-column: 1; align-self: start; margin-top: clamp(14px, calc(var(--sy-h) * .03), 28px);} #ozpl .sy-btn, #ozpl-print .sy-btn, #ozpl-layer .sy-btn {display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 52px; padding: 13px 20px 13px 24px; border-radius: 100px; color: #fff; font: 700 16px/16px var(--sans); text-decoration: none; white-space: nowrap; background: linear-gradient(to right, #02ccc4 0%, #00a09b 50%, #02ccc4 100%); background-size: 200% auto; background-position: left center; transition: background-position .4s ease-in-out, transform .12s;} #ozpl .sy-btn svg, #ozpl-print .sy-btn svg, #ozpl-layer .sy-btn svg {width: 25px; height: 25px; flex: none;} #ozpl .sy-btn:hover, #ozpl-print .sy-btn:hover, #ozpl-layer .sy-btn:hover, #ozpl .sy-btn:focus-visible, #ozpl-print .sy-btn:focus-visible, #ozpl-layer .sy-btn:focus-visible {background-position: right center; color: #fff;} #ozpl .sy-btn:focus-visible, #ozpl-print .sy-btn:focus-visible, #ozpl-layer .sy-btn:focus-visible {outline: 3px solid var(--sy-ink); outline-offset: 3px;} #ozpl .sy-btn:active, #ozpl-print .sy-btn:active, #ozpl-layer .sy-btn:active {transform: scale(.97);} #ozpl .sy-alt, #ozpl-print .sy-alt, #ozpl-layer .sy-alt {margin: 12px 0 0; font-size: 14.5px; color: var(--sy-soft);} #ozpl .sy-link, #ozpl-print .sy-link, #ozpl-layer .sy-link {background: none; border: 0; padding: 0; font: 700 14.5px var(--sans); color: var(--sy-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; box-shadow: none; text-transform: none;} #ozpl .sy-stage, #ozpl-print .sy-stage, #ozpl-layer .sy-stage {grid-column: 2; grid-row: 1 / 5; align-self: center; position: relative; width: 100%; aspect-ratio: 560 / 460; max-height: calc(var(--sy-h) * .86);} #ozpl .sy-sc, #ozpl-print .sy-sc, #ozpl-layer .sy-sc {position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: 0; transition: opacity .45s ease;} #ozpl .sy-sc.is-on, #ozpl-print .sy-sc.is-on, #ozpl-layer .sy-sc.is-on {opacity: 1;} #ozpl .sy-l, #ozpl-print .sy-l, #ozpl-layer .sy-l {fill: none; stroke: var(--sy-ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;} #ozpl .sy-l--t, #ozpl-print .sy-l--t, #ozpl-layer .sy-l--t {stroke-width: 1.7;} #ozpl .sy-l--d, #ozpl-print .sy-l--d, #ozpl-layer .sy-l--d {stroke-dasharray: 5 7;} #ozpl .sy-t, #ozpl-print .sy-t, #ozpl-layer .sy-t {font-family: var(--display); fill: var(--sy-ink); font-stretch: 72%;} #ozpl .sy-ts, #ozpl-print .sy-ts, #ozpl-layer .sy-ts {font-family: var(--display); font-stretch: 78%; font-weight: 500; font-size: 15px; fill: #7d8283;} #ozpl .sy-clip, #ozpl-print .sy-clip, #ozpl-layer .sy-clip {transform-box: fill-box; transform-origin: top;} @media (max-width: 900px) { #ozpl .sy, #ozpl-print .sy, #ozpl-layer .sy {grid-template-columns: 1fr; grid-template-rows: none; align-content: start; padding-top: clamp(14px, calc(var(--sy-h) * .03), 28px); padding-bottom: 18px;} #ozpl .sy-h1, #ozpl-print .sy-h1, #ozpl-layer .sy-h1 {font-size: clamp(28px, min(9vw, calc(var(--sy-h) * .054)), 46px); order: 1;} #ozpl .sy-steps, #ozpl-print .sy-steps, #ozpl-layer .sy-steps {order: 2; margin-top: clamp(8px, calc(var(--sy-h) * .02), 18px);} #ozpl .sy-steps button, #ozpl-print .sy-steps button, #ozpl-layer .sy-steps button {min-height: 40px; padding-top: 6px; font-size: 14px;} #ozpl .sy-bar, #ozpl-print .sy-bar, #ozpl-layer .sy-bar {margin-bottom: 8px;} #ozpl .sy-stage, #ozpl-print .sy-stage, #ozpl-layer .sy-stage {order: 3; grid-column: 1; grid-row: auto; margin-top: 6px; height: calc(var(--sy-h) * .4); max-height: 380px; aspect-ratio: auto;} #ozpl .sy-texts, #ozpl-print .sy-texts, #ozpl-layer .sy-texts {order: 4; margin-top: 6px;} #ozpl .sy-tx h2, #ozpl-print .sy-tx h2, #ozpl-layer .sy-tx h2, #ozpl .sy-tx .sy-long, #ozpl-print .sy-tx .sy-long, #ozpl-layer .sy-tx .sy-long {display: none;} #ozpl .sy-tx .sy-short, #ozpl-print .sy-tx .sy-short, #ozpl-layer .sy-tx .sy-short {display: block; margin: 0; font-size: 16.5px; line-height: 1.45; max-width: none;} #ozpl .sy-cta, #ozpl-print .sy-cta, #ozpl-layer .sy-cta {order: 5; margin-top: 14px;} #ozpl .sy-btn, #ozpl-print .sy-btn, #ozpl-layer .sy-btn {width: 100%; height: 54px;} #ozpl .sy-alt, #ozpl-print .sy-alt, #ozpl-layer .sy-alt {margin-top: 8px; font-size: 13.5px;} #ozpl .sy-link, #ozpl-print .sy-link, #ozpl-layer .sy-link {font-size: 13.5px;} } @media (max-width: 767px) { #ozpl .sy, #ozpl-print .sy, #ozpl-layer .sy {margin: 0; border-radius: 0;} } @media (max-width: 400px) { #ozpl .sy-steps button, #ozpl-print .sy-steps button, #ozpl-layer .sy-steps button {font-size: 13px;} } @media (prefers-reduced-motion: reduce) { #ozpl .sy-tx, #ozpl-print .sy-tx, #ozpl-layer .sy-tx, #ozpl .sy-tx > *, #ozpl-print .sy-tx > *, #ozpl-layer .sy-tx > *, #ozpl .sy-sc, #ozpl-print .sy-sc, #ozpl-layer .sy-sc {transition: none;} } /* WordPress layout */ #ozpl { text-align: left; overflow-wrap: break-word; width: 100%; } #ozpl .stepnav { top: var(--ozpl-top, 0px); } #ozpl #stepnav, #ozpl #app, #ozpl .step h2, #ozpl .send-err { scroll-margin-top: calc(var(--ozpl-top, 0px) + 8px); } #ozpl .basket { top: calc(16px + var(--ozpl-top, 0px)); max-height: calc(100vh - 32px - var(--ozpl-top, 0px)); } #ozpl-print { display: none; } @media print { #ozpl-print { display: block !important; } } body.bk-open { overflow: hidden; } /* full width at every screen size, whatever column the theme gives the shortcode (measured by app.js) */ #ozpl { position: relative; } #ozpl.ozpl--bleed { width: var(--ozpl-vw); max-width: none; left: var(--ozpl-x); }