/* soloweb.site — locally hosted type, dark-first surfaces, precise grids. */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/space-grotesk-latin.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/plus-jakarta-sans-latin.woff2') format('woff2')}
:root{color-scheme:dark;--accent:#4F46E5;--paper:#0b1120;--ink:#F8FAFC;--muted:#a0aec0;--line:#273247;--soft:#111b2e;--surface:#10192a;--accent-text:#a5a0ff;--accent-soft:#21204b;--radius:10px}
:root[data-theme=light]{color-scheme:light;--paper:#F8FAFC;--ink:#0F172A;--muted:#526178;--line:#dce3ed;--soft:#f0f3f9;--surface:#fff;--accent-text:#4F46E5;--accent-soft:#eeedff}
body{font-family:'Plus Jakarta Sans',sans-serif;font-size:14px;line-height:1.75}
h1,h2,h3,.brand,.countdown,.stats strong{font-family:'Space Grotesk',sans-serif}
h1,h2,h3{font-weight:600;letter-spacing:-.045em}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline-color:var(--accent-text)}
a:hover,.main-nav a[aria-current],.tiny-star,.eyebrow,.side-note>span,.side-note a,.prose a,.reading a,.form-card a,td a,.text-button,.how li>span{color:var(--accent-text)}
.site-header{background:var(--paper)}
.header-inner{padding-top:20px;padding-bottom:20px}
.brand{font-size:24px;font-weight:600;letter-spacing:-1.2px;gap:10px}
.brand-icon{width:34px;height:34px;display:grid;place-items:center;font:600 15px 'Space Grotesk',sans-serif;padding:0;border-radius:7px;letter-spacing:-2px;background:var(--accent);color:#fff}
.brand-dot{color:var(--accent-text);margin-left:0}
.header-actions{gap:16px}
.theme-toggle{display:grid;place-items:center;width:34px;height:34px;padding:0;flex-shrink:0;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--ink);font-size:22px;line-height:1}
.theme-toggle[hidden]{display:none}.theme-toggle:hover{border-color:var(--accent-text)}
.header-search{background:var(--surface)}
.header-search input,.header-search button{background:transparent;color:var(--ink)}
.button{background:var(--accent);color:#fff;border-radius:7px}
.button:hover{color:#fff;filter:brightness(1.15)}
.outline-button{background:var(--surface);color:var(--ink)}
.hero{padding-top:80px;padding-bottom:70px;gap:50px}
.hero h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(38px,4.5vw,62px);font-weight:600;line-height:1.12;letter-spacing:-3px}
.hero h1>span{font-family:'Space Grotesk',sans-serif;font-style:normal;font-weight:500;color:var(--accent-text);letter-spacing:-3px}
.hero-content>p{line-height:1.85;max-width:485px;margin:25px 0 30px}
.eyebrow{font-size:10px;letter-spacing:1.6px;font-weight:600}
.live-dot{background:var(--accent-text);box-shadow:0 0 0 4px var(--accent-soft)}
.hero-search{background:var(--surface);border-color:var(--line);box-shadow:none;border-radius:8px}
.hero-search input{background:transparent;color:var(--ink)}
.hero-footnote{font-size:10px;gap:20px}
.text-link{color:var(--accent-text);text-decoration:none;font-size:12px;margin-top:20px}
.hero-art{background:radial-gradient(ellipse at center,#4f46e519,transparent 70%)}
.art-label{font-family:'Space Grotesk',sans-serif;font-size:9px;transform:none;letter-spacing:1.2px}
.mini-window{border:5px solid #dfe4ed;box-shadow:0 25px 50px #0003;border-radius:8px}
.window-bar{background:#dfe4ed}.window-bar i{background:#909bb0}
.back{transform:rotate(5deg)}.front{transform:rotate(-5deg)}
.mini-dark{background:#141b30}.mini-dark h2{color:#f8fafc}
.orange-orb{background:radial-gradient(circle at 32% 27%,#c4b5fd,#6366f1 55%,#312e81);box-shadow:inset -12px -15px 30px #1e1b4b}
.mini-cream{background:#f8fafc;color:#0f172a}
.mini-cream h2{font-family:'Space Grotesk',sans-serif;font-weight:500}
.mini-shapes i{background:#c7d2fe;border-radius:5px}.mini-shapes i:nth-child(2){background:#6366f1;border-radius:5px}.mini-shapes i:nth-child(3){background:#a5b4fc;border-radius:5px}
.art-sticker{font:500 13px 'Space Grotesk',sans-serif;background:#4F46E5;border-color:#706af3;color:white;transform:rotate(3deg);border-radius:6px}
.art-sticker span{font-size:28px}
.category-strip{gap:10px;padding:23px 0}.category-strip a{background:var(--surface);border-radius:6px;font-size:11px;padding:10px 18px}
.category-strip a.active{background:var(--accent);color:white}
.collection{padding-top:55px}.section-heading{margin-bottom:28px}.section-heading h2{font-size:31px}
.section-heading p{font-size:12px;line-height:1.8}
.template-grid{gap:24px}.template-card{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface)}
.card-image{border:0;border-radius:0;border-bottom:1px solid var(--line)}
.card-info{padding:20px 18px 16px;gap:12px}.card-info h3{font-size:19px}.card-info p{font-size:11px;line-height:1.7;margin-top:8px}
.card-bottom{margin:0 18px;padding:13px 0;color:var(--muted);font-size:10px;letter-spacing:.2px}
.free{color:var(--accent-text);background:var(--accent-soft);border-color:transparent;font-size:10px;border-radius:4px;padding:3px 8px}
.badge{color:#0f172a;background:#f8fafcf5;border:1px solid #dce3ed;box-shadow:none;font-size:9px}
.image-action{background:#f8fafc;color:#0f172a}
.how{background:var(--soft);border-radius:10px;margin-top:65px;padding:45px 50px}
.how h2{font-size:36px}.how li h3{font-size:19px}.how li p{font-size:12px}
.site-footer{background:var(--paper);margin-top:65px}
.footer-inner{padding-top:44px;padding-bottom:44px}
input,select,textarea{background:var(--surface);border-color:var(--line);color:var(--ink)}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}
.form-card{background:var(--surface)}
.form-card h2{font-size:26px}.auth-decoration{color:var(--accent-text);opacity:.5}
.field{font-weight:500}.field input[type=file]::file-selector-button{background:var(--accent-soft);color:var(--accent-text);border:0;padding:5px 8px;border-radius:3px;margin-right:10px}
.prose pre,.prose code{background:var(--soft)}
.prose pre{padding:16px;overflow:auto}.prose a{color:var(--accent-text)}
.countdown{color:var(--accent-text);border-color:var(--line);background:var(--accent-soft)}
.download-frame{background:#fff;color-scheme:light;border-radius:6px}
.download-frame:not([src]){background:transparent}
.pagination a[aria-current]{background:var(--accent);color:white}
.admin-nav nav a[aria-current]{background:var(--accent);color:white}
.notice{background:#102b29;border-color:#25504a;color:#a7ebd0}.error{background:#351d26;border-color:#683346;color:#ffc2d2}
.danger{background:#351d26;border-color:#683346;color:#ffc2d2}
:root[data-theme=light] .notice{background:#ecfdf5;border-color:#b6ddcc;color:#145c40}
:root[data-theme=light] .error,:root[data-theme=light] .danger{background:#fff1f2;border-color:#fecdd3;color:#9f1239}
.skip{background:var(--accent);color:white}
@media(min-width:1400px){.hero{gap:65px;padding-top:85px;padding-bottom:75px}}
@media(max-width:1100px){.hero{gap:10px}.hero h1,.hero h1>span{letter-spacing:-2px}.hero h1{font-size:47px}.header-actions{gap:12px}.category-strip a{padding:8px 13px}}
@media(max-width:800px){.hero{padding-top:45px;padding-bottom:40px}.hero h1{font-size:39px}.how{padding:30px}.card-info{padding:16px}.card-bottom{margin:0 16px}}
@media(max-width:580px){.header-inner{gap:15px}.brand{font-size:20px;gap:7px}.brand-icon{width:28px;height:28px;font-size:13px}.header-actions{gap:10px}.header-actions .login-link{display:none}.theme-toggle{width:30px;height:30px;font-size:20px}.header-actions .button{font-size:10px;padding:9px 11px}.hero{padding:38px 0 27px;gap:12px}.hero h1{font-size:42px}.hero h1>span{letter-spacing:-2px}.hero-content>p{font-size:13px;margin:22px 0 26px}.hero-footnote{font-size:9px;gap:12px}.hero-search .button{font-size:10px}.hero-search input{font-size:11px}.eyebrow{font-size:8px}.hero-art{height:310px}.category-strip a{font-size:10px;padding:8px 11px}.collection{padding-top:35px}.section-heading h2{font-size:25px}.section-heading{margin-bottom:20px}.section-heading>.outline-button{font-size:9px;padding:9px 8px}.template-grid{gap:22px}.card-info h3{font-size:21px}.card-info p{font-size:12px}.how{padding:27px;margin-top:40px}.how h2{font-size:32px}.site-footer{margin-top:40px}.footer-inner{padding-top:30px;padding-bottom:30px}}
@media(max-width:360px){.header-inner{padding-left:16px;padding-right:16px}.brand{font-size:18px}.header-actions{gap:6px}.header-actions .button{padding:9px 8px}.hero h1{font-size:36px}.hero-search{gap:6px;padding-left:10px}.hero-search .button{font-size:9px}.hero-footnote{gap:9px;font-size:8px}.section-heading>.outline-button{white-space:normal;text-align:center;max-width:100px}}

/* Hero artwork: staggered arrival, then a seamless, slow floating loop.
   Animate the children so the responsive scale on .hero-art stays intact. */
@media (prefers-reduced-motion: no-preference) {
  .hero-art .mini-window,
  .hero-art .art-sticker {
    animation:
      hero-arrive 900ms cubic-bezier(.22, 1, .36, 1) var(--enter-delay) both,
      hero-float var(--float-duration) ease-in-out calc(var(--enter-delay) + 900ms) infinite;
  }
  .hero-art .back {
    --rest-angle: 5deg;
    --enter-angle: 12deg;
    --enter-x: 24px;
    --enter-delay: 100ms;
    --float-duration: 7s;
    --float-y: -10px;
    --float-angle: 6.5deg;
  }
  .hero-art .front {
    --rest-angle: -5deg;
    --enter-angle: -12deg;
    --enter-x: -24px;
    --enter-delay: 280ms;
    --float-duration: 6s;
    --float-y: -8px;
    --float-angle: -6deg;
  }
  .hero-art .art-sticker {
    --rest-angle: 3deg;
    --enter-angle: -5deg;
    --enter-x: 0px;
    --enter-delay: 520ms;
    --float-duration: 5s;
    --float-y: -6px;
    --float-angle: 5deg;
  }
  .hero-art .art-label {
    animation: hero-label-arrive 700ms ease-out 150ms both;
  }
  .hero-art:hover .mini-window,
  .hero-art:hover .art-sticker {
    animation-play-state: running, paused;
  }
}
@keyframes hero-arrive {
  from { opacity: 0; transform: translate(var(--enter-x), 32px) rotate(var(--enter-angle)) scale(.94); }
  to { opacity: 1; transform: translate(0, 0) rotate(var(--rest-angle)) scale(1); }
}
@keyframes hero-float {
  0%, 100% { transform: translate(0, 0) rotate(var(--rest-angle)) scale(1); }
  50% { transform: translate(0, var(--float-y)) rotate(var(--float-angle)) scale(1); }
}
@keyframes hero-label-arrive {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Iconoir uses SVG masks; keep icons aligned and hidden from screen readers. */
.ui-icon{font-size:1.15em;line-height:1;vertical-align:-.16em;flex-shrink:0;font-style:normal}
.ui-icon::before{display:block}
.button .ui-icon,.outline-button .ui-icon{font-size:17px}
.brand-icon .ui-icon{font-size:21px;letter-spacing:normal}
.theme-toggle .ui-icon{font-size:19px}
.header-search button{display:grid;place-items:center;padding:0 9px;font-size:17px}
.hero-search>span{display:flex;align-items:center;font-size:20px}
.hero-footnote .ui-icon{font-size:12px;margin-right:3px}
.category-strip a{display:inline-flex;align-items:center;gap:7px}
.category-strip .ui-icon{font-size:16px}
.badge .ui-icon{font-size:12px;margin-right:3px}
.card-bottom .ui-icon,.metadata .ui-icon{margin-right:3px}
.art-sticker .ui-icon{font-size:29px}
.art-label .ui-icon{font-size:12px}
.mini-cream b .ui-icon{font-size:10px}
.mini-cream>span>.ui-icon{font-size:9px}
.side-note>span>.ui-icon{font-size:36px}
.auth-decoration .ui-icon{font-size:110px}
@media(max-width:580px){.brand-icon .ui-icon{font-size:18px}.hero-footnote .ui-icon{font-size:10px;margin-right:1px}.category-strip .ui-icon{font-size:14px}.hero-search .button .ui-icon{font-size:13px}}

.main-nav{gap:22px;flex-wrap:wrap}.main-nav a{white-space:nowrap}