/* Artistic codes (/artistic/): builds on /demo/demo.css (tokens, cards, buttons, forms); only the page's own parts here */
/* gallery */
.agrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-top:12px}
.acard{margin:0;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--bg)}
.aimg{display:flex;align-items:center;justify-content:center;background:#fff;padding:14px;min-height:150px}
.acard .aimg{height:220px}
.acard .aimg img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.acard.pr .aimg{background:#fff;background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.035) 0 1px,transparent 1px 4px)}
.acard figcaption{display:flex;flex-direction:column;gap:6px;padding:10px 12px 12px}
.acard figcaption b{color:var(--ink);font-weight:500}
.abadges{display:flex;flex-wrap:wrap;gap:6px}
.ab{display:inline-flex;align-items:center;padding:2px 9px;border-radius:999px;font:500 .74rem/1.5 Roboto,system-ui,sans-serif;background:var(--soft);color:var(--ink)}
.ab.ok{background:#dcfce7;color:#166534}
.ab.ok::before{content:"✓";margin-right:4px}
.ab.bad{background:#fee2e2;color:#991b1b}
.ab.bad::before{content:"✗";margin-right:4px}
.ab.warn{background:#fef3c7;color:#92400e}
:root[data-theme="dark"] .ab.ok{background:rgba(34,197,94,.18);color:#86efac}
:root[data-theme="dark"] .ab.bad{background:rgba(239,68,68,.18);color:#fca5a5}
:root[data-theme="dark"] .ab.warn{background:rgba(245,158,11,.18);color:#fcd34d}
.adl{display:flex;gap:12px}
/* studio */
.astudio{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:20px;align-items:start;margin-top:12px}
.aopts,.aout{display:flex;flex-direction:column;gap:12px;min-width:0}
.aout{position:sticky;top:80px}
.seg{display:flex;flex-wrap:wrap;gap:4px;padding:4px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.seg button{flex:1 1 auto;min-height:40px;padding:0 12px;border:0;border-radius:9px;background:transparent;color:var(--muted);font:500 .9rem Roboto,system-ui,sans-serif;cursor:pointer}
.seg button[aria-checked=true]{background:var(--ink);color:var(--bg)}
.seg button:focus-visible{outline:2px solid var(--em);outline-offset:2px}
.afile{display:flex;flex-direction:column;gap:6px}
.afile>label{font-size:.85rem;color:var(--muted);font-weight:500}
.afile-row{display:flex;align-items:center;gap:10px}
.afile-row input[type=file]{flex:1;min-width:0;padding:6px}
.athumb{width:64px;height:64px;object-fit:contain;border:1px solid var(--line);border-radius:8px;background:repeating-conic-gradient(rgba(127,127,127,.12) 0 25%,#fff 0 50%) 0 0/12px 12px}
.asamples{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.asamples .btn.sm{min-height:34px;padding:4px 12px}
.astudio .fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.astudio .fgrid .span2{grid-column:span 2}
.astudio input[type=range]{padding:0;min-height:32px}
.astudio input[type=color]{padding:2px;height:40px;width:100%}
.astudio output{color:var(--ink);font-weight:500}
[data-show][hidden]{display:none!important}
.aresults{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ares{margin:0;display:flex;flex-direction:column;gap:6px}
.ares figcaption{font-size:.85rem;color:var(--muted);font-weight:500}
.ares .aimg{border:1px solid var(--line);border-radius:12px;min-height:220px}
.ares .aimg img{max-width:100%;height:auto}
.aout.stale .aresults,.aout.stale .afind{opacity:.5;transition:opacity .15s}
.afind{display:flex;flex-direction:column;gap:8px}
.afind .row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.afind ul{margin:0;padding-left:18px;color:var(--text);font-size:.9rem}
.afind li.error{color:#b91c1c}
:root[data-theme="dark"] .afind li.error{color:#fca5a5}
.afind li.info{color:var(--muted)}
.azpl summary{cursor:pointer}
pre.xcode{margin:0;padding:10px 12px;border-radius:10px;background:var(--code-bg);border:1px solid var(--code-line);color:#dbe2f0;font:400 12.5px/1.5 "Roboto Mono",ui-monospace,monospace;white-space:pre-wrap;overflow-wrap:anywhere;max-height:320px;overflow:auto}
.azpl pre.xcode{max-height:180px;margin:8px 0}
#code pre.xcode{max-height:none}
.uselinks{margin:12px 0 0}
@media (max-width:860px){
  .astudio{grid-template-columns:1fr}
  .aout{position:static}
}
@media (max-width:520px){
  .astudio .fgrid{grid-template-columns:1fr}
  .astudio .fgrid .span2{grid-column:auto}
  .aresults{grid-template-columns:1fr}
  .agrid{grid-template-columns:1fr}
}