.db-page{--db-bg: #020617;--db-panel: #0b1522;--db-panel-2: #0b1420;--db-sunken: #07101a;--db-line: #28384b;--db-line-strong: #39485c;--db-ink: #f5f3ef;--db-muted: #a0afc1;--db-accent: #6ee7b7;--db-accent-ink: #062018;--db-tempo: #a2f6d7;--db-fill: #f2c86b;--db-count: #8593a8;min-height:100vh;background:var(--db-bg);color:var(--db-ink);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Inter,sans-serif;padding-bottom:24px}.db-page :is(button,input,select,a):focus-visible{outline:2px solid var(--db-accent);outline-offset:3px}.db-page button{cursor:pointer}.db-page button:disabled{cursor:not-allowed;opacity:.45}.db-head{max-width:1440px;margin:0 auto;padding:22px 24px 4px}.db-crumbs{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--db-muted)}.db-crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--db-muted)}.db-crumbs a:hover,.db-crumbs [aria-current]{color:var(--db-ink)}.db-back{display:grid;place-items:center;width:32px;height:32px;margin-right:4px;border:1px solid var(--db-line);border-radius:50%;color:var(--db-muted);background:transparent}.db-back:hover{color:var(--db-ink);border-color:var(--db-line-strong)}.db-head h1{margin:12px 0 4px;font-size:clamp(28px,3.2vw,44px);font-weight:700;line-height:1.08;letter-spacing:-.035em}.db-head>p{max-width:70ch;margin:0;color:var(--db-muted);font-size:15px;line-height:1.6}.db-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:650;letter-spacing:.15em;text-transform:uppercase;color:var(--db-muted)}.db-grooves{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}.db-groove{display:grid;grid-template-columns:64px minmax(0,1fr);grid-template-rows:auto auto;column-gap:11px;align-items:center;min-height:64px;padding:10px;border:1px solid var(--db-line);border-radius:14px;background:var(--db-panel-2);color:var(--db-ink);text-align:left}.db-groove:hover{border-color:var(--db-line-strong);background:#0e1a28}.db-groove[aria-checked=true]{border-color:#3f7a66;background:#6ee7b70d}.db-groove .db-thumb{grid-row:1 / span 2;width:64px;height:30px;color:#8fa7bb}.db-groove[aria-checked=true] .db-thumb{color:var(--db-accent)}.db-thumb line{stroke:currentColor;opacity:.15}.db-groove-name{display:-webkit-box;overflow:hidden;font-size:13px;font-weight:600;line-height:1.3;-webkit-box-orient:vertical;-webkit-line-clamp:2}.db-groove small{color:var(--db-muted);font-size:11px}.db-tempos{display:flex;flex-wrap:wrap;align-items:center;gap:6px;max-width:1440px;margin:20px auto 0;padding:0 24px}.db-tempos span{margin-right:4px;color:var(--db-muted);font-size:13px}.db-tempos a{padding:7px 12px;border:1px solid var(--db-line);border-radius:999px;color:var(--db-ink);font-size:13px;font-variant-numeric:tabular-nums}.db-tempos a:hover{border-color:#3f7a66;background:#6ee7b70d}.db-guide{max-width:1440px;margin:0 auto;padding:0 24px}.db-app{display:grid;grid-template-columns:minmax(0,1fr) 220px;align-items:center;gap:32px;max-width:1080px;margin:8px auto 0;padding:28px 36px 0;border:1px solid var(--db-line);border-radius:28px;background:linear-gradient(135deg,#ff9f4514,transparent 55%),var(--db-panel-2);overflow:hidden}.db-app .db-eyebrow{color:#ffb877;letter-spacing:.12em}.db-app h2{margin:10px 0 8px;font-size:clamp(26px,3vw,36px);font-weight:700;letter-spacing:-.035em}.db-app p{max-width:46ch;margin:0;color:var(--db-muted);font-size:15px;line-height:1.6}.db-app-actions{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 28px}.db-app-primary,.db-app-secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:12px;font-size:15px;font-weight:650}.db-app-primary{background:#ff9f45;color:#1a1206}.db-app-primary:hover{background:#ffb36b}.db-app-secondary{border:1px solid var(--db-line-strong);color:var(--db-ink)}.db-app-secondary:hover{border-color:#56657a}.db-app img{align-self:end;width:100%;height:auto;margin-bottom:-40%;border:6px solid #1b1d22;border-bottom:0;border-radius:30px 30px 0 0;box-shadow:0 20px 50px #0008}.db-page .stu-workspace{margin-top:18px}.db-browser{display:flex;flex-direction:column;gap:10px}.db-style-list{display:flex;flex-wrap:wrap;gap:6px}.db-style{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border:1px solid var(--db-line);border-radius:999px;background:transparent;color:var(--db-ink);font-size:13px;font-weight:600}.db-style:hover{border-color:var(--db-line-strong);background:#ffffff06}.db-style[aria-checked=true]{border-color:var(--db-accent);background:var(--db-accent);color:var(--db-accent-ink)}.db-style svg{color:inherit}.db-browser-label{margin:8px 0 0;font-size:11px;font-weight:650;letter-spacing:.15em;text-transform:uppercase;color:var(--db-muted)}.db-browser .db-grooves{grid-template-columns:minmax(0,1fr)}@media(max-width:1150px){.db-head,.db-tempos,.db-guide{padding-left:18px;padding-right:18px}}@media(max-width:800px){.db-head{padding-top:16px}.db-style-list{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -12px;padding:0 12px 2px}.db-style-list::-webkit-scrollbar{display:none}.db-style{flex:0 0 auto;white-space:nowrap}.db-browser .db-grooves{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -12px;padding:0 12px 2px}.db-browser .db-grooves::-webkit-scrollbar{display:none}.db-browser .db-groove{flex:0 0 160px}.db-app{grid-template-columns:minmax(0,1fr) 160px;gap:20px;margin:8px 18px 0;padding:24px 24px 0}}@media(max-width:560px){.db-head{padding:12px 14px 0}.db-head h1{margin-top:10px;font-size:27px}.db-head>p{font-size:14px}.db-groove{grid-template-columns:minmax(0,1fr);row-gap:4px;min-height:0;padding:10px}.db-groove .db-thumb{grid-row:auto;width:100%;height:26px}.db-groove-name{min-height:2.6em}.db-tempos,.db-guide{padding:0 10px}.db-app{grid-template-columns:minmax(0,1fr);margin:8px 10px 0;padding:22px 20px 0;text-align:left}.db-app img{justify-self:center;width:62%;margin-bottom:-28%}}