/* Navicade content and original SVGs; comparison composition follows Oruco. */
#work .head { margin-inline:auto; text-align:center; max-width:960px; }
#work .head .sub { margin-inline:auto; }
#work .compare-stage { position:relative; }
#work .compare-bar { position:relative; display:flex; justify-content:space-between; align-items:center; width:min(600px,100%); min-height:36px; margin:14px auto 30px; padding:7px 14px; border:0; border-radius:40px; background:#131313; color:var(--text-2); font-size:14px; line-height:20px; }
#work .compare-bar>span:not(.compare-bridge) { display:flex; align-items:center; gap:8px; }
#work .compare-bar .work-icon { width:16px; height:16px; color:currentColor; }
#work .compare-bar>span:last-child { color:var(--text); }
#work .compare-bridge { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:grid; place-items:center; width:64px; height:64px; background:var(--text); border-radius:50%; color:var(--page); font-size:23px; font-weight:450; }
#work .compare-panels { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; max-width:1120px; margin-inline:auto; }
#work .compare-panel { min-width:0; border:1px solid var(--hair); border-radius:18px; padding:20px; }
#work .compare-label { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
#work .compare-panel ul { list-style:none; padding:0; margin:0; }
#work .compare-panel li { display:grid; grid-template-columns:18px 1fr; gap:12px; align-items:center; min-height:64px; padding:12px 0; line-height:1.5; }
#work .compare-panel .work-icon { width:18px; height:18px; }
#work .compare-before { background:#0A0A0A; color:var(--text-2); }
#work .compare-before .work-icon { color:var(--text-2); }
#work .compare-after { background:var(--frame-bg); border-color:var(--line); color:var(--ink); }
#work .compare-after .work-icon { color:var(--start-ink); }
#work .comparison-close { text-align:center; margin-top:24px; }

#start .process-cards { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
#start .process-cards>li { min-width:0; }
#start .process-card-visual { min-height:220px; background:var(--doc-bg); border:1px solid var(--line); border-radius:12px; padding:18px; color:var(--ink); overflow:hidden; }
#start .process-stage { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:550; margin-bottom:16px; }
#start .process-stage>span { color:var(--start-ink); font-variant-numeric:tabular-nums; }
#start .process-card-visual>div:last-child { background:#fff; border:1px solid var(--line); border-radius:6px; padding:12px; }
#start .process-card-visual>div:last-child>span { display:block; font-size:11px; color:var(--ink-2); margin-bottom:10px; }
#start .process-card-visual .work-icon { width:17px; height:17px; color:var(--start-ink); }
#start .mini-map>div { position:relative; height:24px; display:flex; align-items:center; }
#start .mini-map i { position:absolute; left:0; top:1px; width:var(--bar-size); height:21px; background:rgba(139,92,246,.1); border-left:2px solid var(--violet); }
#start .mini-map small { position:relative; padding-left:8px; font-size:11px; }
#start .mini-brief>div,#start .mini-run>div { display:flex; gap:7px; align-items:center; margin-bottom:7px; font-size:11px; }
#start .mini-brief p,#start .mini-run p { display:flex; justify-content:space-between; gap:8px; font-size:11px; color:var(--ink-2); padding-top:5px; }
#start .mini-brief b,#start .mini-run b { color:var(--ink); font-weight:450; }
#start .mini-check>div { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
#start .mini-check small { font-size:11px; color:var(--ink-2); }
#start .mini-check .check-records { margin-block:10px; gap:6px 12px; }
#start .check-records i { height:5px; background:#D9DDE3; border-radius:2px; }
#start .check-records i:nth-child(even) { background:rgba(139,92,246,.45); }
#start .mini-check p { display:flex; align-items:center; gap:6px; font-size:11px; line-height:1.3; }
#start .mini-check strong { font-weight:450; }
#start .process-card-copy { padding:22px 2px 0; }
#start .process-card-copy h3 { font-size:19px; line-height:1.3; letter-spacing:-.02em; font-weight:500; margin-bottom:12px; min-height:50px; }
#start .process-card-copy p { color:var(--text-2); font-size:16px; line-height:1.65; }
#start .map-support { margin-top:64px; padding-top:48px; border-top:1px solid var(--hair); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:64px; align-items:center; }
#start .map-support-copy h3 { font-size:28px; letter-spacing:-.03em; margin-bottom:16px; }
#start .map-support-copy>p { color:var(--text-2); max-width:45ch; }
#start .map-support-copy .process-participation { margin-top:20px; font-size:15px; }
#start .map-support-copy .btns { margin-top:28px; }
#start .map { box-shadow:none; }

