@charset "UTF-8";*{box-sizing:border-box}html,body{margin:0;height:100%}body{display:flex;flex-direction:column;background:#fafaf8;color:#0c1c25;font-family:system-ui,-apple-system,Segoe UI,sans-serif}body.demo-dark{background:#0c1c25;color:#edebe7eb}.header,.layout,.app-container,.ast-layout,.docs-shell,.gfm-toolbar,.gfm-main{--penna-c-logo-paper: #edebe7;--penna-c-logo-ink: #0c1c25;--penna-c-logo-cyan: #0ac1e3;--penna-c-logo-blue: #008dee;--penna-c-logo-green: #16bf73;--penna-c-logo-yellow: #fec933;--penna-c-logo-orange: #fe9138;--penna-c-logo-red: #f33a3c;--penna-c-stroke: #0c1c25;--penna-c-brand-1: #008dee;--penna-c-brand-2: #0099e8;--penna-c-brand-3: #0ac1e3;--penna-c-brand-soft: rgba(0, 141, 238, .16);--penna-c-brand-on-bg: #ffffff;--penna-c-text-1: #0c1c25;--penna-c-text-2: rgba(12, 28, 37, .78);--penna-c-text-3: rgba(12, 28, 37, .56);--penna-c-bg: #fafaf8;--penna-c-bg-elevated: #ffffff;--penna-c-contrast-light: #fff;--penna-c-contrast-dark: #000;--penna-c-brand-mark: #0ac1e3;--penna-c-code-fg: #f33a3c;--penna-c-note: #008dee;--penna-c-note-mark: #fec933;--penna-c-note-on-bg: color-mix( in srgb, #008dee 20%, #fff );--penna-c-alert-note-text: #008dee;--penna-c-alert-note-bg: color-mix( in srgb, #008dee 10%, transparent );--penna-c-alert-note-border: color-mix( in srgb, #008dee 30%, transparent );--penna-c-tip: #16bf73;--penna-c-tip-mark: #fec933;--penna-c-tip-on-bg: color-mix( in srgb, #16bf73 20%, #fff );--penna-c-alert-tip-text: #16bf73;--penna-c-alert-tip-bg: color-mix( in srgb, #16bf73 10%, transparent );--penna-c-alert-tip-border: color-mix( in srgb, #16bf73 30%, transparent );--penna-c-warning: #fe9138;--penna-c-warning-mark: #fec933;--penna-c-warning-on-bg: color-mix( in srgb, #fe9138 20%, #fff );--penna-c-alert-warning-text: #fe9138;--penna-c-alert-warning-bg: color-mix( in srgb, #fe9138 10%, transparent );--penna-c-alert-warning-border: color-mix( in srgb, #fe9138 30%, transparent );--penna-c-caution: #f33a3c;--penna-c-caution-mark: #fe9138;--penna-c-caution-on-bg: color-mix( in srgb, #f33a3c 20%, #fff );--penna-c-alert-caution-text: #f33a3c;--penna-c-alert-caution-bg: color-mix( in srgb, #f33a3c 10%, transparent );--penna-c-alert-caution-border: color-mix( in srgb, #f33a3c 30%, transparent );--penna-c-danger: #f33a3c;--penna-c-danger-mark: #fe9138;--penna-c-danger-on-bg: color-mix( in srgb, #f33a3c 20%, #fff );--penna-c-alert-danger-text: #f33a3c;--penna-c-alert-danger-bg: color-mix( in srgb, #f33a3c 10%, transparent );--penna-c-alert-danger-border: color-mix( in srgb, #f33a3c 30%, transparent );--penna-c-important: #0ac1e3;--penna-c-important-mark: #008dee;--penna-c-important-on-bg: color-mix( in srgb, #0ac1e3 20%, #fff );--penna-c-alert-important-text: #0ac1e3;--penna-c-alert-important-bg: color-mix( in srgb, #0ac1e3 10%, transparent );--penna-c-alert-important-border: color-mix( in srgb, #0ac1e3 30%, transparent );--penna-c-image-card-info-fg: var(--penna-c-contrast-light);--penna-c-image-card-scrim: var(--penna-c-contrast-dark);--penna-c-image-card-info-bg: linear-gradient( 180deg, transparent 0%, color-mix(in srgb, var(--penna-c-image-card-scrim) 45%, transparent) 55%, color-mix(in srgb, var(--penna-c-image-card-scrim) 72%, transparent) 100% );--penna-c-image-card-info-bg-hover: linear-gradient( 180deg, transparent 0%, color-mix(in srgb, var(--penna-c-image-card-scrim) 55%, transparent) 35%, color-mix(in srgb, var(--penna-c-image-card-scrim) 82%, transparent) 100% );--penna-c-media-player-bg: var(--penna-c-bg);--penna-c-media-shade: var(--penna-c-bg);--penna-c-on-brand: var(--penna-c-contrast-light);--penna-c-code-block-header-bg: color-mix( in srgb, var(--penna-c-text-3) 6%, var(--penna-c-bg-elevated) );--penna-c-code-block-code-bg: color-mix( in srgb, var(--penna-c-text-3) 4%, var(--penna-c-bg) );--penna-c-code-block-shadow: 0 1px 2px color-mix(in srgb, var(--penna-c-text-3) 8%, transparent), 0 8px 24px color-mix(in srgb, var(--penna-c-text-3) 6%, transparent)}body.demo-dark .header,body.demo-dark .layout,body.demo-dark .app-container,body.demo-dark .ast-layout,body.demo-dark .docs-shell,body.demo-dark .gfm-toolbar,body.demo-dark .gfm-main{--penna-c-logo-paper: #edebe7;--penna-c-logo-ink: #0c1c25;--penna-c-logo-cyan: #0ac1e3;--penna-c-logo-blue: #008dee;--penna-c-logo-green: #16bf73;--penna-c-logo-yellow: #fec933;--penna-c-logo-orange: #fe9138;--penna-c-logo-red: #f33a3c;--penna-c-stroke: #edebe7;--penna-c-brand-1: #0ac1e3;--penna-c-brand-2: #3dcee9;--penna-c-brand-3: #6dd8ee;--penna-c-brand-soft: rgba(10, 193, 227, .22);--penna-c-brand-on-bg: #0c1c25;--penna-c-text-1: rgba(237, 235, 231, .92);--penna-c-text-2: rgba(237, 235, 231, .68);--penna-c-text-3: rgba(237, 235, 231, .42);--penna-c-bg: #0c1c25;--penna-c-bg-elevated: #152836;--penna-c-contrast-light: #fff;--penna-c-contrast-dark: #000;--penna-c-brand-mark: color-mix( in srgb, #6dd8ee 48%, #0c1c25 );--penna-c-code-fg: #ff7a72;--penna-c-note: #4db4f5;--penna-c-note-mark: color-mix( in srgb, #fec933 50%, #0c1c25 );--penna-c-note-on-bg: color-mix( in srgb, #4db4f5 20%, #000 );--penna-c-alert-note-text: #4db4f5;--penna-c-alert-note-bg: color-mix( in srgb, #4db4f5 15%, transparent );--penna-c-alert-note-border: color-mix( in srgb, #4db4f5 40%, transparent );--penna-c-tip: #3dd48a;--penna-c-tip-mark: color-mix( in srgb, #16bf73 50%, #0c1c25 );--penna-c-tip-on-bg: color-mix( in srgb, #3dd48a 20%, #000 );--penna-c-alert-tip-text: #3dd48a;--penna-c-alert-tip-bg: color-mix( in srgb, #3dd48a 15%, transparent );--penna-c-alert-tip-border: color-mix( in srgb, #3dd48a 40%, transparent );--penna-c-warning: #ffb04a;--penna-c-warning-mark: color-mix( in srgb, #fec933 50%, #0c1c25 );--penna-c-warning-on-bg: color-mix( in srgb, #ffb04a 20%, #000 );--penna-c-alert-warning-text: #ffb04a;--penna-c-alert-warning-bg: color-mix( in srgb, #ffb04a 15%, transparent );--penna-c-alert-warning-border: color-mix( in srgb, #ffb04a 40%, transparent );--penna-c-caution: #ff7a72;--penna-c-caution-mark: color-mix( in srgb, #fe9138 50%, #0c1c25 );--penna-c-caution-on-bg: color-mix( in srgb, #ff7a72 20%, #000 );--penna-c-alert-caution-text: #ff7a72;--penna-c-alert-caution-bg: color-mix( in srgb, #ff7a72 15%, transparent );--penna-c-alert-caution-border: color-mix( in srgb, #ff7a72 40%, transparent );--penna-c-danger: #ff6b66;--penna-c-danger-mark: color-mix( in srgb, #f33a3c 50%, #0c1c25 );--penna-c-danger-on-bg: color-mix( in srgb, #ff6b66 20%, #000 );--penna-c-alert-danger-text: #ff6b66;--penna-c-alert-danger-bg: color-mix( in srgb, #ff6b66 15%, transparent );--penna-c-alert-danger-border: color-mix( in srgb, #ff6b66 40%, transparent );--penna-c-important: #3dcee9;--penna-c-important-mark: color-mix( in srgb, #0ac1e3 50%, #0c1c25 );--penna-c-important-on-bg: color-mix( in srgb, #3dcee9 20%, #000 );--penna-c-alert-important-text: #3dcee9;--penna-c-alert-important-bg: color-mix( in srgb, #3dcee9 15%, transparent );--penna-c-alert-important-border: color-mix( in srgb, #3dcee9 40%, transparent );--penna-c-image-card-scrim: var(--penna-c-contrast-dark);--penna-c-image-card-info-bg: linear-gradient( 180deg, transparent 0%, color-mix(in srgb, var(--penna-c-image-card-scrim) 45%, transparent) 55%, color-mix(in srgb, var(--penna-c-image-card-scrim) 72%, transparent) 100% );--penna-c-image-card-info-bg-hover: linear-gradient( 180deg, transparent 0%, color-mix(in srgb, var(--penna-c-image-card-scrim) 55%, transparent) 35%, color-mix(in srgb, var(--penna-c-image-card-scrim) 82%, transparent) 100% );--penna-c-media-player-bg: var(--penna-c-bg);--penna-c-media-shade: var(--penna-c-bg);--penna-c-on-brand: var(--penna-c-contrast-light);--penna-c-code-block-header-bg: color-mix( in srgb, var(--penna-c-text-3) 6%, var(--penna-c-bg-elevated) );--penna-c-code-block-code-bg: color-mix( in srgb, var(--penna-c-text-3) 4%, var(--penna-c-bg) );--penna-c-code-block-shadow: 0 1px 2px color-mix(in srgb, var(--penna-c-text-3) 8%, transparent), 0 8px 24px color-mix(in srgb, var(--penna-c-text-3) 6%, transparent);--penna-c-image-card-info-fg: var(--penna-c-contrast-light);--penna-c-image-card-info-bg: linear-gradient( 180deg, transparent 0%, color-mix(in srgb, var(--penna-c-image-card-scrim) 58%, transparent) 55%, color-mix(in srgb, var(--penna-c-image-card-scrim) 88%, transparent) 100% );--penna-c-image-card-info-bg-hover: linear-gradient( 180deg, transparent 0%, color-mix(in srgb, var(--penna-c-image-card-scrim) 68%, transparent) 35%, color-mix(in srgb, var(--penna-c-image-card-scrim) 92%, transparent) 100% );--penna-c-code-block-header-bg: color-mix( in srgb, var(--penna-c-contrast-light) 4%, var(--penna-c-bg-elevated) );--penna-c-code-block-code-bg: color-mix( in srgb, var(--penna-c-contrast-dark) 22%, var(--penna-c-bg-elevated) );--penna-c-code-block-shadow: 0 1px 2px color-mix(in srgb, var(--penna-c-contrast-dark) 35%, transparent)}.header{display:flex;align-items:center;gap:16px;padding:12px 18px;background:var(--penna-c-bg-elevated);border-bottom:1px solid color-mix(in srgb,var(--penna-c-text-3) 22%,transparent);flex-shrink:0}.back{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--penna-c-brand-1);font-size:13px}.back:hover{text-decoration:underline;color:var(--penna-c-brand-2)}.header-logo{width:20px;height:20px;border-radius:5px;flex-shrink:0}.title{font-weight:600;font-size:14px;color:var(--penna-c-text-1)}.header-controls{display:flex;align-items:center;gap:12px;margin-left:auto;flex-wrap:wrap}.header-controls label{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--penna-c-text-2)}.header-controls select{font:inherit;padding:4px 8px;border:1px solid color-mix(in srgb,var(--penna-c-text-3) 35%,transparent);border-radius:6px;background:var(--penna-c-bg);color:var(--penna-c-text-1)}.timing,.ast-timing{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:12px;font-weight:500;color:var(--penna-c-brand-1);background:var(--penna-c-brand-soft);border:1px solid color-mix(in srgb,var(--penna-c-brand-1) 28%,transparent);border-radius:8px;padding:4px 10px;white-space:nowrap}.app-container{flex:1;min-height:0;display:flex;flex-direction:column}