.dg-page{width:100%;min-width:0;max-width:1320px;margin:0 auto;padding:40px 40px 72px}.dg-hero{max-width:760px;padding:0 0 28px}.dg-hero h1{margin:8px 0 12px;font-size:34px;line-height:1.12}.dg-hero p{color:#4d4d4d;max-width:66ch;font-size:15px}.dg-tool{grid-template-columns:340px minmax(0,1fr);align-items:start;gap:24px;display:grid}.dg-controls{gap:14px;min-width:0;display:grid}.dg-group{border:1px solid var(--line);background:#fff;border-radius:10px;gap:14px;min-width:0;margin:0;padding:16px;display:grid}.dg-group legend{letter-spacing:.02em;color:#333;margin-left:-6px;padding:0 6px;font-size:12px;font-weight:650}.dg-count{color:var(--muted);margin-left:4px;font-weight:500}.dg-presets{flex-wrap:wrap;gap:6px;display:flex}.dg-presets button,.dg-add,.dg-remove,.dg-copy,.dg-tabs button{border-radius:7px;min-height:36px;padding:0 12px;font-size:13px;font-weight:550}.dg-presets button{border:1px solid var(--line);background:var(--subtle);color:#444}.dg-presets button:hover{border-color:var(--strong-line);color:#111}.dg-presets button[aria-pressed=true]{color:#fff;background:#111;border-color:#111}.dg-field{gap:6px;min-width:0;display:grid}.dg-field>label{color:#555;font-size:12px}.dg-range{grid-template-columns:minmax(0,1fr) 88px;align-items:center;gap:10px;display:grid}.dg-range input[type=range]{accent-color:#111;width:100%;min-width:0;height:24px;margin:0}.dg-number{border:1px solid var(--line);background:#fff;border-radius:7px;align-items:center;height:36px;padding:0 8px 0 0;display:flex}.dg-number:focus-within{border-color:#111}.dg-number input{font-variant-numeric:tabular-nums;background:0 0;border:0;width:100%;min-width:0;height:100%;padding:0 2px 0 9px;font-size:13px}.dg-number span{color:var(--muted);font-size:12px}.dg-color{grid-template-columns:44px minmax(0,1fr);gap:8px;display:grid}.dg-color input{border:1px solid var(--line);background:#fff;border-radius:7px;min-width:0;height:36px}.dg-color input[type=color]{width:44px;padding:3px}.dg-color input[type=text]{padding:0 10px;font:13px/1 ui-monospace,SFMono-Regular,Menlo,monospace}.dg-color input[aria-invalid=true]{border-color:#b42318}.dg-field select{border:1px solid var(--line);background:#fff;border-radius:7px;height:36px;padding:0 9px;font-size:13px}.dg-empty{color:var(--muted);font-size:12px}.dg-glow{background:var(--subtle);border:1px solid var(--line);border-radius:8px;gap:12px;padding:12px;display:grid}.dg-glow-head{justify-content:space-between;align-items:center;font-size:12px;font-weight:650;display:flex}.dg-remove{color:#555;border:1px solid var(--line);background:#fff;min-height:32px;padding:0 10px}.dg-remove:hover{color:#b42318;border-color:#e5b7b2}.dg-add{border:1px dashed var(--strong-line);color:#333;background:#fff}.dg-add:hover:not(:disabled){border-color:#111}.dg-add:disabled{color:#8a8a8a;cursor:not-allowed}.dg-output{min-width:0;top:calc(var(--alpha-banner-height) + 64px + 16px);gap:16px;display:grid;position:sticky}.dg-preview{border:1px solid var(--line);background-color:#f3f5fb;background-image:radial-gradient(circle,#8d9bc0b3 1.3px,#0000 1.9px),radial-gradient(48% 48% at 0 100%,#8ba0ee8c,#0000),radial-gradient(46% 46% at 100% 70%,#76aee273,#0000);background-repeat:repeat,no-repeat,no-repeat;background-size:28px 28px,100% 100%,100% 100%;border-radius:12px;height:380px;position:relative;overflow:hidden}.dg-preview-tag{color:#333;background:#ffffffe6;border:1px solid #0000001a;border-radius:999px;padding:4px 8px;font:11px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;position:absolute;bottom:12px;left:12px}.dg-code{color:#e8e8e3;background:#111;border:1px solid #1f1f1f;border-radius:12px;min-width:0;overflow:hidden}.dg-code-bar{border-bottom:1px solid #262626;justify-content:space-between;align-items:center;gap:12px;padding:8px;display:flex}.dg-tabs{gap:4px;display:flex}.dg-tabs button{color:#a3a3a3}.dg-tabs button:hover{color:#fff}.dg-tabs button[aria-selected=true]{color:#fff;background:#262626}.dg-copy{color:#111;background:#fff}.dg-copy:hover{background:#e5e5e5}.dg-code button:focus-visible,.dg-code pre:focus-visible{outline-offset:2px;outline:2px solid #fff}.dg-file{color:#8a8a85;padding:12px 16px 0;font:11px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace}.dg-code pre{white-space:pre;tab-size:2;border-radius:6px;max-height:340px;margin:8px;padding:8px 8px 12px;font:12.5px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;overflow:auto}.dg-status{color:#a7d8b2;min-height:0;padding:0 16px;font-size:12px}.dg-status:not(:empty){padding:0 16px 12px}.dg-section{max-width:1320px;padding-top:56px}.dg-section h2{margin-bottom:8px;font-size:22px;line-height:1.25}.dg-section>p{color:#4d4d4d;max-width:70ch;font-size:14px}.dg-cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:20px 0 0;padding:0;list-style:none;display:grid}.dg-cards a{border:1px solid var(--line);background:#fff;border-radius:10px;gap:6px;height:100%;padding:16px;transition:border-color .15s;display:grid}.dg-cards a:hover,.dg-cards a:focus-visible{border-color:#111}.dg-cards .dg-card-kind{text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-size:11px;font-weight:650}.dg-cards strong{font-size:15px;font-weight:600}.dg-cards p{color:#555;font-size:13px}.dg-cards .dg-card-link{color:#111;margin-top:auto;padding-top:6px;font-size:13px;font-weight:600}.dg-explain{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 40px;margin-top:20px;display:grid}.dg-explain h3{margin:0 0 6px;font-size:15px;font-weight:600}.dg-explain p{color:#4d4d4d;font-size:14px}.dg-explain code{background:var(--soft);border:1px solid var(--line);overflow-wrap:anywhere;border-radius:4px;padding:1px 4px;font:12.5px ui-monospace,SFMono-Regular,Menlo,monospace}@media (width>=1200px){.dg-tool{grid-template-columns:minmax(0,620px) minmax(0,1fr)}.dg-controls{grid-template-rows:auto 1fr;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;column-gap:14px}.dg-controls>fieldset:last-of-type{grid-area:1/2/span 2}}@media (width<=1050px){.dg-page{padding:32px 24px 64px}.dg-tool{grid-template-columns:300px minmax(0,1fr);gap:18px}.dg-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=820px){.dg-tool{grid-template-columns:minmax(0,1fr)}.dg-output{order:-1;position:static}.dg-preview{height:300px}.dg-controls{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.dg-controls>.dg-group:first-of-type{grid-column:1/-1}}@media (width<=680px){.dg-page{padding:24px 16px 56px}.dg-hero h1{font-size:27px}.dg-hero p{font-size:14px}.dg-controls{grid-template-columns:minmax(0,1fr)}.dg-preview{height:240px}.dg-code-bar{flex-wrap:wrap}.dg-tabs button,.dg-copy{min-height:44px}.dg-cards,.dg-explain{grid-template-columns:minmax(0,1fr)}.dg-section{padding-top:44px}}@media (prefers-reduced-motion:reduce){.dg-cards a{transition:none}}