:root{--color-primary-base: oklch(60.5% .217 257);--color-primary: var(--color-primary-base);--color-primary-hover: oklch(from var(--color-primary-base) calc(l - .138) calc(c - .053) h);--color-primary-accent: oklch(from var(--color-primary-base) calc(l - .027) calc(c + .011) calc(h + 3) );--color-focus-ring: oklch(from var(--color-primary-base) calc(l + .178) calc(c - .103) calc(h - 6) );--color-active-border: oklch(from var(--color-primary-base) calc(l + .036) calc(c - .086) calc(h - 6) );--color-active-bg: oklch(from var(--color-primary-base) calc(l + .253) calc(c - .168) calc(h - 9) );--color-active-text: oklch(from var(--color-primary-base) calc(l - .202) calc(c - .121) calc(h - 6) );--color-primary-hover-bg: oklch(from var(--color-primary-base) l c h / .05);--color-primary-hover-outline: oklch(from var(--color-primary-base) l c h / .3);--color-primary-glow: oklch(from var(--color-primary-base) l c h / .15);--color-accent-glow: oklch(from var(--color-primary-accent) l c h / .25);--color-active-border-tint: oklch(from var(--color-active-border) l c h / .15);--color-white: #fff;--color-white-soft: #fefefe;--color-black: #000;--color-secondary-base: oklch(55.8% .0165 245);--color-secondary: var(--color-secondary-base);--color-secondary-hover: oklch(from var(--color-secondary-base) calc(l - .09) c h);--color-bg-subtle: oklch(from var(--color-secondary-base) 98% calc(c*.1) h);--color-border-ui: oklch(from var(--color-secondary-base) 91% calc(c*.4) h);--color-hover: oklch(from var(--color-secondary-base) 88% 0 h);--color-border: oklch(from var(--color-secondary-base) 83% 0 h);--color-text-placeholder: oklch(from var(--color-secondary-base) 72% 0 h);--color-text-muted: oklch(from var(--color-secondary-base) 59% 0 h);--color-text: oklch(from var(--color-secondary-base) 27% 0 h);--color-code-inline-bg: #f0f0f0;--color-code-bg: #282828;--color-code-fg: #f8f8f2;--color-source-editor-bg: #1e1e2e;--color-source-editor-fg: #cdd6f4;--color-error-bg: #f8d7da;--color-error-border: #f5c2c7;--color-error-text: #842029}.editor-component-modal{display:none;position:fixed;z-index:10050;inset:0;overflow:auto;background-color:#0009;animation:fadeIn .8s;&.is-open{display:block}&.is-closing{display:block;animation:fadeOut .25s forwards}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.editor-component-modal-content{background-color:var(--color-white-soft);margin:5% auto;padding:0;border:1px solid var(--color-text-muted);width:90%;max-width:900px;border-radius:8px;box-shadow:0 4px 20px #0000004d;animation:slideDown .8s;.is-closing &{animation:slideUp .25s forwards}@media(max-width:768px){width:95%;margin:10% auto}}@keyframes slideDown{0%{transform:translateY(-50px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideUp{0%{transform:translateY(0);opacity:1}to{transform:translateY(-50px);opacity:0}}.editor-component-modal-header{padding:20px 30px;background-color:var(--color-bg-subtle);border-bottom:1px solid var(--color-border-ui);border-radius:8px 8px 0 0;display:flex;justify-content:space-between;align-items:center;@media(max-width:768px){padding:15px}h2{margin:0;font-size:1.5rem;color:var(--color-text)}}.editor-component-modal-close{color:var(--color-text-muted);background:none;border:none;cursor:pointer;font-size:26px;line-height:1;padding:0;margin-left:12px;&:hover,&:focus{color:var(--color-black)}}.editor-component-modal-body{padding:30px;@media(max-width:768px){padding:15px}input[type=text],input[type=url],textarea{width:100%;box-sizing:border-box;padding:10px 12px;margin:0 0 16px;border:1px solid var(--color-border);border-radius:4px;font-size:14px;line-height:1.4;color:var(--color-text);background-color:var(--color-white);&:focus{border-color:var(--color-focus-ring);outline:none;box-shadow:0 0 0 3px var(--color-primary-glow)}}}.editor-component-modal-actions{padding:20px 30px;background-color:var(--color-bg-subtle);border-top:1px solid var(--color-border-ui);border-radius:0 0 8px 8px;text-align:right;@media(max-width:768px){padding:15px}}.btn{padding:10px 20px;margin-left:10px;border:none;border-radius:4px;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s}.btn-primary{background-color:var(--color-primary);color:#fff;&:hover{background-color:var(--color-primary-hover)}}.btn-secondary{background-color:var(--color-secondary);color:#fff;&:hover{background-color:var(--color-secondary-hover)}}.tiptap-toolbar{position:fixed;top:0;left:0;right:0;z-index:9001;display:flex;flex-wrap:wrap;gap:4px;padding:6px 10px;background:#f0f0f0f7;backdrop-filter:blur(4px);border-bottom:1px solid var(--color-border);box-shadow:0 2px 6px #00000026}.toolbar-group{display:flex;align-items:center;gap:2px;padding-right:6px;border-right:1px solid var(--color-border);&:last-child{border-right:none}button{min-width:28px;height:28px;padding:2px 5px;border:1px solid transparent;border-radius:3px;background:transparent;cursor:pointer;font-size:12px;line-height:1;color:var(--color-text);white-space:nowrap;&:hover{background:var(--color-hover);border-color:var(--color-border)}&.is-active{background:var(--color-active-bg);border-color:var(--color-active-border);color:var(--color-active-text)}&:disabled{opacity:.4;cursor:not-allowed}}select{height:28px;border:1px solid var(--color-border);border-radius:3px;background:var(--color-white);cursor:pointer;font-size:12px;padding:0 4px;&:disabled{opacity:.4;cursor:not-allowed}}input[type=color]{width:28px;height:28px;padding:2px;border:1px solid var(--color-border);border-radius:3px;cursor:pointer;&:disabled{opacity:.4;cursor:not-allowed}}}.tiptap-editor-container{font:inherit;color:inherit;.ProseMirror{font:inherit;color:inherit;letter-spacing:inherit;min-height:4em;outline:none;&:focus-visible{outline:none}p.is-editor-empty:first-child:before{content:attr(data-placeholder);color:var(--color-text-placeholder);pointer-events:none;float:left;height:0}table{border-collapse:collapse;width:100%;table-layout:fixed;margin:.5em 0;td,th{border:1px solid var(--color-border);padding:6px 10px;vertical-align:top;position:relative}th{background:var(--color-bg-subtle);font-weight:600}}.selectedCell:after{content:"";position:absolute;inset:0;background:var(--color-active-border-tint);pointer-events:none}.column-resize-handle{position:absolute;right:-2px;top:0;bottom:0;width:4px;background:var(--color-active-border);cursor:col-resize}blockquote{border-left:4px solid var(--color-border);margin:.5em 0;padding:.25em 1em;color:var(--color-text-muted)}code{background:var(--color-code-inline-bg);border-radius:3px;padding:.1em .3em;font-family:Courier New,Courier,monospace;font-size:.9em}pre{background:var(--color-code-bg);color:var(--color-code-fg);border-radius:4px;padding:12px 16px;overflow-x:auto;code{background:none;color:inherit;padding:0;font-size:13px}}hr{border:none;border-top:2px solid var(--color-hover);margin:1em 0}}}.html-source-textarea{display:block;width:100%;min-height:280px;padding:12px;border:1px solid var(--color-border);font-family:Courier New,Courier,monospace;font-size:12px;line-height:1.5;resize:vertical;box-sizing:border-box;background:var(--color-source-editor-bg);color:var(--color-source-editor-fg)}.tiptap-char-count{font-size:11px;color:var(--color-text-muted);text-align:right;padding:2px 0;margin-top:2px}[data-zen-editable]{position:relative;cursor:pointer;transition:background-color .2s;padding:10px;border-radius:4px;&:hover{background-color:var(--color-primary-hover-bg);outline:2px dashed var(--color-primary-hover-outline)}&:hover:after{content:"\270e  Click to edit";position:absolute;top:4px;right:6px;font-size:.7rem;font-family:sans-serif;color:var(--color-primary);pointer-events:none}}body[data-zen-editing] [data-zen-editable]{pointer-events:none;cursor:default;opacity:.5}.htmx-indicator{display:none}.htmx-request .htmx-indicator{display:inline-block}[data-zen-editable-editing]{border-left:3px solid var(--color-primary-accent);padding-left:5px}.inline-editor-footer{position:fixed;bottom:0;left:0;right:0;z-index:9001;display:flex;align-items:center;gap:10px;padding:8px 16px;background:#f8f9faf7;backdrop-filter:blur(4px);border-top:1px solid var(--color-border-ui);box-shadow:0 -2px 6px #0000001a;flex-wrap:wrap}#edit-component-btn{margin-left:0}.inline-headline-input{flex:1 1 200px;font-size:1.1rem;font-weight:600;padding:6px 10px;border:1px solid var(--color-border);border-radius:4px;min-width:0;background:var(--color-white);&:focus{outline:none;border-color:var(--color-primary-accent);box-shadow:0 0 0 3px var(--color-accent-glow)}}.editor-save-error{display:none;position:fixed;inset:0;z-index:9999;background:#000000b8;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);align-items:center;justify-content:center;&.is-visible{display:flex;animation:error-backdrop-in .35s ease-out forwards;.editor-save-error__dialog{animation:error-dialog-in .5s cubic-bezier(.34,1.56,.64,1) forwards}}&.is-closing{display:flex;animation:error-backdrop-out .4s ease-in forwards;.editor-save-error__dialog{animation:error-dialog-out .4s cubic-bezier(.55,0,1,.45) forwards}}}.editor-save-error__dialog{background:#120404;border:1px solid #9b0000;border-radius:14px;box-shadow:0 0 0 1px #6a0000,0 0 50px #c8000066,0 30px 70px #000000d9;max-width:480px;width:calc(100% - 3rem);overflow:hidden}.editor-save-error__header{display:flex;align-items:center;gap:22px;padding:26px 28px 20px;border-bottom:1px solid rgb(160 0 0 / .35);background:#140202b3}.editor-save-error__title{font-size:1.05rem;font-weight:700;color:#f55;letter-spacing:.08em;text-transform:uppercase;text-shadow:0 0 14px rgb(255 40 40 / .7)}.editor-save-error__body{padding:22px 28px}.editor-save-error__message{margin:0;font-size:.97rem;line-height:1.6;color:#f0c8c8}.editor-save-error__footer{padding:14px 28px 22px;display:flex;justify-content:flex-end;border-top:1px solid rgb(160 0 0 / .2);background:#0f020280}.editor-save-error__close{background:transparent;border:1px solid rgb(180 0 0 / .6);color:#f99;padding:8px 24px;border-radius:6px;font-size:.82rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:background .2s,box-shadow .2s,border-color .2s,color .2s;&:hover{background:#b4000047;border-color:#c00;box-shadow:0 0 14px #dc000073;color:#fbb}&:focus{outline:2px solid #cc0000;outline-offset:2px}}.hal-9000{flex-shrink:0;width:80px;height:80px;border-radius:50%;background:radial-gradient(circle at 38% 32%,#848484,#5a5a5a 28%,#3c3c3c 55%,#1e1e1e);box-shadow:inset 0 3px 6px #ffffff21,inset 0 -2px 8px #0000008c,0 0 0 3px #2e2e2e,0 0 0 5px #4c4c4c,0 0 0 7px #1a1a1a,0 4px 20px #0009;display:flex;align-items:center;justify-content:center}.hal-9000__eye{width:50px;height:50px;border-radius:50%;background:radial-gradient(circle at 34% 28%,#f99,#f30 18%,#c00,#800,#3e0000 78%,#100000);position:relative;animation:hal-pulse 2.6s ease-in-out infinite;box-shadow:0 0 10px 5px #dc0000bf,0 0 28px 12px #b4000080,0 0 60px 24px #8c000040;&:before{content:"";position:absolute;inset:7px;border-radius:50%;border:1px solid rgb(80 0 0 / .55);box-shadow:inset 0 0 8px #0009,0 0 4px #0000004d}&:after{content:"";position:absolute;top:20%;left:22%;width:13px;height:8px;border-radius:50%;background:#ffdcdc8c;filter:blur(1.5px);transform:rotate(-25deg)}}@keyframes hal-pulse{0%,to{box-shadow:0 0 10px 5px #dc0000bf,0 0 28px 12px #b4000080,0 0 60px 24px #8c000040}50%{box-shadow:0 0 16px 8px #ff1400f2,0 0 42px 18px #dc0a00b3,0 0 85px 35px #be000066}}@keyframes error-backdrop-in{0%{opacity:0}to{opacity:1}}@keyframes error-backdrop-out{0%{opacity:1}to{opacity:0}}@keyframes error-dialog-in{0%{opacity:0;transform:scale(.5) translateY(-50px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes error-dialog-out{0%{opacity:1;transform:scale(1) translateY(0)}25%{opacity:1;transform:scale(1.04) translateY(-8px)}to{opacity:0;transform:scale(.7) translateY(50px)}}.inline-editor-actions{display:flex;gap:8px;flex-shrink:0}.edit-fields-list{display:grid;gap:12px}.edit-fields-group{padding:10px;border:1px solid var(--color-border-ui);border-radius:4px;background:var(--color-bg-subtle);p{margin:0 0 8px}}.edit-fields-grid{display:flex;flex-direction:column;gap:8px}.edit-field-row{display:grid;grid-template-columns:minmax(180px,220px) 1fr;gap:12px;align-items:start;@media(max-width:760px){grid-template-columns:1fr;gap:6px}}.edit-field-meta{display:flex;flex-direction:column}.edit-field-label{font-size:.82rem;font-weight:600;color:var(--color-text)}.edit-field-description{margin:2px 0 6px;font-size:.76rem;line-height:1.35;color:var(--color-text-muted)}.edit-field-input{width:100%;box-sizing:border-box;padding:8px 10px;margin:0;border:1px solid var(--color-border);border-radius:4px;background:var(--color-white);font-size:14px;line-height:1.4;color:var(--color-text);&:focus{outline:none;border-color:var(--color-primary-accent);box-shadow:0 0 0 3px var(--color-accent-glow)}}
