body.playground-page{background:radial-gradient(1200px 600px at 15% -10%, rgba(74, 222, 128, 0.25), transparent 60%),radial-gradient(900px 500px at 90% 10%, rgba(59, 130, 246, 0.22), transparent 55%),linear-gradient(180deg, #0b0f17 0%, #0f172a 60%, #111827 100%)}body.playground-page.theme-caricature{background:radial-gradient(1200px 600px at 20% -10%, rgba(74, 222, 128, 0.22), transparent 60%),radial-gradient(900px 500px at 85% 5%, rgba(59, 130, 246, 0.18), transparent 55%),linear-gradient(180deg, #0b0f17 0%, #0f172a 60%, #111827 100%)}.playground-hero{padding:5rem 0 3rem;text-align:center}.playground-hero.compact{padding:4.5rem 0 3rem;text-align:left}.playground-hero__title{font-size:clamp(2.5rem, 5vw, 4rem);margin-bottom:1rem;text-shadow:0 8px 20px rgba(0, 0, 0, 0.45)}.playground-hero__subtitle{max-width:720px;margin:0 auto 2rem;color:var(--muted);font-size:1.1rem;line-height:1.7}.playground-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.playground-actions.left{justify-content:flex-start}.playground-shell{position:relative;padding:2.5rem;border-radius:24px;background:rgba(11, 14, 19, 0.85);border:1px solid rgba(255, 255, 255, 0.08);box-shadow:0 30px 60px rgba(0, 0, 0, 0.45);overflow:hidden}.playground-shell.strong{background:rgba(11, 14, 19, 0.9)}.playground-shell::before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 120deg, rgba(74, 222, 128, 0.2), rgba(59, 130, 246, 0.2), rgba(16, 185, 129, 0.2), rgba(74, 222, 128, 0.2));opacity:0.45;animation:playground-spin 18s linear infinite;pointer-events:none}.playground-shell.strong::before{opacity:0.4}.playground-shell__content{position:relative;z-index:1}.playground-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));gap:1.5rem;margin-top:2.5rem}.playground-grid.tight{grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));margin-top:0}.playground-card{background:linear-gradient(160deg, rgba(17, 24, 39, 0.95), rgba(12, 17, 27, 0.9));border:1px solid rgba(148, 163, 184, 0.18);border-radius:20px;padding:1.75rem;transition:transform 0.25s ease, border 0.25s ease, box-shadow 0.25s ease;position:relative;overflow:hidden}.playground-card::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg, rgba(74, 222, 128, 0.08), transparent 40%);opacity:0;transition:opacity 0.25s ease;pointer-events:none}.playground-card:hover{transform:translateY(-6px);border-color:rgba(74, 222, 128, 0.4);box-shadow:0 18px 40px rgba(0, 0, 0, 0.45)}.playground-card:hover::after{opacity:1}.playground-card__tag{display:inline-flex;align-items:center;gap:0.35rem;font-size:0.75rem;letter-spacing:0.12em;text-transform:uppercase;color:#c7f9dd;margin-bottom:0.75rem}.playground-card__title{font-size:1.4rem;margin-bottom:0.5rem}.playground-card__title.small{font-size:1.3rem}.playground-card__text{color:var(--muted);margin-bottom:1.25rem}.playground-card__text.compact{margin-bottom:0}.playground-card__cta{display:inline-flex;align-items:center;gap:0.5rem;font-weight:600;color:var(--acc);text-transform:uppercase;letter-spacing:0.08em;font-size:0.8rem}.playground-footer{text-align:center;margin-top:4rem;color:var(--muted)}.playground-footer.compact{margin-top:3rem}@keyframes playground-spin{to{transform:rotate(360deg)}}@media(max-width: 768px){.playground-hero{padding:4rem 0 2.5rem}.playground-hero.compact{text-align:center}.playground-actions.left{justify-content:center}.playground-shell{padding:2rem}.playground-grid{grid-template-columns:1fr}}

.playground-input{display:block;width:100%;max-width:420px;margin:0 0 1rem;padding:.65rem .75rem;border-radius:12px;border:1px solid rgba(148, 163, 184, 0.25);background:rgba(9, 12, 18, 0.8);color:var(--fg)}.playground-input::file-selector-button{margin-right:.75rem;padding:.45rem .8rem;border-radius:999px;border:1px solid rgba(148, 163, 184, 0.35);background:rgba(20, 27, 40, 0.9);color:var(--fg);cursor:pointer}.playground-result{margin:1.25rem 0 0;padding:1rem;border-radius:18px;border:1px dashed rgba(148, 163, 184, 0.2);background:rgba(9, 12, 18, 0.6);min-height:140px;display:flex;align-items:center;justify-content:center}.playground-result img{max-width:100%;max-height:360px;border-radius:12px;box-shadow:0 16px 30px rgba(0,0,0,.4)}.playground-status{margin:1rem 0 0;color:var(--muted);font-size:.95rem}.btn[disabled]{opacity:.6;cursor:not-allowed}

#cameraBtn{margin-bottom:1rem}

#cameraBtn{margin-bottom:1rem}@media(min-width: 769px){#cameraBtn{display:none}}

.playground-result{position:relative}.playground-loader{width:48px;height:48px;border-radius:50%;border:3px solid rgba(148, 163, 184, 0.25);border-top-color:var(--acc);animation:playground-spin 1s linear infinite;display:none}.playground-result.is-loading .playground-loader{display:block}.playground-result.is-loading img{display:none}

#saveBtn{margin-top:.75rem}

.playground-hero.compact{text-align:center}.playground-actions.left{justify-content:center}.playground-shell.strong{max-width:960px;margin:0 auto}.playground-grid{justify-items:center}.playground-grid.tight{justify-items:stretch}.playground-card{width:100%;max-width:360px}@media(max-width: 768px){.playground-card{max-width:100%}}

.playground-brand{display:flex;justify-content:center;margin-bottom:1.5rem}.playground-brand img{width:120px;opacity:.65;filter:grayscale(1)}.playground-shell::after{content:"";position:absolute;inset:-20%;background:url("/assets/awal_watermark.png") no-repeat center/420px;opacity:.06;pointer-events:none}

.playground-helper{margin:0 0 1rem;color:var(--muted);font-size:.9rem}

.playground-gallery{margin-top:3rem;text-align:center}.playground-gallery .section-subtitle{max-width:720px;margin:0 auto 2rem}.playground-gallery__grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));gap:1.5rem}.playground-gallery__item{margin:0;background:rgba(9, 12, 18, 0.65);border:1px solid rgba(148, 163, 184, 0.18);border-radius:18px;padding:1rem;box-shadow:0 12px 24px rgba(0,0,0,.35)}.playground-gallery__item img{width:100%;height:220px;object-fit:contain;border-radius:12px;background:rgba(11, 14, 19, 0.7)}.playground-gallery__item figcaption{margin-top:.75rem;color:var(--muted);font-size:.9rem;text-transform:uppercase;letter-spacing:.12em}

.playground-gallery__empty{margin-top:1rem;color:var(--muted);font-size:.95rem}

.playground-hero .container{display:flex;flex-direction:column;align-items:center}.playground-shell{max-width:1100px;margin:0 auto;width:100%}


body.playground-page .container{width:100%;max-width:1200px;margin-left:auto;margin-right:auto;padding-left:1.5rem;padding-right:1.5rem}