/* Preserve Noun's existing typography, accent and card shapes.
   Orange is the requested precomposition state, not a second brand accent. */
.toolbox-demo{width:min(100%,600px);background:#0c0c0e;border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden;isolation:isolate}
.toolbox-demo-head{height:49px;padding:0 17px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line)}
.toolbox-demo-head b{font-size:17px;letter-spacing:-.02em}
.toolbox-demo-head>span{font:9px var(--font-mono);letter-spacing:.15em;color:var(--muted);border-left:1px solid var(--line);padding-left:12px}
.toolbox-demo-head button{margin-left:auto;font:11px var(--font-display);background:transparent;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:5px 10px;cursor:pointer}
.toolbox-demo-head button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.toolbox-demo-stage{position:relative;height:380px;overflow:hidden}
.toolbox-overview,.toolbox-ae{position:absolute;inset:0;transition:opacity .25s cubic-bezier(.23,1,.32,1),transform .25s cubic-bezier(.23,1,.32,1)}
.toolbox-overview{padding:22px;background:#090909}
.toolbox-overview-title{display:flex;align-items:center;gap:8px;margin:0 0 11px;font-size:11px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.toolbox-overview-title i{color:var(--accent);font-size:17px}
.toolbox-command-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
.toolbox-command{display:flex;gap:11px;align-items:center;padding:15px 12px;background:#131314;border:1px solid #2b2b2e;border-radius:12px;font-size:14px;transition:background .16s ease,border-color .16s ease,transform .16s cubic-bezier(.23,1,.32,1)}
.toolbox-command i{font-size:23px;color:#e4e4e7;flex:none}
.toolbox-overview p{font-size:12px;color:var(--muted);margin-top:10px}
.toolbox-ae{background:#19191c;opacity:0;transform:translateY(7px);display:flex;flex-direction:column;font-family:var(--font-display)}
.toolbox-demo.is-editor .toolbox-overview{opacity:0;transform:translateY(-7px);pointer-events:none}
.toolbox-demo.is-editor .toolbox-ae{opacity:1;transform:none}
.toolbox-ae-tabs{display:flex;align-items:center;gap:8px;height:32px;padding:0 13px;background:#202023;border-bottom:1px solid #080809;color:#acacb4;font-size:10px;flex:none}
.toolbox-ae-tabs b{font-weight:500;color:#dedee4;margin-left:5px}
.toolbox-ae-logo{color:#c1a8f0;border:1px solid #726183;padding:0 3px;font-size:10px;border-radius:3px}
.toolbox-ae-dimensions{margin-left:auto;font:8px var(--font-mono);color:#898992}
.toolbox-composition{position:relative;display:grid;place-items:center;flex:1;min-height:80px;background:#101012;padding:10px}
.toolbox-art{height:100%;aspect-ratio:16/9;max-width:80%;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:12px 20px;background:#242431;border:1px solid #363645}
.toolbox-art strong{position:relative;font-size:clamp(20px,3vw,38px);font-weight:600;line-height:1;letter-spacing:-.05em}
.toolbox-art strong span{color:var(--accent)}
.toolbox-art small{position:relative;white-space:nowrap;font-size:7px;color:#c0c0d1}
.toolbox-art-line{position:relative;height:2px;width:32px;background:var(--accent);margin:6px 0}
.toolbox-art-shape{position:absolute;width:65%;aspect-ratio:1;right:-26%;top:-28%;border:18px solid #9ba4ff2b;transform:rotate(34deg)}
.toolbox-comp-zoom{position:absolute;bottom:5px;left:10px;font:8px var(--font-mono);color:#898992}
.toolbox-actions{display:flex;align-items:center;gap:7px;padding:9px 11px;background:#121214;border-block:1px solid #333338;flex:none}
.toolbox-actions>span{display:flex;align-items:center;gap:5px;margin-right:auto;font-size:10px;color:#b7b7c0}
.toolbox-actions>span i{color:var(--accent);font-size:13px}
.toolbox-action{display:flex;align-items:center;justify-content:center;gap:5px;padding:6px 9px;border:1px solid #3a3a40;border-radius:6px;background:#252528;font-size:10px;white-space:nowrap;transition:background .16s ease,border-color .16s ease,transform .16s cubic-bezier(.23,1,.32,1)}
.toolbox-action i{font-size:13px}
.toolbox-demo .is-target{border-color:var(--accent);background:#292b3b}
.toolbox-demo .is-pressed{transform:scale(.96);background:#3b3e59;border-color:var(--accent)}
.toolbox-layers{background:#202024;flex:none;padding-bottom:0}
.toolbox-timeline-head,.toolbox-layer{display:grid;grid-template-columns:48% minmax(0,1fr)}
.toolbox-timeline-head{height:23px;border-bottom:1px solid #101013;color:#aaaab6;font-size:8px}
.toolbox-timeline-head>span{padding:5px 0 0 62px}
.toolbox-timeline-head>div{display:flex;justify-content:space-between;font:8px var(--font-mono);padding:5px 9px 0;background:#161619;border-left:1px solid #101013}
.toolbox-layer{height:25px;border-bottom:1px solid #19191d;font-size:10px;--active-label:var(--layer-color)}
.toolbox-layer-source{display:flex;align-items:center;gap:6px;min-width:0;padding:0 9px;transition:background .16s ease}
.toolbox-layer-source>i:first-child{font-size:11px;color:#a9a9b1}
.toolbox-layer-number{font:8px var(--font-mono);color:#a9a9b1;width:8px}
.toolbox-layer-label{width:5px;height:14px;background:var(--active-label);flex:none;transition:background .2s ease}
.toolbox-layer-icon{font-size:12px;color:var(--active-label)}
.toolbox-layer-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#d1d1db}
.toolbox-layer-track{position:relative;border-left:1px solid #101013;background:repeating-linear-gradient(90deg,transparent 0 calc(33.333% - 1px),#ffffff07 calc(33.333% - 1px) 33.333%)}
.toolbox-layer-clip{position:absolute;top:5px;bottom:5px;left:var(--clip-start);width:var(--clip-size);background:var(--active-label);opacity:.7;border:1px solid #ffffff26;transition:background .2s ease,opacity .2s ease}
.toolbox-layer.is-selected .toolbox-layer-source{background:#45495b}
.toolbox-layer.is-selected .toolbox-layer-name{color:#fff}
.toolbox-layer.is-selected .toolbox-layer-clip{opacity:1;border-color:#e5e6ee88}
.toolbox-layer.is-precomp{--active-label:#df923e}
.toolbox-layer.is-precomp .toolbox-layer-name{color:#f2bc7b}
.toolbox-layer-empty{height:14px;background:#19191d}
.toolbox-demo-cursor{position:absolute;left:0;top:0;z-index:2;pointer-events:none;color:white;opacity:0;will-change:transform}
.toolbox-demo-cursor>i{display:block;font-size:22px;filter:drop-shadow(0 1px 1px #000) drop-shadow(0 0 1px #000)}
.toolbox-demo-cursor kbd{position:absolute;left:19px;top:20px;background:#f3f3f5;color:#17171c;padding:2px 5px;border-radius:4px;font:9px var(--font-mono);opacity:0;transition:opacity .12s ease}
.toolbox-demo-cursor.has-shift kbd{opacity:1}
.toolbox-click-ring{position:absolute;left:-8px;top:-8px;width:28px;height:28px;border:1.5px solid #fff9;border-radius:50%;opacity:0}
.toolbox-demo-foot{min-height:41px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 14px;background:#0c0c0e;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}
.toolbox-demo-foot>span:last-child{color:var(--accent);font:8px var(--font-mono);white-space:nowrap}
@media(max-width:900px){
  .toolbox-demo-stage{height:clamp(250px,32dvh,360px)}
  .toolbox-demo-head{height:37px;padding:0 12px}.toolbox-demo-head b{font-size:14px}
  .toolbox-overview{padding:14px}.toolbox-overview-title{font-size:9px;margin-bottom:7px}
  .toolbox-command-grid{gap:7px;margin-bottom:12px}.toolbox-command{padding:9px;font-size:11px;gap:7px}.toolbox-command i{font-size:19px}
  .toolbox-overview p{font-size:10px;margin-top:0}
  .toolbox-ae-tabs{height:25px;font-size:9px}.toolbox-ae-dimensions{font-size:7px}
  .toolbox-actions{padding:5px 7px;gap:5px}.toolbox-actions>span{font-size:9px}.toolbox-action{padding:5px 6px;font-size:9px}
  .toolbox-layer{height:22px;font-size:9px}.toolbox-layer-source{padding:0 6px;gap:4px}
  .toolbox-layer-source>i:first-child{display:none}.toolbox-timeline-head>span{padding-left:39px}
  .toolbox-art{padding:8px 12px}.toolbox-art strong{font-size:23px}.toolbox-art small{font-size:6px}
  .toolbox-demo-foot{min-height:33px;font-size:10px;padding:7px 10px;gap:6px}.toolbox-demo-foot>span:last-child{font-size:7px}
}
@media(prefers-reduced-motion:reduce){
  .toolbox-demo *{transition:none!important}
  .toolbox-demo-cursor{display:none}
}