:root { --purple:#4B2E83; --mid:#7A67C7; --lavender:#EEE9FA; --border:#CFC5EA; --page:#F8F6FC; --surface:#FFFFFF; --text:#272334; --muted:#6B657A; --sans:"Plus Jakarta Sans",Arial,sans-serif; --serif:"Fraunces",Georgia,serif; }
* { box-sizing:border-box; } [hidden] { display:none!important; } html { scroll-behavior:smooth; scroll-padding-top:24px; } body { margin:0; color:var(--text); background:var(--page); font:16px/1.5 var(--sans); -webkit-font-smoothing:antialiased; } h1,h2,h3,p { margin:0; } a { color:var(--purple); text-decoration:none; } a:hover { text-decoration:underline; } :focus-visible { outline:3px solid var(--mid); outline-offset:4px; } .page-width { width:100%; max-width:1200px; padding-left:24px; padding-right:24px; margin:auto; }
.skip-link { position:absolute; top:-60px; left:16px; background:var(--surface); padding:12px; z-index:5; } .skip-link:focus { top:12px; }
.sandbox-nav { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding-top:12px; padding-bottom:12px; border-bottom:1px solid var(--border); }
.logo-crop { display:block; position:relative; overflow:hidden; width:100px; height:40px; flex-shrink:0; }
.logo-crop img { position:absolute; max-width:none; width:138px; height:auto; left:-18px; top:-15.5px; mix-blend-mode:multiply; }
.sandbox-nav nav { display:flex; flex-wrap:wrap; gap:28px; align-items:center; }
.sandbox-nav nav a { color:var(--muted); font-size:16px; } .sandbox-nav nav a:hover { color:var(--purple); }
.sandbox-hero { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:center; gap:40px; padding:48px 0 44px; }
.eyebrow { font-size:14px; color:var(--mid); letter-spacing:.16em; font-weight:700; text-transform:uppercase; line-height:1.5; }
h1 { font:600 clamp(36px,3.4vw,46px)/1.08 var(--serif); letter-spacing:-.025em; color:var(--purple); margin:14px 0 20px; max-width:460px; }
.hero-subtitle { font-size:21px; line-height:1.5; letter-spacing:-.02em; }
.hero-explanation { font-size:18px; line-height:1.6; color:var(--muted); margin-top:20px; max-width:470px; }
.hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:16px 20px; margin-top:26px; }
.primary-link { display:inline-flex; align-items:center; justify-content:center; gap:12px; color:var(--surface); background:var(--purple); border:1px solid var(--purple); border-radius:999px; padding:14px 22px; font-size:17px; line-height:1.2; font-weight:600; white-space:nowrap; }
.primary-link img { width:20px; height:20px; filter:brightness(0) invert(1); } .primary-link:hover { text-decoration:none; opacity:.92; }
.secondary-link { font-size:16px; font-weight:500; }
.collaboration-image { display:block; width:100%; height:auto; object-fit:contain; border:1px solid var(--border); border-radius:26px; }
.experiment-gallery { padding:20px 0 54px; scroll-margin-top:24px; }
.gallery-heading { margin-bottom:22px; } .gallery-heading h2 { font-size:30px; font-weight:700; letter-spacing:-.035em; line-height:1.2; margin-top:8px; }
.experiment-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
.experiment-card { padding:30px; background:var(--surface); border:1px solid var(--border); border-radius:26px; box-shadow:0 2px 3px #2723340c; }
.experiment-card h3 { font-size:24px; line-height:1.3; letter-spacing:-.035em; font-weight:700; }
.experiment-card>p { font-size:18px; line-height:1.55; color:var(--muted); margin-top:12px; }
.card-actions { display:flex; align-items:center; flex-wrap:wrap; gap:16px 20px; margin-top:24px; }
.card-actions>a:not(.primary-link) { font-size:14px; } .video-placeholder { color:var(--muted); font-size:14px; } .video-placeholder small { font-size:12px; }
.founder-message { padding:32px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); margin-bottom:24px; }
.sandbox-footer { background:var(--surface); border-top:12px solid var(--purple); }
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:32px; padding-top:30px; padding-bottom:30px; }
.footer-inner p { margin-top:12px; font-size:14px; color:var(--muted); }
.footer-inner nav { display:flex; flex-wrap:wrap; gap:24px; font-size:15px; }
@media(max-width:900px) { .sandbox-hero { grid-template-columns:1fr; gap:28px; padding-top:34px; } .hero-copy { max-width:700px; } h1 { max-width:none; } .hero-explanation { max-width:620px; } .collaboration-image { max-width:780px; margin:auto; } }
@media(max-width:600px) { .page-width { padding-left:20px; padding-right:20px; } .sandbox-nav { gap:16px; flex-wrap:wrap; } .sandbox-nav nav { gap:12px; } .sandbox-nav nav a { font-size:14px; } h1 { font-size:36px; } .hero-subtitle { font-size:19px; } .hero-explanation { font-size:17px; } .sandbox-hero { padding-bottom:32px; } .experiment-grid { grid-template-columns:1fr; } .experiment-card { padding:24px; } .gallery-heading h2 { font-size:27px; } .experiment-card h3 { font-size:22px; } .card-actions { gap:16px; } .footer-inner { align-items:flex-start; flex-direction:column; gap:22px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

.sandbox-notes { margin:32px 0 40px; display:grid; gap:20px; max-width:900px; }
.sandbox-notes h2 { font-size:18px; line-height:1.4; color:var(--purple); margin-bottom:8px; }
.sandbox-notes p { font-size:14px; line-height:1.6; color:var(--muted); }

.footer-notes { max-width:1200px; margin:0 auto; padding:0 24px 24px; display:flex; flex-wrap:wrap; gap:8px 18px; font-size:13px; color:var(--muted); }
.footer-notes h2 { font-size:13px; font-weight:600; line-height:1.5; color:var(--purple); } .footer-notes section { width:100%; } .footer-notes p { line-height:1.6; margin-top:8px; }

.suggestion-area { margin:12px 0 32px; max-width:600px; font-size:14px; color:var(--muted); }
.suggestion-area h2 { font-size:18px; color:var(--purple); margin-bottom:6px; }
.suggestion-area button { font:600 13px/1.4 "Plus Jakarta Sans",Arial,sans-serif; padding:7px 12px; border:1px solid var(--border); border-radius:999px; color:var(--purple); background:var(--lavender); cursor:pointer; margin-top:8px; }
#suggestion-form { margin-top:10px; } #suggestion-form label { display:block; font-size:13px; }
#suggestion-text { width:100%; margin-top:6px; padding:8px; font:14px/1.5 "Plus Jakarta Sans",Arial,sans-serif; border:1px solid var(--border); border-radius:12px; background:var(--surface); color:var(--text); }
.suggestion-area button:focus-visible { outline:3px solid #7A67C7; outline-offset:3px; }
#suggestion-status { margin-top:8px; }