:root{--color-bg: #EAEFEF;--color-panel: #BFC9D1;--color-accent: #FF9B51;--color-text: #25343F;--bg-main: var(--color-bg);--bg-panel: color-mix(in srgb, var(--color-panel) 65%, transparent);--bg-panel-solid: var(--color-panel);--bg-panel-hover: color-mix(in srgb, var(--color-panel) 85%, var(--color-accent) 15%);--bg-input: color-mix(in srgb, var(--color-bg) 80%, var(--color-panel) 20%);--bg-nav: color-mix(in srgb, var(--color-bg) 85%, transparent);--bg-pill: color-mix(in srgb, var(--color-panel) 50%, transparent);--border-muted: color-mix(in srgb, var(--color-panel) 70%, var(--color-accent) 30%);--border-subtle: color-mix(in srgb, var(--color-panel) 90%, transparent);--border-active: var(--color-accent);--border-glow: color-mix(in srgb, var(--color-accent) 40%, transparent);--text-heading: var(--color-text);--text-body: color-mix(in srgb, var(--color-text) 88%, var(--color-panel) 12%);--text-muted: color-mix(in srgb, var(--color-text) 65%, transparent);--text-dim: color-mix(in srgb, var(--color-text) 45%, transparent);--font-mono: "JetBrains Mono", monospace;--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--nav-height: 72px;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--radius-full: 9999px}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-height) + 16px);background-color:var(--bg-main);color:var(--text-body);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{min-height:100vh;background-color:var(--bg-main);color:var(--text-body);overflow-x:hidden;position:relative;line-height:1.6}.ambient-bg{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0;background-image:radial-gradient(1000px 500px at 85% 10%,color-mix(in srgb,var(--color-accent) 15%,transparent),transparent 60%),radial-gradient(800px 500px at 15% 90%,color-mix(in srgb,var(--color-panel) 35%,transparent),transparent 60%),radial-gradient(circle,color-mix(in srgb,var(--color-accent) 15%,transparent) 1.2px,transparent 1.6px);background-size:cover,cover,28px 28px}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--color-bg)}::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--color-panel) 80%,var(--color-accent) 20%);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--color-accent)}h1,h2,h3,h4,h5,h6{color:var(--text-heading);font-weight:700;line-height:1.25}.mono{font-family:var(--font-mono)}.text-gradient{background:linear-gradient(135deg,var(--color-text) 0%,var(--color-accent) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.text-accent-glow{color:var(--color-accent);text-shadow:0 0 20px color-mix(in srgb,var(--color-accent) 50%,transparent)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:13.5px;font-weight:600;letter-spacing:.02em;text-decoration:none;cursor:pointer;transition:all .2s cubic-bezier(.16,1,.3,1);border:1px solid transparent}.btn-primary{background-color:var(--color-accent);color:var(--color-bg);border-color:color-mix(in srgb,var(--color-accent) 85%,white 15%);box-shadow:0 4px 14px color-mix(in srgb,var(--color-accent) 40%,transparent);font-weight:700}.btn-primary:hover{background-color:color-mix(in srgb,var(--color-accent) 85%,white 15%);box-shadow:0 6px 20px color-mix(in srgb,var(--color-accent) 60%,transparent);transform:translateY(-1.5px);color:var(--color-bg)}.btn-outline{background-color:color-mix(in srgb,var(--color-panel) 60%,transparent);color:var(--text-heading);border-color:var(--border-muted);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.btn-outline:hover{border-color:var(--color-accent);color:var(--color-accent);background-color:color-mix(in srgb,var(--color-panel) 80%,var(--color-accent) 20%);box-shadow:0 0 16px color-mix(in srgb,var(--color-accent) 25%,transparent);transform:translateY(-1.5px)}.btn-ghost{background-color:transparent;color:var(--text-muted);border-color:transparent}.btn-ghost:hover{color:var(--color-accent);background-color:color-mix(in srgb,var(--color-panel) 40%,transparent)}.card-glass{background-color:var(--bg-panel);border:1px solid var(--border-muted);border-radius:var(--radius-md);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease}.card-glass:hover{border-color:var(--color-accent);box-shadow:0 10px 30px -10px #0009,0 0 20px color-mix(in srgb,var(--color-accent) 20%,transparent)}.badge-pill{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;font-family:var(--font-mono);font-size:11.5px;font-weight:500;border-radius:var(--radius-full);background:var(--bg-pill);border:1px solid color-mix(in srgb,var(--color-panel) 60%,var(--color-accent) 40%);color:var(--text-body);transition:all .15s ease}.badge-pill:hover{background:color-mix(in srgb,var(--color-accent) 20%,var(--color-panel) 80%);border-color:var(--color-accent);color:var(--color-accent);transform:translateY(-1px)}.badge-pill .dot{width:6px;height:6px;border-radius:50%;background-color:var(--color-accent);box-shadow:0 0 6px var(--color-accent)}.form-group{margin-bottom:20px}.form-label{display:block;font-family:var(--font-mono);font-size:12.5px;color:var(--text-muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:.05em}.form-control{width:100%;padding:12px 16px;background-color:var(--bg-input);border:1px solid var(--border-muted);border-radius:var(--radius-sm);color:var(--text-heading);font-family:var(--font-sans);font-size:14px;outline:none;transition:all .2s ease}.form-control:focus{border-color:var(--color-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-accent) 25%,transparent);background-color:color-mix(in srgb,var(--color-panel) 90%,var(--color-bg) 10%)}.app-container{min-height:100vh;display:flex;flex-direction:column;position:relative;z-index:1}.main-content{flex:1;padding-top:calc(var(--nav-height) + 24px);padding-bottom:60px;max-width:1200px;width:100%;margin:0 auto;padding-left:24px;padding-right:24px}.page-transition-wrapper{position:relative;width:100%;min-height:calc(100vh - var(--nav-height) - 100px)}.grid-2col{display:grid;grid-template-columns:320px 1fr;gap:40px;align-items:start}@media (max-width: 900px){.grid-2col{grid-template-columns:1fr;gap:32px}}.previews-accordion{display:flex;align-items:center;gap:10px;height:440px;width:100%;margin-top:18px}.preview-bar-panel{position:relative;flex:1 1 0;min-width:0;height:380px;overflow:hidden;border:1px solid var(--border-muted);border-radius:var(--radius-md);cursor:pointer;background:linear-gradient(180deg,var(--bg-panel-solid),color-mix(in srgb,var(--color-bg) 80%,var(--color-panel) 20%));transition:flex-grow .5s cubic-bezier(.2,.7,.2,1),height .5s cubic-bezier(.2,.7,.2,1),border-color .25s ease,box-shadow .3s ease;outline:none;-webkit-user-select:none;user-select:none}.previews-accordion:hover .preview-bar-panel{flex-grow:.55;height:350px}.preview-bar-panel:hover,.preview-bar-panel:focus-visible,.preview-bar-panel.is-active{flex-grow:3.8!important;height:440px!important;border-color:var(--color-accent);box-shadow:0 16px 40px #00000073,0 0 24px color-mix(in srgb,var(--color-accent) 30%,transparent)}.preview-bar-panel .preview-ph{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--text-muted);font-size:13px;opacity:.85;text-align:center;padding:16px;background:radial-gradient(circle at center,color-mix(in srgb,var(--color-accent) 10%,transparent),transparent 70%);pointer-events:none;z-index:1}.preview-bar-panel .preview-ph-title{font-family:var(--font-mono);font-size:12px;color:var(--text-heading);letter-spacing:.05em;opacity:.9;white-space:nowrap}.preview-bar-panel .preview-media{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;z-index:1;opacity:.85;transition:opacity .35s ease,transform .5s cubic-bezier(.2,.7,.2,1);background-color:transparent}.preview-bar-panel img.preview-media,.preview-bar-panel .preview-image{z-index:1;opacity:.85}.preview-bar-panel video.preview-media,.preview-bar-panel .preview-video{z-index:2;opacity:0;pointer-events:none}.preview-bar-panel:hover video.preview-media,.preview-bar-panel.is-active video.preview-media,.preview-bar-panel.has-video-playing video.preview-media{opacity:1}.preview-bar-panel:hover .preview-media,.preview-bar-panel.is-active .preview-media{opacity:1;transform:scale(1.04)}.preview-bar-panel .preview-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,#0000001a,#00000059 45%,#000000eb);z-index:2;pointer-events:none;transition:background .3s ease}.preview-bar-panel .preview-label{position:absolute;z-index:3;left:0;right:0;bottom:0;padding:16px 18px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;pointer-events:none}.preview-bar-panel .preview-label .preview-title{display:flex;align-items:center;gap:8px;white-space:nowrap;font-weight:700;font-size:14px;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.95)}.preview-bar-panel .preview-label .preview-ico{color:var(--color-accent);flex-shrink:0;filter:drop-shadow(0 0 6px var(--color-accent))}.preview-bar-panel .preview-label .preview-desc{font-weight:400;font-size:12.5px;line-height:1.4;color:#ffffffeb;white-space:normal;max-height:0;opacity:0;overflow:hidden;transition:max-height .45s cubic-bezier(.2,.7,.2,1),opacity .35s ease;text-shadow:0 1px 4px rgba(0,0,0,.95)}.preview-bar-panel:hover .preview-label .preview-desc,.preview-bar-panel:focus-visible .preview-label .preview-desc,.preview-bar-panel.is-active .preview-label .preview-desc{max-height:84px;opacity:1}.preview-bar-panel .preview-tag{position:absolute;top:12px;right:12px;z-index:3;font-family:var(--font-mono);font-size:10px;font-weight:600;padding:3px 8px;border-radius:var(--radius-full);background:#000000b3;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid color-mix(in srgb,var(--color-accent) 60%,transparent);color:var(--color-accent);opacity:0;transform:translateY(-4px);transition:opacity .3s ease,transform .3s ease;pointer-events:none}.preview-bar-panel:hover .preview-tag,.preview-bar-panel.is-active .preview-tag{opacity:1;transform:translateY(0)}@media (max-width: 768px){.previews-accordion{flex-direction:column;height:auto;touch-action:pan-y;gap:12px}.preview-bar-panel{height:190px;flex:none;width:100%}.preview-bar-panel.is-active{height:290px!important}.previews-accordion:hover .preview-bar-panel,.preview-bar-panel:hover{flex:none!important}.preview-bar-panel .preview-label .preview-desc{max-height:84px;opacity:1}.preview-bar-panel .preview-tag{opacity:1;transform:none}}.substack-image-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;width:100%}@media (max-width: 1100px){.substack-image-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (max-width: 860px){.substack-image-gallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}}@media (max-width: 600px){.substack-image-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:3px}}@media (max-width: 380px){.substack-image-gallery{grid-template-columns:1fr}}.gallery-image-frame{position:relative;display:block;background:#fff;padding:0;border-radius:0!important;box-shadow:0 4px 16px #00000014,0 1px 3px #0000000d;overflow:hidden;aspect-ratio:16 / 11;text-decoration:none;cursor:pointer;transition:transform .28s cubic-bezier(.16,1,.3,1),box-shadow .28s cubic-bezier(.16,1,.3,1)}.gallery-image-frame:hover{transform:translateY(-4px);box-shadow:0 12px 28px #00000040,0 0 0 1px color-mix(in srgb,var(--color-accent) 60%,transparent)}.gallery-actual-img{width:100%;height:100%;object-fit:cover;border-radius:0!important;display:block;transition:transform .35s ease}.gallery-image-frame:hover .gallery-actual-img{transform:scale(1.05)}.gallery-hover-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#0a0f1999;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border-radius:0!important;padding:14px;display:flex;flex-direction:column;justify-content:space-between;opacity:0;pointer-events:none;transform:translateY(2px);transition:opacity .25s cubic-bezier(.16,1,.3,1),transform .25s cubic-bezier(.16,1,.3,1);z-index:2}.gallery-image-frame:hover .gallery-hover-overlay{opacity:1;pointer-events:auto;transform:translateY(0)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.spin-anim{animation:spin 1s linear infinite}@keyframes shimmer{0%{opacity:.5}50%{opacity:.9}to{opacity:.5}}.skeleton-shimmer{animation:shimmer 1.5s ease-in-out infinite}
