.f-experience-bar{display:flex;align-items:center;gap:12px;margin:0 0 18px;padding:16px 20px;border:1px solid #d6ddd5;border-radius:12px;background:#f3f6ee}.f-experience-bar>div{flex:1}.f-experience-bar strong,.f-experience-bar span{display:block}.f-experience-bar span{font-size:.82rem;color:#526560;margin-top:4px}.f-experience-bar button,.f-guide button,.f-hint button,.f-feedback button,.f-transfer button{min-height:44px;white-space:normal}.f-guide{margin:10px 24px 18px;padding:18px 20px;border:1px solid #c7d9c7;border-left:4px solid #286459;border-radius:8px;background:#f0f6ed}.f-guide-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.f-guide-top h3{font-size:1rem;margin:0}.f-guide-top button{font-size:1.3rem;min-width:44px}.f-guide p{font-size:.88rem;line-height:1.65}.f-guide-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px}.f-guide-actions select{max-width:100%;min-height:44px}.f-guide-focus{outline:3px solid #9a641c!important;outline-offset:4px}.f-experiment{margin:0 24px 12px;border:1px solid #d9e0d9;border-radius:8px;background:#fffdf7}.f-experiment>summary{padding:14px 16px;cursor:pointer;font-size:.88rem;font-weight:650;min-height:44px}.f-experiment-body{padding:0 16px 16px}.f-experiment-body>p{font-size:.84rem;line-height:1.65;color:#50635e}.f-experiment select{display:block;width:100%;max-width:420px;min-height:44px;margin:8px 0 12px}.f-angle-label{display:block;font-size:.86rem}.f-angle-label output{float:right;font-variant-numeric:tabular-nums}.f-angle-label input{display:block;width:100%;min-height:44px;accent-color:#286459}.f-plot-reading{font-variant-numeric:tabular-nums}.f-plots-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.f-plots-grid figure{margin:0;min-width:0}.f-plots-grid figcaption{font-size:.85rem;font-weight:650;margin-bottom:8px}.f-plot{display:block;width:100%;height:auto;overflow:visible}.f-plot text{font:11px system-ui,sans-serif;fill:#526560}.f-plot-axis{stroke:#8e9e95;fill:none;stroke-width:1}.f-plot-zero{stroke:#dce3dc;fill:none}.f-plot-now{stroke:#286459;stroke-width:2.5;fill:none}.f-plot-before{stroke:#96631c;stroke-width:2;stroke-dasharray:6 4;fill:none}.f-plot-cursor{stroke:#73877c;stroke-width:1;fill:none}.f-plot-point{fill:#286459;stroke:#fffdf7;stroke-width:1.5}.f-plot-legend{display:flex;gap:18px;flex-wrap:wrap;font-size:.8rem}.f-plot-legend span:first-child{color:#286459}.f-plot-legend span+span{color:#85591b}.f-plot-table{font-size:.8rem}.f-purpose-svg{display:block;width:100%;max-height:210px;border-radius:8px;background:#f4f5ee}.f-purpose-rail{stroke:#879b91;stroke-width:3;fill:none}.f-purpose-rail-mark{stroke:#cbd4ca;stroke-width:1;fill:none}.f-purpose-body{fill:#ebc87a;stroke:#7b5932;stroke-width:2}.f-purpose-wheel{fill:#304e47;stroke:#fffdf7;stroke-width:3}.f-purpose-pole{fill:#c6d4ca;stroke:#56756b;stroke-width:2}.f-purpose-text{fill:#29493f;font:700 19px system-ui,sans-serif}.f-purpose-mover{fill:#e4bd73;stroke:#7b5932;stroke-width:2}.f-purpose-bar{fill:#d58460;stroke:#713d2c;stroke-width:2}.f-hint section+section{border-top:1px solid #d5dfcf;padding-top:12px;margin-top:12px}.f-hint p{margin:8px 0;line-height:1.65}.f-feedback button+button{margin-left:8px}.f-transfer{margin:48px 0}.f-transfer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.f-transfer-grid button{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;background:#fffdf7;border:1px solid #d2ded3;border-radius:8px;padding:14px;font-size:.85rem;color:#244a40}.f-transfer .f-experiment{margin:20px 0 0}.f-transfer h3{font-size:1rem;margin:22px 0 10px}.f-transfer ul{list-style:none;margin:0;padding:0}.f-transfer li{display:flex;align-items:center;gap:12px;justify-content:space-between;border-top:1px solid #e2e6de;padding:12px 0}.f-transfer li strong,.f-transfer li span{display:block;font-size:.84rem}.f-transfer li span{font-size:.77rem;color:#526560;margin-top:4px}.f-share-options{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}.f-share-link{width:100%;min-height:72px;resize:vertical;font:13px ui-monospace,monospace;overflow-wrap:anywhere}.f-share-privacy{font-size:.84rem;line-height:1.7;color:#50635e}.f-share-options button{min-height:44px}.f-guide :focus-visible,.f-experiment :focus-visible,.f-experience-bar :focus-visible,.f-transfer :focus-visible{outline:3px solid #95651f;outline-offset:3px}@media(max-width:900px){.f-plots-grid{grid-template-columns:1fr}.f-transfer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.f-experience-bar{flex-wrap:wrap}.f-experience-bar>div{flex-basis:100%}}@media(max-width:540px){.f-experience-bar{padding:14px}.f-experience-bar button{flex:1 1 100%}.f-guide{margin:10px 14px 14px;padding:14px}.f-experiment{margin:0 14px 10px}.f-experiment-body{padding:0 12px 12px}.f-experiment>summary{padding:12px}.f-guide-actions{align-items:stretch}.f-guide-actions button,.f-guide-actions select{width:100%}.f-transfer-grid{grid-template-columns:1fr}.f-transfer li{align-items:flex-start}.f-feedback button+button{margin:8px 0 0}.f-plots-grid{gap:20px}}
.f-purpose-svg path{stroke:#56756b;stroke-width:2;fill:none}.f-purpose-svg circle{fill:#304e47;stroke:#fffdf7;stroke-width:2}.f-purpose-svg .f-purpose-sign{fill:#ebc87a;stroke:#7b5932;stroke-width:2}.f-purpose-svg .f-purpose-ground{stroke:#879b91;stroke-width:3}
.f-transfer>.f-section-title{color:#fffbea}.f-transfer>.f-section-title .f-eyebrow{color:#dce5d5}@media(max-width:600px){.f-guide select,.f-experiment select{font-size:16px}}@media(forced-colors:active){.f-transfer>.f-section-title,.f-transfer>.f-section-title .f-eyebrow{color:CanvasText}.f-plot-now{stroke:CanvasText}.f-plot-before{stroke:LinkText}.f-plot-point{fill:CanvasText}.f-plot-cursor{stroke:Highlight}.f-guide-focus{outline-color:Highlight!important}.f-purpose-svg .f-purpose-sign{fill:Canvas;stroke:CanvasText}.f-purpose-svg path,.f-purpose-svg circle{stroke:CanvasText}.f-plot-legend span{color:CanvasText!important}}
.f-plot text{font-size:16px}.f-plot-axis-label{font-size:.75rem;color:#526560;text-align:center;margin:-8px 0 14px}@media(max-width:540px){.f-plot text{font-size:24px}.f-plot-axis-label{margin:0 0 12px}}@media(forced-colors:active){.f-plot text{fill:CanvasText}.f-plot-axis-label{color:CanvasText}}