/* Drawing kit: trace, draw a shape, draw on a plane. Colours come from the app tokens (light and dark). */
.xd { display: grid; justify-items: center; gap: 12px; width: 100%; }
.xd-board { position: relative; width: min(100%, 420px); aspect-ratio: 1; border-radius: 14px; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; --xd-ink: var(--accent); --xd-show: var(--show); }
.t-pre .xd-board { width: min(100%, 460px); }
.xd-board.plane { width: min(100%, 400px); }
.xd-under, .xd-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.xd-under > svg, .xd-under .vis.plane { display: block; width: 100%; height: 100%; max-width: none; border-radius: 14px; }
.xd-canvas { touch-action: none; cursor: crosshair; border-radius: 14px; }
.xd-board.locked .xd-canvas { cursor: default; }
.xd-paper { fill: var(--surface); stroke: var(--line); stroke-width: 1; }
.xd-rule { stroke: var(--line); stroke-width: .7; fill: none; }
.xd-rule.mid { stroke-dasharray: 2 3; }
.xd-guide { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke: var(--ink-3); }
.xd-guide.g-dots { stroke-width: 5.2; stroke-dasharray: .1 7.6; opacity: .6; }
.xd-guide.g-dash { stroke-width: 3; stroke-dasharray: 5 5; opacity: .5; }
.xd-guide.g-faint { stroke-width: 7; opacity: .13; }
.xd-start { fill: var(--leaf); }
.xd-arrow { fill: none; stroke: var(--ink-2); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.xd-num { font: 700 9px var(--round); fill: var(--ink-2); }
.xd-ink { fill: none; stroke: var(--accent); stroke-width: 4.4; stroke-linecap: round; stroke-linejoin: round; }
.xd-cur { fill: var(--accent-soft); }
.xd-tools { display: flex; gap: 12px; justify-content: center; }
.xd-tool { width: 48px; height: 48px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); display: grid; place-items: center; padding: 0; }
.xd-tool .ic { width: 22px; height: 22px; }
.xd-tool:active { transform: translateY(1px); }
.t-pre .xd-tool { width: 64px; height: 64px; border-radius: 20px; }
.t-pre .xd-tool .ic { width: 30px; height: 30px; }
.xd-wordrow { display: flex; justify-content: center; width: 100%; }
.xd-wordrow .vis.xd-word { width: min(100%, 260px); height: auto; color: var(--ink); }
/* planes */
.xd-plane-bg { fill: var(--surface); }
.xd-fn { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.xd-fn.ink { stroke: var(--ink-2); }
.xd-fn.ref { stroke: var(--ink-3); stroke-dasharray: 7 6; stroke-width: 2.6; }
.xd-fn.goal { stroke: var(--accent-2); stroke-width: 3.4; }
.xd-pt { fill: var(--coral); }
.xd-rect { fill: var(--sun); fill-opacity: .32; stroke: var(--sun); stroke-width: 1.5; }
.xd-area { fill: var(--accent-2); fill-opacity: .18; }
/* pictures in learn steps, examples and feedback */
.step-vis > .vis.xd-glyph { width: 200px; height: 200px; }
.t-pre .step-vis > .vis.xd-glyph { width: 230px; height: 230px; }
.step-vis > .vis.xd-word { width: min(100%, 320px); height: auto; }
.step-vis > .vis.xd-plot { width: min(100%, 320px); height: auto; border-radius: 12px; }
.fb-vis .vis.xd-plot { max-height: 200px; width: auto; }
.node .vis.xd-glyph, .node .vis.xd-word { width: 64%; height: 64%; }
.model .xd-free { max-width: 460px; }
.xd-tanpic { width: min(100%, 340px); touch-action: none; cursor: ew-resize; border-radius: 12px; }
.xd-tanpic .vis.xd-plot { width: 100%; height: auto; display: block; }
.xd-pt2 { fill: var(--sky); }
.xd-handle { stroke: var(--surface); stroke-width: 3; }
.xd-tanout { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.xd-tanout b { color: var(--ink); }