#example .workflow-explorer { display:grid; gap:8px; }
#example .workflow-detail { background:var(--page); border:1px solid transparent; border-bottom-color:var(--hair); border-radius:12px; }
#example .workflow-detail[open] { border-color:var(--hair); background:#090909; }
#example .workflow-detail summary { display:grid; grid-template-columns:24px 1fr 24px; align-items:center; gap:24px; list-style:none; cursor:pointer; padding:26px 24px; border-radius:12px; }
#example .workflow-detail summary::-webkit-details-marker { display:none; }
#example .workflow-detail summary { transition:background-color 160ms var(--ease-ui); }
#example .workflow-summary { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:32px; align-items:center; }
#example .workflow-summary strong { font-size:19px; font-weight:500; letter-spacing:-.015em; line-height:1.35; }
#example .workflow-summary>span { font-size:14px; color:var(--text-2); max-width:42ch; }
#example .workflow-detail .workflow-toggle { width:18px; height:18px; color:var(--text-2); }
#example .workflow-detail[open] .workflow-toggle { transform:rotate(45deg); }
#example .workflow-detail[open] summary { padding-bottom:28px; }
#example .workflow-detail-body { display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:36px; padding:0 24px 24px 72px; align-items:center; }
#example .workflow-copy { display:grid; gap:24px; }
#example .workflow-copy>div:last-child { padding-left:16px; border-left:1px solid var(--hair); }
#example .workflow-detail-body h4 { color:var(--text); font-size:13px; font-weight:500; margin-bottom:8px; }
#example .workflow-detail-body p { color:var(--text-2); font-size:16px; line-height:1.6; max-width:60ch; }
#example .workflow-visual { min-width:0; padding:22px; border-radius:8px; background:var(--doc-bg); color:var(--ink); }
#example .workflow-detail-body .workflow-visual-label { color:var(--ink-2); font-size:11px; letter-spacing:.04em; margin-bottom:24px; }
#example .workflow-flow { display:grid; grid-template-columns:minmax(0,.8fr) 20px minmax(0,1.1fr); gap:12px; align-items:center; }
#example .workflow-caption { display:block; color:var(--ink-2); font-size:11px; line-height:1.4; margin-bottom:12px; }
#example .workflow-source { display:flex; align-items:center; gap:8px; padding:10px 0; border-bottom:1px solid var(--line); font-size:12px; line-height:1.4; }
#example .workflow-source:last-child { border:0; }
#example .workflow-source .work-icon { width:16px; height:16px; color:var(--ink-2); }
#example .workflow-arrow .work-icon { width:20px; height:20px; color:var(--start-ink); }
#example .workflow-result { background:var(--frame-bg); border:1px solid var(--line); border-radius:6px; padding:16px; }
#example .workflow-result h5 { display:flex; align-items:flex-start; gap:8px; margin:0 0 16px; font-size:14px; line-height:1.4; font-weight:550; }
#example .workflow-result h5 .work-icon { width:18px; height:18px; color:var(--start-ink); }
#example .workflow-result ul { padding:0; margin:0; list-style:none; }
#example .workflow-result li { padding:9px 0; border-top:1px solid var(--line); font-size:12px; line-height:1.45; }
#example .workflow-action { margin-top:32px; }

@media(max-width:1100px) {
 #start .process-cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px 28px; }
 #start .process-card-visual { min-height:220px; padding:18px 26px; }
 #start .process-card-visual>div:last-child { max-width:300px; margin-inline:auto; }
 #start .process-card-copy h3 { min-height:0; }
 #start .map-support { gap:40px; }
 #work .compare-panel li { min-height:76px; }
 #example .workflow-detail-body { padding-left:24px; gap:24px; grid-template-columns:1fr 1.2fr; }
 #example .workflow-flow { grid-template-columns:1fr; gap:12px; }
 #example .workflow-sources { display:flex; flex-wrap:wrap; gap:6px 14px; }
 #example .workflow-sources>.workflow-caption { flex-basis:100%; margin-bottom:0; }
 #example .workflow-source { padding:4px 0; border:0; }
 #example .workflow-arrow { justify-self:center; transform:rotate(90deg); }
}
@media(max-width:720px) {
 #work .compare-bar { font-size:12px; padding:10px 12px; min-height:48px; }
 #work .compare-bar>span:not(.compare-bridge) { width:calc(50% - 26px); gap:6px; }
 #work .compare-bar>span:last-child { text-align:right; justify-content:flex-end; }
 #work .compare-bridge { width:52px; height:52px; font-size:18px; }
 #work .compare-panels { grid-template-columns:1fr; gap:20px; }
 #work .compare-panel { padding:20px; }
 #work .compare-label { position:static; width:auto; height:auto; overflow:visible; clip-path:none; white-space:normal; margin:0 0 12px; font-size:13px; font-weight:550; }
 #work .compare-after .compare-label { color:var(--start-ink); }
 #work .compare-panel li { min-height:64px; padding:12px 0; gap:12px; }
 #work .comparison-close { font-size:14px; }
 #start .map-support { grid-template-columns:1fr; margin-top:40px; padding-top:32px; gap:32px; }
 #start .map-support-copy h3 { font-size:25px; }
 #example .workflow-detail summary { padding:22px 16px; gap:12px; grid-template-columns:20px 1fr 18px; }
 #example .workflow-detail summary>.work-icon { width:20px; height:20px; }
 #example .workflow-summary { grid-template-columns:1fr; gap:8px; }
 #example .workflow-summary strong { font-size:18px; }
 #example .workflow-summary>span { font-size:14px; }
 #example .workflow-detail-body { grid-template-columns:1fr; gap:24px; padding:0 16px 16px; }
 #example .workflow-visual { padding:18px; }
 #example .workflow-detail-body .workflow-visual-label { margin-bottom:18px; }
}
@media(max-width:560px) {
 #start .process-cards { grid-template-columns:1fr; gap:36px; }
 #start .process-card-visual { min-height:220px; }
 #start .process-card-copy { padding-top:18px; }
 #start .process-card-copy h3 { margin-bottom:10px; }
 #start .map .frame-top { align-items:flex-start; }
 #start .map .tag { white-space:normal; text-align:right; }
}
@media(hover:hover) and (pointer:fine) { #example .workflow-detail summary:hover { background:#090909; } }
@media(prefers-reduced-motion:reduce) { #example .workflow-toggle,#example .workflow-detail summary { transition:none; } }