@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--ink:#24392e;--muted:#819087;--green:#315d46;--line:#e1e6de;--paper:#f7f8f4}*{box-sizing:border-box}body{margin:0;background:var(--paper);font-family:'DM Sans',Arial,sans-serif;color:var(--ink);font-size:14px}button,input,select{font:inherit}button{cursor:pointer;border:1px solid var(--line);background:white;color:var(--ink);border-radius:6px;padding:9px 12px;transition:.15s}button:hover{background:#eef3eb;border-color:#a4b5a5}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #75a781;outline-offset:2px}button:disabled{opacity:.45;cursor:not-allowed}header{height:82px;background:#fff;border-bottom:1px solid var(--line);padding:0 4%;display:flex;align-items:center;justify-content:space-between}.brand{text-decoration:none;color:var(--ink);display:flex;align-items:center;font-family:Manrope,Arial,sans-serif;font-size:24px;font-weight:800;letter-spacing:-1px;gap:10px}.brand-icon{font-size:33px;color:var(--green)}.version{font-family:'DM Sans',Arial,sans-serif;font-size:9px;letter-spacing:1.5px;margin-left:18px;color:var(--muted);font-weight:500}.header-right{display:flex;align-items:center;gap:9px;color:#738075;font-size:12px}.local-dot,.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#65996e}.quiet{margin-left:18px;border:none;font-size:12px}main{max-width:1510px;margin:auto;padding:37px 4% 0}.intro{display:flex;align-items:center;justify-content:space-between;margin-bottom:30px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.6px;color:#85917e}h1{font-family:Manrope,Arial,sans-serif;font-weight:600;font-size:32px;letter-spacing:-1.3px;margin:9px 0}p{line-height:1.6}.intro p{color:#819087;margin:0;font-size:13px}.primary{background:var(--green);color:white;border-color:var(--green);padding:13px 24px;font-weight:600}.primary:hover{background:#244a35}.workspace{display:grid;grid-template-columns:330px minmax(0,1fr);gap:22px}aside{display:flex;flex-direction:column;gap:16px}.panel{background:white;border:1px solid var(--line);border-radius:9px;padding:20px}.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:17px}h2{font-size:13px;margin:0;font-weight:600}h2 span{color:#95a68f;font-size:10px;margin-right:10px}.unit{font-size:8px;letter-spacing:1px;color:#96a190}label{display:block;color:#778478;font-size:11px;margin-bottom:12px}input,select{width:100%;background:#fbfcf9;border:1px solid var(--line);border-radius:5px;padding:9px 10px;color:var(--ink);margin-top:6px;min-width:0}input[type=number]{font-variant-numeric:tabular-nums}.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}.helper{font-size:11px;color:#8b978b;margin:0}.count{background:#f0f4ec;padding:3px 7px;border-radius:4px;font-size:10px}.opening-panel .helper{margin-top:-6px;margin-bottom:15px}.opening{border:1px solid var(--line);border-radius:6px;margin-bottom:10px;overflow:hidden}.opening.selected{border-color:#91ad91}.opening-head{display:flex;align-items:center;padding:11px;gap:8px;cursor:pointer;background:#fafbf8}.opening-head strong{font-size:11px;flex:1}.opening-head .badge{font-size:9px;color:#7e987c;background:#edf2e8;padding:3px 5px;border-radius:3px}.opening-head .mini{font-size:10px;color:#8d988c}.opening-head button{padding:0 4px;background:none;border:0;color:#95a18f;font-size:16px}.opening-fields{padding:12px 12px 0;border-top:1px solid var(--line)}.opening-fields label{font-size:10px}.opening-fields input,.opening-fields select{padding:6px 8px}.add{width:100%;border-style:dashed;color:var(--green);font-size:12px;padding:11px}.source-note{display:flex;gap:10px;padding:0 7px;color:#8a9585}.source-note p{font-size:10px;margin:0}.source-note strong{display:block;font-weight:500;color:#6c7e68;margin-bottom:4px}.canvas-panel{border:1px solid var(--line);border-radius:9px;background:#fff;display:flex;flex-direction:column;overflow:hidden;min-height:635px;max-height:850px}.canvas-toolbar{display:flex;align-items:center;justify-content:space-between;padding:17px 20px;border-bottom:1px solid var(--line);gap:10px}.canvas-toolbar strong{font-size:12px;margin-left:8px;font-weight:500}.preview-sub{font-size:8px;letter-spacing:1px;color:#93a08b;margin-left:14px}.toolbar-actions{display:flex;gap:7px}.toolbar-actions button{font-size:10px;padding:7px 10px}.drawing-area{flex:1;position:relative;min-height:450px;background-color:#f6f8f2;background-image:radial-gradient(#cdd5c7 .65px,transparent .65px);background-size:16px 16px;padding:48px 20px 42px;display:flex;align-items:center}.canvas-tag{position:absolute;top:22px;left:23px;font-size:9px;letter-spacing:1.4px;color:#91a085}.canvas-tag span{margin-left:7px}svg{width:100%;height:100%;min-height:350px;max-height:640px;overflow:visible}.canvas-key{position:absolute;bottom:21px;left:0;right:0;display:flex;justify-content:center;gap:23px;color:#899780;font-size:9px}.canvas-key span{display:flex;gap:6px;align-items:center}.canvas-key i{display:inline-block;width:10px;height:10px;border:1px solid #809174}.canvas-key .opening-key{background:#dce8d2}.canvas-key .margin-key{border-style:dashed}.canvas-footer{display:flex;justify-content:space-between;padding:14px 20px;font-size:10px;color:#8d9987;border-top:1px solid var(--line)}#layoutStatus{color:#68805e}.summary{display:grid;grid-template-columns:repeat(4,1fr);background:white;border:1px solid var(--line);border-radius:8px;margin-top:22px;padding:22px 0}.summary>div{padding:0 27px;border-right:1px solid var(--line)}.summary>div:last-child{border:0}.summary .eyebrow{font-size:8px;display:block;margin-bottom:8px}.summary strong{font-size:20px;font-family:Manrope,Arial,sans-serif;font-weight:500}.summary small{font-size:10px;color:#8a9585;margin-left:8px}footer{display:flex;justify-content:space-between;font-size:10px;color:#99a18f;padding:22px 0}#issues{font-size:12px;color:#9b572a;line-height:1.7;margin-top:10px}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:#24392e;color:white;padding:13px 22px;border-radius:7px;box-shadow:0 6px 25px #0002;display:none;font-size:12px}.cutout{cursor:pointer}.cutout:hover{filter:brightness(.96)}@media(min-width:1450px){.workspace{grid-template-columns:360px minmax(0,1fr)}}@media(max-width:950px){main{padding:25px 20px}.workspace{grid-template-columns:290px minmax(0,1fr);gap:15px}.preview-sub{display:none}.canvas-toolbar{padding:12px}.summary>div{padding:0 14px}.summary strong{font-size:17px}}@media(max-width:700px){header{height:65px;padding:0 20px}.version,.header-right{display:none}.intro{align-items:flex-start;gap:12px}h1{font-size:24px}.primary{padding:10px;font-size:11px;white-space:nowrap}.workspace{display:flex;flex-direction:column}.canvas-panel{min-height:480px;order:-1}.drawing-area{min-height:360px}.summary{grid-template-columns:1fr 1fr;gap:20px}.summary>div:nth-child(2){border:0}.summary strong{font-size:18px}footer{gap:20px}.canvas-key{gap:12px}}
.drawing-area{background-color:#202932;background-image:linear-gradient(#748ba50b 1px,transparent 1px),linear-gradient(90deg,#748ba50b 1px,transparent 1px),linear-gradient(#748ba514 1px,transparent 1px),linear-gradient(90deg,#748ba514 1px,transparent 1px);background-size:15px 15px,15px 15px,75px 75px,75px 75px;padding:45px 10px 40px}.canvas-tag{color:#8598a9}.canvas-key{color:#9bafbf}.canvas-key .board-key{border-color:#dc69d8}.canvas-key .opening-key{background:none;border-color:#65dc96}.canvas-key .margin-key{border-color:#ad8aff;border-style:solid}.canvas-panel{min-height:820px;max-height:none;align-self:start;position:sticky;top:15px}svg{min-height:650px;max-height:900px}.opening-fields .two input{font-size:12px}.cutout:focus{outline:none}.cutout:focus>rect,.cutout:focus>circle{stroke:#fff;stroke-width:2}.canvas-footer{background:#fff}@media(max-width:950px) and (min-width:701px){.workspace{grid-template-columns:260px minmax(0,1fr)}.canvas-panel{min-height:660px}svg{min-height:490px}}@media(max-width:700px){.canvas-panel{position:static;min-height:580px}svg{min-height:420px}.drawing-area{padding:45px 0}.intro{flex-wrap:wrap}}
@media(max-width:700px){.brand{font-size:18px;letter-spacing:-.6px;gap:7px}.brand-icon{font-size:25px}}

.canvas-key .bend-key{height:0;border:0;border-top:1px dashed #e4e9ed}.canvas-key{flex-wrap:wrap}

.reposition{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:14px}.reposition span{width:100%;font-size:10px;color:#778478}.reposition button{font-size:11px;padding:7px 10px}

.board-navigation{display:flex;align-items:center;gap:14px;padding:14px 20px;border-bottom:1px solid #e1e6de;background:#f7faf4}.board-navigation label{margin:0;min-width:120px}.board-navigation span{flex:1;font-size:11px}.board-navigation button{font-size:11px}

.intro .eyebrow{font-size:14px;letter-spacing:1.8px}


[hidden]{display:none!important}#loginGate{min-height:100vh;display:grid;place-items:center;padding:24px}#loginForm{width:min(440px,100%);padding:35px;background:white;border:1px solid var(--line);border-radius:12px}#loginForm h1{font-size:25px}#loginForm p{color:#778478}#loginForm .primary{width:100%}#loginError{color:#a63535!important;font-size:12px}

.opening-head .drag-handle{cursor:grab;touch-action:none;font-size:22px;padding:2px;color:#52715b}.opening.is-dragging{opacity:.5}.opening.drop-before{border-top:3px solid #315d46}.opening.drop-after{border-bottom:3px solid #315d46}.drag-handle:active{cursor:grabbing}

.opening-actions{display:flex;align-items:center;gap:8px}#collapseAll{font-size:10px;padding:5px 7px}