/* APEX material atlas — scoped, local preview. */
.material-workbench{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(320px,1fr);border:1px solid var(--line);background:#fff}
.material-studio{min-width:0;position:relative;background:#eae8e1;display:flex;flex-direction:column;overflow:hidden}
.material-topline{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:24px 26px 0;font-size:10px;letter-spacing:1.5px;color:#53554e;font-weight:700;z-index:1}
.material-live{display:flex;align-items:center;gap:7px;letter-spacing:0;font-size:11px;font-weight:400}.material-live:before{content:'';width:5px;height:5px;border-radius:50%;background:#66755c}
.material-view{position:relative;aspect-ratio:1.23;min-height:350px;flex:1}.material-view canvas{width:100%;height:100%;position:absolute;inset:0;touch-action:pan-y;outline-offset:-4px;cursor:crosshair;opacity:0}.material-studio.is-ready canvas{opacity:1}.material-studio.is-ready .material-no-canvas{display:none}
.material-no-canvas{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.material-no-canvas span{font-size:48px;letter-spacing:-2px}.material-no-canvas p{font-size:14px}
.material-view-label{position:absolute;left:26px;bottom:22px;pointer-events:none}.material-view-label span{display:block;letter-spacing:1.7px;font-size:9px;color:#55584e;margin-bottom:7px}.material-view-label strong{font-size:22px;font-weight:400;letter-spacing:-.6px}
.material-scale{position:absolute;right:26px;bottom:27px;font-size:8px;letter-spacing:1.4px;color:#606157;border-top:1px solid #828679;padding-top:7px;pointer-events:none}
.material-controls{padding:18px 26px;border-top:1px solid #d1d1c7;display:flex;align-items:center;justify-content:space-between;gap:12px}.material-controls[hidden]{display:none}.material-controls p{font-size:12px;color:#55594f;max-width:180px;line-height:1.4;margin:0}.material-controls button{display:flex;gap:16px;align-items:center;white-space:nowrap;border:1px solid #242820;background:#242820;color:white;padding:13px 16px;font:inherit;font-size:13px;min-height:44px;transition:background .2s}.material-controls button:hover{background:#444b3d}.material-controls button span{font-size:19px;line-height:1}
.material-model-note{font-size:10px;line-height:1.5;color:#62665b;margin:0;padding:0 26px 19px;max-width:520px}
.material-recipe{padding:30px 30px 24px;min-width:0;display:flex;flex-direction:column}.material-kicker{font-size:16px;margin-bottom:23px}.material-recipe .recipe-tabs{display:flex;flex-direction:column;background:none;border:0;gap:0}.material-recipe .recipe-tabs button{position:relative;display:grid;grid-template-columns:105px 1fr;align-items:center;padding:20px 15px;background:none;color:var(--ink);border-top:1px solid var(--line);text-align:left;transition:background .25s;min-width:0}.material-recipe .recipe-tabs button:last-child{border-bottom:1px solid var(--line)}.material-recipe .recipe-tabs button[aria-selected=true]{background:#f1f1eb;color:var(--ink)}.material-recipe .recipe-tabs button[aria-selected=true]:before{content:'';position:absolute;left:0;top:20px;bottom:20px;width:2px;background:#333b2c}.material-recipe .recipe-tabs span{grid-row:span 2;font-size:52px;letter-spacing:-2px;line-height:1}.material-recipe .recipe-tabs small{font-size:20px;margin-left:2px}.material-recipe .recipe-tabs b{font-size:18px;min-height:0;margin:0 0 4px;line-height:1.25}.material-recipe .recipe-tabs i{font-size:11px;color:#63675d;opacity:1}.material-recipe .recipe-detail{background:none;padding:26px 0 10px;display:block;min-height:185px}.material-recipe .recipe-detail h3{font-size:23px;letter-spacing:-.4px;margin:0 0 10px}.material-recipe .recipe-detail p{font-size:15px;line-height:1.55}.material-recipe>.caption{font-size:10px;line-height:1.5;margin-top:auto;padding-top:12px}
@media(min-width:1500px){.material-view{min-height:480px}}
@media(max-width:1000px){.material-workbench{grid-template-columns:1.15fr 1fr}.material-recipe{padding:24px 20px}.material-recipe .recipe-tabs button{grid-template-columns:83px 1fr;padding:20px 12px}.material-recipe .recipe-tabs span{font-size:44px}.material-recipe .recipe-tabs b{font-size:16px}.material-topline{padding:22px 20px 0}.material-live{display:none}.material-controls{padding:16px 20px;flex-wrap:wrap}.material-scale{display:none}.material-view{min-height:340px}.material-recipe .recipe-detail{min-height:220px}}
@media(max-width:700px){.material-workbench{grid-template-columns:1fr}.material-view{aspect-ratio:1.2;min-height:290px;flex:none}.material-topline{padding:20px 20px 0}.material-live{display:flex;font-size:10px}.material-topline{font-size:9px;letter-spacing:1px}.material-view-label{left:20px;bottom:15px}.material-view-label strong{font-size:20px}.material-controls{padding:14px 20px;flex-wrap:nowrap}.material-controls p{font-size:11px;max-width:125px}.material-controls button{font-size:12px;gap:8px;padding:12px}.material-model-note{padding:0 20px 16px;font-size:9px}.material-recipe{padding:25px 20px 20px}.material-recipe .recipe-tabs{flex-direction:row}.material-recipe .recipe-tabs button{display:flex;flex-direction:column;align-items:flex-start;flex:1;padding:17px 10px;border-bottom:1px solid var(--line)}.material-recipe .recipe-tabs button[aria-selected=true]:before{top:auto;right:10px;left:10px;bottom:0;width:auto;height:2px}.material-recipe .recipe-tabs span{font-size:40px;margin-bottom:12px}.material-recipe .recipe-tabs b{font-size:13px;min-height:34px}.material-recipe .recipe-tabs small{font-size:16px}.material-recipe .recipe-tabs i{font-size:10px;line-height:1.3}.material-recipe .recipe-detail{min-height:195px;padding-top:24px}.material-recipe .recipe-detail h3{font-size:22px}.material-recipe .recipe-detail p{font-size:15px}.material-kicker{font-size:17px;margin-bottom:18px}}
@media(prefers-reduced-motion:reduce){.material-workbench *{transition:none!important}}