.fullscreen-workspace-page{overflow:hidden}.materials-page{--map-header-space:5rem;flex-direction:column;width:100%;height:100dvh;min-height:0;padding:0;display:flex;position:relative}.materials-header{z-index:20;pointer-events:none;grid-template-columns:minmax(0,1fr) auto;align-items:start;column-gap:1rem;padding-right:3.5rem;display:grid;position:absolute;top:1rem;left:1rem;right:1rem}.materials-header h1{background:color-mix(in srgb, var(--bg) 93%, transparent);grid-area:1/1;width:fit-content;margin:0;padding:.2rem .45rem;font-size:clamp(1.75rem,2.5vw,2.25rem);font-weight:600;line-height:1.2}.materials-header .workspace-close,.materials-filters{pointer-events:auto}.materials-filters{grid-area:1/2;align-self:center;gap:.35rem;width:max-content;max-width:min(54rem,70vw);display:flex;overflow-x:auto}.materials-filters button{border:1px solid var(--border);background:var(--surface);min-height:2.15rem;color:var(--ink);cursor:pointer;white-space:nowrap;font:600 .7rem/1.2 var(--font-display);flex:none;padding:.35rem .5rem}.materials-filters button:hover{border-color:var(--accent)}.materials-filters button[aria-pressed=true]{border-color:var(--ink);background:var(--accent-pale)}.materials-filters button span{color:var(--muted-strong);margin-left:.35rem;font-weight:500}.materials-sr-only{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.materials-workspace{flex:1;min-height:0;position:relative}.materials-graph{touch-action:pan-x pan-y;background:var(--bg);cursor:grab;-webkit-user-select:none;user-select:none;width:100%;height:100%;min-height:0;position:relative;overflow:auto}.materials-graph.is-panning{cursor:grabbing}.materials-extent{background-color:var(--bg);background-image:linear-gradient(color-mix(in srgb, var(--border) 42%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--border) 42%, transparent) 1px, transparent 1px);background-size:var(--grid-size,28px) var(--grid-size,28px);min-width:100%;min-height:100%;position:relative}.materials-canvas{transform-origin:0 0;position:absolute;top:0;left:0}.materials-graph svg{pointer-events:none;width:100%;position:absolute;inset:0 auto auto 0}.materials-graph line{stroke:var(--border);stroke-width:1.5px;opacity:.45;transition:opacity .2s,stroke .2s}.materials-graph line.is-active{stroke:var(--accent);stroke-width:2.5px;opacity:1}.materials-graph line.is-muted{opacity:.1}.materials-nodes{z-index:1;width:100%;min-height:max(100%,700px);padding:var(--map-header-space) 1rem 1rem;grid-template-rows:minmax(0,1.18fr) minmax(0,.82fr);grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(3rem,3.5vw,4rem) clamp(.75rem,1.5vw,1.75rem);display:grid;position:relative}.materials-nodes.is-filtered{grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr)}.materials-cluster{min-width:0;min-height:0}.materials-cluster.is-filtered-out{display:none}.materials-cluster h2{color:var(--accent-text);font:600 .73rem/1.35 var(--font-display);letter-spacing:.06em;text-transform:uppercase;margin:0 0 .55rem}.materials-cluster--kit{isolation:isolate;position:relative}.materials-cluster--kit:before{content:"";z-index:-1;border:1px solid var(--accent);background:color-mix(in srgb, var(--accent-soft) 12%, transparent);pointer-events:none;position:absolute;inset:1.5rem 0 -1.15rem}.materials-cluster--kit h2{z-index:2;border:1px solid var(--accent);background:color-mix(in srgb, var(--accent-soft) 34%, transparent);width:fit-content;max-width:94%;min-height:1.5rem;color:var(--accent-dark);border-bottom:0;margin:0;padding:.32rem .65rem;position:relative}.materials-cluster__nodes{height:calc(100% - 1.55rem);position:relative}.material-node{z-index:1;top:var(--wide-y,50%);left:var(--wide-x,50%);width:min(30%,17rem);min-height:3.8rem;transform:translate(calc(-50% + var(--drag-x,0px)), calc(-50% + var(--drag-y,0px)));border:1px solid var(--ink);background:var(--surface);box-shadow:4px 4px 0 var(--accent-pale);color:var(--ink);cursor:grab;text-align:left;overflow-wrap:break-word;touch-action:none;-webkit-user-select:none;user-select:none;font:600 clamp(.7rem, .65vw, .83rem)/1.25 var(--font-display);border-radius:0;flex-direction:column;justify-content:flex-start;align-items:stretch;padding:.45rem .6rem;transition:opacity .2s;display:flex;position:absolute}.material-node--with-hero{--thumbnail-width:4.2rem;padding-left:calc(var(--thumbnail-width) + .55rem);display:block}.material-node__thumbnail{width:var(--thumbnail-width);object-fit:cover;border-right:1px solid var(--border);height:100%;display:block;position:absolute;inset:0 auto 0 0}.material-node__label{padding-left:1.15rem;display:block;position:relative}.material-node__label:before{content:"⠿";color:var(--accent-text);font-size:.85rem;line-height:1;position:absolute;top:0;left:0}.material-node--with-hero .material-node__label{padding-left:0}.material-node--with-hero .material-node__label:before{content:none}.material-node.is-selected{background:var(--ink);color:var(--surface);box-shadow:4px 4px 0 var(--accent-soft)}.material-node.is-selected .material-node__label:before{color:var(--surface)}.material-node.is-muted{opacity:.36}.material-node.is-dragging{z-index:5;cursor:grabbing}.material-node:focus-visible{z-index:4}.materials-detail{z-index:10;background:var(--surface);width:min(22rem,100vw - 3rem);max-height:calc(100% - 2rem);box-shadow:0 16px 48px color-mix(in srgb, var(--ink) 18%, transparent);padding:1.35rem;display:none;position:absolute;top:clamp(1rem,8vh,5rem);right:1.5rem;overflow-y:auto}.materials-detail.is-open{display:block}.materials-detail.is-left{left:1.5rem;right:auto}.materials-detail__close{width:2rem;height:2rem;color:var(--ink);cursor:pointer;font:400 1.55rem/1 var(--font-display);background:0 0;border:0;place-items:center;padding:0;display:grid;position:absolute;top:.45rem;right:.55rem}.materials-detail__close:hover{color:var(--accent-dark)}.materials-detail:has(.materials-detail__hero) .materials-detail__close{background:color-mix(in srgb, var(--surface) 88%, transparent);top:1.65rem;right:1.65rem}.materials-detail__hero{margin:0 0 1rem}.materials-detail__hero img{aspect-ratio:1200/630;object-fit:cover;border:1px solid var(--border);width:100%;max-height:11rem;display:block}.materials-detail__kind{color:var(--accent-text);font:600 .68rem/1.35 var(--font-display);letter-spacing:.08em;text-transform:uppercase;margin:0 2.5rem .7rem 0}.materials-detail h2{font:700 1.08rem/1.3 var(--font-display);margin:0 1.5rem .75rem 0}.materials-detail p:not(.materials-detail__kind){color:var(--body-text);margin:0 0 1.15rem;font-size:.83rem;line-height:1.5}.materials-detail h3{font:600 .71rem/1.4 var(--font-display);text-transform:uppercase;letter-spacing:.06em;margin:0 0 .35rem}.materials-detail__open{width:fit-content;color:var(--link);text-decoration:underline;-webkit-text-decoration-color:var(--border);text-decoration-color:var(--border);font:600 .75rem/1.35 var(--font-display);display:inline-block}.materials-detail__open:hover{text-decoration-color:currentColor}.materials-zoom{z-index:9;background:var(--surface);box-shadow:0 5px 20px color-mix(in srgb, var(--ink) 12%, transparent);align-items:center;display:flex;position:absolute;bottom:1rem;left:1rem}.materials-zoom button{border:1px solid var(--border);background:var(--surface);min-width:2.5rem;height:2.5rem;color:var(--ink);cursor:pointer;font:600 .85rem/1 var(--font-display);padding:0 .5rem}.materials-zoom button+button{border-left:0}.materials-zoom button[data-zoom=reset]{min-width:4rem;font-size:.72rem}.materials-zoom button:hover:not(:disabled){color:var(--accent-dark);background:var(--bg)}.materials-zoom button:disabled{color:var(--muted-strong);cursor:default}@media (width<=1200px){.materials-page{--map-header-space:8rem}.materials-header{grid-template-columns:minmax(0,1fr);padding-right:0}.materials-header h1{padding-right:3.5rem}.materials-filters{grid-area:2/1;width:100%;max-width:none;margin-top:.65rem;padding:.4rem 0}.materials-detail{max-height:calc(100% - 9rem);top:8rem}}@media (width<=1100px){.materials-nodes{min-height:max(100%,1100px)}.material-node{top:var(--compact-y,50%);left:var(--compact-x,50%);width:46%;padding:.35rem .45rem;font-size:.72rem}.material-node--with-hero{--thumbnail-width:3.1rem;padding-left:calc(var(--thumbnail-width) + .4rem)}}@media (width<=700px){.materials-header{top:.75rem;left:.75rem;right:.75rem}.materials-header h1{font-size:1.5rem}.materials-filters{margin-top:.5rem;padding:.35rem 0}.materials-filters button{min-height:2.2rem;padding:.35rem .5rem;font-size:.7rem}.materials-nodes{min-height:0;padding:var(--map-header-space) .5rem 2rem;flex-direction:column;gap:3rem;display:flex}.materials-cluster{flex:none}.materials-cluster__nodes{height:calc(var(--compact-rows,1) * 138px)}.material-node{min-height:4rem;font-size:.7rem}.materials-page:has(.materials-detail.is-open) .materials-nodes{padding-bottom:40vh}.materials-detail{width:auto;max-height:40dvh;box-shadow:0 -8px 24px color-mix(in srgb, var(--ink) 12%, transparent);padding:1rem 1.5rem;position:fixed;inset:auto 0 0}.materials-detail:has(.materials-detail__hero) .materials-detail__close{top:1.3rem;right:1.8rem}.materials-detail.is-left{left:0;right:0}.materials-detail__hero img{max-height:7rem}.materials-zoom{bottom:.5rem;left:.5rem}.materials-page:has(.materials-detail.is-open) .materials-zoom{bottom:calc(40dvh + .5rem)}}@media (prefers-reduced-motion:reduce){.material-node,.materials-graph line{transition:none}}