:root{font-family:Inter,"Segoe UI",Arial,sans-serif;color:#182c38;background:#f4f6f8;font-synthesis:none;--accent:#87b8e8;--stage:#142d3a;--muted:#61737f}*{box-sizing:border-box}body{margin:0}button,select,input{font:inherit}button,summary,select{cursor:pointer}button{border:1px solid #dce4e9;border-radius:9px;background:white;color:inherit;font-size:14px;font-weight:550;padding:10px 15px;transition:background .15s,border-color .15s}button:hover{background:#edf2f5}button:disabled{opacity:.35;cursor:default}button:focus-visible,summary:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,#viewport:focus-visible{outline:3px solid #87b8e8;outline-offset:4px}header{height:74px;padding:0 max(24px,calc((100vw - 1160px)/2));display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e1e7ec;background:#ffffffb8}.brand{display:flex;align-items:center;gap:10px;color:#182c38;text-decoration:none;font-size:18px;font-weight:600;letter-spacing:2px}.brand b{font-weight:350;margin-left:-4px}.brand-mark{width:39px;height:39px;border-radius:12px;background:#142d3a;color:#87b8e8;font-size:34px;line-height:34px;text-align:center;letter-spacing:0}.prototype{font-size:12px;color:#687b88}main{max-width:1160px;margin:auto;padding:30px 0 22px}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:23px}h1{font-size:34px;line-height:1.2;letter-spacing:-1.2px;font-weight:650;margin:0}.page-heading p{font-size:14px;color:#657a87;margin:8px 0 0}.mode-switch{display:flex;gap:3px;padding:4px;border:1px solid #dde5ea;border-radius:12px;background:#eaf0f3}.mode-switch button{background:transparent;border-color:transparent;padding:11px 17px;font-size:14px;color:#657b89}.mode-switch button[aria-pressed=true]{background:#fff;color:#182c38;box-shadow:0 2px 7px #182c3810;border-color:#e4eaee}.viewer-card{background:radial-gradient(ellipse at 50% 25%,#223f4d,#142d3a 65%);color:#eef4f7;border-radius:20px;border:1px solid #263f4c;box-shadow:0 18px 32px -22px #142d3a88;overflow:hidden}.instruction{padding:25px 28px 5px;display:flex;align-items:flex-start;gap:16px}.step-counter{background:#ffffff0a;border:1px solid #ffffff18;border-radius:12px;padding:11px 13px;font-size:23px;color:#87b8e8;font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1}.step-counter small{font-size:14px;color:#8ea7b6}.instruction h2{font-size:22px;line-height:1.3;letter-spacing:-.3px;font-weight:600;margin:1px 0 7px}.instruction p{font-size:15px;color:#bbcbd5;line-height:1.6;margin:0;max-width:780px;min-height:48px}#viewport{height:415px;position:relative;touch-action:none;cursor:grab;isolation:isolate}#viewport:active{cursor:grabbing}#viewport canvas{display:block;width:100%;height:100%}#viewport::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse,#a4c6db09,transparent 65%);z-index:-1;pointer-events:none}#loading{position:absolute;inset:40% 0;text-align:center;color:#c5d3dd}.gesture-hint{position:absolute;left:28px;bottom:24px;color:#8ea7b6;font-size:13px;pointer-events:none}.zoom-tools{position:absolute;right:28px;bottom:16px;display:flex;gap:5px}.zoom-tools button{background:#0d2531a8;border-color:#44617080;color:#d6e4eb;font-size:20px;padding:4px 12px;min-width:40px;min-height:40px}.zoom-tools button:hover{background:#34505e}.player{padding:10px 28px 20px}.timeline-label{display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:14px;color:#c2d3df}#motion-time{color:#91aab9;font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}#progress{appearance:none;-webkit-appearance:none;display:block;width:100%;height:5px;border-radius:10px;margin:23px 0;background:linear-gradient(90deg,#87b8e8 0%,#87b8e8 var(--played,0%),#536d7d70 var(--played,0%),#536d7d70 100%);cursor:pointer}#progress::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:15px;height:15px;background:#87b8e8;border:3px solid #c7e2fc;border-radius:50%}#progress::-moz-range-thumb{width:11px;height:11px;background:#87b8e8;border:3px solid #c7e2fc;border-radius:50%}.playback-controls{display:flex;align-items:center;gap:12px}.playback-controls #animation-play{background:#87b8e8;border-color:#87b8e8;color:#142d3a;min-width:190px;padding:12px 20px;font-size:15px;font-weight:650}.playback-controls #animation-play:hover{background:#a6ccf0}.playback-controls #restart-animation{background:transparent;border-color:transparent;color:#bed1df;font-size:14px}.playback-controls label{margin-left:auto;display:flex;align-items:center;gap:9px;font-size:14px;color:#afc4d1}.playback-controls select{border:1px solid #4a667780;background:#1c3746;color:#e3edf3;border-radius:8px;font-size:14px;padding:8px 10px}#practice-status{font-size:14px;line-height:1.6;color:#c7e2fc;margin:16px 0 0;padding:10px 13px;border-left:2px solid #87b8e8;background:#ffffff04}#practice-status[hidden]{display:none}.step-navigation{padding:0 28px 20px;display:flex;gap:9px;align-items:center}.step-navigation>button{background:transparent;color:#c6d5df;border-color:#49647480;font-size:16px;width:40px;height:38px;padding:0}#step-dots{display:flex;gap:7px;flex:1}#step-dots button{border:1px solid #4b667455;background:transparent;color:#b7cbd8;font-size:14px;flex:1;padding:9px 0;border-radius:7px}#step-dots button[aria-current=step]{background:#87b8e8;color:#142d3a;border-color:#87b8e8;font-weight:650}.viewer-card button:hover:not(#animation-play){background:#ffffff15}#step-dots button[aria-current=step]:hover{background:#87b8e8}.visual-options{border-top:1px solid #adc8d318}.visual-options summary{padding:18px 28px;display:flex;align-items:center;gap:12px;font-size:14px;color:#d2e1e9;list-style:none}.visual-options summary::after,.photo-reference summary::after{content:'+';margin-left:auto;font-size:20px;font-weight:400}.visual-options[open] summary::after,.photo-reference[open] summary::after{content:'−'}.visual-options summary span{color:#8da7b7;font-size:13px}.options-content{padding:0 28px 22px;display:flex;gap:12px 18px;align-items:center;flex-wrap:wrap}.options-content button{background:transparent;color:#bdcfdb;border-color:#42617180;font-size:13px;padding:9px 12px}.view-presets{display:flex;gap:3px}.view-presets button.selected{background:#405b6d;color:#fff}.options-content label{display:flex;align-items:center;gap:7px;font-size:14px;color:#bdcfdb}.options-content input{width:17px;height:17px;accent-color:#87b8e8}.photo-reference{background:white;border:1px solid #dee6eb;border-radius:14px;margin-top:18px;overflow:hidden}.photo-reference summary{padding:19px 24px;font-size:15px;font-weight:550;display:flex;align-items:center;gap:15px;list-style:none}.photo-reference summary #photo-count{font-size:12px;color:#6c818e;background:#f1f5f7;border-radius:6px;padding:5px 8px}.reference-content{display:grid;grid-template-columns:minmax(0,480px) 1fr;gap:26px;padding:0 24px 24px}.reference-content img{width:100%;aspect-ratio:800/533;object-fit:contain;border-radius:10px;background:#f2f5f6}.reference-content h3{font-size:17px;font-weight:600;margin:6px 0 10px}.reference-content p{font-size:15px;line-height:1.7;color:#617785}.reference-content #structure{font-size:14px;border:0;background:transparent;color:#375a71;padding:10px 0}.reference-content .source{font-size:12px}.source a{color:#597488;text-underline-offset:3px}footer{font-size:12px;color:#758692;line-height:1.7;padding:19px 3px 0;max-width:980px}@media(max-width:1220px){main{padding:26px 24px 20px}}@media(max-width:760px){header{height:64px;padding:0 18px}.brand{font-size:16px}.brand-mark{width:34px;height:34px;font-size:30px;line-height:30px}.prototype{font-size:11px}main{padding:22px 12px 18px}.page-heading{display:block;margin-bottom:18px;padding:0 3px}h1{font-size:29px}.page-heading p{font-size:13px;margin:7px 0 16px}.mode-switch{width:100%;display:flex}.mode-switch button{flex:1;font-size:13px;padding:11px 7px}.viewer-card{border-radius:16px}.instruction{padding:20px 17px 0;gap:11px}.step-counter{font-size:20px;padding:10px}.step-counter small{font-size:12px}.instruction h2{font-size:19px}.instruction p{font-size:14px;line-height:1.6;min-height:68px}#viewport{height:335px}.gesture-hint{font-size:12px;left:18px;bottom:20px}.zoom-tools{right:17px;bottom:13px}.zoom-tools button{width:37px;min-width:37px;min-height:37px}.player{padding:9px 17px 18px}.timeline-label{font-size:12px}#motion-time{font-size:12px}.playback-controls{flex-wrap:wrap;gap:8px}.playback-controls #animation-play{flex:1;min-width:180px;padding:12px 13px;font-size:14px}.playback-controls #restart-animation{padding:10px;font-size:13px}.playback-controls label{width:100%;justify-content:flex-end;margin-top:5px;font-size:13px}.playback-controls select{font-size:13px}.step-navigation{padding:0 17px 18px;gap:6px}#step-dots{gap:5px}#step-dots button{font-size:13px}.step-navigation>button{width:33px;flex-shrink:0}.visual-options summary{padding:17px}.visual-options summary span{font-size:12px}.options-content{padding:0 17px 20px;gap:15px}.options-content label{font-size:13px}.view-presets{width:100%;gap:5px}.view-presets button{flex:1;padding:9px}.photo-reference{margin-top:14px;border-radius:12px}.photo-reference summary{padding:17px;font-size:14px}.reference-content{grid-template-columns:1fr;padding:0 17px 18px;gap:12px}.reference-content h3{font-size:16px}.reference-content p{font-size:14px}footer{font-size:11px;padding:16px 5px 0}}@media(prefers-reduced-motion:reduce){button{transition:none}}
@media(max-width:760px){#viewport .zoom-tools{top:10px;bottom:auto}}
.photo-navigation{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}.photo-navigation button{font-size:14px;padding:10px 13px}.photo-navigation span{font-size:13px;color:#617785;white-space:nowrap}@media(max-width:400px){.photo-navigation button{padding:10px;font-size:13px}}

/* Unified blue-petroleum interface; reference photographs remain original. */
:root{color:#e3edf4;background:#142d3a}
body{background:#142d3a}
header{background:#142d3a;border-color:#314b5b}
.brand{color:#e3edf4}.brand-mark{background:#213e4f;color:#87b8e8}.prototype{color:#a9bfce}
.page-heading p{color:#adbfcc}
.mode-switch{background:#102733;border-color:#365363}
.mode-switch button{color:#b9ccd8}
.mode-switch button[aria-pressed=true]{background:#30536a;color:#eef6fb;border-color:#4c728b;box-shadow:none}
.viewer-card{background:radial-gradient(ellipse at 50% 25%,#203e4e,#142d3a 65%);border-color:#365160;box-shadow:none}
.step-counter{color:#87b8e8}
.photo-reference{background:#142d3a;border-color:#365160;color:#e3edf4}
.photo-reference summary #photo-count{color:#c7dbe8;background:#254354}
.reference-content p,.photo-navigation span{color:#b7cad7}
.reference-content #structure{color:#afd3f4}
.photo-navigation button{background:#254354;border-color:#496878;color:#e3edf4}
.photo-navigation button:hover{background:#34586d}
footer{color:#9fb7c7}
.revision-notice{padding:14px 18px;border:1px solid #42657c;border-radius:12px;background:#203f51;color:#d7e7f2;font-size:14px;line-height:1.6}
.knot-selector-label{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 25px;color:#a9c9df;font-size:13px}.knot-selector-label select{max-width:65%;background:#203f51;border:1px solid #42657c;color:#e0effa;padding:10px 14px;border-radius:9px;font-size:14px}.step-navigation #step-dots{min-width:0;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#55778e transparent}.step-navigation #step-dots button{flex:1 0 34px;min-width:34px;padding-left:6px;padding-right:6px}[hidden]{display:none!important}

.brand{letter-spacing:0;min-width:0}.brand-mark{flex-shrink:0}.brand-name{line-height:1.2}header{gap:16px}header>a:last-child{flex-shrink:0}@media(max-width:760px){.brand-name{font-size:13px;max-width:165px}.brand{gap:8px}header{gap:10px}}