:root{--hap-orange: hsl(32, 76%, 63%);--hap-orange-dark: hsl(32, 76%, 45%);--bg-dark: hsl(220, 13%, 18%);--bg-card: hsl(220, 13%, 95%);--text-dark: hsl(220, 13%, 20%);--text-light: hsl(220, 13%, 96%);--text-muted: hsl(220, 10%, 50%);--border-color: hsl(220, 13%, 80%);--const-color: hsl(0, 70%, 50%);--const-bg: hsl(0, 70%, 95%);--let-color: hsl(142, 70%, 35%);--let-bg: hsl(142, 70%, 95%);--log-bg: hsl(220, 13%, 12%);--log-text: hsl(120, 100%, 75%)}[data-astro-cid-gecvxre2]{box-sizing:border-box;margin:0;padding:0}body{font-family:Segoe UI,system-ui,-apple-system,sans-serif;background-color:var(--bg-dark);min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:2rem;color:var(--text-light)}.page-header[data-astro-cid-gecvxre2]{text-align:center;margin-bottom:2rem}.page-header[data-astro-cid-gecvxre2] h1[data-astro-cid-gecvxre2]{font-size:1.5rem;color:var(--hap-orange);margin-bottom:.5rem}.page-header[data-astro-cid-gecvxre2] p[data-astro-cid-gecvxre2]{color:var(--text-muted);font-size:.9rem}.demo-container[data-astro-cid-gecvxre2]{background-color:var(--bg-card);border-radius:16px;max-width:700px;width:100%;overflow:hidden;box-shadow:0 10px 40px #16181d26}.demo-header[data-astro-cid-gecvxre2]{background:linear-gradient(135deg,var(--hap-orange),var(--hap-orange-dark));color:var(--text-light);padding:1rem 1.5rem;text-align:center}.demo-header[data-astro-cid-gecvxre2] h2[data-astro-cid-gecvxre2]{font-size:1.1rem;font-weight:600}.panels[data-astro-cid-gecvxre2]{display:grid;grid-template-columns:1fr 1fr}.panel[data-astro-cid-gecvxre2]{padding:1.25rem}.panel-const[data-astro-cid-gecvxre2]{background-color:var(--const-bg);border-right:2px solid var(--border-color)}.panel-let[data-astro-cid-gecvxre2]{background-color:var(--let-bg)}.panel-header[data-astro-cid-gecvxre2]{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;padding-bottom:.75rem;border-bottom:2px solid}.panel-const[data-astro-cid-gecvxre2] .panel-header[data-astro-cid-gecvxre2]{border-color:var(--const-color)}.panel-let[data-astro-cid-gecvxre2] .panel-header[data-astro-cid-gecvxre2]{border-color:var(--let-color)}.panel-header[data-astro-cid-gecvxre2] .icon[data-astro-cid-gecvxre2]{font-size:1.25rem}.panel-header[data-astro-cid-gecvxre2] h3[data-astro-cid-gecvxre2]{font-size:.9rem;color:var(--text-dark)}.panel-const[data-astro-cid-gecvxre2] .panel-header[data-astro-cid-gecvxre2] h3[data-astro-cid-gecvxre2]{color:var(--const-color)}.panel-let[data-astro-cid-gecvxre2] .panel-header[data-astro-cid-gecvxre2] h3[data-astro-cid-gecvxre2]{color:var(--let-color)}.panel-subtitle[data-astro-cid-gecvxre2]{font-size:.75rem;color:var(--text-muted);margin-left:auto}.variable-item[data-astro-cid-gecvxre2]{background:#fff;border-radius:8px;padding:.75rem;margin-bottom:.75rem;border:1px solid var(--border-color)}.variable-name[data-astro-cid-gecvxre2]{font-family:Consolas,Monaco,monospace;font-size:.85rem;font-weight:600;color:var(--text-dark);margin-bottom:.5rem}.variable-value[data-astro-cid-gecvxre2]{font-family:Consolas,Monaco,monospace;font-size:1rem;padding:.5rem .75rem;background-color:#f6f7f8;border-radius:4px;margin-bottom:.5rem}.panel-const[data-astro-cid-gecvxre2] .variable-value[data-astro-cid-gecvxre2]{color:var(--const-color)}.panel-let[data-astro-cid-gecvxre2] .variable-value[data-astro-cid-gecvxre2]{color:var(--let-color)}.try-change-row[data-astro-cid-gecvxre2]{display:flex;gap:.5rem;margin-top:.5rem}.try-change-input[data-astro-cid-gecvxre2]{flex:1;padding:.4rem .6rem;border:2px dashed var(--const-color);border-radius:6px;font-family:Consolas,Monaco,monospace;font-size:.8rem;background:#fff}.try-change-input[data-astro-cid-gecvxre2]:focus{outline:none;border-style:solid;border-color:var(--const-color)}.try-change-btn[data-astro-cid-gecvxre2]{padding:.4rem .75rem;border:2px solid var(--const-color);background:var(--const-color);color:#fff;border-radius:6px;font-size:.75rem;font-weight:600;cursor:pointer;transition:all .2s;white-space:nowrap}.try-change-btn[data-astro-cid-gecvxre2]:hover{background-color:#ad1f1f;border-color:#ad1f1f}.change-controls[data-astro-cid-gecvxre2]{display:flex;gap:.5rem}.change-btn[data-astro-cid-gecvxre2]{flex:1;padding:.5rem;border:none;border-radius:6px;font-size:1rem;font-weight:600;cursor:pointer;transition:transform .15s}.change-btn[data-astro-cid-gecvxre2]:hover{transform:scale(1.05)}.change-btn[data-astro-cid-gecvxre2]:active{transform:scale(.98)}.btn-minus[data-astro-cid-gecvxre2]{background-color:#d14747;color:#fff}.btn-plus[data-astro-cid-gecvxre2]{background-color:var(--let-color);color:#fff}.message-btn[data-astro-cid-gecvxre2]{width:100%;padding:.5rem;border:none;background-color:#3380cc;color:#fff;border-radius:6px;font-size:.8rem;cursor:pointer}.message-btn[data-astro-cid-gecvxre2]:hover{background-color:#2966a3}.log-section[data-astro-cid-gecvxre2]{padding:1rem 1.5rem;background-color:#e2e4e9;border-top:1px solid var(--border-color)}.log-header[data-astro-cid-gecvxre2]{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.log-header[data-astro-cid-gecvxre2] h3[data-astro-cid-gecvxre2]{font-size:.85rem;color:var(--text-dark)}.clear-btn[data-astro-cid-gecvxre2]{background:none;border:1px solid var(--border-color);padding:.3rem .6rem;border-radius:4px;font-size:.75rem;color:var(--text-muted);cursor:pointer}.log-output[data-astro-cid-gecvxre2]{background-color:var(--log-bg);border-radius:8px;padding:.75rem;font-family:Consolas,Monaco,monospace;font-size:.8rem;color:var(--log-text);min-height:100px;max-height:180px;overflow-y:auto}.log-line[data-astro-cid-gecvxre2]{padding:.2rem 0}.log-error[data-astro-cid-gecvxre2]{color:#ed5e5e}.log-success[data-astro-cid-gecvxre2]{color:#30e874}.tip-section[data-astro-cid-gecvxre2]{padding:1rem 1.5rem;background-color:#fcf3e9;border-top:1px solid var(--border-color)}.tip-section[data-astro-cid-gecvxre2] p[data-astro-cid-gecvxre2]{font-size:.85rem;color:var(--text-dark)}.tip-section[data-astro-cid-gecvxre2] strong[data-astro-cid-gecvxre2]{color:var(--hap-orange-dark)}.tip-section[data-astro-cid-gecvxre2] code[data-astro-cid-gecvxre2]{background-color:#e2e4e9;padding:.1rem .3rem;border-radius:3px;font-size:.8rem}.back-link[data-astro-cid-gecvxre2]{margin-top:1.5rem;color:var(--hap-orange);text-decoration:none;font-size:.9rem}.back-link[data-astro-cid-gecvxre2]:hover{text-decoration:underline}@media(max-width:600px){.panels[data-astro-cid-gecvxre2]{grid-template-columns:1fr}.panel-const[data-astro-cid-gecvxre2]{border-right:none;border-bottom:2px solid var(--border-color)}}