/* Full catalogue with one shared graphic and one selection interface. */
:root{--studio-ink:#354039;--studio-muted:#75816e;--studio-rule:#d7dfd0;--studio-paper:#f5f7f1}
.page{max-width:1700px;padding:22px 34px;color:var(--studio-ink)}header{padding-bottom:18px}.brand-icon{width:39px;height:39px}.brand-title{font-size:25px}.header-author{font-size:9px}nav{gap:28px}nav a{font-size:13px}nav [data-collection-count]{font:10px Arial;margin-left:5px}
.studio-intro{display:flex;justify-content:space-between;align-items:end;gap:30px;padding:25px 0 23px}.studio-intro h1{font:400 clamp(30px,3vw,43px)/1.14 Libron,Georgia,serif;letter-spacing:-.025em;margin-top:8px}.studio-intro>p{font-size:12px;color:var(--studio-muted);line-height:1.6;text-align:right}.studio-intro .eyebrow{font-size:9px}
.studio-scales{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--studio-rule);border-bottom:1px solid var(--studio-rule);margin-bottom:24px}.studio-scales>button{border:0;border-right:1px solid var(--studio-rule);background:white;display:flex;align-items:center;gap:12px;padding:16px 18px;color:var(--studio-ink);text-align:left;min-width:0}.studio-scales>button:last-child{border-right:0}.studio-scales>button[aria-pressed=true]{background:#edf2e7;box-shadow:inset 0 -3px #536a42}.scale-index{font-size:9px;color:#94a187}.studio-scales strong{font:400 26px Libron,Georgia,serif}.scale-view{font-size:10px;color:var(--studio-muted)}.scale-count{margin-left:auto;font-size:10px;text-align:right;color:#87977a;white-space:nowrap}.scale-count em{font-style:normal;display:block;font-size:9px;color:#466334;margin-top:4px}
.studio-workspace{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(365px,1fr);gap:27px;align-items:start}.composer-column{position:sticky;top:16px;min-width:0}.composer-viewer{border:1px solid var(--studio-rule);background:white}.graphic-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:17px 20px 13px}.graphic-toolbar .eyebrow{font-size:9px}.graphic-toolbar h2{font:400 27px/1.15 Libron,Georgia,serif;margin-top:5px;letter-spacing:-.02em}.graphic-controls{display:flex;gap:5px;flex-shrink:0}.graphic-controls button{border:1px solid var(--studio-rule);background:white;padding:7px 9px;font-size:9px;color:#697e59;min-height:29px}.graphic-controls button[aria-pressed=true]{border-color:#b4c3a8;background:#f0f4eb}.graphic-controls button:last-child{font-size:17px;line-height:1}.combined-graphic{padding:3px 7px 0;outline-offset:-3px}.combined-graphic svg{display:block;width:100%;height:auto;max-height:450px}.combined-graphic:not(.locations-visible) .graphic-hotspot{display:none}.combined-graphic .graphic-hotspot:focus{outline:2px solid #354039}.graphic-caption{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:9px 20px 15px;min-height:36px;font-size:10px;color:#7a8b6c}.graphic-caption button{font-size:10px;border:0;background:none;padding:0;color:#4d683a;white-space:nowrap;text-decoration:underline;text-underline-offset:3px}
.position-strip{display:flex;gap:5px;flex-wrap:wrap;border-top:1px solid var(--studio-rule);padding:12px 16px;background:#fafcf7}.position-strip>button{display:flex;align-items:center;gap:5px;padding:5px 7px;font-size:9px;background:transparent;border:1px solid transparent;color:#7d8b70;line-height:1.2}.position-strip>button[aria-pressed=true]{background:white;border-color:#aebea0;color:#3f5b2e}.position-strip>button>span{width:4px;height:4px;border-radius:50%;background:#c9d3bf}.position-strip>button.has-strategy>span{background:#68844f}
.selected-strip{padding:14px 20px;border-top:1px solid var(--studio-rule)}.selected-strip>div{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}.selected-strip .eyebrow{font-size:9px}.selected-strip>div>button{border:0;padding:0;background:none;font-size:9px;color:#8a957f;text-decoration:underline;text-underline-offset:3px}.selected-strip ul{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}.selected-strip li{display:flex;align-items:center;border:1px solid #dce3d5;border-left:3px solid var(--force);background:#f8faf4;max-width:100%}.selected-strip li button{font-size:10px;color:#5c704f;border:0;background:none;padding:6px 7px;text-align:left}.selected-strip li button[aria-pressed=true]{background:#e6eedf}.selected-strip li button:last-child{padding-left:3px;font-size:12px}.empty-selection{font-size:11px;color:#9ca891}
.graphic-intro{padding:17px 20px;border-top:1px solid var(--studio-rule);background:#fbfcf9}.graphic-intro strong{font:400 20px Libron,Georgia,serif;display:block;margin-bottom:6px}.graphic-intro p{font-size:11px;color:#7d8c6d;max-width:490px}.graphic-inspector{padding:15px 20px;border-top:1px solid var(--studio-rule);background:#f6f9f1}.inspector-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}.inspector-top .eyebrow{font-size:9px}.inspector-top>button{border:0;background:none;font-size:16px;color:#859476;padding:0 3px}.graphic-inspector h3{font:400 25px/1.15 Libron,Georgia,serif;margin-bottom:7px;letter-spacing:-.02em}.graphic-inspector>p{font-size:11px;line-height:1.6;color:#637954;max-width:620px}.graphic-inspector .replacement-note{font-size:10px;color:#8a8b66;margin-top:5px}.inspector-links{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:12px}.inspector-links>a{font-size:10px;text-decoration:none;color:#61794f}.inspector-links>a:hover{text-decoration:underline}.graphic-footer{display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:11px 17px;border-top:1px solid var(--studio-rule);font-size:9px;color:#8e9b81}.graphic-footer>span{margin-right:auto}.graphic-footer>button{font:inherit;border:0;background:none;padding:0;color:#718762}
.studio-library{min-width:0}.strategy-controls{margin-bottom:15px}.studio-search{display:flex;align-items:center;gap:10px;border-bottom:1px solid #9faf90;padding:3px 0 10px;margin-bottom:12px}.studio-search>span:not(.sr-only){font-size:21px;color:#a0ad94}.studio-search input{width:100%;min-width:0;border:0;background:none;font:11px Arial;color:var(--studio-ink);padding:4px 0;outline-offset:5px}.studio-search input::placeholder{color:#8b9980}.force-controls{display:flex;flex-wrap:wrap;gap:5px}.force-controls>button{border:1px solid #dce3d4;background:white;padding:7px 9px;font-size:10px;display:flex;gap:5px;align-items:center;color:#6c7f5b;min-height:29px}.force-controls>button[aria-pressed=true]{background:#edf3e6;border-color:#a2b58f}.force-controls>button>span{width:6px;height:6px;background:var(--force)}.library-options{display:flex;align-items:center;gap:14px;margin-top:14px;font-size:10px;color:#8a9980}.library-options>p{margin-right:auto}.library-options>button{border:0;background:none;padding:0;font-size:9px;color:#788e65;white-space:nowrap}.library-options>button[aria-pressed=true]{color:#3b5b27;text-decoration:underline;text-underline-offset:3px}
.studio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.strategy-tile{min-width:0;border:1px solid var(--studio-rule);background:white;display:flex;flex-direction:column;transition:border-color .15s ease}.strategy-tile:hover{border-color:#a7b59b}.strategy-tile.is-selected{border-color:#99ae87;box-shadow:inset 0 3px #8ba974;background:#fcfdf9}.strategy-tile.is-focused{border-color:#546f3e;box-shadow:inset 0 3px #536e3c}.tile-meta{display:flex;align-items:center;justify-content:space-between;gap:7px;padding:13px 12px 0;font-size:9px;color:#8a9b7b}.tile-meta>a{text-decoration:none;font-size:15px;color:#8a9b7b;line-height:1}.tile-graphic{display:block;width:100%;border:0;background:transparent;padding:6px 7px;cursor:pointer}.tile-graphic>svg{width:100%;height:102px;display:block;pointer-events:none}.tile-title{padding:4px 13px 10px;border:0;background:none;text-align:left;font:400 21px/1.1 Libron,Georgia,serif;letter-spacing:-.02em;color:#354b2c;min-height:58px}.strategy-tile>.tags{padding:0 13px 13px;gap:5px 8px}.strategy-tile .tag{font-size:8px;color:#7b8d6b}.strategy-tile .tag:before{width:5px;height:5px}.tile-reading{padding:0 13px 12px;font-size:11px;color:#758967}.tile-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 11px;border-top:1px solid #e1e7da;margin-top:auto}.tile-bottom>a{font-size:9px;color:#8b9c7d;text-decoration:none}.tile-bottom>a:hover{text-decoration:underline}.choose-strategy{display:flex;align-items:center;gap:13px;justify-content:space-between;min-width:66px;border:1px solid #9fb48d;background:#eef4e6;padding:6px 9px;min-height:29px;font-size:10px;color:#486733}.choose-strategy>span:last-child{font-size:15px;line-height:1}.choose-strategy.is-selected{background:white;border-color:#d7e1cd;color:#7a9169}.choose-strategy:hover{background:#e4eedb}.choose-strategy.small{padding:5px 10px}.tile-replaces{font-size:8px;line-height:1.4;padding:0 11px 9px;color:#8f9475}
.studio-empty{border:1px solid var(--studio-rule);padding:35px 22px}.studio-empty h2{font:400 26px Libron,Georgia,serif}.studio-empty p{font-size:12px;color:#819074;margin:10px 0 17px}.studio-empty button{border:1px solid #a5b896;background:#f1f6eb;font-size:11px;padding:9px 14px;color:#5a7744}.studio-note{display:flex;justify-content:space-between;align-items:baseline;gap:30px;border-top:1px solid var(--studio-rule);margin-top:32px;padding-top:17px;font-size:11px;color:#8a987d}.studio-note p{max-width:720px;font-size:11px}.studio-note span{white-space:nowrap;font-size:10px}.studio-method{padding:19px 0 0;font-size:11px;max-width:760px;color:#7b8c6a}.studio-method summary{cursor:pointer;color:#5c7947;font-size:11px}.studio-method p{margin-top:12px;line-height:1.7}.related-strategy-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.simplified-detail>svg{width:100%;height:auto;display:block}.simplified-detail>.button{font-size:11px;margin-top:20px}.detail-actions .choose-strategy{min-width:120px;min-height:40px}.source-mechanism{border-top:1px solid var(--studio-rule);border-bottom:1px solid var(--studio-rule);padding:18px 0;font-size:13px}.source-mechanism summary{cursor:pointer}.source-mechanism img{display:block;max-width:100%;width:800px;margin:20px auto}.source-mechanism .quiet-link{display:flex;justify-content:center;margin:16px auto}.diagram-dialog>svg{display:block;width:100%;height:auto;max-height:70vh}.diagram-dialog .graphic-hotspot{display:none}
@media(min-width:1500px){.studio-workspace{grid-template-columns:minmax(0,1.45fr) minmax(480px,1fr)}.tile-graphic>svg{height:125px}.tile-title{font-size:23px}}
@media(max-width:1150px){.page{padding:20px 26px}.studio-workspace{grid-template-columns:minmax(0,1.3fr) minmax(330px,1fr);gap:20px}.graphic-toolbar{align-items:flex-start;flex-direction:column;gap:12px}.graphic-toolbar h2{font-size:26px}.graphic-controls{gap:8px}.graphic-toolbar .eyebrow{font-size:8px}.graphic-caption{padding:7px 16px 12px;font-size:9px}.graphic-caption button{font-size:9px}.graphic-inspector{padding:14px 16px}.graphic-inspector h3{font-size:23px}.graphic-inspector>p{font-size:10px}.graphic-intro{padding:14px 16px}.graphic-intro p{font-size:10px}.selected-strip{padding:12px 16px}.selected-strip li button{font-size:9px}.position-strip{padding:10px 12px;gap:4px}.position-strip>button{font-size:8px;padding:5px}.graphic-footer{gap:10px;font-size:8px;padding:10px 12px}.tile-graphic>svg{height:90px}.tile-title{font-size:20px}.force-controls{gap:4px}.force-controls>button{font-size:9px;padding:6px}.scale-count{font-size:9px}.studio-scales>button{gap:9px;padding:14px}.scale-view{font-size:9px}.studio-scales strong{font-size:24px}.related-strategy-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:850px){.header-author{display:none}.page{padding:18px 22px}.studio-intro{padding:21px 0}.studio-intro h1{font-size:34px}.studio-intro>p{font-size:11px}.studio-workspace{grid-template-columns:1fr;gap:22px}.composer-column{position:static}.graphic-toolbar{flex-direction:row;align-items:center}.combined-graphic svg{max-height:310px}.graphic-intro{display:none}.graphic-inspector{padding:12px 18px}.graphic-inspector h3{font-size:22px}.graphic-inspector>p{font-size:11px}.selected-strip{padding:12px 18px}.graphic-footer{font-size:9px}.position-strip>button{font-size:9px}.tile-graphic>svg{height:125px}.studio-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.studio-note{flex-direction:column;gap:10px}.scale-view{display:none}.studio-search input{font-size:12px}.force-controls>button{padding:8px 12px;font-size:10px}}
@media(max-width:550px){.page{padding:16px}.brand-title{font-size:23px}.brand-copy .eyebrow{font-size:8px}.brand-icon{width:34px;height:34px}header nav{order:2;width:100%;gap:23px}nav a{font-size:12px}.studio-intro{display:block;padding:22px 0 18px}.studio-intro h1{font-size:33px;max-width:290px}.studio-intro>p{text-align:left;font-size:11px;margin-top:12px}.studio-intro>p br{display:none}.studio-intro .eyebrow{font-size:8px}.studio-scales{margin-bottom:18px}.studio-scales>button{padding:12px 9px;gap:6px;flex-wrap:wrap;align-items:center}.studio-scales strong{font-size:22px}.scale-index{font-size:8px}.scale-count{flex-basis:100%;text-align:left;margin:0;font-size:9px}.scale-count em{display:inline;margin-left:6px;font-size:8px}.graphic-toolbar{padding:14px 14px 8px;flex-wrap:wrap;gap:10px}.graphic-toolbar h2{font-size:24px}.graphic-controls button{font-size:9px;padding:7px}.graphic-controls{width:100%}.combined-graphic{padding:0 3px}.graphic-caption{font-size:9px;padding:8px 13px 12px;align-items:flex-start}.graphic-caption>span{max-width:200px}.graphic-caption button{white-space:normal;text-align:right;font-size:9px}.selected-strip{padding:11px 13px}.selected-strip ul{gap:5px}.selected-strip li button{font-size:9px;padding:5px 6px}.selected-strip .eyebrow{font-size:8px}.selected-strip>div{margin-bottom:7px}.position-strip{padding:8px 9px;gap:3px}.position-strip>button{font-size:8px}.graphic-inspector{padding:12px 13px}.graphic-inspector h3{font-size:22px}.graphic-inspector>p{font-size:11px}.inspector-links{gap:10px}.inspector-links>a{font-size:10px}.graphic-footer{font-size:8px;gap:8px;flex-wrap:wrap;padding:10px 12px}.graphic-footer>span{flex-basis:100%}.studio-workspace{gap:24px}.studio-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.tile-graphic>svg{height:98px}.tile-title{font-size:22px;padding:3px 11px 10px;min-height:58px}.tile-meta{font-size:8px;padding:12px 10px 0}.tile-bottom{padding:9px;gap:4px}.tile-bottom>a{font-size:8px}.choose-strategy{min-width:60px;font-size:9px;padding:6px 7px;gap:8px}.strategy-tile>.tags{padding:0 10px 10px}.strategy-tile .tag{font-size:8px}.force-controls>button{padding:7px 8px;font-size:10px}.library-options{font-size:9px;gap:13px}.library-options>button{font-size:9px}.studio-note{margin-top:25px;padding-top:14px}.studio-note p{font-size:10px}.studio-note span{font-size:9px}.related-strategy-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.diagram-dialog>svg{min-width:0}.diagram-dialog{padding:15px}.studio-method{font-size:10px}.empty-selection{font-size:10px}.tile-replaces{font-size:8px}.source-mechanism{font-size:12px}.studio-library{scroll-margin-top:16px}}
@media print{.studio-scales,.studio-library,.graphic-controls,.graphic-footer,.position-strip,.studio-method,.studio-note,nav{display:none!important}.studio-workspace{display:block}.composer-column{position:static}.composer-viewer{border:0}.graphic-caption button,.selected-strip>div>button,.selected-strip li button:last-child,.inspector-top>button,.inspector-links{display:none}.graphic-intro{display:none}.studio-intro{padding:10px 0}.studio-intro h1{font-size:30px}.graphic-toolbar{padding:15px 0}.combined-graphic svg{max-height:none}}
@media(prefers-reduced-motion:reduce){.strategy-tile{transition:none}}

/* Keep the live graphic and its controls visible together at desktop heights. */
.studio-workspace{font-family:Arial,Helvetica,sans-serif}.combined-graphic svg{max-height:320px}.graphic-intro{padding:12px 20px}.graphic-intro strong{font:inherit;display:inline;margin:0;color:#536b43}.graphic-intro p{font-size:10px;max-width:none}.graphic-inspector{padding-top:12px;padding-bottom:12px}.graphic-inspector h3{font-size:23px}.graphic-inspector>p{font-size:10px}.graphic-inspector .replacement-note{font-size:9px}.inspector-links{margin-top:8px}
@media(min-width:851px) and (max-height:800px){.combined-graphic svg{max-height:265px}.graphic-toolbar{padding-top:13px;padding-bottom:10px}.graphic-toolbar h2{font-size:24px}.selected-strip{padding-top:10px;padding-bottom:10px}.graphic-intro{padding:10px 16px}.graphic-inspector h3{font-size:22px}.graphic-inspector>p{line-height:1.5}.graphic-footer{padding-top:9px;padding-bottom:9px}}
@media(max-width:850px){.combined-graphic svg{max-height:310px}.graphic-intro{display:none}.graphic-inspector>p{font-size:11px}}
@media(max-width:850px){
  .studio-workspace{display:block}.composer-column{position:sticky;top:0;z-index:8;background:white;padding-top:6px;padding-bottom:6px}.studio-library{margin-top:20px}.composer-column .selected-strip,.composer-column .graphic-inspector,.composer-column .graphic-intro{display:none}.composer-column .position-strip{display:none}.composer-viewer:has(.locations-visible) .position-strip{display:flex}.graphic-footer{padding:9px 13px}.graphic-footer>span{flex-basis:auto}.combined-graphic svg{max-height:275px}.graphic-toolbar{padding-bottom:8px}.graphic-caption{padding-bottom:11px}.graphic-controls button{min-height:28px}
}
@media(max-width:550px){.graphic-toolbar h2{font-size:22px}.graphic-toolbar{padding-top:11px;gap:8px}.graphic-controls{width:auto}.graphic-caption>span{max-width:190px}.graphic-footer>span{display:none}.graphic-footer{justify-content:space-between}.studio-library{margin-top:17px}}
@media(max-width:550px){.studio-scales>button{padding-left:7px;padding-right:7px}.studio-scales strong{font-size:19px;letter-spacing:-.02em}.scale-count{font-size:8px}.scale-count em{font-size:8px;margin-left:4px}}

/* v3: larger combined graphic and three strategy cards across on desktop. */
@media(min-width:551px) and (max-width:850px){
  .studio-scales>button{flex-wrap:wrap}
  .scale-count{flex-basis:100%;margin:0;text-align:left}
  .scale-count em{display:inline;margin-left:6px}
}
@media(min-width:851px){
  .combined-graphic{padding:0 4px}
  .combined-graphic svg{max-height:none}
}
@media(min-width:1101px){
  .studio-workspace{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:24px}
  .studio-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .studio-library .tile-meta{padding:12px 10px 0;font-size:8px}
  .studio-library .tile-title{padding-left:11px;padding-right:11px;font-size:20px;overflow-wrap:anywhere}
  .studio-library .strategy-tile>.tags{padding-left:11px;padding-right:11px;gap:5px 7px}
  .studio-library .tile-bottom{padding:9px;gap:6px}
  .studio-library .tile-bottom>a{font-size:8px}
  .studio-library .choose-strategy{min-width:60px;padding:6px 8px;gap:8px;font-size:9px}
  .studio-library .tile-graphic>svg{height:105px}
  .graphic-toolbar{flex-wrap:wrap;gap:12px}
}
@media(min-width:1500px){
  .studio-library .tile-graphic>svg{height:125px}
  .studio-library .tile-title{font-size:23px}
}

/* v4: restore the original scale graphics alongside their labels. */
.studio-scales>button{display:grid;grid-template-columns:auto 42px minmax(0,1fr) auto}
.studio-scales .scale-icon{width:42px;height:42px;display:block;color:#71816a}
.studio-scales>button[aria-pressed=true] .scale-icon{color:#536a42}
.scale-label{display:flex;flex-direction:column;gap:5px;min-width:0}
.scale-label strong{line-height:1.1}
@media(min-width:851px) and (max-width:1150px){
  .studio-scales>button{grid-template-columns:auto 34px minmax(0,1fr) auto;gap:8px;padding:14px 12px}
  .studio-scales .scale-icon{width:34px;height:34px}
  .studio-scales strong{font-size:22px}
}
@media(min-width:551px) and (max-width:850px){
  .studio-scales>button{grid-template-columns:32px minmax(0,1fr);column-gap:8px;row-gap:5px}
  .studio-scales .scale-index{display:none}
  .studio-scales .scale-icon{width:32px;height:32px;grid-row:1 / 3}
  .studio-scales .scale-count{grid-column:2}
  .studio-scales strong{font-size:22px}
}
@media(max-width:550px){
  .studio-scales>button{grid-template-columns:minmax(0,1fr);justify-items:start;gap:7px}
  .studio-scales .scale-index{display:none}
  .studio-scales .scale-icon{width:28px;height:28px}
  .studio-scales .scale-count{margin:0}
}