:root{color:#e9f1e9;font-synthesis:none;--ink:#0b171a;--panel:#f3f3e9;--text:#263d39;--muted:#778f87;--line:#d8e1d7;--green:#b9dfbd;--sage:#9fc7ad;--warm:#e7b590;background:#0b171a;font-family:Inter,-apple-system,BlinkMacSystemFont,PingFang TC,Microsoft JhengHei,sans-serif}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:default;opacity:.38}button,select{touch-action:manipulation}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline-offset:3px;outline:2px solid #cf9562}button{transition:background .16s,border-color .16s,color .16s}button svg{stroke:currentColor;fill:none;stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;width:17px;height:17px}input[type=range]{accent-color:#648d76;cursor:pointer;width:100%;min-height:28px}input[type=checkbox]{accent-color:#638f74;cursor:pointer;width:16px;height:16px}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;width:1px;height:1px;padding:0;position:absolute;overflow:hidden}h1,h2,h3,p{margin:0}.app-header{background:#0d1b1d;border-bottom:1px solid #23403e;justify-content:space-between;align-items:center;gap:20px;height:88px;padding:0 30px;display:flex}.brand{align-items:center;gap:15px;display:flex}.brand-icon{color:#c0e0bc;border:1px solid #3a5c51;border-radius:12px;place-items:center;width:38px;height:38px;font:italic 30px Georgia,serif;display:grid}.wordmark{letter-spacing:-1px;font:italic 29px Georgia,Times New Roman,serif}.wordmark span{color:#b3cea6}.brand p{letter-spacing:.16em;color:#91a99e;margin-top:4px;font-size:11px}.header-tag{color:#9cb4a4;border-left:1px solid #324d44;padding-left:21px;font-size:12px;line-height:1.7}.header-actions{align-items:center;gap:8px;display:flex}.tool-button{color:#c6d8c9;background:0 0;border:1px solid #37544c;border-radius:8px;justify-content:center;align-items:center;gap:7px;min-height:40px;padding:9px 13px;font-size:12px;display:inline-flex}.tool-button:hover{background:#1e3831}.tool-button.primary{color:#1a332b;background:#c7dfbd;border-color:#c7dfbd}.tool-button.primary:hover{background:#e2eecf}.workspace{grid-template-columns:244px minmax(300px,1fr) 310px;height:calc(100svh - 88px);min-height:740px;display:grid}.left-panel{scrollbar-width:thin;background:#102123;border-right:1px solid #2a4140;padding:27px 20px 18px;overflow-y:auto}.eyebrow{letter-spacing:.16em;text-transform:uppercase;color:#99b9a6;align-items:center;gap:7px;font-size:10px;display:flex}.eyebrow .number{color:#d0d5a7;font:italic 17px Georgia}.intro h1{letter-spacing:.03em;margin-top:12px;font-size:22px;font-weight:500;line-height:1.55}.intro p{color:#a0b1a6;margin:13px 0 21px;font-size:12px;line-height:1.85}.section-label{letter-spacing:.05em;color:#a4bcad;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:11px;display:flex}.scenario-list{gap:7px;display:grid}.scenario{text-align:left;color:#c2d4c6;background:#112527;border:1px solid #2b4640;border-radius:9px;align-items:center;gap:10px;width:100%;padding:12px 10px;display:flex}.scenario .scene-icon{color:#83a497;place-items:center;width:28px;height:34px;display:grid}.scenario .scene-icon svg{stroke-width:1.3px;width:24px;height:29px}.scenario strong{font-size:12px;font-weight:600;display:block}.scenario small{color:#8fa69c;margin-top:4px;font-size:10px;line-height:1.6;display:block}.scenario.active{color:#233d2e;background:#cfe0c2;border-color:#cfe0c2}.scenario.active small{color:#5a7361}.scenario.active .scene-icon{color:#4c6c55}.scenario:not(.active):hover{background:#1b3331}.mode-section{border-top:1px solid #2b4440;margin-top:24px;padding-top:19px}.mode-grid{grid-template-columns:1fr 1fr;gap:7px;display:grid}.mode{color:#a8bfb2;background:#122828;border:1px solid #304b43;border-radius:7px;justify-content:center;align-items:center;gap:8px;min-height:57px;font-size:11px;display:flex}.mode.active{color:#e1eac9;background:#2c4434;border-color:#8daf8f}.mode:hover{border-color:#92b99a}.mode-caption{color:#8ba699;min-height:55px;margin-top:11px;font-size:10px;line-height:1.8}.color-row{color:#9db6a6;align-items:center;gap:9px;margin-top:6px;font-size:11px;display:flex}.color-row select{color:#b6cabb;background:#102526;border:1px solid #345247;border-radius:6px;flex:1;min-width:0;padding:6px;font-size:11px}.toggle-stack{gap:8px;margin-top:16px;display:grid}.check-line{color:#a8bdaf;align-items:center;gap:7px;min-height:26px;font-size:11px;display:flex}.check-line input{margin:0}.journey{background:#19312b;border:1px solid #2f5042;border-radius:10px;margin-top:23px;padding:14px 12px}.journey .overline{letter-spacing:.14em;color:#91b59b;font-size:9px}.journey p{color:#ccdcc9;margin-top:6px;font-size:12px;line-height:1.8}.journey button{color:#d6dba8;background:0 0;border:0;align-items:center;gap:7px;margin-top:11px;padding:2px 0;font-size:11px;display:flex}.journey #guide-step{color:#99ba9f;margin-top:9px;font-size:10px}.stage{isolation:isolate;background:radial-gradient(at 50% 47%,#21453e 0%,#10292a 38%,#0b171a 78%);flex-direction:column;min-width:0;display:flex;position:relative;overflow:hidden}.stage-top{pointer-events:none;z-index:2;justify-content:space-between;align-items:start;gap:15px;padding:27px 28px 16px;display:flex;position:absolute;top:0;left:0;right:0}.stage-top h2{letter-spacing:.04em;color:#edf1de;margin-top:7px;font-size:21px;font-weight:400;line-height:1.55}.stage-top p{color:#a1b5a2;margin-top:8px;font-size:11px;line-height:1.7}.model-pill{white-space:nowrap;color:#c9d5b8;background:#102521c9;border:1px solid #4b6350;border-radius:20px;align-items:center;gap:5px;padding:8px 10px;font-size:10px;line-height:1;display:inline-flex}.status-dot{background:#a9d3a6;border-radius:50%;width:5px;height:5px;display:inline-block}.viewport{flex:1;width:100%;min-height:340px;position:relative;overflow:hidden}.viewport canvas{touch-action:none;width:100%;height:100%;display:block}.canvas-fallback{color:#d7e6d8;padding:170px 30px 30px;line-height:1.8}.stage-coordinate{z-index:2;color:#829e91;pointer-events:none;font:10px ui-monospace,SFMono-Regular,monospace;position:absolute;top:133px;left:28px}.stage-bottom{z-index:2;justify-content:space-between;align-items:center;gap:10px;display:flex;position:absolute;bottom:176px;left:25px;right:25px}.stage-hint{color:#8fa79a;max-width:240px;font-size:10px;line-height:1.7}.stage-tools{gap:5px;display:flex}.stage-tools button{color:#bdd2b8;background:#17332de8;border:1px solid #3e5c49;border-radius:7px;align-items:center;gap:5px;min-height:35px;padding:7px 10px;font-size:10px;display:flex}.stage-tools button.active{color:#2b4435;background:#d5debb}.stage-tools button:hover{border-color:#c7d8b0}.canvas-legend{color:#aabeb0;z-index:2;pointer-events:none;flex-wrap:wrap;gap:10px;font-size:9px;display:flex;position:absolute;bottom:230px;left:27px}.legend-dot{border-radius:50%;width:6px;height:6px;margin-right:4px;display:inline-block}.sequence-dock{z-index:3;background:#102421e8;border-top:1px solid #304c42;min-height:155px;padding:17px 25px 15px;position:relative}.sequence-head{color:#aabda9;justify-content:space-between;gap:10px;margin-bottom:12px;font-size:10px;line-height:1.7;display:flex}.sequence-head strong{color:#dce6cc;font-weight:500}.sequence{scrollbar-width:thin;gap:5px;padding-bottom:6px;display:flex;overflow-x:auto}.residue{color:#cddcc0;background:#17312b;border:1px solid #3b5440;border-radius:6px;flex:1;place-items:center;gap:4px;min-width:32px;min-height:45px;padding:8px 3px;font:14px ui-monospace,monospace;display:grid}.residue small{color:#91a98f;font:8px ui-monospace,monospace}.residue.active{color:#233b2d;background:#d8e3bd;border-color:#d8e3bd}.residue.active small{color:#566b49}.residue:hover{border-color:#cbd7a3}.sequence-caption{color:#819e88;justify-content:space-between;gap:10px;margin-top:7px;font-size:9px;line-height:1.6;display:flex}.right-panel{background:var(--panel);color:var(--text);scrollbar-width:thin;padding:22px 23px 25px;overflow-y:auto}.panel-heading{color:#6b8271;letter-spacing:.03em;justify-content:space-between;align-items:center;gap:8px;font-size:11px;display:flex}.panel-heading span{font-size:10px}.selection-title{justify-content:space-between;align-items:center;margin:13px 0 9px;display:flex}.selection-title h3{letter-spacing:.02em;font-size:22px;font-weight:500}.selection-title .type-badge{color:#516d5c;border:1px solid #bccdc0;border-radius:5px;padding:5px 7px;font:10px ui-monospace,monospace}.mutate-row{color:#718474;justify-content:space-between;align-items:center;gap:6px;font-size:10px;line-height:1.7;display:flex}.mutate-row select{color:#314f3b;background:#f7f8ef;border:1px solid #c4d2c4;border-radius:6px;max-width:164px;padding:7px;font-size:11px}.angle-section{margin-top:17px}.angle-control{margin-bottom:6px}.angle-control .angle-head{color:#65806a;justify-content:space-between;align-items:center;font-size:11px;display:flex}.angle-control .angle-symbol{color:#36543f;margin-right:7px;font:italic 18px Georgia}.angle-value{color:#385743;align-items:center;gap:4px;font-size:11px;display:flex}.angle-value input{color:#2d4e39;text-align:right;background:0 0;border:0;border-bottom:1px solid #c3cfbb;width:49px;padding:3px 0;font:14px ui-monospace,monospace}.angle-control input[type=range]{height:27px;margin:4px 0 0}.torsion-note{color:#7a8d78;min-height:31px;margin-top:4px;font-size:9px;line-height:1.65}.rama-section{border-top:1px solid var(--line);margin-top:14px;padding-top:14px}.text-button{color:#4c775a;background:0 0;border:0;align-items:center;gap:4px;min-height:27px;padding:5px 0;font-size:10px;display:inline-flex}.rama-canvas-wrap{background:#e8ede0;border:1px solid #d3decb;border-radius:8px;margin-top:9px;position:relative;overflow:hidden}.rama-canvas-wrap canvas{aspect-ratio:1;touch-action:none;cursor:crosshair;width:100%;height:auto;display:block}.rama-caption{color:#768872;justify-content:space-between;gap:6px;margin-top:7px;font-size:9px;line-height:1.75;display:flex}.observations{border-top:1px solid var(--line);margin-top:18px;padding-top:14px}.metric-grid{grid-template-columns:1fr 1fr;gap:10px;margin-top:10px;display:grid}.metric{background:#eff2e5;border:1px solid #d4dece;border-radius:7px;padding:9px 10px}.metric label{color:#72896f;font-size:9px;display:block}.metric strong{color:#35523a;margin-top:4px;font:22px Georgia;display:block}.metric strong small{color:#75846b;font:9px system-ui}.metric.alert strong{color:#a25b4b}.compare-delta{color:#6c8167;margin-top:8px;font-size:10px;line-height:1.7}.contact-list{gap:4px;margin-top:10px;display:grid}.contact-item{text-align:left;color:#567451;background:0 0;border:0;border-radius:5px;justify-content:space-between;align-items:center;gap:5px;min-height:29px;padding:7px 5px;font-size:10px;display:flex}.contact-item:hover{background:#e0e9d6}.contact-item .contact-number{white-space:nowrap;font:10px ui-monospace,monospace}.empty-note{color:#809076;margin-top:5px;font-size:10px;line-height:1.7}.insight{color:#5c7558;border-left:2px solid #92b98b;margin-top:14px;padding-left:10px;font-size:10px;line-height:1.9}.insight b{color:#335737;font-weight:500}.inspect-section{border-top:1px solid var(--line);margin-top:18px;padding-top:15px}.atom-summary{color:#5a7657;margin:9px 0;font-size:11px}.element-buttons{gap:6px;display:flex}.element-buttons button{color:#506c48;background:#f8faee;border:1px solid #c6d5bf;border-radius:6px;min-width:35px;min-height:32px;font:12px ui-monospace,monospace}.element-buttons button.active{background:#d9e6cb;border-color:#8baa7d}.fineprint{color:#7b8d72;margin-top:9px;font-size:9px;line-height:1.8}.extra-panel{border-top:1px solid #3a5147;margin-top:16px;padding-top:15px}.extra-panel .panel-heading{color:#b9c8ab}.extra-panel .check-line{color:#b4c5a9;margin-top:9px}.range-label{color:#a8bc9d;justify-content:space-between;align-items:center;margin-top:9px;font-size:10px;display:flex}.range-label select{color:#bfd1ad;background:#152e27;border:1px solid #426345;border-radius:4px;padding:3px;font-size:10px}.extra-panel input[type=range]{accent-color:#b8cfa5;min-height:22px}.extra-panel input:disabled{opacity:.3}.dielectric-row{color:#a8bc9d;justify-content:space-between;align-items:center;gap:5px;margin-top:9px;font-size:10px;display:flex}.dielectric-row select{color:#c4d1b5;background:#152e27;border:1px solid #416345;border-radius:4px;max-width:140px;padding:5px;font-size:10px}.probe-status{color:#b5ca9d;margin-top:8px;font-size:10px;line-height:1.7}.probe-status.blocked{color:#e6a58b}.probe-position{color:#adbe9e;grid-template-columns:16px 1fr 29px;align-items:center;gap:6px;font-size:9px;display:grid}.mobile-nav{display:none}.toast{z-index:20;color:#294333;opacity:0;pointer-events:none;background:#dce5c7;border:1px solid #abbd9a;border-radius:9px;max-width:calc(100vw - 32px);padding:12px 18px;font-size:12px;line-height:1.5;transition:opacity .2s;position:fixed;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 10px 35px #06151260}.toast.show{opacity:1}.compute-badge{z-index:2;color:#bfd1ad;background:#1d352bea;border:1px solid #455c44;border-radius:6px;padding:6px 9px;font-size:9px;display:none;position:absolute;top:132px;right:25px}.compute-badge.visible{display:block}.terrain-label{color:#b9cda9;z-index:2;font-size:10px;line-height:1.8;display:none;position:absolute;top:135px;left:27px}.stage.terrain-on .terrain-label{display:block}.stage.terrain-on .stage-coordinate,.stage.terrain-on .canvas-legend{display:none}.guide-focus{outline-offset:4px;outline:2px solid #dcb88c!important}dialog{color:#2e4c3b;background:#f2f4e7;border:1px solid #6a8e6a;border-radius:16px;width:min(680px,100vw - 28px);max-height:85svh;padding:28px;box-shadow:0 30px 100px #001d16aa}dialog::backdrop{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#031710b0}.dialog-head{justify-content:space-between;align-items:center;gap:10px;display:flex}.dialog-head h2{font-size:22px;font-weight:500}.dialog-head button{color:#4b6846;background:0 0;border:1px solid #b9cdb3;border-radius:6px;min-width:34px;min-height:34px;font-size:18px}.model-info h3{margin:21px 0 6px;font-size:13px}.model-info p,.model-info li{color:#577051;font-size:12px;line-height:1.9}.model-info a{color:#326449}.model-info code{font:11px ui-monospace,monospace}.dialog-footer{gap:8px;margin-top:22px;display:flex}.dialog-footer .tool-button{color:#425e3c;border-color:#a8bca2}.dialog-footer .tool-button:hover{background:#dce7cb}.source-links{flex-wrap:wrap;gap:8px;margin-top:8px;font-size:11px;display:flex}.experiment-name{color:#a1b89c;border-top:1px solid #2a4538;margin-top:14px;padding-top:12px;font-size:10px}.keyboard-hint{color:#789685;margin-top:6px;font-size:9px}.range-value{font:10px ui-monospace,monospace}@media (width>=1600px){.workspace{grid-template-columns:270px minmax(500px,1fr) 340px}.left-panel{padding:30px 24px}.right-panel{padding:27px 28px}.stage-top{padding:31px 35px}.stage-top h2{font-size:26px}.stage-bottom{left:35px;right:35px}.intro h1{font-size:25px}}@media (width<=1170px) and (width>=841px){.workspace{grid-template-columns:215px minmax(265px,1fr) 280px}.left-panel{padding:23px 15px}.right-panel{padding:20px 18px}.app-header{padding:0 20px}.header-tag{display:none}.stage-top{padding:23px 20px}.stage-top h2{font-size:18px}.stage-top .model-pill{display:none}.stage-bottom{left:18px;right:18px}.stage-hint{max-width:100px}.sequence-dock{padding-left:18px;padding-right:18px}.stage-coordinate,.canvas-legend{left:20px}.stage-tools button{padding:6px}.intro h1{font-size:21px}}@media (width<=840px){.app-header{gap:10px;height:71px;padding:0 17px}.brand{gap:9px}.brand-icon{border-radius:9px;width:31px;height:31px;font-size:25px}.wordmark{font-size:24px}.brand p{font-size:8px}.header-tag{display:none}.header-actions{gap:5px}.header-actions .tool-button{min-height:34px;padding:8px}.header-actions .tool-button .button-label{display:none}.mobile-nav{z-index:8;background:#112823;border-bottom:1px solid #2c493b;gap:6px;padding:8px 16px;display:flex;position:relative}.mobile-nav button{color:#a3baa4;background:0 0;border:1px solid #334d3d;border-radius:6px;flex:1;min-height:36px;padding:9px 5px;font-size:11px}.mobile-nav button.active{color:#2b4733;background:#c4d6ae;border-color:#c4d6ae}.workspace{height:auto;min-height:calc(100svh - 125px);display:block}.left-panel,.right-panel{border:0;height:auto;display:none;overflow:visible}.stage{height:calc(100svh - 125px);min-height:570px}.stage-top{padding:24px 23px}.stage-top h2{font-size:20px}.stage-top .model-pill{padding:7px;font-size:9px}.stage-top p{max-width:240px}.stage-coordinate{top:137px;left:23px}.stage-bottom{bottom:174px;left:21px;right:21px}.stage-hint{max-width:140px;font-size:9px}.stage-tools button{min-height:36px;padding:7px 8px}.stage-tools button span{display:none}.canvas-legend{bottom:224px;left:23px}.sequence-dock{padding:15px 20px}.sequence{gap:5px}.residue{flex:none;width:35px;min-width:35px}.sequence-head{font-size:10px}.sequence-caption{font-size:9px}.left-panel{padding:25px 23px 40px}.right-panel{padding:25px 27px 40px}.intro h1{font-size:26px}.intro h1 br{display:none}.intro p{margin:9px 0 20px}.scenario-list{grid-template-columns:1fr}.scenario{padding:15px}.scenario strong{font-size:13px}.scenario small{font-size:11px}.mode-grid{grid-template-columns:repeat(3,1fr)}.mode{min-height:65px;font-size:12px}.mode-caption{min-height:0;margin-bottom:15px;font-size:11px}.left-panel .extra-panel{padding-top:20px}.left-panel .range-label,.left-panel .check-line{font-size:12px}.left-panel .probe-position{font-size:11px}.left-panel .extra-panel input[type=range]{height:33px}.right-panel .panel-heading{font-size:12px}.right-panel .selection-title h3{font-size:26px}.right-panel .angle-control .angle-head{font-size:12px}.right-panel .angle-value input{width:60px;font-size:17px}.right-panel .angle-control input[type=range]{height:39px}.right-panel .torsion-note,.right-panel .rama-caption{font-size:10px}.rama-canvas-wrap{max-width:430px;margin-left:auto;margin-right:auto}.right-panel .metric strong{font-size:26px}.right-panel .metric label,.right-panel .contact-item,.right-panel .fineprint,.right-panel .insight{font-size:11px}.right-panel .element-buttons button{min-width:46px;min-height:40px}.right-panel .inspect-section{margin-top:22px}body[data-panel=experiments] .left-panel{display:block}body[data-panel=experiments] .stage{display:none}body[data-panel=angles] .right-panel{display:block}body[data-panel=angles] .stage{display:none}body[data-panel=measure] .right-panel{display:block}body[data-panel=measure] .stage,body[data-panel=measure] .selection-controls,body[data-panel=measure] .rama-section,body[data-panel=angles] .observations,body[data-panel=angles] .inspect-section{display:none}.metric-grid{gap:13px}.toast{font-size:11px;bottom:18px}.compute-badge{top:165px;right:22px}}[hidden]{display:none!important}.measure-mutation{display:none}@media (width<=840px){.app-header{z-index:9;position:sticky;top:0}.mobile-nav{position:sticky;top:71px}.stage{min-height:640px}.viewport{margin-top:130px}.stage-top h2{font-size:19px}.sequence-caption{flex-wrap:wrap}.stage-top p{font-size:10px}.terrain-label{font-size:9px;top:105px;left:23px}.stage.terrain-on .stage-subtitle{font-size:10px}.stage.terrain-on .stage-top .model-pill{display:none}.stage.terrain-on .stage-top p{max-width:310px}.stage.terrain-on .terrain-label{top:146px}.stage.terrain-on .viewport{margin-top:205px}body[data-panel=measure] .measure-mutation{margin:14px 0 17px;display:flex}}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}