@layer components{.ch-page{background:var(--gp-page);height:100%;color:var(--gp-ink);font-family:var(--gp-f-body);container:chord/inline-size}.ch-shell{height:100%;transition:grid-template-columns var(--gp-d-rise) var(--gp-e-rise);grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr) 304px;display:grid}.ch-shell[data-lib=closed]{grid-template-columns:minmax(0,1fr) 0}.ch-stage-wrap{min-width:0;min-height:0;display:flex;position:relative}.ch-stage{flex:1 1 0;min-height:0;padding:16px 36px 36px;overflow-y:auto}.ch-stage-in{flex-direction:column;gap:20px;max-width:920px;margin:0 auto;display:flex}.ch-lab{color:var(--gp-ink-3);font-size:12px;font-weight:650}.ch-meta{color:var(--gp-ink-3);font-size:13px;font-weight:550}.ch-icon{border-radius:var(--gp-r-s);width:36px;height:36px;color:var(--gp-ink-3);cursor:pointer;transition:color var(--gp-d-state) linear, background-color var(--gp-d-state) linear;flex:none;place-items:center;display:grid}.ch-icon svg{width:19px;height:19px}.ch-icon:hover{background:var(--gp-well);color:var(--gp-ink)}.ch-lib-fab{z-index:6;position:absolute;top:14px;right:14px}.ch-crumbs{align-items:center;gap:4px;margin-bottom:-8px;display:flex}.ch-back{margin-left:-18px}.ch-libbtn{display:none}.ch-title{flex-direction:column;gap:2px;display:flex}.ch-title-row{align-items:center;gap:6px;display:flex}.gp-pick-toggle.ch-fav{width:40px;height:40px}.ch-fav svg{width:20px;height:21px}.ch-title h1{letter-spacing:-.035em;margin:2px 0;font-size:52px;font-weight:820;line-height:1}.ch-main{grid-template-columns:200px minmax(0,1fr) 210px;grid-template-areas:"tones center side";align-items:center;gap:24px;display:grid}.ch-tones{flex-direction:column;grid-area:tones;gap:6px;margin:0;padding:0;list-style:none;display:flex}.ch-tone{border-radius:var(--gp-r-s);grid-template-columns:40px 34px minmax(0,1fr);align-items:baseline;gap:6px;padding:6px 10px;display:grid}.ch-tone b{font-size:20px;font-weight:780}.ch-dgr{color:var(--gp-ink-2);font-size:13px;font-weight:700}.ch-dname{color:var(--gp-ink-3);font-size:12px}.ch-tone[data-root]{background:var(--gp-card);box-shadow:inset 0 0 0 1.5px var(--gp-m-500)}.ch-tone[data-root] b{color:var(--gp-m-700)}.ch-tone[data-gone] b,.ch-tone[data-gone] .ch-dgr{color:var(--gp-ink-mute)}.ch-tone[data-gone] .ch-dname:after{content:" · not in this shape"}.ch-bass{padding:2px 10px}.ch-center{grid-area:center;justify-content:center;align-items:center;gap:16px;display:flex}.ch-big svg{display:block}.ch-side{flex-direction:column;grid-area:side;align-items:flex-start;gap:12px;display:flex}.ch-plays{flex-wrap:wrap;gap:8px;display:flex}.ch-vlabel{font-size:18px;font-weight:760}.ch-note-line{max-width:26ch;color:var(--gp-ink-3);font-size:12px;line-height:1.35}.ch-tab{color:var(--gp-ink-2);font-variant-numeric:tabular-nums;letter-spacing:.08em;margin-top:4px;font-size:13px}.ch-empty{color:var(--gp-ink-2);flex-direction:column;align-items:flex-start;gap:12px;padding:8px 0;display:flex}.ch-shapes{flex-direction:column;gap:8px;display:flex}.ch-shapes-head{flex-wrap:wrap;align-items:baseline;gap:10px;display:flex}.ch-shapes-head h2{margin:0;font-size:17px;font-weight:750}.ch-shapes-head .ch-icon{align-self:center;margin:-8px -4px}.ch-add{color:var(--gp-m-500)}.ch-add:is(:hover,:focus-visible){background:var(--gp-m-100);color:var(--gp-m-700)}.ch-add svg{stroke-width:2.6px}@media (prefers-reduced-motion:no-preference){.ch-add svg{transition:rotate .22s var(--gp-ease-state)}.ch-add:is(:hover,:focus-visible) svg{transition:rotate .42s var(--gp-spring-pop);animation:.4s both ch-add-hop;rotate:90deg}}@keyframes ch-add-hop{0%{animation-timing-function:cubic-bezier(.2,0,.4,1);translate:0}40%{animation-timing-function:cubic-bezier(.3,1.45,.45,1);translate:0 -4px}to{translate:0}}.ch-film{gap:10px;margin:0 -4px;padding:6px 4px 10px;display:flex;overflow-x:auto}.ch-shape{border-radius:var(--gp-r-m);width:120px;box-shadow:inset 0 0 0 1px var(--gp-line);cursor:pointer;transition:transform var(--gp-d-rise) var(--gp-e-rise), box-shadow var(--gp-d-rise) var(--gp-e-rise), background-color var(--gp-d-state) linear;flex-direction:column;flex:none;align-items:center;gap:4px;padding:10px 0 9px;display:flex}.ch-shape:hover{background:var(--gp-card);box-shadow:var(--gp-ring-c), 3px 3px 0 0 var(--gp-shn);transform:translateY(-3px)}.ch-shape[aria-pressed=true]{background:var(--gp-card);box-shadow:inset 0 0 0 1px var(--gp-m-300), 3px 3px 0 0 var(--gp-m-sh);transform:translateY(-2px)}.ch-shape-dg svg{width:88px;height:auto;display:block}.ch-shape-label{text-overflow:ellipsis;white-space:nowrap;max-width:108px;font-size:12.5px;font-weight:680;overflow:hidden}.ch-chip{background:var(--gp-well);color:var(--gp-ink-2);border-radius:6px;padding:1px 6px;font-size:10.5px;font-weight:700}.ch-neck-wrap{--ch-wood:color-mix(in oklab, var(--gp-well), #b98a5c 16%);flex-direction:column;gap:8px;display:flex}.ch-neck-scroll{margin:0 -4px;padding:0 4px;overflow-x:auto}.ch-neck-nums,.ch-neck-picks{position:relative}.ch-neck-nums{height:18px}.ch-neck-nums span{color:var(--gp-ink-3);font-variant-numeric:tabular-nums;font-size:11px;font-weight:650;position:absolute;transform:translate(-50%)}.ch-neck{border-radius:var(--gp-r-l);background:var(--ch-wood);height:124px;position:relative;overflow:hidden}.ch-neck-string{background:var(--gp-ink-3);opacity:.55;height:1.5px;margin-top:-.75px;position:absolute;right:0}.ch-neck-fret{background:var(--gp-edge);width:1.5px;position:absolute;top:0;bottom:0}.ch-neck-nut{background:var(--gp-ink);width:4px;margin-left:-4px;position:absolute;top:0;bottom:0}.ch-neck-inlay{background:var(--gp-edge);opacity:.6;border-radius:50%;width:8px;height:8px;margin:-4px 0 0 -4px;position:absolute;top:50%}.ch-neck-box{box-shadow:inset 0 0 0 2px var(--gp-m-500);transition:left var(--gp-d-rise) var(--gp-e-rise), width var(--gp-d-rise) var(--gp-e-rise);border-radius:9px;position:absolute;top:4px;bottom:4px}.ch-neck-dot{background:var(--ch-wood);width:18px;height:18px;box-shadow:inset 0 0 0 1.5px var(--gp-ink-3);color:var(--gp-ink-2);transition:transform var(--gp-d-state) var(--gp-e-rise), background-color var(--gp-d-state) linear, color var(--gp-d-state) linear;border-radius:50%;place-items:center;margin:-9px 0 0 -9px;font-size:8.5px;font-weight:750;line-height:1;display:grid;position:absolute}.ch-neck-dot[data-root]{box-shadow:inset 0 0 0 1.5px var(--gp-m-500);color:var(--gp-m-700);border-radius:28%}.ch-neck-dot[data-held]{z-index:1;background:var(--gp-ink);box-shadow:none;color:var(--gp-page);transform:scale(1.2)}.ch-neck-dot[data-root][data-held]{background:var(--gp-m-500);color:var(--gp-m-on)}.ch-neck-picks{height:30px}.ch-neck-picks button{border-radius:var(--gp-r-s);background:var(--gp-face);min-width:26px;height:26px;box-shadow:var(--gp-ring-n), 2px 2px 0 0 var(--gp-shn);color:var(--gp-ink);font-variant-numeric:tabular-nums;cursor:pointer;transition:left var(--gp-d-rise) var(--gp-e-rise), background-color var(--gp-d-state) linear;padding:0 7px;font-size:12px;font-weight:700;position:absolute;top:2px;transform:translate(-50%)}.ch-neck-picks button[data-mine]{box-shadow:inset 0 0 0 1.5px var(--gp-m-300), 2px 2px 0 0 var(--gp-shn)}.ch-neck-picks button[aria-pressed=true]{background:var(--gp-m-500);box-shadow:var(--gp-ring-m), 2px 2px 0 0 var(--gp-m-sh);color:var(--gp-m-on)}.ch-credit{color:var(--gp-ink-3);box-shadow:0 -1px 0 var(--gp-line);margin:0;padding-top:16px;font-size:12px}.ch-credit a{color:var(--gp-ink-2);text-decoration:underline}.ch-lib{min-width:0;min-height:0;box-shadow:-1px 0 0 var(--gp-line);flex-direction:column;gap:12px;padding:16px 14px 0 16px;display:flex;overflow:hidden}.ch-shell[data-lib=closed] .ch-lib{visibility:hidden;padding:0}.ch-sheet{flex-direction:column;gap:12px;min-height:0;display:flex}.ch-lrow{align-items:center;gap:2px;display:flex}.ch-lrow>:first-child{flex:1;min-width:0}.ch-list{flex-direction:column;flex:1;gap:4px;min-height:0;margin:0 -4px;padding:4px 4px 16px;display:flex;overflow-y:auto}.ch-group{flex-direction:column;gap:4px;display:flex}.ch-lgrp{color:var(--gp-ink-3);margin:8px 8px 2px;font-size:11.5px;font-weight:700}.ch-mini svg{width:38px;height:auto;display:block}.ch-note{margin:6px 8px}.ch-link{color:var(--gp-ink);font-weight:650;text-decoration:underline}.ch-draft{min-height:0;animation:ch-over .3s var(--gp-spring-sheet) both;flex-direction:column;gap:14px;padding-bottom:16px;display:flex;overflow-y:auto}.ch-draft-foot{align-items:center;gap:8px;display:flex}@keyframes ch-over{0%{opacity:0;transform:translate(24px)}}@media (prefers-reduced-motion:reduce){.ch-draft{animation:none}.ch-shape,.ch-shell,.ch-neck-box,.ch-neck-dot,.ch-neck-picks button{transition:none}}@container chord (max-width:959px){.ch-shell,.ch-shell[data-lib=closed]{grid-template-columns:minmax(0,1fr)}.ch-lib,.ch-lib-fab{display:none}.ch-libbtn{display:inline-flex}.ch-stage{padding:16px 24px 32px}.ch-main{grid-template-columns:minmax(0,1fr) 220px;grid-template-areas:"tones tones""center side"}.ch-tones{flex-flow:wrap}.ch-tone{background:var(--gp-well);display:flex}.ch-tone[data-root]{background:var(--gp-card)}.ch-dname{display:none}.ch-title h1{font-size:46px}}@container chord (max-width:719px){.ch-stage{padding:10px 14px 28px}.ch-stage-in{gap:16px}.ch-title h1{font-size:40px}.ch-main{grid-template-columns:minmax(0,1fr);grid-template-areas:"tones""center""side";justify-items:center}.ch-tones{justify-content:center}.ch-tone{flex-direction:column;align-items:center;gap:0;min-width:40px;padding:5px 8px}.ch-center{gap:6px}.ch-big svg{width:220px;height:auto}.ch-side{flex-flow:wrap;justify-content:center;align-items:center}.ch-shape{width:104px}.ch-neck-in{min-width:640px}.ch-neck{height:108px}}}