.header{display:flex;align-items:center;gap:16px;padding:16px 18px;background:var(--penna-c-bg-elevated);border-bottom:1px solid color-mix(in srgb,var(--penna-c-text-3) 22%,transparent)}.back{text-decoration:none;color:var(--penna-c-brand-1);font-size:13px}.back:hover{color:var(--penna-c-brand-2)}.title{font-weight:650;color:var(--penna-c-text-1)}.layout{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:16px 18px 28px;height:calc(100vh - 64px)}.panel{background:var(--penna-c-bg);border:1px solid color-mix(in srgb,var(--penna-c-text-3) 22%,transparent);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;min-height:0}.panel-title{padding:12px 14px;border-bottom:1px solid color-mix(in srgb,var(--penna-c-text-3) 14%,transparent);font-size:13px;color:var(--penna-c-text-2);font-weight:600}.preview{flex:1;min-height:0;padding:14px;overflow:auto}@media(max-width:900px){.layout{grid-template-columns:1fr;height:auto}}.progress-wrap{--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 .progress-wrap{--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:12px;flex-wrap:wrap}.subtitle{font-size:12px;color:var(--penna-c-text-3);font-weight:400}.stream-controls{display:inline-flex;align-items:center;gap:8px}.stream-btn{padding:6px 14px;border:1px solid color-mix(in srgb,var(--penna-c-text-3) 35%,transparent);border-radius:999px;background:var(--penna-c-bg);color:var(--penna-c-text-1);font-size:12px;font-weight:500;cursor:pointer}.stream-btn:hover{border-color:var(--penna-c-brand-2);background:var(--penna-c-bg-elevated)}.stream-btn--primary{border-color:transparent;background:var(--penna-c-brand-1);color:var(--penna-c-contrast-light)}.stream-btn--primary:hover{background:var(--penna-c-brand-2)}.theme-btn{margin-left:auto;padding:6px 12px;border:1px solid color-mix(in srgb,var(--penna-c-text-3) 35%,transparent);border-radius:999px;background:var(--penna-c-bg);color:var(--penna-c-text-1);font-size:12px;font-weight:500;cursor:pointer}.theme-btn:hover{border-color:var(--penna-c-brand-2);background:var(--penna-c-bg-elevated)}.skin-label{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--penna-c-text-2)}.skin-select{padding:5px 8px;border:1px solid color-mix(in srgb,var(--penna-c-text-3) 35%,transparent);border-radius:8px;background:var(--penna-c-bg);color:var(--penna-c-text-1);font-size:12px}.progress-wrap{position:relative;height:4px;background:color-mix(in srgb,var(--penna-c-text-3) 18%,transparent);flex-shrink:0}.progress-bar{height:100%;width:0;background:var(--penna-c-brand-1);transition:width .08s linear}.progress-text{position:absolute;top:8px;right:18px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:11px;color:var(--penna-c-text-3)}.textarea{width:100%;flex:1;min-height:0;border:none;padding:14px;outline:none;font-size:13px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;resize:none;background:var(--penna-c-bg);color:var(--penna-c-text-2)}.preview-wrap{flex:1;min-height:0;overflow:auto}