/* Webpage Creator block on the home page (template-home.html, .creator).
   Ported from the studio.anguishedturtle.com stylesheet: ANSI terminal palette,
   chunky mono headings with a hard outline, dithered canvas motifs. Every rule is
   scoped to .creator, so nothing here reaches the rest of the page. Home only. */
.creator{
  position:relative;z-index:1;isolation:isolate;
  /* wide art (marquee track, banner glows) is cut at the block edge, never the page */
  overflow-x:hidden;overflow-x:clip;
  /* in-page jumps (TAP HERE, the Creator tab) land below the sticky top bar */
  scroll-margin-top:5rem;
  /* surfaces: the page backdrop shows through, cards sit on a navy lift */
  --bg:transparent;--bg-2:#0a1226;--surface:#0a1226;--border:rgba(255,255,255,0.10);--border-strong:rgba(255,255,255,0.16);
  /* text */
  --fg:#d8d8d8;--fg-dim:#9a9a9a;--fg-faint:#6e7278;--ink:#f2f2f2;
  /* ANSI 16 */
  --black:#1c1c1c;--red:#cd3131;--green:#0dbc79;--yellow:#e5e510;--blue:#2472c8;--magenta:#bc3fbc;--cyan:#11a8cd;--white:#e5e5e5;
  --bright-red:#f14c4c;--bright-green:#23d18b;--bright-yellow:#f5f543;--bright-blue:#3b8eea;--bright-magenta:#d670d6;--bright-cyan:#29b8db;--bright-white:#f5f5f5;
  /* roles; --mono and --sans come from style.css */
  --accent:var(--bright-cyan);--accent-2:var(--cyan);--accent-glow:rgba(41,184,219,0.30);--display:var(--mono);
  font-family:var(--sans);color:var(--fg);font-synthesis:none;
}
/* the banner card: outline, rounded corners, darker plate */
.creator .creator-hero{margin:0;border-radius:12px;overflow:hidden;background:rgba(0,0,0,.40)}
.creator a{color:inherit}
.creator a{-webkit-tap-highlight-color:transparent}
.creator ::selection{background:rgba(41,184,219,0.35);color:var(--bright-white)}
.creator :focus-visible{outline-color:var(--bright-cyan)}
.creator a:focus-visible,.creator .button:focus-visible{outline:2px solid var(--bright-cyan);outline-offset:3px;border-radius:6px}
.creator .page-shell{max-width:1440px;margin:auto;padding:0 72px}
.creator .creator-hero{position:relative;min-height:657px;padding:74px 0 110px;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:58px}
.creator .hero-copy{position:relative;z-index:1;min-width:0;container-type:inline-size}
.creator .hero-art,.creator .motif{z-index:0;pointer-events:none}
.creator .hero-actions{margin:22px 0 0;position:relative;z-index:2}
.creator .hero-actions .button{display:inline-flex;align-items:center;gap:.4em}
.creator h2{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.015em;line-height:1.04;color:var(--ink);background-image:none;background-clip:border-box;-webkit-background-clip:border-box;-webkit-text-fill-color:var(--ink);text-shadow:2px 0 0 #000,-2px 0 0 #000,0 2px 0 #000,0 -2px 0 #000,2px 2px 0 #000,-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000}
@supports((-webkit-text-stroke:2px #000) and (paint-order:stroke fill)){
  .creator h2{-webkit-text-stroke:2px #000;paint-order:stroke fill;text-shadow:none}
}
.creator .hero-copy>.marquee{margin-top:34px}
@media (max-width:560px){
  .creator .page-shell{padding:0 24px}
  .creator .creator-hero{min-width:0;max-width:100%}
  .creator .hero-copy{overflow-x:visible;max-width:100%;min-width:0;width:100%}
  .creator .hero-actions .button{min-height:44px}
  .creator .hero-copy>.marquee,.creator .marquee{display:block;width:100%;max-width:100%;margin-left:0;margin-right:0;overflow:hidden}
  .creator .hero-copy>.marquee{margin-top:28px}
}
.creator .button{display:inline-flex;gap:26px;align-items:center;justify-content:space-between;padding:16px 24px;text-decoration:none;font-size:15px;font-weight:560;min-height:52px;border-radius:999px;transition:transform .2s ease,background-color .2s ease,border-color .2s ease,color .2s ease}
.creator .primary{background-color:var(--cyan);background-image:none;color:#0c0c0c;font-weight:700;box-shadow:0 0 26px rgba(41,184,219,0.28),0 10px 28px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.25)}
.creator .primary:hover{background-color:var(--bright-cyan);transform:translateY(-1px)}
.creator .secondary{margin-top:auto;background:transparent;color:var(--fg-dim);font-size:13px;min-height:47px;padding:12px 20px;border:1px solid var(--fg-faint)}
.creator .secondary:hover{border-color:var(--accent);color:var(--bright-white)}
.creator .tool-name .button.secondary{background-color:#0c0c0c;background-image:none;color:var(--fg-dim);border:1px solid var(--fg-faint);box-shadow:none;}
.creator .tool-name .button.secondary:hover{background-color:#0c0c0c;background-image:none;border-color:var(--accent);color:var(--bright-white);box-shadow:none;}
.creator .button span{font-size:19px;font-weight:400;line-height:1}
.creator .hero-art{position:relative;isolation:isolate;padding:4px 50px 10px 0;z-index:1}
.creator .orbit{position:absolute;z-index:1;pointer-events:none;border-radius:50%}
.creator .orbit::before{content:"";position:absolute;inset:0;border-radius:50%}
.creator .orbit-one{width:58vw;height:58vw;max-width:880px;max-height:880px;left:-26vw;top:-30vh}
.creator .orbit-one::before{background:radial-gradient(closest-side,rgba(41,184,219,0.34),rgba(41,184,219,0.13) 52%,transparent 74%);animation:creator-orb-drift-a 18s ease-in-out infinite alternate}
.creator .orbit-two{width:52vw;height:52vw;max-width:780px;max-height:780px;right:-20vw;bottom:-26vh}
.creator .orbit-two::before{background:radial-gradient(closest-side,rgba(59,142,234,0.18),rgba(214,112,214,0.17) 46%,transparent 74%);animation:creator-orb-drift-b 16s ease-in-out infinite alternate}
.creator .marquee{position:relative;width:100%;max-width:100%;margin-left:0;overflow:hidden;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:13px 0}
.creator .marquee-track{position:relative;z-index:1;display:flex;width:max-content;animation:creator-marquee-scroll 28s linear infinite}
.creator .marquee-track>span{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-dim);white-space:nowrap;padding-right:2.5em}
.creator .marquee-track .mk1{color:#4f9cff}
.creator .marquee-track .mk2{color:#d0f0ff}
.creator .marquee-track .mk3{color:#00d9ff}
.creator .marquee-track .mk4{color:#82aaff}
.creator .marquee-track .mk5{color:#7dd3fc}
.creator .marquee-track .ms{color:var(--fg-dim)}
.creator .tools-section{padding:40px 0 48px;border-top:1px solid var(--border)}
.creator .section-heading{display:grid;grid-template-columns:1fr 1fr;column-gap:60px;align-items:end}
.creator .section-label{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);line-height:1.5;margin:0 0 14px}
.creator .section-heading .section-label{grid-column:1/-1}
.creator h2{font-size:clamp(30px,3.2vw,46px);margin:0}
.creator .section-heading>p:last-child{margin:0;font-size:16px;line-height:1.7;color:var(--fg)}
.creator h3,.creator h4{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:-.01em;color:var(--ink)}
.creator .approach{display:grid;grid-template-columns:1fr;gap:0;align-items:center;padding:44px 48px 52px}
.creator .approach>div{width:100%;max-width:650px;margin:auto}
.creator .approach>div:last-child>p:not(.section-label){font-size:16px;color:var(--fg-dim);line-height:1.8;max-width:490px;margin:23px 0 0}
.creator .approach strong{color:var(--yellow);font-weight:700}
.creator .tool-story{display:grid;grid-template-columns:.85fr 1.5fr;margin-top:26px;background:var(--bg-2);border:1px solid var(--border);border-radius:16px;overflow:hidden}
.creator .tool-name{background:rgba(41,184,219,0.05);padding:35px;display:flex;align-items:flex-start;flex-direction:column}
.creator .tool-symbol{display:grid;place-items:center;background:var(--cyan);color:#0c0c0c;width:50px;height:50px;border-radius:14px;font-family:var(--display);font-size:30px;font-weight:800;margin-bottom:25px;box-shadow:0 0 26px rgba(41,184,219,0.35)}
.creator .tool-name h3{font-size:22px;line-height:1.3;margin:0 0 13px}
.creator .tool-name p{font-size:14px;line-height:1.7;color:var(--fg);margin:0 0 23px}
.creator .tool-details{padding:29px 38px;display:flex;flex-direction:column;justify-content:space-around;gap:22px}
.creator .tool-details>div{display:grid;grid-template-columns:31px 1fr;column-gap:18px}
.creator .tool-details svg{width:28px;height:28px;fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;grid-row:1/3}
.creator .tool-details h4{font-size:13.5px;margin:1px 0 7px;color:var(--ink)}
.creator .tool-details p{font-size:13px;line-height:1.65;color:var(--fg-dim);margin:0;max-width:410px}
.creator .closing{position:relative;display:flex;flex-direction:column;align-items:center;gap:30px;text-align:center;padding:60px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);overflow:hidden}
.creator .closing::before{content:"";position:absolute;z-index:1;left:50%;bottom:-150px;width:680px;height:360px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(41,184,219,0.22),rgba(41,184,219,0.07) 55%,transparent 75%);pointer-events:none}
.creator .closing .button{position:relative;z-index:2}
.creator .closing canvas.motif{opacity:.28;z-index:0}
.creator .closing::before{opacity:.18;z-index:0}
.creator .closing-title{position:relative;z-index:2;margin:0 auto 8px;max-width:18ch;font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.015em;line-height:1.08;color:var(--ink);font-size:clamp(34px,5.4vw,72px);text-align:center;text-shadow:2px 0 0 #000,-2px 0 0 #000,0 2px 0 #000,0 -2px 0 #000,2px 2px 0 #000,-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000}
@supports((-webkit-text-stroke:2px #000) and (paint-order:stroke fill)){
  .creator .closing-title{-webkit-text-stroke:2px #000;paint-order:stroke fill;text-shadow:none}
}
.creator .closing-actions{position:relative;z-index:3;isolation:isolate;}
.creator .closing-lead{position:relative;z-index:2;max-width:38rem;margin:0;font-size:clamp(1rem,1.6vw,1.125rem);line-height:1.65;color:var(--ink);text-shadow:0 1px 2px #000}
.creator .closing-actions{display:flex;gap:18px;flex-wrap:wrap;justify-content:center}
@media(min-width:1441px){
  .creator .hero-art{padding-right:70px}
}
@media(max-width:1100px){
  .creator .page-shell{padding:0 42px}
  .creator .creator-hero{gap:40px;min-height:600px;padding:60px 0 56px}
  .creator .hero-art{padding-right:15px}
  .creator .orbit-one{left:-30vw;top:-20vh}
  .creator .orbit-two{right:-30vw;bottom:-18vh}
  .creator .approach{gap:60px;padding:36px 20px 44px}
  .creator .tool-story{grid-template-columns:.9fr 1.4fr}
  .creator .tool-name{padding:30px}
  .creator .tool-details{padding:30px}
  .creator .section-heading{column-gap:40px}
}
@media(max-width:800px){
  .creator .page-shell{padding:0 26px}
  .creator .creator-hero{grid-template-columns:1fr;gap:56px;padding:43px 0 32px;min-height:0}
  .creator .hero-copy{max-width:100%;margin:0 auto;width:100%}
  .creator .hero-art{max-width:420px;width:100%;margin:auto;padding:0 62px 16px 13px}
  .creator .orbit{opacity:.55}
  .creator .orbit-one{width:88vw;height:88vw;left:-46vw;top:-10vh}
  .creator .orbit-two{width:76vw;height:76vw;right:-42vw;bottom:-6vh}
  .creator .section-heading{grid-template-columns:1fr}
  .creator .section-heading>p:last-child{margin-top:19px;font-size:15px}
  .creator .tools-section{padding:20px 0 30px}
  .creator .tool-story{grid-template-columns:1fr;margin-top:22px}
  .creator .tool-name{padding:28px;display:grid;grid-template-columns:45px 1fr;gap:0 20px;align-items:start}
  .creator .tool-symbol{width:45px;height:45px;font-size:27px;margin:0;grid-row:1/3}
  .creator .tool-name h3{font-size:20px;margin-bottom:10px}
  .creator .tool-name p{font-size:13px;margin-bottom:18px}
  .creator .tool-name .button{grid-column:2;justify-self:start;gap:20px}
  .creator .tool-details{padding:29px 28px;gap:25px}
  .creator .approach{grid-template-columns:1fr;gap:31px;padding:32px 4px 38px}
  .creator .approach>div:last-child>p:not(.section-label){font-size:15px}
  .creator .closing{gap:24px;padding:52px 0}
}
@media(max-width:560px){
  .creator .closing-title{font-size:clamp(28px,8.5vw,42px);max-width:100%;padding:0 4px}
}
@media(max-width:390px){
  .creator .page-shell{padding:0 24px}
  .creator .hero-art{padding-left:0;padding-right:39px}
  .creator .tool-name{padding:24px;gap:0 15px}
  .creator .tool-name h3{font-size:19px}
  .creator .tool-details{padding:26px 24px}
  .creator .tool-details>div{column-gap:14px}
  .creator .button{font-size:14px;gap:22px}
}
.creator .hero-art .motif{animation:creator-motif-soft-drift 14s ease-in-out infinite alternate}
.creator .tool-details > div{opacity:0;transform:translateY(8px)}
.creator .tool-details > div{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .creator .orbit::before{animation:none}
  .creator .marquee-track{animation:none}
  .creator .hero-art .motif{animation:none}
  .creator .button{transition:none}
  .creator .primary:hover{transform:none}
  .creator .tool-details > div{opacity:1;transform:none;transition:none}
}
.creator .creator-hero{grid-template-columns:1fr;min-height:0;gap:0;padding:74px 0 56px}
.creator .hero-art{position:absolute;inset:0 0 56px;padding:0;z-index:0;pointer-events:none}
.creator .motif{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none;z-index:0}
@media(max-width:800px){
  .creator .creator-hero{padding:43px 0 32px}
  .creator .hero-art{inset:0 0 32px}
}
.creator .example-gallery{margin-top:40px}
.creator .examples-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 32px;margin:0 0 22px}
.creator .examples-title{font-size:22px;margin:0}
.creator .examples-lead{font-size:14px;line-height:1.6;color:var(--fg-dim);margin:0;max-width:520px}
.creator .example-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.creator .example-card{position:relative;display:flex;flex-direction:column;min-width:0;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0) 40%),var(--bg-2);border:1px solid var(--border);border-radius:18px;overflow:hidden;transition:border-color .25s ease,box-shadow .25s ease}
.creator .example-card:hover,.creator .example-card:focus-within{border-color:rgba(41,184,219,.55);box-shadow:0 24px 60px -30px rgba(41,184,219,.45)}
.creator .example-shot{display:block;padding:18px 18px 0;background:radial-gradient(120% 90% at 50% 0%,rgba(41,184,219,.16),rgba(41,184,219,0) 62%),#07090c;border-bottom:1px solid var(--border);overflow:hidden;text-decoration:none}
.creator .example-window{display:block;border:1px solid rgba(255,255,255,.1);border-bottom:0;border-radius:11px 11px 0 0;overflow:hidden;background:#0d1014;box-shadow:0 24px 50px -18px rgba(0,0,0,.75)}
.creator .example-chrome{display:flex;align-items:center;gap:6px;height:28px;padding:0 12px;background:#14181e;border-bottom:1px solid rgba(255,255,255,.07)}
.creator .example-chrome i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.2);flex:none}
.creator .example-url{margin-left:10px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono);font-size:11px;color:var(--fg-dim);background:rgba(255,255,255,.05);border-radius:6px;padding:3px 10px}
.creator .example-shot img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.creator .example-card:hover .example-shot img{transform:scale(1.025)}
.creator .example-body{display:flex;flex-direction:column;flex:1;padding:20px 22px 22px}
.creator .example-kicker{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 8px}
.creator .example-body h4{font-size:19px;line-height:1.25;margin:0 0 8px;color:var(--bright-white)}
.creator .example-desc{font-size:14px;line-height:1.6;color:var(--fg-dim);margin:0 0 18px}
.creator .example-actions{margin:auto 0 0!important;display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.creator .example-actions a{display:inline-flex;align-items:center;min-height:44px;font-size:14px;text-decoration:none}
.creator .example-actions .example-view{color:var(--accent);padding:0 2px}
.creator .example-actions .example-view:hover{text-decoration:underline;text-underline-offset:4px}
.creator .example-actions .example-start{color:var(--bright-white);border:1px solid var(--border);border-radius:999px;padding:0 16px;background:rgba(255,255,255,.03)}
.creator .example-actions .example-start:hover{border-color:var(--accent);background:rgba(41,184,219,.08)}
.creator .example-actions .example-start span{color:var(--accent);margin-left:8px}
.creator .example-card--feature{grid-column:1/-1}
@media(min-width:1101px){
  .creator .example-card--feature{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
  .creator .example-card--feature .example-shot{display:flex;flex-direction:column;justify-content:flex-end;padding:26px 0 0 26px;border-bottom:0;border-right:1px solid var(--border)}
  .creator .example-card--feature .example-window{border-radius:12px 0 0 0;border-right:0}
  .creator .example-card--feature .example-body{justify-content:center;padding:32px 36px}
  .creator .example-card--feature h4{font-size:28px}
  .creator .example-card--feature .example-desc{font-size:15px;max-width:34ch}
  .creator .example-card--feature .example-actions{margin-top:6px!important}
}
@media(max-width:800px){
  .creator .example-grid{grid-template-columns:1fr;gap:16px}
  .creator .example-gallery{margin-top:30px}
  .creator .example-shot{padding:12px 12px 0}
  .creator .example-body{padding:18px 18px 20px}
}
@media(max-width:340px){
  .creator .page-shell{padding:0 16px}
}
@media(prefers-reduced-motion:reduce){
  .creator .example-card,.creator .example-shot img{transition:none}
  .creator .example-card:hover .example-shot img{transform:none}
}
/* Studio banner at the top of home: the ASCII wordmark from studio.anguishedturtle.com.
   75 columns (ANGUISHED) fill 97% of the copy column; the font is capped at 32px. */
.creator.creator-top{padding-top:0}
.creator.creator-top .page-shell{max-width:none;margin:0;padding:0}
.creator.creator-top .creator-hero{border-radius:0}
.creator .hero-ascii{display:block;margin:0;padding:0;font-family:var(--mono);font-weight:700;line-height:1;white-space:pre;font-size:min(32px,2.16cqw);letter-spacing:0;position:relative;z-index:1;overflow:hidden;max-width:100%;color:#fff;text-shadow:1px 1px 0 #000,-1px -1px 0 #000}
.creator .hero-ascii:empty{display:none}
.creator .hero-ascii .a-ink{color:#fff}
.creator .hero-ascii .a-front{color:#d0f0ff}
.creator .hero-ascii .a-scan{color:#a5edff;text-shadow:0 0 9px rgba(165,237,255,0.85)}
.creator .hero-ascii .a-g1{color:var(--bright-yellow)}
.creator .hero-ascii .a-g2{color:var(--bright-magenta)}
@media(max-width:560px){
  .creator .hero-ascii{line-height:1.05}
}
@keyframes creator-orb-drift-a{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(6%,4%,0) scale(1.08)}}
@keyframes creator-orb-drift-b{from{transform:translate3d(0,0,0) scale(1.06)}to{transform:translate3d(-5%,-6%,0) scale(1)}}
@keyframes creator-marquee-scroll{to{transform:translateX(-50%)}}
@keyframes creator-motif-soft-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(1.2%,-1.4%,0)}}