:root{color-scheme:light;--ink-950:#101318;--ink-900:#171b22;--ink-850:#202630;--ink-800:#29313d;--line:#e1e4e9;--line-bright:#c9ced7;--paper:#fff;--paper-dim:#f4f5f7;--muted:#667085;--signal:#f06440;--signal-soft:#ff9a72;--success:#14805e;--danger:#c63c2f;--mono:"Berkeley Mono", "IBM Plex Mono", "Courier Prime", "Nimbus Mono PS", monospace;--serif:"Iowan Old Style", "Baskerville", "Palatino Linotype", Georgia, serif;font-family:var(--phi-font-sans);background:var(--phi-canvas);color:var(--phi-default)}*{box-sizing:border-box}[hidden]{display:none!important}html{background:var(--phi-canvas);min-width:320px}body{background:radial-gradient(circle at 8% -5%, color-mix(in oklch, var(--phi-accent) 8%, transparent), transparent 30rem), var(--phi-canvas);min-height:100vh;margin:0;overflow:hidden}button,textarea,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}.wordmark:focus-visible{outline:2px solid var(--phi-focus);outline-offset:2px}button{color:inherit}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.compile-desk{grid-template-rows:64px minmax(0,1fr);min-height:100dvh;max-height:100dvh;display:grid}.desk-header,.desk-footer{z-index:10;border-color:var(--phi-line);background:color-mix(in srgb, var(--phi-base) 94%, transparent);align-items:center;font-size:.75rem;display:grid;position:relative}.desk-header{border-bottom:1px solid var(--phi-line);box-shadow:var(--phi-shadow);grid-template-columns:minmax(17rem,1fr) auto;gap:1.5rem;padding:0 1.25rem}.wordmark{width:max-content;color:var(--phi-default);align-items:center;gap:.65rem;text-decoration:none;display:inline-flex}.header-brand{align-items:center;gap:.75rem;min-width:0;display:flex}.reference-link{text-decoration:none}.wordmark-mark{background:var(--phi-accent);width:2rem;height:2rem;color:var(--phi-accent-contrast);font:700 .9rem/1 var(--mono);box-shadow:var(--phi-shadow);border-radius:.5rem;place-items:center;display:grid}.wordmark-copy{gap:.05rem;display:grid}.wordmark-copy strong{letter-spacing:-.01em;font-size:.82rem;font-weight:650}.wordmark-copy small{color:var(--phi-subtle);font-size:.65rem;font-weight:400}.header-status{color:var(--phi-subtle);justify-content:flex-end;align-items:center;gap:.55rem;display:flex}.status-light{background:var(--signal);width:7px;height:7px;box-shadow:0 0 0 4px color-mix(in srgb, var(--signal) 14%, transparent);border-radius:50%}.status-light[data-state=valid]{background:var(--success);box-shadow:0 0 0 4px color-mix(in srgb, var(--success) 12%, transparent)}.status-light[data-state=invalid]{background:var(--danger);box-shadow:0 0 0 4px color-mix(in srgb, var(--danger) 12%, transparent)}.workspace{grid-template-columns:minmax(22rem,44fr) 14px minmax(30rem,56fr);gap:0;min-height:0;padding:.75rem;display:grid;overflow:hidden}.desk-panel{border:1px solid var(--phi-line);background:var(--phi-base);min-width:0;min-height:0;box-shadow:var(--phi-shadow);border-radius:.75rem;grid-template-rows:auto minmax(0,1fr) auto auto auto;display:grid;overflow:hidden}.editor-panel{background:var(--phi-base)}.preview-panel{background:var(--phi-base);grid-template-rows:auto minmax(0,1fr)}.panel-header{border-bottom:1px solid var(--phi-line);background:var(--phi-base);justify-content:space-between;align-items:end;gap:1rem;min-height:82px;padding:1rem 1.1rem;display:flex}.panel-index{color:var(--phi-subtle);font:500 .68rem/1 var(--phi-font-sans);letter-spacing:.05em;text-transform:uppercase;margin:0 0 .35rem}.panel-header h1,.panel-header h2{font-family:var(--phi-font-sans);letter-spacing:-.025em;margin:0;font-size:clamp(1.3rem,1.7vw,1.65rem);font-weight:650;line-height:1}.panel-tools,.output-actions,.viewport-switcher{align-items:center;display:flex}.output-actions{gap:.5rem}.panel-tools{flex-shrink:0}.viewport-button.is-active{background:var(--phi-tint)!important;color:var(--phi-accent)!important}button:disabled{cursor:not-allowed;opacity:.42}.viewport-switcher{margin-right:.15rem}.editor-shell{background:linear-gradient(var(--phi-hairline) 1px, transparent 1px) 0 0 / 100% 24px, var(--phi-canvas);min-height:0;padding:.75rem;position:relative;overflow:hidden}#yaml-editor{resize:none;width:100%;height:100%;min-height:0;color:var(--phi-default);caret-color:var(--phi-accent);font-family:var(--mono);tab-size:2;padding:1.2rem 1.25rem 4.5rem;font-size:.76rem;line-height:1.62}#yaml-editor::selection{background:color-mix(in srgb, var(--phi-accent) 22%, transparent)}.editor-shell.is-dragging{box-shadow:inset 0 0 0 2px var(--phi-accent);background:var(--phi-info-tint)}.drop-hint{color:var(--phi-muted);letter-spacing:.12em;pointer-events:none;margin:0;font-size:.58rem;position:absolute;bottom:.85rem;right:1.1rem}.editor-footer,.desk-footer{color:var(--phi-subtle)}.editor-footer{border-top:1px solid var(--phi-line);border-bottom:1px solid var(--phi-line);letter-spacing:.04em;grid-template-columns:1fr auto auto;justify-content:space-between;align-items:center;gap:1rem;padding:.55rem 1.25rem;font-size:.59rem;display:grid}.editor-footer p,.desk-footer p{margin:0}.diagnostics{background:var(--phi-tint);max-height:116px;padding:.75rem 1.25rem;font-size:.66rem;line-height:1.5;overflow:auto}.diagnostic-empty,.diagnostic-success{color:var(--muted);margin:0}.diagnostic-success{color:var(--phi-success-text)}.diagnostic-action-error{color:var(--phi-danger-text);margin:0}.diagnostic-item{width:100%;color:var(--phi-danger-text);text-align:left;cursor:pointer;background:0 0;border:0;grid-template-columns:auto 1fr;gap:.75rem;padding:.3rem 0;display:grid}.diagnostic-path{color:var(--phi-danger)}.compile-rail{z-index:4;background:color-mix(in srgb, var(--signal) 12%, var(--phi-canvas));border:0;position:relative;overflow:hidden}.compile-label{display:none}.compile-signal{background:linear-gradient(transparent, var(--signal), transparent);opacity:0;width:100%;height:18%;position:absolute;top:-25%;left:0}.compile-rail.is-pulsing .compile-signal{animation:.52s cubic-bezier(.33,1,.68,1) compile-pulse}@keyframes compile-pulse{0%{opacity:0;top:-20%}25%{opacity:1}to{opacity:0;top:105%}}.desk-footer{border-top:1px solid var(--phi-line);grid-template-columns:1fr auto 1fr;padding:0 1.25rem}.desk-footer p:nth-child(2){color:var(--phi-default)}.shortcut-hint{text-align:right}.mobile-tabs,.mobile-download{display:none}.reset-button.is-armed{background:var(--phi-danger-tint)!important;color:var(--phi-danger-text)!important}.source-notice{border-top:1px solid var(--phi-banner-alert-border);border-bottom:1px solid var(--phi-banner-alert-border);background:var(--phi-banner-alert-bg);min-height:42px;color:var(--phi-banner-alert-text);justify-content:space-between;align-items:center;gap:1rem;padding:.45rem 1.25rem;font-size:.64rem;line-height:1.4;display:flex}.source-notice[data-tone=danger]{border-color:var(--phi-banner-error-border);background:var(--phi-banner-error-bg);color:var(--phi-banner-error-text)}.source-notice p{margin:0}.source-notice-actions{flex-shrink:0;align-items:center;gap:.35rem;display:flex}.draft-toggle,#source-notice-dismiss{color:var(--phi-subtle)}.draft-toggle{align-items:center;gap:.4rem;font-size:.7rem;display:inline-flex}.draft-toggle .phi-button__label>span{background:var(--phi-muted);border-radius:50%;width:6px;height:6px}.draft-toggle[aria-pressed=true]{color:var(--phi-success-text)}.draft-toggle[aria-pressed=true] .phi-button__label>span{background:var(--phi-success);box-shadow:0 0 0 3px var(--phi-success-tint)}.source-state[data-state=changed]{color:var(--phi-warning-text)}.source-state[data-state=local]{color:var(--phi-success-text)}.monaco-editor-host{border:1px solid var(--phi-line);background:var(--phi-base);width:100%;height:100%;box-shadow:var(--phi-shadow);border-radius:.5rem;overflow:hidden}.monaco-editor-host:focus-within{border-color:var(--phi-focus);box-shadow:0 0 0 1px var(--phi-focus), 0 0 0 4px var(--phi-focus-soft)}.monaco-editor-host .monaco-editor,.monaco-editor-host .overflow-guard{border-radius:inherit}.monaco-editor-host .monaco-editor .scroll-decoration{box-shadow:0 1px 0 var(--phi-line)}.monaco-editor-host .monaco-editor .view-overlays .current-line{border:0}.monaco-editor-host .monaco-editor .margin-view-overlays .line-numbers{font-variant-numeric:tabular-nums}@media (width<=899px){.monaco-editor-host{border-radius:.375rem}}@media (forced-colors:active){.monaco-editor-host{border-color:canvastext}}.preview-stage{background:linear-gradient(45deg, color-mix(in srgb, var(--phi-line) 42%, transparent) 25%, transparent 25%) 0 0 / 16px 16px, linear-gradient(-45deg, color-mix(in srgb, var(--phi-line) 42%, transparent) 25%, transparent 25%) 0 8px / 16px 16px, var(--phi-tint);min-height:0;padding:clamp(.7rem,2vw,1.4rem);display:grid;overflow:auto}.preview-device{border:1px solid var(--phi-line);background:var(--paper);width:100%;height:100%;min-height:22rem;box-shadow:var(--phi-popover-shadow);border-radius:.625rem;justify-self:center;transition:width .24s;position:relative;overflow:hidden}.preview-stage[data-viewport=desktop] .preview-device{width:min(100%,1280px)}.preview-stage[data-viewport=tablet] .preview-device{width:min(100%,768px)}.preview-stage[data-viewport=mobile] .preview-device{width:min(100%,390px)}.preview-chrome{border-bottom:1px solid var(--phi-line);background:var(--phi-base);height:25px;color:var(--phi-subtle);align-items:center;gap:5px;padding:0 .6rem;display:flex}.preview-chrome span{background:var(--phi-muted);border-radius:50%;width:6px;height:6px}.preview-chrome p{letter-spacing:.12em;margin:0 0 0 auto;font-size:.48rem}#preview-frame{background:var(--paper);border:0;width:100%;height:calc(100% - 25px);display:block}.preview-placeholder{background:var(--paper);color:#17201d;letter-spacing:.12em;justify-content:center;align-items:center;gap:1rem;font-size:.7rem;display:flex;position:absolute;inset:25px 0 0}.preview-placeholder strong{color:var(--signal);font-family:var(--serif);font-size:2rem;font-weight:400}.stale-banner{z-index:2;border:1px solid var(--phi-banner-error-border);background:var(--phi-banner-error-bg);color:var(--phi-banner-error-text);letter-spacing:.07em;text-transform:uppercase;border-radius:.5rem;padding:.55rem .8rem;font-size:.58rem;position:absolute;top:2.25rem;left:50%;transform:translate(-50%)}@media (width<=1120px){.privacy-note,.viewport-switcher,.primary-button .phi-button__label>span{display:none}.desk-header{grid-template-columns:1fr auto}.workspace{grid-template-columns:minmax(20rem,46fr) 14px minmax(25rem,54fr)}}@media (width<=899px){body{overflow:auto}.compile-desk{grid-template-rows:64px 45px minmax(0,1fr) 58px;min-height:100dvh;max-height:none}.desk-header{padding-inline:.85rem}.header-status{font-size:.58rem}.mobile-tabs{border-bottom:1px solid var(--phi-line);background:var(--phi-tint);grid-template-columns:1fr 1fr;display:grid}.mobile-tab{border:0;border-right:1px solid var(--phi-line);min-height:44px;color:var(--phi-subtle);border-radius:0}.mobile-tab .phi-button__label>span{color:var(--signal);margin-right:.4rem}.mobile-tab.is-active{background:var(--phi-base);box-shadow:inset 0 -2px var(--phi-accent);color:var(--phi-default)}.workspace{min-height:0;display:block}.desk-panel{height:100%}.compile-desk[data-mobile-view=yaml] [data-panel=preview],.compile-desk[data-mobile-view=preview] [data-panel=yaml],.compile-rail,.preview-header .output-actions>.tool-button,.preview-header .primary-button{display:none}.preview-stage{padding:0}.preview-device{border:0;border-radius:0;min-height:100%}.desk-footer{display:none}.mobile-download{background:var(--phi-accent);width:100%;min-height:58px;color:var(--phi-accent-contrast);border:0;border-radius:0;font-weight:700;display:flex}.panel-header{min-height:84px;padding-inline:1rem}.panel-tools .tool-button{min-height:44px}.editor-footer,.diagnostics,.source-notice{padding-inline:1rem}.editor-footer{grid-template-columns:1fr auto auto;gap:.35rem .75rem}.draft-toggle,.source-notice button{min-height:44px}#source-notice-dismiss{min-width:44px}}@media (width<=520px){.panel-header h1,.panel-header h2{font-size:1.45rem}.panel-tools .tool-button{padding-inline:.55rem}.source-notice{gap:.5rem;font-size:.59rem}#yaml-editor{padding-inline:1rem;font-size:.7rem}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}@media (forced-colors:active){button,.preview-device,.editor-shell.is-dragging{border:1px solid buttontext}}