.layout-main:has(.cof-tool){max-width:none;overflow-x:clip;padding-right:0;padding-left:0}.layout-main:has(.cof-tool)>.circle-page.circle-page{width:min(1180px,calc(100% - 32px));margin-right:auto;margin-left:auto}.cof-tool{width:100%;--cof-accent-readable:#ad915d;--cof-border-quiet:rgba(201,169,110,0.3);--cof-border-visible:rgba(201,169,110,0.58)}[data-theme=light] .cof-tool{--cof-accent-readable:var(--gold-light);--cof-border-quiet:rgba(153,107,29,0.28);--cof-border-visible:rgba(153,107,29,0.68)}.cof-workspace{width:min(1120px,100%);display:grid;grid-template-columns:minmax(0,1.28fr) minmax(380px,.88fr);align-items:center;gap:clamp(var(--sp-5),3vw,var(--sp-10));margin:0 auto}.cof-stage{position:relative;min-width:0;display:grid;justify-items:center;padding:var(--sp-1) 0}.cof-stage:before{position:absolute;z-index:-1;top:5%;left:50%;width:112%;height:90%;border-radius:50%;background:radial-gradient(circle at 48% 50%,var(--gold-glow-strong),transparent 38%),radial-gradient(circle at 30% 50%,color-mix(in srgb,var(--cat-1) 13%,transparent),transparent 45%),radial-gradient(circle at 72% 50%,color-mix(in srgb,var(--cat-5) 10%,transparent),transparent 43%);content:"";filter:blur(28px);opacity:.9;transform:translateX(-50%)}.cof-orbit{position:relative;width:min(610px,100%);aspect-ratio:1;isolation:isolate}.cof-wheel-art{position:absolute;inset:0;width:100%;height:100%;overflow:visible;color:var(--gold);filter:drop-shadow(0 20px 34px rgba(0,0,0,.24));animation:cof-wheel-arrive .65s cubic-bezier(.22,1,.36,1) both}.cof-glow-disc{fill:url(#cof-center-glow)}.cof-sector{transform-box:view-box;transform-origin:50px 50px;transform:translate(var(--cof-lift-x,0),var(--cof-lift-y,0));transition:transform .4s cubic-bezier(.16,1,.3,1),filter .32s ease;will-change:transform}.cof-segment{stroke:var(--cof-border-quiet);stroke-width:.24;transition:fill .36s ease,stroke .36s ease,stroke-width .36s ease,filter .36s ease}.cof-segment-major{fill:color-mix(in srgb,var(--bg-elevated) 88%,var(--gold) 12%)}.cof-segment-minor{fill:color-mix(in srgb,var(--bg-surface) 86%,var(--cat-3) 14%);stroke:color-mix(in srgb,var(--cat-3) 32%,transparent)}.cof-sector[data-emphasis=related]{filter:drop-shadow(0 3px 4px rgba(0,0,0,.24));transform:translate(var(--cof-lift-x),var(--cof-lift-y)) scale(1.002);animation:cof-related-rise .38s cubic-bezier(.16,1,.3,1) 35ms both}.cof-sector[data-emphasis=related] .cof-segment-major{fill:color-mix(in srgb,var(--bg-elevated) 78%,var(--gold) 22%);stroke:var(--cof-border-visible);stroke-dasharray:.8 .55}.cof-sector[data-emphasis=related] .cof-segment-minor{fill:color-mix(in srgb,var(--bg-surface) 78%,var(--cat-3) 22%);stroke:color-mix(in srgb,var(--cat-3) 48%,transparent)}.cof-sector[data-emphasis=selected]{filter:drop-shadow(0 7px 6px rgba(0,0,0,.3)) drop-shadow(0 0 3px var(--gold-glow));transform:translate(var(--cof-lift-x),var(--cof-lift-y)) scale(1.006);animation:cof-selected-rise .43s cubic-bezier(.16,1,.3,1) both}.cof-sector[data-emphasis=selected] .cof-segment-major{fill:color-mix(in srgb,var(--bg-elevated) 58%,var(--gold) 42%);stroke:var(--gold-light);stroke-width:.46}.cof-sector[data-emphasis=selected] .cof-segment-minor{fill:color-mix(in srgb,var(--bg-surface) 62%,var(--cat-3) 38%);stroke:color-mix(in srgb,var(--cat-3) 70%,var(--text-primary));stroke-width:.4}.cof-center-disc{fill:color-mix(in srgb,var(--bg-deep) 94%,transparent);stroke:var(--cof-border-visible);stroke-width:.28}.cof-center-readout{position:absolute;z-index:1;top:50%;left:50%;width:33%;display:grid;justify-items:center;row-gap:2px;text-align:center;pointer-events:none;transform:translate(-50%,-50%)}.cof-center-key,.cof-center-relative{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:.25em;min-width:0}.cof-center-key{color:var(--text-primary);font-family:var(--font-heading);font-size:clamp(.95rem,2.35vw,1.5rem);font-weight:600;line-height:1.05}.cof-center-key span,.cof-center-relative span{color:var(--text-muted);font-family:var(--font-heading);font-size:.62em;font-style:italic;font-weight:400}.cof-center-relative{color:var(--text-secondary);font-family:var(--font-heading);font-size:clamp(.72rem,1.5vw,1rem);font-weight:500;line-height:1.05}.cof-center-accidentals{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 5px;max-width:100%;margin-top:5px;padding-top:5px;border-top:1px solid var(--cof-border-quiet);color:var(--cof-accent-readable);font-family:var(--font-mono);font-size:clamp(.55rem,1.05vw,.74rem);font-weight:500;line-height:1.3}.cof-center-accidentals[data-empty=true]{color:var(--text-muted)}.cof-center-accidentals em{font-family:var(--font-heading);font-size:.95em;font-style:italic}.cof-key-pair{display:contents}.cof-key{position:absolute;z-index:3;top:var(--cof-y);left:var(--cof-x);min-width:44px;min-height:44px;display:grid;padding:4px 7px;border:1px solid transparent;border-radius:var(--radius-full);background:transparent;color:var(--text-primary);place-items:center;cursor:pointer;transform:translate(-50%,-50%);transition:top .4s cubic-bezier(.16,1,.3,1),left .4s cubic-bezier(.16,1,.3,1),border-color var(--transition-base),background var(--transition-base),box-shadow var(--transition-base),color var(--transition-fast),transform var(--transition-base);-webkit-tap-highlight-color:transparent}.cof-key:hover{z-index:4;color:var(--gold-light);text-shadow:0 0 14px var(--gold-glow-strong);transform:translate(-50%,-50%) scale(1.06)}.cof-key:active{transform:translate(-50%,-50%) scale(.98)}.cof-key:focus-visible{z-index:5;outline:2px solid var(--gold);outline-offset:4px}.cof-key[data-neighbor=true]{color:var(--gold-light)}.cof-key[data-selected=true]{z-index:4;color:var(--text-primary);text-shadow:0 1px 4px rgba(0,0,0,.3),0 0 8px var(--gold-glow);transform:translate(-50%,-50%) scale(1.08);animation:cof-selected-label-rise .4s cubic-bezier(.16,1,.3,1) both}.cof-key-major{font-family:var(--font-heading);font-size:clamp(.78rem,1.5vw,1.08rem);font-weight:600;line-height:1}.cof-key-minor{position:absolute;z-index:2;top:var(--cof-y);left:var(--cof-x);min-width:36px;display:grid;color:color-mix(in srgb,var(--text-secondary) 76%,var(--cat-3));font-family:var(--font-mono);font-size:clamp(.5rem,.85vw,.62rem);font-weight:500;line-height:1;place-items:center;pointer-events:none;transform:translate(-50%,-50%);white-space:nowrap;transition:top .4s cubic-bezier(.16,1,.3,1),left .4s cubic-bezier(.16,1,.3,1),color var(--transition-base),text-shadow var(--transition-base),transform .32s cubic-bezier(.16,1,.3,1)}.cof-key-minor[data-selected=true]{color:color-mix(in srgb,var(--cat-3) 45%,var(--text-primary));text-shadow:0 0 12px color-mix(in srgb,var(--cat-3) 45%,transparent);transform:translate(-50%,-50%) scale(1.04)}.cof-key-minor[data-related=true]{color:color-mix(in srgb,var(--text-secondary) 68%,var(--cat-3))}.cof-key-minor[data-enharmonic=true]{gap:2px}.cof-key-neighbor-mark{position:absolute;bottom:2px;width:11px;height:2px;border-radius:var(--radius-full);background:var(--gold);box-shadow:0 0 8px var(--gold-glow-strong)}.cof-glance{position:relative;min-width:0;overflow:hidden;padding:clamp(var(--sp-5),2.2vw,var(--sp-8));border:1px solid var(--cof-border-visible);border-radius:var(--radius-xl);background:radial-gradient(circle at 100% 0,var(--bg-accent-emphasis),transparent 38%),linear-gradient(150deg,var(--bg-surface),color-mix(in srgb,var(--bg-deep) 92%,var(--gold)));box-shadow:0 22px 54px rgba(0,0,0,.2),inset 0 1px 0 var(--border-accent);animation:cof-detail-enter .32s ease both}.cof-selection-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-4)}.cof-selection-heading>div{min-width:0;display:flex;flex-direction:column}.cof-selection-heading h3{margin:0;color:var(--text-primary);font-family:var(--font-heading);font-size:clamp(var(--text-2xl),3vw,2.25rem);font-weight:600;line-height:1.12;letter-spacing:-.025em}.cof-selection-heading h3 span{color:var(--cof-accent-readable);font-style:italic;font-weight:400}.cof-signature-summary{display:flex;align-items:baseline;gap:var(--sp-2);margin:var(--sp-2) 0 0}.cof-signature-summary span{color:var(--text-muted);font-size:.6rem;text-transform:uppercase;letter-spacing:.08em}.cof-signature-summary strong{color:var(--cof-accent-readable);font-family:var(--font-heading);font-size:var(--text-base);font-weight:600}.cof-scale-trigger{width:48px;min-width:48px;height:48px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:1px solid var(--action-primary-end);border-radius:50%;background:linear-gradient(135deg,var(--action-primary-start),var(--action-primary-end));color:var(--text-on-primary);box-shadow:var(--action-primary-shadow);cursor:pointer;transition:transform var(--transition-fast),border-color var(--transition-fast),background var(--transition-fast),color var(--transition-fast),box-shadow var(--transition-fast)}.cof-scale-trigger svg{width:18px;height:18px;fill:currentColor}.cof-scale-trigger:hover,.cof-scale-trigger[data-playing=true]{border-color:var(--action-primary-hover-end);background:linear-gradient(135deg,var(--action-primary-hover-start),var(--action-primary-hover-end));color:var(--text-on-primary);box-shadow:var(--action-primary-hover-shadow);transform:translateY(-2px) scale(1.04)}.cof-scale-trigger:active{transform:scale(.96)}.cof-scale-trigger:focus-visible{outline:2px solid var(--gold);outline-offset:4px}.cof-glance-notation,.cof-glance-scale{margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--cof-border-quiet)}.cof-glance-section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-3)}.cof-glance-section-heading h4{margin:0;color:var(--text-primary);font-family:var(--font-heading);font-size:var(--text-base);font-weight:600}.cof-glance-section-heading>span{color:var(--text-muted);font-size:.6rem;text-align:right;text-transform:uppercase;letter-spacing:.06em}.cof-ladder{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;margin:0;padding:0;list-style:none}.cof-degree{position:relative;width:100%;min-width:0;min-height:104px;display:grid;grid-template-rows:auto auto 1fr;row-gap:3px;padding:7px 2px 8px;overflow:hidden;border:1px solid var(--cof-border-quiet);border-radius:var(--radius-md);background:var(--bg-elevated);color:var(--text-primary);place-items:center;cursor:pointer;transition:transform var(--transition-base),border-color var(--transition-fast),background var(--transition-fast),box-shadow var(--transition-base);-webkit-tap-highlight-color:transparent}.cof-degree:before{position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,transparent,var(--gold-muted),transparent);content:"";opacity:0;transition:opacity var(--transition-fast)}.cof-degree[data-role=dominant]:before,.cof-degree[data-role=relative-minor]:before,.cof-degree[data-role=subdominant]:before{opacity:1}.cof-degree[data-role=tonic]{border-color:var(--gold-muted);background:var(--bg-accent)}.cof-degree:hover,.cof-degree[data-playing=true]{border-color:var(--border-accent-strong);background:var(--bg-hover);box-shadow:0 8px 20px rgba(0,0,0,.16);transform:translateY(-2px)}.cof-degree:active{transform:translateY(0) scale(.98)}.cof-degree:focus-visible{outline:2px solid var(--gold);outline-offset:2px}.cof-degree-roman{color:var(--cof-accent-readable);font-family:var(--font-heading);font-size:.78rem;font-style:italic;line-height:1;letter-spacing:.02em}.cof-degree-root{display:flex;align-items:baseline;justify-content:center;gap:1px;min-width:0}.cof-degree-root strong{color:var(--text-primary);font-family:var(--font-heading);font-size:var(--text-base);font-weight:600;line-height:1.1}.cof-degree-quality{color:var(--text-secondary);font-family:var(--font-heading);font-size:.66rem;font-weight:500}.cof-degree-stack{width:100%;display:grid;row-gap:1px;align-content:center;padding-top:5px;border-top:1px solid var(--cof-border-quiet);color:var(--text-secondary);font-family:var(--font-mono);font-size:.62rem;line-height:1.35;justify-items:center}.cof-degree[data-role=tonic] .cof-degree-stack{border-top-color:var(--gold-muted)}.cof-function-key{display:flex;flex-wrap:wrap;gap:2px var(--sp-3);margin:var(--sp-3) 0 0;color:var(--text-muted);font-size:.64rem;line-height:1.5}.cof-function-key>span{display:inline-flex;align-items:baseline;gap:4px}.cof-function-key i{color:var(--cof-accent-readable);font-family:var(--font-heading);font-size:.72rem;font-style:italic;letter-spacing:.02em}.cof-staff{min-width:0;margin-top:var(--sp-3);overflow:hidden;border-radius:var(--radius-md);background:color-mix(in srgb,var(--bg-elevated) 62%,transparent)}.cof-staff .staff-container{width:100%;min-height:130px;margin:0}.cof-glance-notation .cof-staff{margin-top:0}.cof-glance-notation .cof-staff .staff-container{min-height:112px}[data-theme=light] .cof-degree-roman,[data-theme=light] .cof-function-key i{color:var(--gold-light)}@keyframes cof-wheel-arrive{0%{opacity:0;transform:scale(.96) rotate(-1.5deg)}to{opacity:1;transform:none}}@keyframes cof-selected-rise{0%{transform:translate(0) scale(.995)}70%{transform:translate(var(--cof-lift-x),var(--cof-lift-y)) scale(1.012)}to{transform:translate(var(--cof-lift-x),var(--cof-lift-y)) scale(1.006)}}@keyframes cof-related-rise{0%{transform:translate(0) scale(.998)}72%{transform:translate(var(--cof-lift-x),var(--cof-lift-y)) scale(1.006)}to{transform:translate(var(--cof-lift-x),var(--cof-lift-y)) scale(1.002)}}@keyframes cof-selected-label-rise{0%{opacity:.82;transform:translate(-50%,-50%) scale(.98)}70%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}to{opacity:1;transform:translate(-50%,-50%) scale(1.08)}}@keyframes cof-detail-enter{0%{opacity:.45;transform:translateY(8px)}to{opacity:1;transform:none}}@media (max-width:980px){.cof-workspace{grid-template-columns:minmax(0,1fr);gap:var(--sp-5)}.cof-orbit{width:min(620px,92vw)}.cof-glance{width:min(720px,100%);margin:0 auto}}@media (min-width:981px){.cof-orbit{width:min(610px,max(420px,calc(100dvh - var(--bottom-nav-height) - 240px)))}}@media (min-width:981px) and (max-height:900px){.cof-glance{padding:var(--sp-5)}.cof-selection-heading h3{font-size:var(--text-3xl)}.cof-glance-notation,.cof-glance-scale{margin-top:var(--sp-3);padding-top:var(--sp-3)}.cof-glance-section-heading{margin-bottom:var(--sp-2)}.cof-degree{min-height:96px;padding-top:6px;padding-bottom:7px}}@media (max-width:640px){.layout-main:has(.cof-tool)>.circle-page.circle-page{width:min(100%,calc(100% - 16px))}.cof-workspace{gap:var(--sp-3)}.cof-orbit{width:min(calc(100% - 32px),520px)}.cof-key{min-width:44px;min-height:44px;padding:3px}.cof-key[data-enharmonic=true]{min-width:38px;min-height:38px}.cof-key-major{font-size:clamp(.7rem,3.8vw,1rem)}.cof-key-minor{font-size:clamp(.48rem,2.25vw,.62rem)}.cof-center-readout{width:35%}.cof-center-accidentals{gap:1px 4px;margin-top:4px;padding-top:4px}.cof-glance{padding:var(--sp-4);border-radius:var(--radius-lg)}.cof-selection-heading h3{font-size:var(--text-2xl)}.cof-ladder{gap:4px}.cof-degree{min-height:94px;padding:6px 1px 7px}.cof-degree-root strong{font-size:var(--text-sm)}.cof-degree-stack{font-size:.58rem}.cof-function-key{gap:2px var(--sp-2)}}@media (max-width:360px){.cof-key-major{font-size:.67rem}.cof-key-minor{font-size:.45rem}.cof-ladder{gap:3px}.cof-degree-roman{font-size:.6rem}.cof-degree-stack{font-size:.54rem}}@media (prefers-reduced-motion:reduce){.cof-glance,.cof-wheel-art{animation:none}.cof-degree,.cof-key,.cof-scale-trigger,.cof-sector,.cof-segment{transition:none}.cof-key[data-selected=true],.cof-sector[data-emphasis]{animation:none}}