/* Diagrams are static explanatory figures, never fake interactive controls. */
.claren-graphic{min-width:0;width:100%;margin:0;align-self:center;border-top:3px solid var(--blue);color:var(--ink)}.graphic-index{display:flex;gap:9px;align-items:center;padding:14px 0;font-size:14px;letter-spacing:.09em;font-weight:700;border-bottom:1px solid var(--line)}.graphic-index>span:last-child{margin-left:auto}.graphic-dot{width:7px;height:7px;border-radius:50%;background:var(--blue)}.graphic-canvas,.commerce-stage{padding:24px;background:#f5f7fa}.graphic-browser{display:flex;align-items:center;gap:5px;padding:11px 15px;border:1px solid #c9d3e1;background:#fff;border-bottom:0}.graphic-browser>span{width:4px;height:4px;border-radius:50%;background:#718099}.graphic-browser i{font-style:normal;font-size:14px;color:var(--muted);margin-left:auto}.graphic-form{background:#fff;padding:24px;border:1px solid #c9d3e1}.graphic-kicker{font-size:14px;font-weight:700;letter-spacing:.1em;color:var(--muted);margin:0}.graphic-title{font-size:24px;line-height:1.3;font-weight:600;color:var(--ink);letter-spacing:-.035em;margin-top:10px}.graphic-field{position:relative;margin:26px 10px 0 0}.graphic-label{display:block;font-size:14px;font-weight:600;margin-bottom:7px}.graphic-input{border:1px solid #8493a9;padding:11px 13px;font-size:14px;color:var(--ink);display:flex;align-items:center;background:white}.graphic-caret{height:17px;width:1px;background:var(--blue);margin-left:3px}.graphic-marker{display:inline-flex;align-items:center;justify-content:center;width:23px;height:23px;flex-shrink:0;border-radius:50%;background:var(--blue);color:#fff;font-size:14px;font-weight:700;font-style:normal;line-height:1}.graphic-field>.graphic-marker{position:absolute;right:-22px;top:-12px}.graphic-bracket{position:absolute;right:-13px;top:13px;bottom:0;border:1px solid var(--blue);border-left:0;width:6px}.graphic-fake-button{margin-top:19px;display:flex;justify-content:space-between;padding:10px 12px;background:#ebf1ff;color:#254c9f;font-size:14px;font-weight:600;max-width:160px}.graphic-annotation{display:flex;gap:13px;align-items:flex-start;margin-top:22px}.graphic-annotation strong{font-size:14px;font-weight:600}.graphic-annotation p{font-size:14px;line-height:1.75;margin-top:5px}.graphic-verification{display:flex;gap:13px;padding:17px 24px;border:1px solid var(--line);border-top:0}.graphic-check{color:var(--blue);font-size:26px}.graphic-verification p{font-size:14px;line-height:1.7}.graphic-verification strong{color:var(--ink);font-weight:600}.claren-graphic figcaption{font-size:14px;color:var(--muted);padding-top:11px;line-height:1.7}.commerce-route{display:flex;align-items:center;justify-content:space-between;margin-inline:18px}.route-node{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border:1px solid #aab8ce;border-radius:50%;font-size:14px;background:white;color:var(--ink);font-weight:600}.route-node.active{border-color:var(--blue);background:var(--blue);color:white}.route-line{height:1px;flex:1;background:#aab8ce}.route-labels{display:flex;justify-content:space-between;font-size:14px;margin:8px 7px 24px;color:var(--muted)}.route-labels strong{color:var(--blue)}.cart-sheet{border:1px solid #c9d3e1;background:white;padding:23px}.cart-item{display:flex;gap:20px;padding-block:23px;align-items:center}.product-symbol{width:58px;height:70px;color:#526886;flex-shrink:0}.cart-item strong{font-size:14px}.cart-item>div>span{display:block;font-size:14px;color:var(--muted);margin-top:5px}.quantity-drawing{display:flex;margin-top:12px;gap:4px}.quantity-drawing>span{width:30px;height:28px;display:flex;align-items:center;justify-content:center;border:1px solid #8493a9;font-size:14px}.quantity-drawing .focus-example{position:relative;outline:2px solid var(--blue);outline-offset:3px}.focus-example .graphic-marker{position:absolute;right:-19px;top:-17px;width:19px;height:19px;font-size:14px}.keyboard-trail{display:flex;align-items:center;gap:10px;border-top:1px solid var(--line);padding-top:14px}.keyboard-trail>span{white-space:nowrap;border:1px solid #aab8ce;border-bottom-width:3px;border-radius:3px;padding:3px 6px;font-size:14px}.keyboard-trail p{font-size:14px}.commerce-stage .graphic-annotation{margin-top:20px}
@media(max-width:820px){.claren-graphic{max-width:520px;margin:12px auto 0}}
@media(max-width:540px){.graphic-canvas,.commerce-stage{padding:18px}.graphic-form,.cart-sheet{padding:18px}.graphic-title{font-size:22px}.graphic-field{margin-top:20px}.graphic-annotation{margin-top:16px}.graphic-verification{padding:14px 18px}.graphic-index{font-size:14px}.cart-item{gap:13px}.product-symbol{width:44px}.claren-graphic figcaption{font-size:14px}.graphic-browser{display:none}.graphic-form{border-top:1px solid #c9d3e1}.graphic-annotation p{line-height:1.6}}
/* Original flat scenes are inline SVG; all wording remains actual HTML. */
.claren-graphic{position:relative;border:0;max-width:550px;margin:0 auto}.graphic-index{background:var(--ink);color:white;border:0;padding:13px 22px;font-size:14px}.graphic-dot{background:var(--aqua)}.scene-art{background:var(--soft);overflow:hidden}.scene-art>svg{display:block;width:100%;height:auto;max-height:176px}.graphic-canvas,.commerce-stage{padding:22px 28px 24px;background:var(--soft)}.graphic-browser{background:var(--blue);color:white;border:0;padding:10px 15px}.graphic-browser>span{background:#c9deff}.graphic-browser i{color:white;font-size:14px}.graphic-form,.cart-sheet{border:0;padding:20px 24px;background:white}.graphic-title{font-size:25px;font-weight:750}.graphic-kicker{font-size:14px;color:#536176}.graphic-field{margin-top:18px;margin-right:12px}.graphic-label{font-size:14px;font-weight:700}.graphic-input{font-size:14px;padding:10px 12px;position:relative}.field-outline{position:absolute;left:-4px;top:24px;width:calc(100% + 8px);height:48px;pointer-events:none;z-index:1}.graphic-fake-button{background:var(--blue);color:white;border-radius:2px;margin-top:16px;max-width:154px}.graphic-annotation{margin-top:20px;gap:12px}.graphic-annotation strong{font-size:14px;font-weight:750}.graphic-annotation p{font-size:14px;line-height:1.75}.graphic-marker{background:var(--blue)}.graphic-verification{background:var(--ink);color:white;border:0;padding:18px 26px}.graphic-verification p,.graphic-verification strong{color:white}.graphic-check{color:#8fc5ff}.claren-graphic figcaption{font-size:14px;line-height:1.8;padding:12px 2px 0;color:#536176}.commerce-stage{padding-top:12px}.commerce-route{margin-inline:14px}.route-node{width:27px;height:27px;border:0;font-size:14px}.route-line{background:#1e5eff;height:2px}.route-labels{margin:7px 3px 18px;font-size:14px}.cart-sheet{padding:20px 24px}.cart-item{padding-block:18px;gap:20px}.product-symbol{color:var(--blue)}.cart-item strong{font-size:14px}.keyboard-trail{padding-top:13px}.quantity-drawing{position:relative;isolation:isolate}.quantity-drawing .focus-example{outline:none}.quantity-outline{position:absolute;left:64px;top:-4px;width:38px;height:36px;pointer-events:none}.graphic-annotation .graphic-marker{margin-top:2px}.scene-art [data-motion-part],.hub-art [data-motion-part]{transform-box:fill-box;transform-origin:center}
@media(min-width:821px) and (max-width:1100px){.graphic-canvas,.commerce-stage{padding-inline:20px}.graphic-form,.cart-sheet{padding:18px}.scene-art>svg{max-height:150px}.graphic-title{font-size:22px}.graphic-index{font-size:14px}}
@media(max-width:820px){.claren-graphic{width:100%;max-width:570px}.scene-art>svg{max-height:190px}.graphic-canvas,.commerce-stage{padding:24px 30px}.graphic-form,.cart-sheet{padding:24px}.graphic-browser{display:flex}.graphic-title{font-size:26px}}
@media(max-width:540px){.claren-graphic{margin:0}.scene-art>svg{max-height:160px}.graphic-canvas,.commerce-stage{padding:18px}.graphic-form,.cart-sheet{padding:18px}.graphic-browser{display:flex}.graphic-index{padding:12px 16px;font-size:14px}.graphic-title{font-size:22px}.graphic-kicker{font-size:14px}.graphic-verification{padding:17px 18px}.graphic-annotation p{font-size:14px;line-height:1.7}.cart-item{gap:13px}.graphic-field{margin-top:19px}.claren-graphic figcaption{font-size:14px}.graphic-browser i{font-size:14px}.field-outline{top:24px}}
@media print{.scene-art>svg{max-height:130px}.graphic-verification{background:white;border:1px solid var(--line)}.graphic-verification p,.graphic-verification strong{color:var(--ink)}}