:root {
  --blue--50:#eff6ff; --blue--100:#dbeafe; --blue--200:#bfdbfe; --blue--400:#60a5fa;
  --blue--500:#3b82f6; --blue--600:#2563eb; --blue--700:#1d4ed8;
  --gray--50:#f8fafc; --gray--100:#f1f5f9; --gray--200:#e2e8f0;
  --gray--400:#94a3b8; --gray--600:#475569; --gray--700:#334155; --gray--900:#0f172a;
  --shadow-sm:0 1px 3px rgba(0,0,0,0.07); --shadow-md:0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg:0 10px 30px rgba(0,0,0,0.1); --radius:12px;
}

/* Presets */
.preset-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.preset-btn {
  font-family:'Sora',sans-serif; font-size:11px; font-weight:600;
  padding:10px 8px; border-radius:8px; border:1.5px solid transparent;
  cursor:pointer; text-align:center; transition:all 0.15s;
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.preset-btn:hover { transform:translateY(-1px); box-shadow:0 4px 10px rgba(0,0,0,0.12); }
.preset-btn.active { outline:2px solid var(--blue--500); outline-offset:2px; }
.preset-swatch { display:flex; gap:3px; }
.preset-swatch span { width:12px; height:12px; border-radius:50%; display:block; }

/* Header */
.header-actions { display:flex; gap:10px; }
.btn-scroll { font-family:'Sora',sans-serif; font-size:13px; font-weight:500; padding:7px 16px; border-radius:8px; border:none; cursor:pointer; display:flex; align-items:center; gap:6px; transition:all 0.15s; }
.btn-ghost { background:transparent; color:var(--gray--600); border:1px solid var(--gray--200); }
.btn-ghost:hover { background:var(--gray--50); border-color:var(--gray--200); color:var(--gray--900); }
.btn-primary-scroll { background:var(--blue--600); color:white; }
.btn-primary-scroll:hover { background:var(--blue--700); }

/* App */
.app { display:grid; grid-template-columns:340px 1fr; }

/* Panel */
.panel { background:white; border-right:1px solid var(--blue--100); overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--blue--200) transparent; }
.panel::-webkit-scrollbar { width:5px; }
.panel::-webkit-scrollbar-track { background:transparent; }
.panel::-webkit-scrollbar-thumb { background:var(--blue--200); border-radius:99px; }
.panel-section { padding:20px 24px; border-bottom:1px solid var(--gray--100); }
.panel-section:last-child { border-bottom:none; }
.section-label { font-size:1rem; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:var(--blue--500); margin-bottom:16px; display:flex; align-items:center; gap:8px; }
.section-label::after { content:''; flex:1; height:1px; background:var(--blue--100); }
.control-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; gap:12px; }
.control-row:last-child { margin-bottom:0; }
.control-label { font-size:12px; font-weight:500; color:var(--gray--700); flex-shrink:0; min-width:110px; }
.control-right { display:flex; align-items:center; gap:8px; flex:1; justify-content:flex-end; }
.value-badge { font-family:monospace; font-size:11px; color:var(--blue--600); background:var(--blue--50); border:1px solid var(--blue--100); padding:2px 7px; border-radius:5px; min-width:50px; text-align:center; }
input[type="range"] { -webkit-appearance:none; width:120px; height:4px; background:var(--blue--100); border-radius:99px; outline:none; cursor:pointer; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; width:14px; height:14px; border-radius:50%; background:var(--blue--600); cursor:pointer; box-shadow:0 0 0 3px white,0 0 0 4px var(--blue--200); }
.color-wrap { position:relative; width:34px; height:28px; border-radius:6px; overflow:hidden; border:1px solid var(--gray--200); box-shadow:var(--shadow-sm); cursor:pointer; flex-shrink:0; }
.color-wrap input[type="color"] { position:absolute; inset:-4px; width:calc(100% + 8px); height:calc(100% + 8px); border:none; padding:0; cursor:pointer; opacity:0; }
.color-preview { width:100%; height:100%; border-radius:5px; pointer-events:none; }
.color-hex { font-family:'DM Mono',monospace; font-size:11px; color:var(--gray--600); background:var(--gray--50); border:1px solid var(--gray--200); padding:4px 8px; border-radius:6px; width:76px; outline:none; }
.color-hex:focus { border-color:var(--blue--400); }
.toggle-wrap { display:flex; background:var(--gray--100); border-radius:8px; padding:3px; gap:2px; }
.toggle-wrap button { font-family:'Sora',sans-serif; font-size:11px; font-weight:500; padding:4px 10px; border-radius:5px; border:none; cursor:pointer; background:transparent; color:var(--gray--600); transition:all 0.15s; }
.toggle-wrap button.active { background:white; color:var(--blue--600); box-shadow:var(--shadow-sm); }
.checkbox-wrap { display:flex; align-items:center; gap:8px; cursor:pointer; }
.checkbox-wrap input[type="checkbox"] { width:15px; height:15px; accent-color:var(--blue--600); cursor:pointer; }
.checkbox-wrap span { font-size:12px; color:var(--gray--600); }

