.container.pg-page{max-width:1480px;padding-top:1.25rem;padding-bottom:2rem}.pg-sr-only{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;text-shadow:none;position:absolute;overflow:hidden}.pg-window{--pg-quiet:color-mix(in srgb, var(--color-text) 30%, var(--color-text-muted));height:var(--pg-win-h,clamp(560px, calc(100dvh - 9.5rem), 920px));background:var(--glass-window-bg);border:1px solid var(--glass-window-border);box-shadow:var(--glass-window-shadow);contain:paint;color:var(--color-text);border-radius:20px;flex-direction:column;display:flex;position:relative;overflow:hidden}.pg-titlebar{border-bottom:1px solid var(--color-border);flex-wrap:wrap;align-items:center;gap:.75rem 1rem;padding:.75rem 1rem;display:flex}.pg-project{flex:17.5rem;align-items:center;gap:.65rem;min-width:0;display:flex}.pg-logo{width:2.1rem;height:2.1rem;color:var(--color-canvas);background:linear-gradient(135deg, var(--subject-html), var(--color-brand) 55%, var(--subject-css));border-radius:10px;flex:none;place-items:center;font-family:Rajdhani,sans-serif;font-size:.95rem;font-weight:700;line-height:1;display:grid}.pg-title-input{min-width:0;max-width:22rem;font:inherit;font-size:var(--font-size-md);color:var(--color-text);background:0 0;border:1px solid #0000;border-radius:8px;flex:auto;padding:.35rem .55rem;font-weight:600}.pg-title-input::placeholder{color:var(--pg-quiet);font-weight:400}.pg-title-input:hover{border-color:var(--color-border)}.pg-title-input:focus-visible{border-color:var(--color-brand-soft);background:var(--glass-field-bg);outline:none}.pg-state{font-size:var(--font-size-xs);color:var(--pg-quiet);white-space:nowrap;flex:none;align-items:center;gap:.4rem;display:inline-flex}.pg-state:before{content:"";background:var(--color-warning);border-radius:50%;width:.45rem;height:.45rem}.pg-state--saved:before{background:var(--color-success)}.pg-state--busy:before{background:var(--color-brand-soft)}.pg-actions{flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin-left:auto;display:flex}.pg-group{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.pg-btn{font:inherit;font-size:var(--font-size-sm);color:var(--color-text);background:color-mix(in srgb, var(--color-brand) 14%, transparent);border:1px solid color-mix(in srgb, var(--color-brand-soft) 26%, transparent);cursor:pointer;transition:background-color .15s var(--ease-out), border-color .15s var(--ease-out);border-radius:8px;padding:.4rem .85rem}.pg-btn:hover:not(:disabled){background:color-mix(in srgb, var(--color-brand) 30%, transparent);border-color:color-mix(in srgb, var(--color-brand-soft) 50%, transparent)}.pg-btn:disabled{opacity:.55;cursor:default}.pg-btn--primary{background:var(--color-brand-active);color:oklch(100% 0 0);border-color:#0000}.pg-btn--primary:hover:not(:disabled){background:var(--color-brand);border-color:#0000}.pg-btn{align-items:center;gap:.4rem;display:inline-flex}.pg-btn svg{flex:none;width:.95rem;height:.95rem}.pg-btn--run{color:var(--color-canvas);background:var(--color-success);border-color:#0000;font-weight:700}.pg-btn--run:hover:not(:disabled){color:var(--color-canvas);background:color-mix(in srgb, var(--color-success) 82%, white);border-color:#0000}.pg-btn:focus-visible,.pg-tab:focus-visible,.pg-iconbtn:focus-visible,.pg-zoom button:focus-visible,.pg-seg__btn:focus-visible,.pg-switch:focus-visible,.pg-console__toggle:focus-visible,.pg-console__clear:focus-visible,.pg-menu__list button:focus-visible,.pg-snippet__actions button:focus-visible{outline:2px solid var(--color-brand-hover);outline-offset:2px}.pg-switch{font:inherit;font-size:var(--font-size-sm);color:var(--color-text-muted);cursor:pointer;background:0 0;border:0;border-radius:8px;align-items:center;gap:.5rem;padding:.3rem .4rem;display:inline-flex}.pg-switch.is-on{color:var(--color-text)}.pg-switch__track{background:var(--color-surface-highest);border:1px solid var(--color-border);width:2rem;height:1.1rem;transition:background-color .15s var(--ease-out);border-radius:999px;position:relative}.pg-switch.is-on .pg-switch__track{background:var(--color-brand);border-color:#0000}.pg-switch__thumb{background:var(--color-text);width:.8rem;height:.8rem;transition:transform .15s var(--ease-out);border-radius:50%;position:absolute;top:50%;left:2px;transform:translateY(-50%)}.pg-switch.is-on .pg-switch__thumb{transform:translate(.9rem,-50%)}.pg-menu{position:relative}.pg-menu__list{z-index:8;background:var(--color-surface-highest);border:1px solid var(--glass-window-border);min-width:13rem;box-shadow:var(--shadow-md);border-radius:10px;flex-direction:column;padding:.3rem;display:flex;position:absolute;top:calc(100% + 6px);right:0}.pg-menu__list button{text-align:left;font:inherit;font-size:var(--font-size-sm);color:var(--color-text);cursor:pointer;background:0 0;border:0;border-radius:6px;padding:.5rem .7rem}.pg-menu__list button:hover{background:color-mix(in srgb, var(--color-brand) 26%, transparent)}.pg-seg{background:color-mix(in srgb, var(--color-canvas) 60%, transparent);border:1px solid color-mix(in srgb, var(--color-brand-soft) 26%, transparent);border-radius:8px;padding:2px;display:inline-flex}.pg-seg__btn{font:inherit;font-size:var(--font-size-sm);color:var(--color-text-muted);cursor:pointer;white-space:nowrap;background:0 0;border:0;border-radius:6px;padding:.3rem .7rem}.pg-seg__btn:hover{color:var(--color-text)}.pg-seg__btn.is-active{color:oklch(100% 0 0);background:var(--color-brand-active)}.pg-placeholder{color:var(--color-text-muted);pointer-events:none;white-space:nowrap;user-select:none;font-family:JetBrains Mono,Fira Code,Consolas,SFMono-Regular,monospace;font-size:14px;font-style:italic;line-height:22px}.pg-tabbar{border-bottom:1px solid var(--color-border);background:color-mix(in srgb, var(--color-canvas) 55%, transparent);flex:none;align-items:stretch;display:flex;container-type:inline-size}.pg-tabs{flex:0 auto;min-width:0;display:flex;overflow:hidden}.pg-tabitem{border-top:2px solid #0000;border-right:1px solid var(--color-border);flex:0 auto;min-width:4.5rem;max-width:16.5rem;display:flex}.pg-tabitem:hover{background:color-mix(in srgb, var(--color-surface) 60%, transparent)}.pg-tabitem.is-active{background:var(--color-surface);border-top-color:var(--dot)}.pg-tab{min-width:0;font:inherit;font-family:var(--font-code);font-size:var(--font-size-sm);color:var(--color-text-muted);cursor:pointer;white-space:nowrap;touch-action:manipulation;background:0 0;border:0;flex:auto;align-items:center;gap:.5rem;padding:.55rem 1.1rem;display:flex;overflow:hidden}.pg-tab:hover,.pg-tab.is-active{color:var(--color-text)}.pg-tab__dot,.pg-tab__dirty{border-radius:50%;flex:none}.pg-tab__dot{background:var(--dot);width:.5rem;height:.5rem}.pg-tab__dirty{background:var(--color-warning);width:.4rem;height:.4rem}.pg-tab__name{white-space:nowrap;min-width:0;overflow:hidden}.pg-tab__name.is-clipped{mask-image:linear-gradient(90deg,#000 calc(100% - 1.6rem),#0000)}.pg-tab__edit{width:1.7rem;height:1.7rem;font:inherit;font-size:var(--font-size-sm);color:var(--color-text-muted);cursor:pointer;background:0 0;border:0;border-radius:6px;flex:none;align-self:center;place-items:center;margin-right:.35rem;padding:0;display:none}.pg-tab__edit:hover{color:var(--color-text);background:color-mix(in srgb, var(--color-brand) 22%, transparent)}.pg-tab__edit:focus-visible{outline:2px solid var(--color-brand-hover);outline-offset:2px}.pg-tab__input{width:12rem;max-width:60vw;font-family:var(--font-code);font-size:var(--font-size-sm);color:var(--color-text);background:var(--glass-field-bg);border:1px solid var(--glass-focus-ring);border-radius:6px;margin:.3rem .6rem;padding:.2rem .5rem}.pg-tab__input:focus-visible{outline:2px solid var(--color-brand-hover);outline-offset:1px}.pg-tabbar__hint{min-width:0;font-size:var(--font-size-xs);color:var(--pg-quiet);white-space:nowrap;text-overflow:ellipsis;flex:0 100 auto;align-self:center;margin-left:auto;padding:0 .9rem;overflow:hidden}@container (width<=37rem){.pg-tabbar__hint{display:none}}.pg-main{grid-template-columns:clamp(17rem, var(--pg-split,50%), calc(100% - 22rem)) .65rem minmax(0, 1fr);flex:1;grid-template-rows:minmax(0,1fr);min-height:0;padding:.75rem 1rem 0;display:grid}.pg-main.is-stacked{grid-template-columns:minmax(0,1fr);grid-template-rows:clamp(8rem, var(--pg-split,50%), calc(100% - 12.5rem)) .65rem minmax(0, 1fr)}.pg-left,.pg-right{border:1px solid color-mix(in srgb, var(--color-brand-soft) 14%, transparent);border-radius:14px;flex-direction:column;min-width:0;min-height:0;display:flex;overflow:hidden}.pg-left{background:var(--color-canvas)}.pg-left:focus-within{border-color:color-mix(in srgb, var(--color-brand-soft) 42%, transparent)}.pg-right{background:color-mix(in srgb, var(--color-canvas) 62%, transparent)}.pg-gutter{z-index:1;cursor:col-resize;touch-action:none;border-radius:6px;place-items:center;display:grid;position:relative}.pg-gutter:before{content:"";position:absolute;inset:0 -6px}.pg-main.is-stacked .pg-gutter:before{inset:-6px 0}.pg-gutter:after{content:"";background:color-mix(in srgb, var(--color-brand-soft) 28%, transparent);width:3px;height:2.75rem;transition:background-color .15s var(--ease-out);border-radius:3px}.pg-main.is-stacked .pg-gutter{cursor:row-resize}.pg-main.is-stacked .pg-gutter:after{width:2.75rem;height:3px}.pg-gutter:hover:after,.pg-gutter:focus-visible:after{background:var(--color-brand-soft)}.pg-gutter:focus-visible{outline:2px solid var(--color-brand-hover);outline-offset:-2px}.pg-editor{background:var(--color-canvas);flex:1;min-height:0;position:relative;overflow:hidden}.pg-monaco,.pg-fallback{position:absolute;inset:0}.pg-fallback{resize:none;width:100%;font-family:var(--font-code);font-size:var(--font-size-sm);color:var(--color-text);background:var(--color-canvas);tab-size:2;border:0;padding:.9rem 1rem;line-height:1.55}.pg-fallback:focus-visible{outline:none}.pg-loading{color:var(--color-text-muted);background:var(--color-canvas);place-items:center;display:grid;position:absolute;inset:0}.pg-preview{flex-direction:column;flex:1;min-height:0;display:flex}.pg-panehead{border-bottom:1px solid var(--color-border);background:color-mix(in srgb, var(--color-canvas) 55%, transparent);flex-wrap:wrap;align-items:center;gap:.5rem;padding:.5rem .65rem;display:flex}.pg-panehead__title{font-size:var(--font-size-sm);color:var(--pg-quiet);align-items:center;gap:.5rem;margin-right:auto;display:inline-flex}.pg-panehead__title:before{content:"";background:var(--color-success);width:.45rem;height:.45rem;box-shadow:0 0 0 3px color-mix(in srgb, var(--color-success) 25%, transparent);border-radius:50%}.pg-panehead__size{min-width:4.6rem;font-family:var(--font-code);font-size:var(--font-size-xs);text-align:right;color:var(--pg-quiet)}.pg-device{gap:2px;display:flex}.pg-iconbtn{color:var(--pg-quiet);cursor:pointer;background:0 0;border:0;border-radius:8px;place-items:center;padding:.35rem .5rem;display:grid}.pg-iconbtn svg{width:1.05rem;height:1.05rem}.pg-iconbtn:hover{color:var(--color-text)}.pg-iconbtn.is-active,.pg-iconbtn[aria-pressed=true]{color:var(--color-text);background:color-mix(in srgb, var(--color-brand) 30%, transparent)}.pg-iconbtn--box{border:1px solid var(--color-border);background:color-mix(in srgb, var(--color-surface-elevated) 60%, transparent)}.pg-iconbtn--box:hover{background:var(--color-surface-elevated)}.pg-zoom{border:1px solid var(--color-border);border-radius:9px;align-items:center;gap:2px;padding:2px;display:flex}.pg-zoom button{min-width:1.8rem;height:1.65rem;font:inherit;font-size:var(--font-size-sm);color:var(--color-text);cursor:pointer;background:0 0;border:0;border-radius:7px;padding:0 .5rem}.pg-zoom button:hover{background:color-mix(in srgb, var(--color-surface-elevated) 80%, transparent)}.pg-zoom button[aria-pressed=true]{background:color-mix(in srgb, var(--color-brand) 30%, transparent)}.pg-zoom__val{min-width:2.8rem;font-family:var(--font-code);font-size:var(--font-size-xs);text-align:center}.pg-stage{background:radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--color-brand-soft) 18%, transparent) 1px, transparent 1.5px) 0 0 / 18px 18px, color-mix(in srgb, var(--color-canvas) 70%, transparent);flex:1;min-height:0;padding:.75rem;display:flex;overflow:auto}.pg-frame{border:1px solid var(--color-border);background:var(--preview-canvas);box-shadow:var(--shadow-md);border-radius:10px;flex:none;margin:auto;position:relative;overflow:hidden}.pg-iframe{transform-origin:0 0;background:var(--preview-canvas);border:0;display:block;position:absolute;top:0;left:0}.pg-preview__empty{text-align:center;color:var(--color-surface-highest);pointer-events:none;place-items:center;padding:1.5rem;display:grid;position:absolute;inset:0}.pg-console{background:var(--color-canvas);border-top:1px solid var(--color-border);flex-direction:column;display:flex}.pg-console.is-open{flex:0 0 34%;min-height:8rem}.pg-console__bar{justify-content:space-between;align-items:center;padding:0 .4rem 0 0;display:flex}.pg-console__toggle,.pg-console__clear{font:inherit;font-size:var(--font-size-xs);color:var(--color-text-muted);cursor:pointer;background:0 0;border:0}.pg-console__toggle{align-items:center;gap:.5rem;padding:.4rem .9rem;display:inline-flex}.pg-console__toggle:hover,.pg-console__clear:hover:not(:disabled){color:var(--color-text)}.pg-console__clear{border-radius:6px;padding:.3rem .6rem}.pg-console__clear:disabled{opacity:.4;cursor:default}.pg-console__chev{width:.45rem;height:.45rem;transition:transform .15s var(--ease-out);border-bottom:2px solid;border-right:2px solid;transform:rotate(-45deg)}.pg-console.is-open .pg-console__chev{transform:rotate(45deg)}.pg-badge{text-align:center;min-width:1.2rem;color:var(--color-text);background:var(--color-surface-highest);border-radius:999px;padding:0 .35rem;font-size:.7rem;line-height:1.2rem}.pg-badge--error{color:oklch(100% 0 0);background:var(--color-error)}.pg-console__list{min-height:0;font-family:var(--font-code);font-size:var(--font-size-xs);flex:1;margin:0;padding:0 0 .4rem;list-style:none;overflow:auto}.pg-console__row,.pg-console__empty{white-space:pre-wrap;overflow-wrap:anywhere;border-bottom:1px solid color-mix(in srgb, var(--color-border) 60%, transparent);padding:.25rem .9rem}.pg-console__empty{color:var(--color-text-muted);border-bottom:0}.pg-console__row--info{color:var(--color-info)}.pg-console__row--warn{color:var(--color-warning);background:color-mix(in srgb, var(--color-warning) 8%, transparent)}.pg-console__row--error{color:var(--color-error);background:color-mix(in srgb, var(--color-error) 10%, transparent)}.pg-winresize{cursor:ns-resize;touch-action:none;border-top:1px solid var(--color-border);background:color-mix(in srgb, var(--color-canvas) 45%, transparent);flex:none;place-items:center;height:.85rem;display:grid}.pg-winresize:after{content:"";background:color-mix(in srgb, var(--color-brand-soft) 28%, transparent);width:2.75rem;height:3px;transition:background-color .15s var(--ease-out);border-radius:3px}.pg-winresize:hover:after,.pg-winresize:focus-visible:after{background:var(--color-brand-soft)}.pg-winresize:focus-visible{outline:2px solid var(--color-brand-hover);outline-offset:-2px}.pg-status{font-size:var(--font-size-xs);color:var(--color-text);background:color-mix(in srgb, var(--color-brand-active) 62%, var(--color-canvas));white-space:nowrap;align-items:center;gap:1.1rem;margin-top:.75rem;padding:.35rem 1rem;display:flex;overflow:hidden}.pg-status__lang:before{content:"";background:var(--dot);border-radius:50%;width:.5rem;height:.5rem;margin-right:.4rem;display:inline-block}.pg-status__guest{text-overflow:ellipsis;flex:0 auto;min-width:0;overflow:hidden}.pg-status__keys{align-items:center;gap:.35rem;margin-left:auto;display:inline-flex}.pg-status__keys kbd:nth-of-type(3){margin-left:.9rem}.pg-status kbd{font-family:var(--font-code);background:color-mix(in srgb, var(--color-canvas) 55%, transparent);border:1px solid color-mix(in srgb, var(--color-text) 25%, transparent);border-radius:4px;padding:0 .35rem;font-size:.7rem}.pg-status__notice{background:color-mix(in srgb, var(--color-canvas) 45%, transparent);border-radius:4px;padding:0 .5rem}.pg-status__notice--error{background:var(--color-error);color:oklch(100% 0 0)}.pg-scrim{z-index:4;background:color-mix(in srgb, var(--color-canvas) 55%, transparent);position:absolute;inset:0}.pg-drawer{z-index:5;background:var(--color-surface-elevated);border-left:1px solid var(--glass-window-border);width:min(23rem,92%);transition:transform .22s var(--ease-out);flex-direction:column;gap:.75rem;padding:.9rem;display:flex;position:absolute;top:0;bottom:0;right:0;transform:translate(100%)}.pg-drawer.is-open{transform:translate(0)}.pg-drawer__head{justify-content:space-between;align-items:center;display:flex}.pg-drawer__head h2{font-size:var(--font-size-md);margin:0}.pg-drawer__head h2:before{content:none}.pg-drawer__body{flex:1;min-height:0;overflow:auto}.pg-drawer__msg{font-size:var(--font-size-sm);color:var(--color-text-muted);margin:.5rem 0}.pg-drawer__msg--error{color:var(--color-error)}.pg-snippets{flex-direction:column;gap:.5rem;margin:0;padding:0;list-style:none;display:flex}.pg-snippet{background:var(--glass-pane-bg);border:1px solid var(--glass-pane-border);border-radius:10px;padding:.65rem .75rem}.pg-snippet.is-current{border-color:var(--color-brand-soft)}.pg-snippet__title{overflow-wrap:anywhere;font-weight:600}.pg-snippet__meta{font-size:var(--font-size-xs);color:var(--color-text-muted);margin-top:.15rem}.pg-snippet__actions{gap:.4rem;margin-top:.5rem;display:flex}.pg-snippet__actions button{font:inherit;font-size:var(--font-size-xs);color:var(--color-text);background:color-mix(in srgb, var(--color-brand) 14%, transparent);border:1px solid color-mix(in srgb, var(--color-brand-soft) 22%, transparent);cursor:pointer;border-radius:6px;padding:.2rem .6rem}.pg-snippet__actions button:hover{background:color-mix(in srgb, var(--color-brand) 30%, transparent)}.pg-snippet__actions button.is-danger{color:var(--color-error);border-color:color-mix(in srgb, var(--color-error) 40%, transparent);background:0 0}.pg-snippet__rename{width:100%;font:inherit;color:var(--color-text);background:var(--glass-field-bg);border:1px solid var(--color-brand-soft);border-radius:8px;padding:.35rem .5rem}.pg-snippet__rename:focus-visible{outline:none}.fv-modal-backdrop{z-index:1000;background:color-mix(in srgb, var(--color-canvas) 72%, transparent);place-items:center;padding:1rem;display:grid;position:fixed;inset:0}.fv-modal{width:min(26rem,100%);padding:1.3rem 1.4rem}.fv-modal h4{font-size:var(--font-size-md);margin:0 0 .5rem}.fv-modal p{color:var(--color-text-muted);margin:0 0 1.1rem;line-height:1.6}.fv-actions{justify-content:flex-end;gap:.6rem;display:flex}.fv-btn{font:inherit;font-size:var(--font-size-sm);color:var(--color-text);cursor:pointer;border:1px solid #0000;border-radius:8px;padding:.45rem 1rem;text-decoration:none}.fv-btn:hover{color:var(--color-text);text-decoration:none}.fv-btn:focus-visible{outline:2px solid var(--color-brand-hover);outline-offset:2px}.fv-btn--ghost{background:color-mix(in srgb, var(--color-brand) 14%, transparent);border-color:color-mix(in srgb, var(--color-brand-soft) 26%, transparent)}.fv-btn--primary{background:var(--color-brand-active);color:oklch(100% 0 0)}.fv-btn--primary:hover{background:var(--color-brand);color:oklch(100% 0 0)}.fv-btn--danger{background:var(--color-error);color:oklch(100% 0 0)}.fv-btn:disabled{opacity:.55;cursor:default}@media (width<=1240px){.pg-panehead__size{display:none}}@media (width<=1100px){.pg-status__keys{display:none}}.pg-window ::-webkit-scrollbar-button{width:0;height:0;display:none}.pg-drawer ::-webkit-scrollbar-button{width:0;height:0;display:none}@media (width<=900px),(pointer:coarse){.pg-tab__edit{display:inline-grid}}@media (width<=900px){.pg-window{height:auto;min-height:90vh}.pg-main,.pg-main.is-stacked{grid-template-rows:22rem 28rem;grid-template-columns:minmax(0,1fr);gap:.75rem}.pg-tab{gap:.4rem;padding:.55rem .7rem}.pg-gutter,.pg-winresize,.pg-layout-btn{display:none}}