:root{--bg-top: #f4f0e6;--bg-bottom: #ced9cc;--panel: rgba(255, 250, 241, .8);--panel-border: rgba(66, 86, 78, .28);--text: #1f2c2a;--muted: #3e5652;--accent: #d57d30;--accent-strong: #b85f1f;--danger: #922f25;--shadow: 0 14px 38px rgba(34, 51, 45, .18)}*{box-sizing:border-box}html,body,#root{margin:0;width:100%;min-height:100%}body{font-family:Avenir Next,Futura,Trebuchet MS,sans-serif;color:var(--text);background:radial-gradient(circle at 12% 14%,#f8e8ce 0%,transparent 35%),radial-gradient(circle at 88% 8%,#dbe9d7 0%,transparent 32%),linear-gradient(162deg,var(--bg-top),var(--bg-bottom))}.app-shell{max-width:1480px;margin:0 auto;padding:18px;display:grid;gap:16px;grid-template-columns:minmax(360px,450px) minmax(0,1fr);grid-template-areas:"header header" "controls viewport" "shots viewport" "code code";animation:page-enter .42s ease-out}.panel{background:var(--panel);border:1px solid var(--panel-border);border-radius:16px;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.header-panel{grid-area:header;padding:16px 20px;display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.header-panel h1{margin:0 0 8px;font-size:1.85rem;letter-spacing:.01em}.header-panel p{margin:0;color:var(--muted);max-width:760px}.status-chip{background:#1435311c;border:1px solid rgba(20,53,49,.2);padding:10px 14px;border-radius:999px;font-size:.9rem;max-width:36ch}.controls-panel{grid-area:controls;padding:16px;display:grid;grid-template-columns:1fr 1fr;gap:12px}.field{display:flex;flex-direction:column;gap:6px;font-size:.88rem;color:var(--muted)}.field-wide{grid-column:1 / -1}.field input,.field textarea{width:100%;border:1px solid rgba(38,66,58,.25);border-radius:10px;padding:9px 11px;background:#fffdf8f0;color:var(--text);font:inherit}.field textarea{resize:vertical}.checkbox-field{flex-direction:row;align-items:center;gap:8px}.button-row{display:flex;flex-wrap:wrap;gap:8px}button{border:none;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent-strong));color:#fffaf2;padding:9px 12px;font-weight:600;cursor:pointer;transition:transform .12s ease,filter .12s ease}button:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.05)}button:disabled{opacity:.55;cursor:not-allowed}.meta-row{display:flex;justify-content:space-between;gap:8px;font-size:.85rem;color:var(--muted)}.error-box{grid-column:1 / -1;border:1px solid rgba(146,47,37,.4);background:#922f251a;color:var(--danger);border-radius:10px;padding:10px 12px;font-size:.9rem}.viewport-panel{grid-area:viewport;min-height:640px;overflow:hidden}.canvas-host{width:100%;height:100%;min-height:640px}.screenshots-panel{grid-area:shots;padding:14px}.screenshots-panel h2,.code-panel h2{margin:0 0 10px}.screenshot-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.screenshot-grid figure{margin:0;border:1px solid rgba(38,66,58,.22);border-radius:10px;background:#fff9;overflow:hidden}.screenshot-grid img{display:block;width:100%;aspect-ratio:1;object-fit:cover}.screenshot-grid figcaption{padding:6px 8px;font-size:.78rem;text-transform:capitalize;color:var(--muted)}.empty-note{border:1px dashed rgba(38,66,58,.3);border-radius:10px;padding:14px;font-size:.9rem;color:var(--muted)}.code-panel{grid-area:code;padding:14px}.code-panel textarea{width:100%;border:1px solid rgba(38,66,58,.25);border-radius:10px;padding:10px;background:#fcfffaf5;font-family:SFMono-Regular,Menlo,Consolas,monospace;font-size:.84rem;color:#233331;resize:vertical}.reveal-1,.reveal-2,.reveal-3,.reveal-4{opacity:0;transform:translateY(8px);animation:reveal-up .4s ease forwards}.reveal-1{animation-delay:80ms}.reveal-2{animation-delay:.13s}.reveal-3{animation-delay:.19s}.reveal-4{animation-delay:.24s}@keyframes page-enter{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes reveal-up{to{opacity:1;transform:translateY(0)}}@media(max-width:1100px){.app-shell{grid-template-columns:1fr;grid-template-areas:"header" "controls" "viewport" "shots" "code"}.viewport-panel,.canvas-host{min-height:460px}}@media(max-width:720px){.controls-panel{grid-template-columns:1fr}.meta-row{flex-direction:column}.screenshot-grid{grid-template-columns:1fr}}