:root{--petrol: #0e6b70;--petrol-dark: #0a4f53;--turquoise: #63adb1;--selection: #ddf1f2;--border: #d3e5e6;--line: #e3eff0;--muted: #4d6a6e;--text: #13292d;--surface: #ffffff;--leaf: 16px 16px 16px 0;--leaf-large: 28px 28px 28px 0;--shadow: 0 6px 18px rgba(14, 107, 112, .08);--font: -apple-system, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;color-scheme:light}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;overflow-x:clip;background:var(--surface);color:var(--text);font:15px/1.35 var(--font);-webkit-text-size-adjust:100%;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;overscroll-behavior:none}body{display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}.bar{flex:none;position:relative;display:flex;align-items:center;gap:20px;padding-block:14px 10px;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}.wave{position:absolute;left:0;top:-60px;width:100%;height:300px;object-fit:fill;pointer-events:none;z-index:2}.bar>:not(.wave){position:relative;z-index:4}.brand{display:flex;align-items:center;gap:12px;min-width:0}.brand-logo{width:46px;height:46px;flex:none}.brand-text{display:flex;flex-direction:column;gap:2px;min-width:0}.brand-wordmark{height:26px;width:auto;max-width:100%}.brand-sub{font-size:13px;color:var(--muted);padding-left:2px;white-space:nowrap}.readouts{flex:1;display:flex;justify-content:center;gap:12px;min-width:0}.readout{display:flex;align-items:baseline;gap:10px;min-width:0;padding:9px 16px;border:1px solid var(--border);border-radius:var(--leaf);background:var(--surface);box-shadow:var(--shadow);font-variant-numeric:tabular-nums;transition:background-color .2s ease}.readout.is-active{background:var(--selection)}.readout .eye{font-weight:700;color:var(--petrol);letter-spacing:.04em}.readout .rx{font-weight:600;white-space:nowrap}.readout .extra{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.actions{display:flex;align-items:center;gap:10px}.stores{display:flex;flex-direction:column;gap:4px}.stores a{display:block;line-height:0;border-radius:6px}.stores img{height:30px;width:auto}.stores a:focus-visible{outline:3px solid var(--turquoise);outline-offset:2px}.button,.icon-button{appearance:none;font:inherit;cursor:pointer;touch-action:manipulation}.button{height:44px;padding:0 22px;border:1px solid #bfd7d9;border-radius:22px 22px 22px 0;background:var(--surface);color:var(--text);font-weight:500}.button:active{background:var(--selection)}.icon-button{width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:22px 22px 22px 0;background:var(--petrol);color:#fff}.icon-button:active{background:var(--petrol-dark)}.icon-button[aria-pressed=false]{background:var(--surface);color:var(--muted);border:1px solid #bfd7d9}.icon-button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}.icon-button[aria-pressed=false] .waves{opacity:0}.button:focus-visible,.icon-button:focus-visible{outline:3px solid var(--turquoise);outline-offset:2px}.stage{flex:1;position:relative;min-height:0}.face{position:absolute;z-index:1;max-width:none;height:auto;pointer-events:none}#phoropter{position:absolute;z-index:3;touch-action:none}.hint-row{flex:none;position:relative;padding-right:max(110px,env(safe-area-inset-right,0px));z-index:4;background:var(--surface);height:68px;display:flex;align-items:center;justify-content:center;gap:12px;padding-block:4px 12px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}.hint{margin:0;max-height:100%;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;padding:8px 16px;border-radius:var(--leaf);background:var(--selection);color:var(--petrol-dark);font-size:14px;text-align:center;text-wrap:balance}@media(max-width:900px){.bar{flex-wrap:wrap;gap:10px 16px}.readouts{order:3;flex-basis:100%}.brand-sub{display:none}}@media(max-width:560px){.readouts{flex-direction:column}.readout .extra{display:none}}.axis-step{flex:none;display:flex;align-items:center;gap:4px;padding:4px;border:1px solid var(--border);border-radius:var(--leaf);background:var(--surface);box-shadow:var(--shadow)}.axis-step[hidden]{display:none}.axis-step-label{padding:0 8px 0 6px;font-size:13px;color:var(--muted);white-space:nowrap}.axis-step button{appearance:none;min-width:48px;height:36px;border:0;border-radius:12px 12px 12px 0;background:transparent;color:var(--text);font:600 14px var(--font);font-variant-numeric:tabular-nums;cursor:pointer;touch-action:manipulation}.axis-step button[aria-pressed=true]{background:var(--petrol);color:#fff}.axis-step button:focus-visible{outline:3px solid var(--turquoise);outline-offset:1px}@media(max-width:700px){.axis-step-label{display:none}}.copyright{position:absolute;right:max(16px,env(safe-area-inset-right,0px));bottom:12px;font-size:11px;color:var(--muted)}@media(max-width:700px){.stores img{height:26px}}@media(max-width:700px){.hint-row{padding-right:max(16px,env(safe-area-inset-right,0px));padding-bottom:18px}.hint{font-size:12px;padding:6px 12px}.copyright{bottom:3px}}