:root{font-family:system-ui,"Microsoft YaHei",sans-serif;color:#111;font-size:14px;line-height:1.5;--line:#d8d8d8;--muted:#666}
*{box-sizing:border-box}
body{margin:0;background-color:#202124;background-image:linear-gradient(#ffffff09 1px,transparent 1px),linear-gradient(90deg,#ffffff09 1px,transparent 1px);background-size:32px 32px;background-attachment:fixed;overflow:hidden}
[hidden]{display:none!important}
h1,h2,h3,p{margin:0}button,input,select,textarea{font:inherit;color:inherit}button,a,input,select,textarea,summary{outline-offset:3px}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible,summary:focus-visible,.viewport:focus-visible{outline:2px solid #111}
button{border:1px solid #cfcfcf;border-radius:2px;padding:7px 11px;background:#fff;cursor:pointer;transition:background .1s}button:hover{background:#eee;border-color:#111}button:disabled{cursor:default;background:#f5f5f5;color:#999;border-color:#ddd}
button[aria-pressed=true]{background:#111;color:#fff;border-color:#111}button[aria-pressed=true]:hover{background:#111;color:#fff}
input:not([type=range]):not([type=checkbox]):not([type=file]),select,textarea{border:1px solid #cfcfcf;border-radius:2px;background:#fff;min-height:34px;padding:6px 9px;max-width:100%;min-width:0}
input[type=number]{width:92px;font-variant-numeric:tabular-nums}input[type=checkbox]{width:15px;height:15px;margin:0;accent-color:#111;flex:none}input[type=range]{accent-color:#111;cursor:pointer;min-width:0;appearance:none;background:transparent;height:20px}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:linear-gradient(to right,#111 0%,#111 var(--range-position,0%),#dedede var(--range-position,0%),#dedede 100%)}
input[type=range]::-webkit-slider-thumb{appearance:none;width:16px;height:16px;border:0;border-radius:50%;background:#111;margin-top:-5px}
input[type=range]::-moz-range-track{height:6px;border-radius:6px;background:#dedede}input[type=range]::-moz-range-progress{height:6px;border-radius:6px;background:#111}input[type=range]::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;background:#111}
input[type=range]:disabled{opacity:.4;cursor:default}
input:disabled,select:disabled{color:#999;background:#f5f5f5;cursor:default}a{color:inherit}select{max-width:100%}
.workbench{height:100dvh;display:flex;flex-direction:column;padding:0 28px 24px;gap:10px}
.page-header{min-height:80px;display:flex;align-items:center;justify-content:space-between;gap:24px;color:#fff;flex:none}.page-header h1{font-size:26px;letter-spacing:.03em;font-weight:650;white-space:nowrap}.page-links{display:flex;align-items:center;gap:26px;font-size:12px}.page-links span{color:#bbb;letter-spacing:.07em}.page-links a{text-decoration:none}.page-links a:hover{text-decoration:underline}.page-links a:focus-visible{outline-color:#fff}
.layout{display:grid;grid-template-columns:320px 370px minmax(0,1fr);gap:18px;flex:1;min-height:0;min-width:0}
.panel{background:#fff;border:1px solid var(--line);min-height:0;min-width:0;display:flex;flex-direction:column}.panel-header{display:flex;align-items:center;justify-content:space-between;padding:17px 17px 13px;min-height:57px;gap:8px;flex:none}.panel-header h2,.preview-header h2{font-size:16px;font-weight:650;letter-spacing:.04em}.panel-header>span{font-size:11px;color:var(--muted)}.text-button{font-size:11px;border-color:transparent;padding:3px 5px;color:#666}
.search-box{padding:0 14px 14px;border-bottom:1px solid var(--line)}.search-box input{width:100%;font-size:12px}
.library-columns{display:grid;grid-template-columns:minmax(0,1fr) 101px;flex:1;min-height:0}.library-columns nav,.library-columns>div{overflow-y:auto;min-height:0;padding:6px;overscroll-behavior:contain}.library-columns>div{border-left:1px solid var(--line)}
.family-button{display:block;width:100%;border:1px solid transparent;border-radius:0;text-align:left;padding:11px 10px;margin-bottom:3px}.family-button strong{display:block;font-size:14px;font-weight:560;line-height:1.5;overflow-wrap:anywhere}.family-button small{display:block;font-size:10px;color:#666;line-height:1.55;margin-top:4px;overflow-wrap:anywhere}.family-button[aria-pressed=true] small{color:#ddd}.family-button[aria-pressed=true] strong{font-weight:650}
.weight-button{display:flex;flex-direction:column;gap:3px;width:100%;padding:11px 6px;border-color:transparent;border-radius:0;margin-bottom:3px;text-align:left}.weight-button strong{font-size:13px;line-height:1.4}.weight-button small{font-size:9px;overflow-wrap:anywhere}.empty-list{padding:16px 6px;font-size:12px;color:#666}
.library-footer{border-top:1px solid var(--line);padding:13px 14px;min-height:70px;flex:none}.library-footer p{font-size:12px;line-height:1.6}.library-footer>span{color:#666;font-size:10px}
.settings .panel-header{border-bottom:1px solid var(--line)}.control-scroll{overflow-y:auto;min-height:0;flex:1;overscroll-behavior:contain}.control-section{padding:17px 18px 18px;border-bottom:1px solid #e6e6e6}.control-section:last-child{border-bottom:0}.control-section h3{font-size:13px;letter-spacing:.03em;font-weight:650;margin-bottom:12px;display:flex;justify-content:space-between}.control-section h3 span{font-size:10px;color:#666;font-weight:400}
.field{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}.field>label{font-size:12px;flex:1;line-height:1.5}.field label span,.field-pair label span{color:#777;font-size:10px;margin-left:4px}.field select{width:147px;font-size:12px}.field input{font-size:12px}.wide-range{display:block;width:100%;margin:10px 0 15px}.hint{font-size:10px;color:#777;line-height:1.7;margin-top:9px}
.field-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:13px}.field-pair>div{min-width:0}.field-pair label{display:block;font-size:12px;margin-bottom:6px}.field-pair input{width:100%}
.range-legend{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:10px;color:#666}.range-legend>span{display:flex;align-items:center;gap:5px}.range-legend i{display:inline-block;flex:none;width:10px;height:10px}.range-legend-endpoint{border-radius:50%;background:#111}.range-legend-default{background:#fff;border:2px solid #111}.range-legend-actual{border-radius:50%;background:#238b55}
.range-control{margin-top:19px}.range-control-heading{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:12px;line-height:1.5}.range-control-heading>span{font-size:10px;color:#777;white-space:nowrap}.range-value-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:7px}.range-value-fields>div{min-width:0}.range-value-fields label{display:block;font-size:10px;color:#777;margin-bottom:3px}.range-value-fields input[type=number]{width:100%;font-size:12px;min-height:34px;padding:6px 9px}
.range-control-heading strong{font-weight:400}.range-control[data-collapsed=true] .range-track{height:62px}.range-control[data-collapsed=true] .range-min-handle{top:29px}.range-control[data-collapsed=true] .range-min-handle::after{content:"";position:absolute;top:-4px;left:7px;width:2px;height:5px;background:#111;pointer-events:none}.range-control[data-collapsed=true] .range-actual-point{top:51px}
.range-base-note{font-size:10px;color:#777;line-height:1.7;margin-top:2px}
.range-track{position:relative;height:46px;margin:10px 8px 0;touch-action:none;user-select:none;cursor:pointer}.range-track-background,.range-track-selection{position:absolute;top:22px;height:6px;border-radius:6px;pointer-events:none}.range-track-background{left:0;right:0;background:#dedede}.range-track-selection{background:#111}.range-handle{position:absolute;display:block;min-width:0;width:16px;height:16px;padding:0;border:0;border-radius:50%;background:#111;top:17px;transform:translateX(-50%);touch-action:none;cursor:ew-resize;z-index:2;transition:none}.range-handle:hover{background:#111;border:0}.range-handle:focus-visible{outline:2px solid #111;outline-offset:3px;z-index:4}.range-handle.range-default-handle{top:0;border:2px solid #111;border-radius:0;background:#fff;z-index:3}.range-handle.range-default-handle:hover{background:#fff;border:2px solid #111}.range-default-handle::after{content:"";position:absolute;top:14px;left:5px;width:2px;height:7px;background:#111;pointer-events:none}.range-actual-values{position:absolute;inset:0;pointer-events:none}.range-actual-point{position:absolute;top:35px;display:block;width:8px;height:8px;transform:translateX(-50%);border-radius:50%;background:#238b55;pointer-events:auto;cursor:help;z-index:1}.range-actual-point::before{content:"";position:absolute;left:-4px;right:-4px;top:-3px;bottom:-3px}.range-actual-values:empty{display:none}.range-control:focus-within .range-control-heading{color:#111}
.segment{display:flex;gap:5px;margin:12px 0}.segment button{flex:1;font-size:11px;padding:8px 5px;min-width:0;line-height:1.5}#alignment-options button:first-child{flex:.6}
.checkboxes{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px}.checkboxes label,.check-row{font-size:12px;display:flex;align-items:center;gap:7px}.check-row{margin-top:14px}
#coordinate-mode{width:100%;font-size:12px}.text-section textarea{display:block;resize:vertical;width:100%;height:180px;min-height:110px;font-size:12px;line-height:1.8}.sample-actions{display:flex;gap:6px;margin-top:10px}.sample-actions button{font-size:10px;flex:1;padding:5px 3px}.config-footer{padding:13px 17px;border-top:1px solid var(--line);display:flex;gap:10px;flex:none}.config-footer button{flex:1;font-size:12px}
.preview-header{display:flex;justify-content:space-between;align-items:center;padding:17px 20px 16px;gap:12px;flex:none;min-height:85px;flex-wrap:wrap}.preview-header>div:first-child{min-width:0}.preview-header p{font-size:11px;color:#666;margin-top:4px;overflow-wrap:anywhere}.preview-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end;max-width:100%;flex:0 1 auto}.preview-actions button{font-size:11px;padding:6px 9px}
.viewport{position:relative;flex:1;min-height:0;min-width:0;overflow:hidden;background:#f3f3f3;border-top:1px solid var(--line);border-bottom:1px solid var(--line);touch-action:none;cursor:grab}.viewport:active{cursor:grabbing}#preview-canvas{display:block;width:100%;height:100%;pointer-events:none}.canvas-help{position:absolute;left:15px;bottom:13px;pointer-events:none;background:#ffffffdb;color:#888;font-size:10px;padding:4px 7px;border:1px solid #e3e3e3}.canvas-message{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#fff;font-size:11px;color:#777;text-align:center;padding:24px}.canvas-message strong{font-size:16px;color:#111;font-weight:550}.canvas-message.error strong{color:#8f322c}
.result-strip{display:flex;align-items:center;gap:18px;min-height:41px;padding:10px 20px;font-size:10px;color:#666;border-bottom:1px solid #e6e6e6;flex-wrap:wrap;flex:none;font-variant-numeric:tabular-nums}.result-strip span:first-child{color:#111;font-weight:600}.layout-warning{padding:9px 20px;font-size:11px;background:#faf6ee;border-bottom:1px solid #dfd6c6;color:#705a34;line-height:1.7;max-height:85px;overflow:auto}
.source-details{flex:none;padding:12px 20px;border-bottom:1px solid #e6e6e6}.source-details summary{font-size:11px;cursor:pointer}.source-details summary span{color:#888;margin-left:12px;font-size:10px}.source-details>div{max-height:180px;overflow:auto;font-size:10px;line-height:1.8;color:#666;padding-top:11px}.source-details dl{display:grid;grid-template-columns:88px minmax(0,1fr);margin:0;gap:5px 12px}.source-details dt{color:#777}.source-details dd{margin:0;overflow-wrap:anywhere}.source-details p{margin-top:9px}.source-details code{font-size:9px;overflow-wrap:anywhere}
.preview-footer{padding:13px 20px;display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:84px;flex:none}.preview-footer>span{font-size:10px;color:#777;min-width:0;flex:1}.zoom-controls{width:250px;max-width:100%;flex:0 1 250px}.zoom-controls .field{margin:0}.zoom-controls .wide-range{margin:7px 0 0;width:100%}.zoom-buttons{display:flex;gap:6px;flex:none}.zoom-buttons button{font-size:11px;padding:4px 7px;min-height:28px}.field input[type=number]{font-size:12px}
.preview.expanded{position:fixed;inset:24px;z-index:10;box-shadow:0 0 0 100px #000a}.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);max-width:calc(100% - 48px);padding:11px 20px;color:#fff;background:#111;font-size:12px;box-shadow:0 4px 20px #0002;z-index:30;text-align:center}.sr-only{position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.source-details:not([open])>div{display:none}
*{scrollbar-color:#111 #ededed;scrollbar-width:thin}::-webkit-scrollbar{width:8px;height:8px;background:#ededed}::-webkit-scrollbar-thumb{background:#111;border-radius:8px;border:1px solid #ededed}::-webkit-scrollbar-track{border-radius:8px;background:#ededed}.library-columns nav,.library-columns>div,.control-scroll,.source-details>div{scrollbar-gutter:stable}
.relation-map{position:relative;height:310px;min-width:0;margin:10px 0 4px}
.relation-node{position:absolute;width:82px;height:42px;padding:6px 2px;font-size:12px;white-space:nowrap;z-index:3}
.relation-han{left:0;top:12px;height:64px}.relation-punctuation{right:0;top:16px}.relation-latin-punctuation{right:0;top:74px}.relation-latin{left:0;top:264px}.relation-boundary{right:0;top:264px;font-size:11px}
.relation-edge,.relation-rule-line{position:absolute;height:24px;transform-origin:0 50%;z-index:1}
.relation-edge::after,.relation-rule-line::after{content:"";position:absolute;right:-9px;top:8px;width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:7px solid #999;pointer-events:none}
.relation-edge.is-selected::after,.relation-rule-line[aria-pressed=true]::after{border-left-color:#111}
.relation-edge.is-selected{z-index:2}
.relation-edge .range-control{margin:0}
.relation-edge .range-track,.relation-edge .range-control[data-collapsed=true] .range-track{height:24px;margin:0}
.relation-edge .range-track-background,.relation-edge .range-track-selection{top:11px;height:2px;border-radius:0}
.relation-edge .range-track-background{background:#c7c7c7}
.relation-edge .range-track-selection{background:#111}
.relation-edge .range-handle,.relation-edge .range-control[data-collapsed=true] .range-min-handle{width:16px;height:16px;top:4px}
.relation-edge .range-handle.range-default-handle{width:12px;height:12px;top:calc(6px - 13px * var(--marker-side,1));border-width:2px}
.relation-edge .range-default-handle::after{display:block;top:calc(1px + 9px * var(--marker-side,1));left:4px;height:7px;width:1px;background:#777}
.relation-edge .range-control[data-collapsed=true] .range-min-handle::after{display:none}
.relation-edge .range-actual-point,.relation-edge .range-control[data-collapsed=true] .range-actual-point{top:calc(8px + 13px * var(--marker-side,1));width:8px;height:8px;z-index:4}
.relation-edge .range-actual-point::after{content:"";position:absolute;left:3.5px;top:calc(-0.5px - 8.5px * var(--marker-side,1));width:1px;height:9px;background:#238b5580;pointer-events:none}
.relation-edge .range-handle{cursor:move}
.relation-edge .range-track{cursor:crosshair}
.relation-edge.is-selected .range-track::before{content:"";position:absolute;inset:0 -5px;background:#11111108;pointer-events:none}
.relation-rule-line{padding:0;background:transparent;border:0;border-radius:0;cursor:pointer;transition:none}
.relation-rule-line::before{content:"";position:absolute;top:11px;left:0;right:0;height:2px;background:#c7c7c7;pointer-events:none}
.relation-rule-line:hover,.relation-rule-line[aria-pressed=true],.relation-rule-line[aria-pressed=true]:hover{background:#11111108;border:0;color:#111}
.relation-rule-line[aria-pressed=true]::before{background:#111}
.relation-secondary{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 16px}.relation-secondary button{font-size:11px;padding:5px 9px}
.relation-editor{border-top:1px solid #e6e6e6;padding-top:16px;min-height:230px}
.relation-editor h4{font-size:13px;font-weight:500;margin:0 0 8px}
.relation-description{font-size:11px;color:#666;line-height:1.8;margin-bottom:12px}
.relation-editor .range-control{margin-top:14px}
.relation-editor .range-track,.relation-editor .range-control[data-collapsed=true] .range-track{height:58px;margin-top:12px}
.relation-editor .range-track-background,.relation-editor .range-track-selection{top:28px;height:4px}
.relation-editor .range-handle,.relation-editor .range-control[data-collapsed=true] .range-min-handle{top:21px;width:18px;height:18px}
.relation-editor .range-handle.range-default-handle{top:6px;width:14px;height:14px}
.relation-editor .range-default-handle::after{display:block;top:12px;left:5px;width:1px;height:11px;background:#777}
.relation-editor .range-control[data-collapsed=true] .range-min-handle::after{display:none}
.relation-editor .range-actual-point,.relation-editor .range-control[data-collapsed=true] .range-actual-point{top:43px;z-index:4}
.relation-editor .range-actual-point::after{content:"";position:absolute;top:-11px;left:3.5px;width:1px;height:11px;background:#238b5580;pointer-events:none}
.range-actual-point{padding:0;border:0;min-width:0;min-height:0;transition:none}
.range-actual-point:hover,.range-actual-point:focus-visible,.range-actual-point.is-active{background:#17663c;border:0;outline:2px solid #238b55;outline-offset:2px}
.range-actual-point.is-active{z-index:5}
.actual-highlight-status{position:absolute;top:14px;left:15px;right:15px;max-width:max-content;padding:7px 10px;background:#fff;color:#17663c;border-left:3px solid #238b55;font-size:12px;line-height:1.6;pointer-events:none;box-shadow:0 1px 8px #00000012}
@media(min-width:2200px){.layout{grid-template-columns:340px 420px minmax(0,1fr);gap:20px}.workbench{padding:0 32px 24px}.control-section{padding:19px 22px}.field{margin-top:13px}.field input{width:106px}.field select{width:165px}.viewport .canvas-help{font-size:11px}}
@media(max-width:1550px){.layout{grid-template-columns:280px 330px minmax(0,1fr);gap:14px}.workbench{padding:0 20px 18px}.library-columns{grid-template-columns:minmax(0,1fr) 91px}.family-button{padding:10px 8px}.preview-header{padding:14px}.preview-actions{gap:4px}.preview-actions button{padding:5px 6px;font-size:10px}.preview-footer{padding:12px}.preview-footer>span{max-width:115px}.source-details,.result-strip{padding-left:15px;padding-right:15px}.control-section{padding:16px}.field select{width:136px}.page-header{min-height:74px}}
@media(max-width:1150px){.layout{grid-template-columns:245px 300px minmax(0,1fr);gap:10px}.workbench{padding:0 12px 14px}.preview-header{flex-wrap:wrap;gap:8px}.preview-actions{justify-content:flex-start}.preview-footer{flex-wrap:wrap;gap:6px}.zoom-controls{flex:1 1 220px}.preview-footer>span{max-width:none}.source-details summary span{display:none}.page-links>span{display:none}.result-strip{gap:9px}.family-button strong{font-size:12px}.library-columns{grid-template-columns:minmax(0,1fr) 80px}.weight-button strong{font-size:11px}}
@media(max-width:1000px){body{overflow:auto}.workbench{height:auto;min-height:100dvh}.layout{grid-template-columns:280px minmax(0,1fr);grid-template-rows:620px auto}.library{grid-column:1;grid-row:1}.settings{grid-column:2;grid-row:1}.preview{grid-column:1/-1;grid-row:2;min-height:760px}.viewport{min-height:490px}.page-header{min-height:78px}.preview-header{flex-wrap:nowrap}.preview-footer{flex-wrap:nowrap}.zoom-controls{flex:0 1 250px}.preview.expanded{min-height:0}.preview.expanded .viewport{min-height:0}.preview.expanded .source-details>div{max-height:130px}}
@media(max-width:580px){.page-header{align-items:flex-start;padding:20px 0 10px;flex-direction:column;gap:8px}.page-header h1{font-size:22px}.layout{display:flex;flex-direction:column}.library{height:440px}.settings{height:660px}.preview{min-height:690px}.viewport{min-height:400px}.preview-header{flex-wrap:wrap}.preview-footer{flex-wrap:wrap}.zoom-controls{flex:1 1 200px}.preview.expanded{inset:10px}.source-details summary span{display:none}.result-strip{font-size:9px}}
