.tool-shelf{width:min(1240px,calc(100% - 80px));margin:0 auto;padding:60px 0 80px;font-family:'Inter Tight',Arial,sans-serif}.shelf-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:55px}.shelf-intro h1{font-size:clamp(48px,6vw,84px);font-weight:400;letter-spacing:-.055em;line-height:1.02;margin:20px 0 0}.shelf-intro h1 em{font-style:normal;color:#8b857a}.shelf-intro>p{max-width:290px;font-size:15px;line-height:1.65;color:#766f64}.shelf-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid #29241c2b;padding:15px 0}.shelf-toolbar>span{font:9px monospace;letter-spacing:.08em;color:#8c8172}.module-filters{display:flex;gap:7px}.module-filters button{padding:0 14px;height:40px;border:1px solid transparent;background:transparent;border-radius:99px;font-size:12px;color:#766e62;cursor:pointer}.module-filters button span{font:9px monospace;margin-left:7px}.module-filters button[aria-pressed=true]{background:#292620;color:white}.tool-entry{border-top:1px solid #29241c35;--skill-colour:#ddd;--skill-ink:#29241c}.tool-entry:last-child{border-bottom:1px solid #29241c35}.tool-trigger{position:relative;display:grid;grid-template-columns:35px 94px 1.3fr 1fr 50px;gap:24px;align-items:center;text-align:left;width:100%;border:0;background:transparent;color:#292620;padding:26px 12px;cursor:pointer}.tool-trigger:before{content:'';position:absolute;left:0;top:20px;bottom:20px;width:3px;border-radius:2px;background:var(--skill-colour)}.tool-trigger:hover,.tool-trigger[aria-expanded=true]{background:#e8e3d244}.tool-id{font:10px monospace;color:#978c7c;text-align:center}.tool-thumb{height:72px;background:var(--skill-colour);border-radius:10px;display:grid;place-items:center}.tool-thumb svg{width:80px;height:65px}.tool-label strong{display:block;font-size:31px;line-height:1.1;letter-spacing:-.04em;font-weight:400}.tool-label small{display:block;margin-top:8px;font:9px monospace;letter-spacing:.04em;color:#8e8171}.tool-summary{font-size:13px;line-height:1.5;color:#756c5e;max-width:30ch}.tool-expand{height:38px;width:38px;border:1px solid #28231d30;border-radius:50%;display:grid;place-items:center;font-size:24px;font-weight:400;transition:transform .25s}.tool-trigger[aria-expanded=true] .tool-expand{transform:rotate(45deg)}.skill-detail{margin:0 0 22px;padding:0;border:1px solid #28231d26;border-radius:14px;background:#faf9f5;color:#28231d;overflow:hidden;scroll-margin-top:95px;animation:drawer-open .3s ease-out}.skill-detail-top{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:12px 20px;border-bottom:1px solid #28231d20;font:9px monospace;letter-spacing:.05em}.skill-detail-top button{height:36px;width:36px;border:1px solid #28231d25;background:transparent;border-radius:50%;font-size:22px;cursor:pointer}.skill-detail-grid{display:grid;grid-template-columns:55% 45%}.skill-detail-left{background:color-mix(in srgb,var(--skill-colour) 26%,#faf9f5);padding:24px;border-right:1px solid #28231d20;min-width:0}.skill-detail-art{display:none}.skill-detail-left h2{font-size:28px;letter-spacing:-.04em;line-height:1.1;font-weight:400;margin:20px 0 10px}.skill-detail-left p{font-size:13px;line-height:1.6;color:#756959}.skill-detail-left>a{display:inline-flex;align-items:center;min-height:40px;margin-top:12px;font-size:12px;text-decoration:underline;text-underline-offset:4px}.skill-detail-right{padding:25px;min-width:0}.skill-tabs{display:flex;gap:22px;border-bottom:1px solid #28231d25;margin-bottom:22px}.skill-tabs button{background:transparent;border:0;border-bottom:2px solid transparent;min-height:44px;padding:0 0 10px;font-size:13px;color:#968b7c;cursor:pointer}.skill-tabs button[aria-selected=true]{color:#29241c;border-bottom-color:#29241c}.skill-detail-right h3{font-size:19px;font-weight:500;letter-spacing:-.02em;margin:0 0 10px}.skill-detail-right p,.skill-detail-right li{font-size:12px;line-height:1.7;color:#756b5b}.skill-detail-right ol{padding-left:17px;margin:18px 0}.skill-detail-right li{margin-bottom:12px}.skill-requirements{border-top:1px solid #28231d25;padding:16px 0}.skill-requirements strong{font:9px monospace;display:block;margin-bottom:8px}.skill-detail-right textarea{width:100%;min-height:280px;background:#eeeae0;border:1px solid #28231d25;border-radius:6px;padding:14px;font:11px/1.65 monospace;color:#584d3e;resize:vertical}.skill-detail-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.skill-detail-actions a,.skill-detail-actions button{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 16px;border:1px solid #28231d;border-radius:99px;background:#28231d;color:white;font-size:11px;text-decoration:none;cursor:pointer}.skill-detail-actions .secondary{background:transparent;color:#28231d;border-color:#28231d40}.copy-status{min-height:20px;margin-top:12px!important;font-size:11px!important}.shelf-note{display:flex;justify-content:space-between;gap:30px;margin-top:32px}.shelf-note p{max-width:500px;font-size:13px;color:#827564}.shelf-note a{font-size:13px;min-height:40px;display:inline-flex;align-items:center}.pattern-preview{border:1px solid #28231d25;background:#e8dff0;border-radius:8px;overflow:hidden;aspect-ratio:1.25;display:grid;place-items:center}.pattern-preview svg{width:100%;height:100%;display:block}.sample-controls{display:flex;gap:15px;align-items:center;justify-content:space-between;margin-top:15px;font-size:11px}.sample-controls label{display:flex;align-items:center;gap:10px}.sample-controls input{width:115px;accent-color:#514058;min-height:36px}.sample-controls button{width:32px;height:32px;border:2px solid transparent;border-radius:50%;background:var(--swatch);cursor:pointer}.sample-controls button[aria-pressed=true]{outline:1px solid #292620;outline-offset:2px}.sample-actions{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px}.sample-actions>span{font:9px monospace;color:#8c7c6d}.sample-actions button{border:1px solid #29262040;background:transparent;border-radius:99px;min-height:38px;padding:0 12px;font-size:11px;cursor:pointer}.embedded-tool{width:100%;height:490px;border:1px solid #28231d25;border-radius:8px;background:#f5f2eb}.tool-shelf :focus-visible{outline:2px solid #a74b32;outline-offset:4px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@keyframes drawer-open{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}@media(max-width:1000px){.tool-shelf{width:calc(100% - 40px)}.tool-trigger{grid-template-columns:25px 80px 1.3fr 1fr 38px;gap:16px}.tool-label strong{font-size:26px}.skill-detail-grid{grid-template-columns:1fr 1fr}.skill-detail-left,.skill-detail-right{padding:20px}.sample-controls{flex-wrap:wrap}}@media(max-width:700px){.tool-shelf{width:calc(100% - 32px);padding-top:35px}.shelf-intro{display:block;margin-bottom:30px}.shelf-intro h1{font-size:clamp(42px,10.5vw,65px)}.shelf-intro>p{max-width:380px;margin-top:23px;font-size:14px}.shelf-toolbar{gap:8px}.shelf-toolbar>span{display:none}.module-filters{gap:2px}.module-filters button{font-size:10px;padding:0 10px}.tool-trigger{grid-template-columns:60px 1fr 32px;gap:14px;padding:21px 8px}.tool-id,.tool-summary{display:none}.tool-thumb{height:57px}.tool-thumb svg{width:60px;height:49px}.tool-label strong{font-size:24px}.tool-label small{font-size:8px}.tool-expand{width:32px;height:32px}.skill-detail-grid{grid-template-columns:1fr}.skill-detail-left{border-right:0;border-bottom:1px solid #29262020}.skill-detail-left,.skill-detail-right{padding:18px}.skill-detail-top{padding:10px 15px}.embedded-tool{height:490px}.shelf-note{display:block}.shelf-note a{margin-top:15px}.sample-controls input{width:120px}.pattern-preview{aspect-ratio:1.1}}@media(prefers-reduced-motion:reduce){.skill-detail{animation:none}.tool-expand{transition:none}}
/* Thumbnail-only motion: one short gesture on hover or keyboard focus. */
.tool-thumb{overflow:hidden}
.tool-thumb .repeat-tile,.tool-thumb .spacing-bars,.tool-thumb .roof-lines{transform-box:fill-box;transform-origin:center}
.tool-thumb .roof-lines{transform-origin:50% 100%}
@media (prefers-reduced-motion:no-preference){
  .tool-trigger:focus-visible .repeat-tile{animation:thumb-repeat 850ms cubic-bezier(.22,.61,.36,1) both;animation-delay:calc(var(--motion-step,0)*45ms)}
  .tool-trigger:focus-visible .draw-line{stroke-dasharray:100;animation:thumb-write 600ms ease-out both;animation-delay:calc(var(--motion-step,0)*70ms)}
  .tool-trigger:focus-visible .brick-row{animation:thumb-bricks 850ms ease-in-out both}
  .tool-trigger:focus-visible .spacing-bars{animation:thumb-spacing 850ms ease-in-out both}
  .tool-trigger:focus-visible .roof-lines{animation:thumb-roof 900ms ease-in-out both}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .tool-thumb>svg{transition:transform 250ms ease}
  .tool-thumb:hover>svg{transform:translateY(-1px) scale(1.025)}
  .tool-thumb:hover .repeat-tile{animation:thumb-repeat 850ms cubic-bezier(.22,.61,.36,1) both;animation-delay:calc(var(--motion-step,0)*45ms)}
  .tool-thumb:hover .draw-line{stroke-dasharray:100;animation:thumb-write 600ms ease-out both;animation-delay:calc(var(--motion-step,0)*70ms)}
  .tool-thumb:hover .brick-row{animation:thumb-bricks 850ms ease-in-out both}
  .tool-thumb:hover .spacing-bars{animation:thumb-spacing 850ms ease-in-out both}
  .tool-thumb:hover .roof-lines{animation:thumb-roof 900ms ease-in-out both}
}
@keyframes thumb-repeat{0%,100%{transform:rotate(0)}45%{transform:rotate(90deg)}}
@keyframes thumb-write{from{stroke-dashoffset:100;opacity:.25}to{stroke-dashoffset:0;opacity:1}}
@keyframes thumb-bricks{0%,100%{transform:translateX(0)}45%{transform:translateX(9px)}}
@keyframes thumb-spacing{0%,100%{transform:scaleY(1)}45%{transform:scaleY(.86)}}
@keyframes thumb-roof{0%,100%{transform:scaleY(1)}45%{transform:scaleY(1.08)}}