.rf-page{grid-template-columns:var(--rf-panel-w) 1fr;background:var(--color-surface);--rf-panel-w:304px;min-height:100lvh;display:grid;position:relative}.rf-page[data-panel=closed]{--rf-panel-w:0px}.rf-panel-slot{z-index:calc(var(--z-index-nav) + 1);border-right:1px solid var(--color-line);background:var(--color-surface-raised);height:100lvh;transition:opacity var(--duration-200) var(--ease-standard);position:sticky;top:0;overflow:hidden}.rf-page[data-panel=closed] .rf-panel-slot{opacity:0;pointer-events:none}.rf-panel{grid-template-rows:auto minmax(0,1fr);width:304px;height:100%;min-height:0;display:grid}.rf-panel__head{border-bottom:1px solid var(--color-line-subtle);padding:24px 20px 16px}.rf-panel__title{color:var(--color-ink);font-size:var(--text-title);line-height:var(--text-title--line-height);letter-spacing:var(--text-title--letter-spacing);font-weight:var(--text-title--font-weight);margin:0}.rf-panel__sub{color:var(--color-ink);font-size:var(--text-ui);line-height:var(--text-ui--line-height);letter-spacing:var(--text-ui--letter-spacing);margin:2px 0 0}.rf-panel__body{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;height:100%;min-height:0;padding:4px 20px 64px;overflow-y:auto}.rf-group{border-bottom:1px solid var(--color-line-subtle);padding:16px 0}.rf-group:last-child{border-bottom:0}.rf-group__name{color:var(--color-ink);font-size:var(--text-ui);line-height:var(--text-ui--line-height);letter-spacing:var(--text-ui--letter-spacing);margin:0 0 10px;font-weight:600}.rf-presets,.rf-actions{flex-wrap:wrap;gap:6px;display:flex}.rf-actions{margin-top:8px}.rf-chip,.rf-button{appearance:none;border:1px solid var(--color-line);border-radius:var(--radius-sm);background:var(--color-surface-raised);color:var(--color-ink);font:inherit;font-size:var(--text-ui);letter-spacing:var(--text-ui--letter-spacing);cursor:pointer;transition:background var(--duration-120) var(--ease-hover), border-color var(--duration-120) var(--ease-hover);padding:5px 10px;line-height:1.2}.rf-chip:hover,.rf-button:hover{background:var(--color-surface-sunken);border-color:var(--color-line-strong)}.rf-chip[data-active=true]{background:var(--color-surface-inverse);border-color:var(--color-surface-inverse);color:var(--color-rf-inverse)}.rf-source{color:var(--color-ink);font-family:var(--font-mono,ui-monospace, monospace);word-break:break-all;margin:10px 0 0;font-size:11px;line-height:1.4}.rf-row{padding:5px 0;display:block}.rf-row--flat{justify-content:space-between;align-items:center;gap:12px;padding:7px 0;display:flex}.rf-row__head{justify-content:space-between;align-items:baseline;gap:8px;display:flex}.rf-row__label{color:var(--color-ink);font-size:var(--text-ui);line-height:var(--text-ui--line-height);letter-spacing:var(--text-ui--letter-spacing)}.rf-row__readout{align-items:baseline;gap:1px;display:inline-flex}.rf-row__unit{color:var(--color-ink);font-family:var(--font-mono,ui-monospace, monospace);font-size:11px}.rf-number{width:52px;color:var(--color-ink);font-family:var(--font-mono,ui-monospace, monospace);text-align:right;border-radius:var(--radius-2xs);background:0 0;border:0;padding:1px 2px;font-size:11px}.rf-number:hover{background:var(--color-surface-sunken)}.rf-number:focus-visible{outline:1px solid var(--color-line-strong)}.rf-number::-webkit-outer-spin-button{appearance:none;margin:0}.rf-number::-webkit-inner-spin-button{appearance:none;margin:0}.rf-slider{appearance:none;cursor:ew-resize;background:0 0;width:100%;height:18px;margin:0}.rf-slider::-webkit-slider-runnable-track{background:var(--color-line);border-radius:1px;height:2px}.rf-slider::-moz-range-track{background:var(--color-line);border-radius:1px;height:2px}.rf-slider::-webkit-slider-thumb{appearance:none;border-radius:var(--radius-full);background:var(--color-ink);border:0;width:11px;height:11px;margin-top:-4.5px}.rf-slider::-moz-range-thumb{border-radius:var(--radius-full);background:var(--color-ink);border:0;width:11px;height:11px}.rf-slider:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--color-line)}.rf-check{appearance:none;border-radius:var(--radius-full);background:var(--color-surface-sunken);border:1px solid var(--color-line);cursor:pointer;width:30px;height:17px;transition:background var(--duration-150) var(--ease-standard);position:relative}.rf-check:after{content:"";border-radius:var(--radius-full);background:var(--color-ink);width:11px;height:11px;transition:transform var(--duration-150) var(--ease-out-quint);position:absolute;top:2px;left:2px}.rf-check:checked{background:var(--color-surface-inverse);border-color:var(--color-surface-inverse)}.rf-check:checked:after{background:var(--color-rf-inverse);transform:translate(13px)}.rf-swatch{appearance:none;border:1px solid var(--color-line);border-radius:var(--radius-2xs);cursor:pointer;background:0 0;width:44px;height:20px;padding:0}.rf-swatch::-webkit-color-swatch-wrapper{padding:2px}.rf-swatch::-webkit-color-swatch{border:0;border-radius:2px}.rf-panel-toggle{z-index:calc(var(--z-index-nav) + 2);appearance:none;border:1px solid var(--color-line);border-radius:var(--radius-full);background:var(--color-surface-raised);color:var(--color-ink);font:inherit;font-size:var(--text-ui);cursor:pointer;padding:6px 12px;line-height:1.2;position:fixed;bottom:12px;left:12px}.rf-panel-toggle:hover{background:var(--color-surface-sunken)}.rf-stage{height:100lvh;position:sticky;top:0;overflow:hidden}.rf-stage canvas{display:block;width:100%!important;height:100%!important}.rf-stage__fallback{background:#ead7e2;width:100%;height:100%}.rf-stage[data-dragging=true]:after{content:"";border:1px dashed var(--color-ink);border-radius:var(--radius-md);pointer-events:none;position:absolute;inset:14px}.rf-file{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute}@media (max-width:900px){.rf-page{--rf-panel-w:0px;grid-template-columns:1fr}.rf-panel-slot{z-index:4;width:304px;max-width:88vw;transition:transform var(--duration-250) var(--ease-out-quint);position:fixed;inset:0 auto 0 0;transform:translate(0);box-shadow:0 0 40px #00000014}.rf-page[data-panel=closed] .rf-panel-slot{opacity:1;transform:translate(-100%)}.rf-panel-toggle{left:auto;right:12px}}.rf-note{border:1px solid var(--color-line);border-radius:var(--radius-xs);background:var(--color-surface-sunken);color:var(--color-ink);font-size:var(--text-ui);margin:10px 0 0;padding:5px 8px;line-height:1.35}