/* LinuxHermes Webpage Creator */
:root{color-scheme:dark;--app-bg:#080a0d;--panel:#0e1116;--panel-2:#141820;--border:rgba(255,255,255,.11);--border-strong:rgba(255,255,255,.19);--text:#d8dce2;--muted:#858b95;--ink:#f5f7fa;--cyan:#29b8db;--green:#23d18b;--red:#f14c4c;--mono:ui-monospace,SFMono-Regular,"DejaVu Sans Mono",Menlo,Consolas,monospace;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--app-bg);color:var(--text)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--app-bg)}button,input,textarea,select{font:inherit}button{cursor:pointer}a{color:inherit}:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.app-header{height:64px;padding:0 24px;display:flex;align-items:center;gap:18px;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10;background:rgba(8,10,13,.92);backdrop-filter:blur(18px)}.app-brand{font:700 14px var(--mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--ink)}.app-name{font:11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--cyan)}.app-name::before{content:"/";color:var(--muted);margin-right:14px}.save-status{margin-left:auto;font:10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--green)}
.creator{display:grid;grid-template-columns:390px minmax(0,1fr);min-height:calc(100vh - 64px)}.editor{border-right:1px solid var(--border);background:var(--panel);padding:22px;overflow:auto;max-height:calc(100vh - 64px);position:sticky;top:64px}.editor-intro h1{font:700 24px var(--mono);letter-spacing:-.04em;color:var(--ink);margin:0 0 8px}.editor-intro p{font-size:13px;line-height:1.55;color:var(--muted);margin:0 0 20px}.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:18px}.tab{border:1px solid var(--border);background:var(--app-bg);color:var(--muted);padding:9px;border-radius:8px;font:10px var(--mono);letter-spacing:.12em;text-transform:uppercase}.tab.is-active{color:#071014;background:var(--cyan);border-color:var(--cyan);font-weight:700}.panel{display:none}.panel.is-active{display:block}fieldset{border:1px solid var(--border);border-radius:12px;margin:0 0 14px;padding:15px;display:flex;flex-direction:column;gap:12px}legend{padding:0 7px;font:10px var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--cyan)}label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--muted)}input[type="text"],input[type="email"],textarea,select{width:100%;border:1px solid var(--border-strong);border-radius:7px;background:var(--app-bg);color:var(--ink);padding:9px 10px;font-size:13px;resize:vertical}input[type="email"][aria-invalid="true"]{border-color:var(--red)}.field-error{color:var(--red);font:10px var(--mono);line-height:1.4}.field-error[hidden]{display:none}input[type="range"]{width:100%;accent-color:var(--cyan)}input[type="color"]{width:44px;height:36px;border:1px solid var(--border-strong);border-radius:7px;padding:2px;background:var(--app-bg)}.color-row{display:grid;grid-template-columns:1fr 44px;align-items:center}.check{flex-direction:row;align-items:center;gap:9px;color:var(--text)}.check input{width:17px;height:17px;accent-color:var(--cyan)}label output{float:right;color:var(--cyan);font:11px var(--mono)}.presets{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}.presets button{border:1px solid var(--border);background:var(--panel-2);color:var(--text);padding:9px;border-radius:8px;font:10px var(--mono);letter-spacing:.1em;text-transform:uppercase}.presets button:hover{border-color:var(--cyan);color:var(--cyan)}.editor-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px}.button{border-radius:8px;padding:10px 12px;font:700 10px var(--mono);letter-spacing:.1em;text-transform:uppercase}.button.primary{grid-column:1/-1;background:var(--cyan);color:#071014;border:1px solid var(--cyan)}.button.secondary{background:rgba(41,184,219,.09);color:var(--cyan);border:1px solid rgba(41,184,219,.35)}.button.quiet{background:transparent;color:var(--muted);border:1px solid var(--border)}#action-status{grid-column:1/-1;min-height:16px;margin:2px 0 0;font:10px var(--mono);color:var(--green)}
.preview-area{min-width:0;padding:24px;display:flex;flex-direction:column;background:radial-gradient(circle at 80% 10%,rgba(41,184,219,.08),transparent 32%),var(--app-bg)}.preview-toolbar{display:flex;align-items:center;gap:16px;margin-bottom:14px;color:var(--muted);font:10px var(--mono);letter-spacing:.12em;text-transform:uppercase}.devices{display:flex;gap:5px;margin-left:auto}.device{border:1px solid var(--border);background:var(--panel);color:var(--muted);padding:7px 10px;border-radius:7px;font:9px var(--mono);text-transform:uppercase}.device.is-active{border-color:var(--cyan);color:var(--cyan)}#preview-size{width:150px;text-align:right}.preview-viewport{width:min(1180px,100%);margin:auto;background:#fff;box-shadow:0 32px 100px rgba(0,0,0,.5);transition:width .25s ease;overflow:auto;max-height:calc(100vh - 126px);container-type:inline-size}.preview-viewport.device-tablet{width:min(760px,100%)}.preview-viewport.device-mobile{width:min(390px,100%)}
.site-preview{--sp-bg:#0c0c0c;--sp-surface:#15191f;--sp-text:#f2f2f2;--sp-muted:#a3a8b0;--sp-accent:#29b8db;--sp-accent2:#d670d6;--sp-angle:135deg;--sp-radius:20px;--sp-shadow:0 24px 48px rgba(0,0,0,.35);--sp-max:1120px;--sp-space:112px;--sp-pad:32px;--sp-cols:3;--sp-gap:18px;--sp-card-h:260px;--sp-head-min:42px;--sp-head-max:84px;--sp-font:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;position:relative;min-height:100%;overflow:hidden;background:var(--sp-bg);color:var(--sp-text);font-family:var(--sp-font);font-synthesis:none}.preview-noise{position:absolute;inset:0;pointer-events:none;opacity:.32;background-image:radial-gradient(color-mix(in srgb,var(--sp-accent) 22%,transparent) 1px,transparent 1px);background-size:30px 30px}.site-preview.no-noise .preview-noise{display:none}.site-nav,.site-hero,.site-section,.site-contact,.site-footer{position:relative;z-index:1;width:min(var(--sp-max),calc(100% - var(--sp-pad)*2));margin-inline:auto}.site-nav{display:flex;align-items:center;justify-content:space-between;padding:28px 0;border-bottom:1px solid color-mix(in srgb,var(--sp-text) 13%,transparent)}.site-nav strong,.site-footer strong{font-weight:800;letter-spacing:-.03em}.site-nav a{color:var(--sp-bg);background:var(--sp-accent);padding:10px 15px;border-radius:calc(var(--sp-radius)*.45);font-size:12px;font-weight:700;text-decoration:none}.site-hero{padding:calc(var(--sp-space)*1.12) 0 var(--sp-space);min-height:620px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.site-preview.centered .site-hero{text-align:center;align-items:center}.site-eyebrow,.section-kicker{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--sp-accent);margin:0 0 20px}.site-hero h2{max-width:900px;font-size:clamp(var(--sp-head-min),7cqw,var(--sp-head-max));line-height:.98;letter-spacing:-.065em;margin:0;color:var(--sp-text)}.site-intro{max-width:650px;font-size:clamp(15px,1.8cqw,20px);line-height:1.65;color:var(--sp-muted);margin:28px 0}.site-actions{display:flex;gap:10px;flex-wrap:wrap}.site-actions a{padding:12px 18px;border-radius:calc(var(--sp-radius)*.5);text-decoration:none;font-size:13px;font-weight:700}.site-actions a:first-child{background:var(--sp-accent);color:var(--sp-bg)}.site-actions a:last-child{border:1px solid color-mix(in srgb,var(--sp-text) 22%,transparent);color:var(--sp-text)}.hero-object{position:absolute;right:0;bottom:48px;width:210px;height:210px;opacity:.7}.site-preview.centered .hero-object{right:50%;transform:translateX(50%);opacity:.28}.hero-object i{position:absolute;inset:0;border-radius:50%;border:1px solid color-mix(in srgb,var(--sp-accent) 55%,transparent)}.hero-object i:nth-child(2){inset:20%;border-color:color-mix(in srgb,var(--sp-accent2) 58%,transparent)}.hero-object i:nth-child(3){inset:40%;background:linear-gradient(var(--sp-angle),var(--sp-accent),var(--sp-accent2));border:0;box-shadow:var(--sp-shadow)}.site-section{padding:var(--sp-space) 0;border-top:1px solid color-mix(in srgb,var(--sp-text) 13%,transparent)}.site-section h3,.site-contact h3{font-size:clamp(28px,4cqw,52px);line-height:1.05;letter-spacing:-.05em;margin:0 0 34px}.project-grid{display:grid;grid-template-columns:repeat(var(--sp-cols),minmax(0,1fr));gap:var(--sp-gap)}.project-grid article{border-radius:var(--sp-radius);overflow:hidden;background:var(--sp-surface);box-shadow:var(--sp-shadow);padding:14px;min-width:0}.site-preview.no-outline .project-grid article{border:0}.site-preview:not(.no-outline) .project-grid article{border:1px solid color-mix(in srgb,var(--sp-text) 13%,transparent)}.project-grid article>span{font-size:9px;color:var(--sp-muted)}.project-art{height:var(--sp-card-h);border-radius:calc(var(--sp-radius)*.65);margin:12px 0 16px}.art-one{background:linear-gradient(var(--sp-angle),var(--sp-accent),var(--sp-accent2))}.art-two{background:repeating-linear-gradient(135deg,var(--sp-bg) 0 12px,var(--sp-accent) 12px 13px),var(--sp-surface)}.art-three{background:radial-gradient(circle at 30% 30%,var(--sp-accent2),transparent 32%),radial-gradient(circle at 70% 70%,var(--sp-accent),transparent 36%),var(--sp-bg)}.project-grid h4{font-size:14px;line-height:1.35;margin:0}.site-about{display:grid;grid-template-columns:.45fr 1fr;gap:48px}.site-about h3{margin-bottom:20px}.site-about div p{max-width:620px;color:var(--sp-muted);font-size:17px;line-height:1.7;margin:0}.site-contact{padding:var(--sp-space) 0}.site-contact h3{max-width:750px;margin-bottom:22px}.site-contact>a{font-size:clamp(18px,3cqw,32px);color:var(--sp-accent);text-decoration:none;border-bottom:1px solid currentColor}.site-footer{padding:28px 0;display:flex;justify-content:space-between;gap:20px;border-top:1px solid color-mix(in srgb,var(--sp-text) 13%,transparent);font-size:11px;color:var(--sp-muted)}
@container (max-width:760px){.site-nav a{display:none}.site-hero{min-height:500px}.hero-object{width:130px;height:130px;opacity:.25}.site-about{grid-template-columns:1fr;gap:18px}.site-footer{flex-direction:column}}@container (max-width:480px){.project-grid{grid-template-columns:1fr}}
@media(max-width:900px){.creator{grid-template-columns:1fr}.editor{position:relative;top:0;max-height:none;border-right:0;border-bottom:1px solid var(--border)}.preview-area{min-height:850px}.preview-viewport{max-height:none}.app-header{position:relative}.creator{min-height:auto}}
@media(max-width:480px){.app-header{padding:0 16px}.app-name{display:none}.creator{display:block}.editor,.preview-area{padding:16px}.editor-actions{grid-template-columns:1fr}.button.primary{grid-column:auto}.preview-toolbar{align-items:flex-start;flex-wrap:wrap}.devices{order:3;margin-left:0;width:100%}.device{flex:1}#preview-size{margin-left:auto}.preview-viewport{width:100%!important}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}