/* Sample bowl theme: writing-garden. CSS only, no libraries. */
:root{--a:#9be3a8;--b:#e8f5c8;--c:#5fb3a1;--bg1:#07140f;--bg2:#123327;--ink:#f4f7fb;--dim:rgba(244,247,251,.68);--glass:rgba(255,255,255,.07);--edge:rgba(255,255,255,.16);--r:22px}
*{box-sizing:border-box}
html{background:var(--bg1)}
body{margin:0;min-height:100vh;color:var(--ink);font:16px/1.6 "Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;background:radial-gradient(140% 90% at 50% -10%,var(--bg2),var(--bg1) 70%);overflow-x:hidden}
body::before{content:"";position:fixed;inset:-20%;z-index:-1;pointer-events:none;background:radial-gradient(40% 30% at 20% 20%,rgba(155,227,168,.25),transparent),radial-gradient(30% 25% at 80% 70%,rgba(95,179,161,.25),transparent);opacity:.9;filter:blur(40px);animation:drift 24s ease-in-out infinite alternate}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(60% 50% at 50% 40%,transparent 50%,rgba(0,0,0,.55));}
@keyframes drift{from{transform:translate3d(-3%,-2%,0) rotate(0)}to{transform:translate3d(3%,2%,0) rotate(4deg)}}
@keyframes shimmer{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes rise{0%{transform:translateY(0);opacity:0}20%{opacity:.7}100%{transform:translateY(-120vh);opacity:0}}
a{color:var(--b);text-decoration-color:color-mix(in srgb,var(--b) 50%,transparent);text-underline-offset:3px}
a:hover{color:#fff}
main,.bowl-head,.bowl-foot{width:min(1040px,100% - 28px);margin-inline:auto}
main{display:grid;gap:18px;grid-template-columns:minmax(0,1fr);padding-bottom:40px}
main>*{min-width:0}@media(min-width:820px){main{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}main>.bowl-about,main>.post-box,main>.carousel,main>.top-video,main>.bowl-feed,main>section:only-child,main>article,main>.ai-home{grid-column:1/-1}}
.sample-note{position:sticky;top:0;z-index:50;margin:0;padding:8px 14px;text-align:center;font:600 13px/1.4 system-ui,sans-serif;letter-spacing:.04em;color:var(--bg1);background:linear-gradient(90deg,var(--a),var(--b),var(--c),var(--a));background-size:200% 100%;animation:shimmer 10s linear infinite}
.sample-note a{color:var(--bg1);font-weight:700}
.hero{position:relative;width:min(1040px,100% - 28px);margin:18px auto 0;border-radius:calc(var(--r) + 10px);overflow:hidden}
.hero-photo{position:relative;min-height:clamp(220px,42vw,380px);display:grid;place-items:center;background:linear-gradient(135deg,color-mix(in srgb,var(--a) 70%,transparent),color-mix(in srgb,var(--c) 60%,transparent)),radial-gradient(circle at 30% 20%,rgba(255,255,255,.5),transparent 40%);background-size:200% 200%,auto;animation:shimmer 18s ease-in-out infinite alternate;box-shadow:inset 0 0 0 1px var(--edge),inset 0 -60px 120px rgba(0,0,0,.45),0 30px 80px -20px color-mix(in srgb,var(--a) 50%,transparent)}
.hero-photo::before{content:"";position:absolute;inset:8% 12%;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.45),transparent 30%),radial-gradient(circle at 50% 120%,rgba(255,255,255,.18),transparent 60%);box-shadow:inset 0 -20px 60px rgba(255,255,255,.12),inset 0 20px 40px rgba(0,0,0,.2)}
.hero-photo::after{content:"";position:absolute;left:20%;bottom:-10px;width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.6);box-shadow:60px 30px 0 -2px rgba(255,255,255,.5),140px 10px 0 -3px rgba(255,255,255,.45),260px 40px 0 -1px rgba(255,255,255,.4),380px 5px 0 -3px rgba(255,255,255,.5);animation:rise 9s linear infinite}
.hero-placeholder{position:relative;z-index:1;margin:0;padding:12px 18px;border-radius:999px;background:rgba(0,0,0,.35);backdrop-filter:blur(8px);font-size:.85rem;color:var(--dim);text-align:center}
.bowl-head{text-align:center;padding:28px 0 18px}
.bowl-head h1,h1{margin:0;font-size:clamp(2.2rem,8vw,4.4rem);line-height:1.02;letter-spacing:-.02em;font-weight:800;background:linear-gradient(100deg,#fff 10%,var(--b) 35%,var(--a) 60%,var(--c) 85%);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 12s linear infinite}
.bowl-tag{margin:12px auto 6px;max-width:40ch;font-size:clamp(1.05rem,3.4vw,1.35rem);color:var(--ink)}
.bowl-deed,.feed-meta,.board-meta,.post-hint,.post-date{color:var(--dim);font-size:.85rem}
main>section,main>article,.post,.ai-connect{position:relative;border-radius:var(--r);padding:20px 20px 18px;background:linear-gradient(160deg,rgba(255,255,255,.11),rgba(255,255,255,.03));border:1px solid var(--edge);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 18px 40px -18px rgba(0,0,0,.7);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%)}
main>section::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(140deg,var(--a),transparent 35%,transparent 65%,var(--c));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.55;pointer-events:none}
.post,.ai-connect{background:rgba(0,0,0,.22);margin:12px 0;box-shadow:none}
h2{margin:0 0 10px;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--b)}
h3{margin:0 0 6px;font-size:1.15rem}
button{font:600 .95rem/1 system-ui,sans-serif;color:var(--bg1);background:linear-gradient(120deg,var(--a),var(--b));border:0;border-radius:999px;padding:12px 18px;cursor:pointer;box-shadow:0 8px 24px -8px var(--a);transition:transform .2s,box-shadow .2s}
button:hover{transform:translateY(-2px);box-shadow:0 12px 30px -8px var(--a)}
.track{background:var(--glass);color:var(--ink);border:1px solid var(--edge);box-shadow:none;width:100%;text-align:left;border-radius:14px}
.jukebox-tracks{list-style:none;padding:0;display:grid;gap:8px}
.post-actions,.jukebox-controls{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0}
textarea,input{width:100%;font:inherit;color:var(--ink);background:rgba(0,0,0,.3);border:1px solid var(--edge);border-radius:14px;padding:12px}
textarea:focus,input:focus{outline:2px solid var(--c);outline-offset:2px}
.carousel-track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(190px,1fr);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
.carousel-item{margin:0;scroll-snap-align:start}
.carousel-ph,.video-slot{aspect-ratio:4/3;display:grid;place-items:center;border-radius:16px;color:rgba(255,255,255,.8);background:linear-gradient(135deg,color-mix(in srgb,var(--a) 55%,var(--bg2)),color-mix(in srgb,var(--c) 55%,var(--bg1)));box-shadow:inset 0 0 0 1px var(--edge),inset 0 30px 60px rgba(255,255,255,.08)}
.carousel-item:nth-child(2) .carousel-ph{filter:hue-rotate(30deg)}.carousel-item:nth-child(3) .carousel-ph{filter:hue-rotate(-30deg)}
.video-slot{aspect-ratio:16/9}
.video-placeholder{text-align:center;font-size:.9rem;padding:10px}
figcaption{font-size:.8rem;color:var(--dim);margin-top:6px}
.board-note{font-size:1.1rem;padding:14px;border-radius:14px;background:color-mix(in srgb,var(--b) 14%,transparent);border-left:4px solid var(--b)}
.bowl-foot{text-align:center;padding:30px 0 60px;color:var(--dim)}
pre,code{font-family:ui-monospace,Menlo,monospace;font-size:.85em}
.sample-tag{display:inline-block;margin:0 0 10px;padding:3px 10px;border-radius:999px;font:700 11px/1.5 system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--bg1);background:var(--b)}
.hero-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero-photo::before,.hero-photo::after{z-index:1}
.hero-cap{position:absolute;z-index:2;left:14px;bottom:12px;margin:0;padding:6px 12px;border-radius:999px;background:rgba(0,0,0,.45);backdrop-filter:blur(8px);font-size:.8rem;color:#fff}
.carousel-item img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:16px;box-shadow:inset 0 0 0 1px var(--edge)}
.video-slot video{width:100%;height:100%;object-fit:cover;border-radius:16px;background:#000}
.board-note .post-date{font-size:.8rem}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}