/* Preview area */
.preview-area { padding:32px; display:flex; flex-direction:column; gap:24px; overflow:auto; }
.preview-title { font-size:13px; font-weight:600; color:var(--gray--600); text-transform:uppercase; letter-spacing:0.8px; }
.previews-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.preview-box { background:white; border-radius:var(--radius); border:1px solid var(--blue--100); box-shadow:var(--shadow-md); overflow:hidden; }
.preview-box-label { padding:12px 16px; border-bottom:1px solid var(--gray--200); font-size:11px; font-weight:600; color:var(--gray--400); text-transform:uppercase; letter-spacing:0.8px; background:var(--gray--50); }

/* The three preview scroll containers */
#previewY   { height:220px; overflow-y:scroll; overflow-x:hidden; padding:16px; }
#previewX   { overflow-x:scroll; overflow-y:hidden; padding:16px 16px 20px; }
#previewBoth{ height:220px; overflow:scroll; padding:16px; }
.scroll-content-x { display:flex; gap:12px; width:max-content; }
.card-block { width:140px; background:var(--gray--50); border:1px solid var(--gray--200); border-radius:8px; padding:14px; flex-shrink:0; }
.card-dot { width:28px; height:28px; border-radius:50%; margin-bottom:10px; }
.card-line { height:8px; background:var(--gray--200); border-radius:4px; margin-bottom:6px; }
.card-line.short { width:60%; }
.content-block { background:var(--gray--50); border-radius:6px; padding:10px 12px; font-size:12px; color:var(--gray--600); border:1px solid var(--gray--100); line-height:1.5; margin-bottom:8px; }
.content-block:last-child { margin-bottom:0; }
.scroll-content-both { width:800px; }

/* About */

.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-bottom:40px; }
.about-card { padding:24px; border-radius:12px; background:var(--gray--100); border:1px solid var(--gray--200); }
.about-card h3 { font-size:18px; font-weight:600; margin-bottom:8px; }
.about-card p, .about-prose p { font-size:14px; color:var(--gray--700); line-height:1.65; }
.about-prose { display:flex; flex-direction:column; gap:16px; margin-bottom:40px; padding:28px; background:var(--gray--100); border:1px solid var(--gray--200); border-radius:12px; }
.about-prose strong { font-weight:600; color:var(--gray--900); }

@media(max-width:900px){
  .intro { flex-direction:column; padding:32px 24px; } .intro h1 { font-size:26px; }
  .app { grid-template-columns:1fr; } .previews-grid { grid-template-columns:1fr; }
  .about { padding:40px 24px; } .about-grid { grid-template-columns:1fr; gap:16px; }
  .panel { max-height: 250px; overflow-y: auto; border-bottom: 1px solid var(--blue--100); }
}