.m-ui-shot{margin:28px 0 0}.m-ui-shot__frame{border:1px solid var(--m-line-soft);background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 18px 40px -30px #5a0a5880}.m-ui-shot__frame.is-fit{width:max-content;max-width:100%}.m-ui-shot__scroll{font-family:var(--m-app-sans);color:#0f172a;overflow-x:auto}.m-ui-shot figcaption{color:var(--m-ink-mute);margin-top:10px;font-size:13.5px;font-weight:300;line-height:1.5}.m-ui-bar{background:#fff;align-items:center;gap:8px;width:max-content;min-width:100%;padding:7px 12px;display:flex}.m-ui-bar__group{align-items:center;display:flex}.m-ui-bar__row{align-items:center;gap:2px;display:flex}.m-ui-seg{background:#fff;border:1px solid #e2e8f0;flex:none;justify-content:center;align-items:center;width:30px;height:30px;margin-left:-1px;display:inline-flex}.m-ui-seg:first-child{border-radius:8px 0 0 8px;margin-left:0}.m-ui-seg:last-child{border-radius:0 8px 8px 0}.m-ui-seg.is-on{background:#f1f5f9}.m-ui-icon{border-radius:8px;flex:none;justify-content:center;align-items:center;width:30px;height:30px;display:inline-flex}.m-ui-icon.is-dim{color:#94a3b8}.m-ui-icon.is-boxed{border:1px solid #e2e8f0}.m-ui-icon--wide{gap:3px;width:auto;padding:0 8px}.m-ui-chev{color:#64748b}.m-ui-knot{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;line-height:1}.m-ui-sep{background:#e2e8f0;flex:none;width:1px;height:22px;display:block}.m-ui-zoom{color:#475569;white-space:nowrap;font-size:12px}.m-ui-panel{background:#fff;width:210px;font-size:12px}.m-ui-panel__head{border-bottom:1px solid #e2e8f0;gap:8px;padding:8px 12px;display:grid}.m-ui-panel__title{font-family:var(--m-app-head);margin:0;font-size:12.5px;font-weight:600}.m-ui-panel__cta{color:#f8fafc;background:#0f172a;border-radius:8px;justify-content:center;align-items:center;gap:6px;height:28px;font-size:12px;font-weight:500;display:flex}.m-ui-panel__section{border-bottom:1px solid #e2e8f0;padding:10px 12px}.m-ui-panel__row{justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:8px;display:flex}.m-ui-panel__label{letter-spacing:.06em;text-transform:uppercase;color:#64748b;margin:0;font-size:11px;font-weight:600}.m-ui-panel__manage{color:#475569;text-underline-offset:2px;font-size:11px;text-decoration:underline}.m-ui-swatches{grid-template-columns:repeat(6,1fr);gap:5px;display:grid}.m-ui-swatch{aspect-ratio:1;border:1px solid #0f172a24;border-radius:6px}.m-ui-swatch.is-on{outline-offset:1px;outline:2px solid #0f172a}.m-tool-list{gap:2px;margin:20px 0 0;padding:0;list-style:none;display:grid}.m-tool-list li{margin:0}.m-tool{border-radius:12px;grid-template-columns:34px minmax(0,1fr);align-items:start;gap:12px;padding:10px 12px;display:grid}.m-tool:nth-child(odd){background:#fff9}.m-tool__key{color:#0f172a;background:#fff;border:1px solid #e2e8f0;border-radius:8px;flex:none;justify-content:center;align-items:center;width:30px;height:30px;display:inline-flex}.m-tool__body{min-width:0;color:var(--m-ink-soft);font-size:15.5px;font-weight:300;line-height:1.6}.m-tool__name{color:var(--m-ink);font-weight:600}.m-ui-warp{gap:3px;margin:0 0 10px;padding:0;list-style:none;display:grid}.m-ui-warp__row{border-radius:7px;align-items:center;gap:8px;padding:3px 4px;display:flex}.m-ui-warp__n{text-align:right;color:#94a3b8;flex:none;width:12px;font-size:10.5px}.m-ui-warp__swatch{border:1px solid #0f172a24;border-radius:6px;flex:none;width:22px;height:22px}.m-ui-warp__name{color:#475569;font-size:11.5px}.m-ui-panel__cta--soft{color:#0f172a;background:#fff;border:1px solid #e2e8f0}.m-knot-cases,.m-knot-types{gap:14px;margin:24px 0 0;display:grid}.m-knot-cases{grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr))}.m-knot-types{grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr))}.m-knot-case,.m-knot-type{border:1px solid var(--m-line-soft);background:#fff;border-radius:16px;justify-items:center;gap:10px;margin:0;padding:14px 12px 12px;display:grid}.m-knot-case svg,.m-knot-type svg{width:118px;height:auto}.m-knot-case figcaption,.m-knot-type figcaption{text-align:center;color:var(--m-ink-soft);justify-items:center;gap:3px;font-size:13.5px;font-weight:300;line-height:1.45;display:grid}.m-knot-type__name{color:var(--m-ink);align-items:center;gap:7px;font-weight:600;display:inline-flex}.m-knot-type__effect{color:var(--m-ink-mute);font-size:12.5px}