.landing-field-frame{border:1px solid hsl(var(--line));background:hsl(var(--surface));box-shadow:0 0 0 5px hsl(var(--canvas));border-radius:12px;overflow:hidden}.landing-field-toolbar,.landing-field-footer{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px;padding:12px;font-size:12px;line-height:1.3;display:flex}.landing-field-title{align-items:center;gap:7px;font-weight:500;display:flex}.landing-field-title .ui-icon{color:hsl(var(--success))}.landing-field-example{color:hsl(var(--ink-soft));font-size:11px}.landing-field-comparison{isolation:isolate;aspect-ratio:1800/1005;background:hsl(var(--surface-strong));position:relative;overflow:hidden}.landing-field-comparison>img{height:100%}.landing-field-overlay{width:100%;height:100%;position:absolute;inset:0}.landing-field-analysis-layer{clip-path:inset(0 calc(100% - var(--comparison-position)) 0 0)}.landing-zone-low{stop-color:hsl(var(--warning))}.landing-zone-mid{stop-color:hsl(var(--brand))}.landing-zone-high{stop-color:hsl(var(--success))}.landing-zone-deep{stop-color:hsl(var(--surface-strong))}.landing-field-boundary,.landing-field-boundary-shadow{fill:none;stroke:hsl(var(--canvas));stroke-width:1.5px;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}.landing-field-boundary-shadow{stroke:hsl(var(--ink) / .5);stroke-width:3.5px}.landing-field-labels{pointer-events:none;justify-content:space-between;gap:12px;display:flex;position:absolute;inset:10px 10px auto}.landing-field-labels>span{background:hsl(var(--surface) / .96);color:hsl(var(--ink));border-radius:4px;padding:6px 8px;font-size:10px;line-height:1.2}.landing-field-divider{top:0;bottom:0;left:var(--comparison-position);background:hsl(var(--canvas));pointer-events:none;width:2px;position:absolute;transform:translate(-50%)}.landing-field-divider>span{background:hsl(var(--surface));width:44px;height:44px;color:hsl(var(--ink));box-shadow:0 2px 8px hsl(var(--ink) / .16);border-radius:50%;justify-content:center;align-items:center;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.landing-field-comparison .landing-field-slider{appearance:none;cursor:ew-resize;touch-action:pan-y;background:0 0;border:0;border-radius:0;outline:none;width:100%;height:100%;margin:0;padding:0;position:absolute;inset:0}.landing-field-slider::-webkit-slider-runnable-track{background:0 0;height:100%}.landing-field-slider::-moz-range-track{background:0 0;height:100%}.landing-field-slider::-webkit-slider-thumb{appearance:none;width:1px;height:100%;box-shadow:none;background:0 0;border:0}.landing-field-slider::-moz-range-thumb{width:1px;height:100%;box-shadow:none;background:0 0;border:0}.landing-field-comparison:has(.landing-field-slider:focus-visible){outline:3px solid hsl(var(--brand));outline-offset:-3px}.landing-field-comparison:has(.landing-field-slider:focus-visible) .landing-field-divider>span{outline:3px solid hsl(var(--ink));outline-offset:3px}.landing-field-footer{color:hsl(var(--ink-soft));font-size:11px}.landing-field-footer label{color:hsl(var(--ink));cursor:pointer}.landing-field-legend{align-items:center;gap:6px;font-size:10px;display:flex}.landing-field-legend-ramp{background:linear-gradient(90deg, hsl(var(--warning)), hsl(var(--brand)), hsl(var(--success)), hsl(var(--surface-strong)));border-radius:2px;width:54px;height:5px}@media (min-width:640px){.landing-field-toolbar,.landing-field-footer{padding:16px 18px}.landing-field-title{font-size:15px}.landing-field-example,.landing-field-footer{font-size:13px}.landing-field-labels{inset:16px 16px auto}.landing-field-labels>span{padding:8px 10px;font-size:12px}.landing-field-legend{gap:8px;font-size:12px}.landing-field-legend-ramp{width:86px}}