.key-head{padding-top:32px;padding-bottom:30px}.key-head .breadcrumbs{margin-bottom:25px}.key-heading{display:flex;align-items:center;justify-content:space-between;gap:30px}.key-heading h1{font-size:clamp(2.5rem,4.3vw,3.8rem);line-height:1.03;letter-spacing:-.055em;margin:12px 0 18px}.key-heading h1 em{font-style:normal;color:#0871bd}.key-heading p{max-width:660px;color:#526174;line-height:1.7;font-size:1.05rem;margin-bottom:0}.key-promise{background:#edf8f5;border:1px solid #c4e8db;border-radius:12px;padding:16px 20px;white-space:nowrap;color:#17624e;font-weight:850;font-size:.85rem}.key-promise small{display:block;font-weight:450;margin-top:6px;color:#48685e}.key-live-dot{display:inline-block;width:8px;height:8px;background:#249375;border-radius:50%;margin-right:7px}.key-workspace{display:grid;grid-template-columns:340px minmax(0,1fr);gap:28px;align-items:start;padding-bottom:45px}.key-preview-column{grid-column:2;grid-row:1;min-width:0;align-self:stretch}.key-controls{grid-column:1;grid-row:1;min-width:0}.key-preview-sticky{position:sticky;top:100px}.key-preview{border:1px solid #cddce9;border-radius:23px;background:radial-gradient(ellipse at 50% 20%,#fafdff,#dde9f4);overflow:hidden;position:relative}.key-preview-top{display:flex;justify-content:space-between;align-items:center;padding:18px 22px 0;color:#50677d;letter-spacing:.1em;font-size:.65rem;font-weight:850}.key-unit{background:#fff9;border-radius:6px;padding:4px 7px;text-transform:none;letter-spacing:0}.key-canvas{height:clamp(190px,calc(100vh - 530px),390px);width:100%;position:relative;touch-action:none}.key-canvas canvas{width:100%;height:100%;display:block;outline:none}.key-canvas>svg{width:100%;height:100%;display:block;padding:30px}.key-start-message{position:absolute;inset:0;display:grid;place-items:center;color:#526174;padding:30px;text-align:center}.key-view-buttons{display:flex;justify-content:center;gap:7px;padding:0 15px}.key-view-buttons button,.key-source-tabs button{background:#fff;border:1px solid #cad7e5;border-radius:8px;padding:8px 13px;color:#24455e;font:inherit;font-size:.78rem;font-weight:800;cursor:pointer;min-height:38px}.key-view-buttons button[aria-pressed=true]{background:#071a33;color:#fff;border-color:#071a33}.key-orbit-hint{font-size:.73rem;color:#597086;text-align:center;margin:11px 20px 19px}.key-dimensions{display:grid;grid-template-columns:repeat(3,1fr);margin:16px 0 0;gap:10px}.key-dimensions>div{border:1px solid #dce5ef;border-radius:11px;padding:12px 14px;background:#fff}.key-dimensions dt{font-size:.68rem;letter-spacing:.02em;color:#657084;margin-bottom:5px}.key-dimensions dd{font-size:1.1rem;font-weight:850;color:#071a33;margin:0}.key-status{font-size:.8rem;line-height:1.6;color:#526174;margin:15px 0 0;min-height:1.6em}.key-status.is-error{color:#a52b26;background:#fff1f0;border:1px solid #f2cac7;border-radius:10px;padding:12px}.key-preview.is-stale .key-canvas{opacity:.45}.key-notes p,.key-changes{font-size:.8rem;line-height:1.6;padding:10px 13px;background:#fff8e6;border:1px solid #efdca7;border-radius:10px;margin:9px 0 0;color:#70531b}.key-changes{background:#edf7ff;color:#184c74;border-color:#c3def2}.key-export{display:grid;grid-template-columns:1.3fr 1fr;gap:11px;margin-top:18px}.key-export .button{justify-content:center;padding:14px 12px;font-size:.9rem}.key-export button:disabled{opacity:.48;cursor:wait;box-shadow:none}.key-export-note{font-size:.72rem;line-height:1.6;color:#657084;margin:10px 0 0}.key-project-actions{display:flex;flex-wrap:wrap;gap:18px;margin-top:17px;padding-bottom:12px}.key-project-actions button{font:inherit;font-size:.74rem;font-weight:750;color:#075fa9;background:none;border:0;padding:4px 0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}.key-project-actions button:disabled{color:#8794a1;cursor:default}.key-panel{border:1px solid #dbe4ee;border-radius:15px;padding:20px;margin:0 0 22px;background:#fff;min-width:0}.key-panel legend{font-size:.98rem;font-weight:850;color:#071a33;padding:0 7px}.key-panel legend>span{color:#0871bd;font-size:.74rem;margin-right:7px}.key-controls label{display:block;font-size:.8rem;font-weight:750;line-height:1.5;margin-bottom:14px;color:#21354c}.key-controls label:last-child{margin-bottom:0}.key-controls input:not([type=color]),.key-controls textarea,.key-controls select{display:block;width:100%;font:inherit;font-size:.9rem;line-height:1.4;border:1px solid #b6c6d8;border-radius:8px;background:#fff;color:#071a33;padding:10px 11px;margin-top:7px;min-height:43px}.key-controls textarea{resize:vertical;max-height:180px}.key-controls input:focus,.key-controls textarea:focus,.key-controls select:focus{outline:3px solid #087ee826;border-color:#087ee8}.key-controls small,.key-help{display:block;font-size:.7rem;font-weight:400;line-height:1.6;color:#657084;margin-top:7px}.key-input-unit{float:right;color:#7a8897;font-weight:500}.key-input-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}.key-source-tabs{display:flex;gap:7px;margin-bottom:16px}.key-source-tabs button{flex:1;font-size:.8rem}.key-source-tabs [aria-pressed=true]{background:#e8f4ff;border-color:#087ee8;color:#075fa9}.key-file-zone{border:1px dashed #a7bdd2;background:#f6faff;border-radius:11px;text-align:center;padding:18px 12px}.key-file-icon{display:inline-block;background:#e0edf7;border-radius:7px;color:#075fa9;padding:7px;font-size:.7rem;font-weight:900}.key-file-zone strong{display:block;font-size:.75rem;line-height:1.6;margin:9px 0 13px;overflow-wrap:anywhere}.key-file-zone .button{font-size:.76rem;padding:9px 16px;justify-content:center;min-height:40px}.key-file-zone small{font-size:.65rem}.key-color-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid #e6ecf2}.key-color-row label{margin:0;font-size:.8rem}.key-color-row input[type=color]{width:52px;height:35px;padding:3px;border:1px solid #b9c9d9;background:#fff;border-radius:8px;cursor:pointer}.key-style-help{font-size:.74rem;line-height:1.7;color:#526174;border-left:3px solid #38d5ef;padding-left:11px;margin:15px 0 0}.key-guide{margin-top:10px;padding-bottom:70px}.key-guide details{font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-size:.95rem;border-bottom:1px solid #dce5ef;padding:20px 0;line-height:1.8}.key-guide summary{font-weight:800;cursor:pointer;color:#071a33}.key-guide details p{color:#526174;margin-bottom:0}.key-license-link{font-size:.8rem;color:#657084}.key-workspace button:focus-visible,.key-guide summary:focus-visible{outline:3px solid #087ee850;outline-offset:4px}.key-tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.key-tool-grid .path-card{height:100%}.key-controls [hidden]{display:none!important}
@media(max-width:1000px){.key-workspace{grid-template-columns:300px minmax(0,1fr);gap:20px}.key-heading{align-items:flex-start}.key-promise{white-space:normal;min-width:200px}.key-canvas{height:350px}.key-export{grid-template-columns:1fr}.key-panel{padding:17px}}
@media(max-width:760px){.key-head{padding-top:22px;padding-bottom:25px}.key-heading{display:block}.key-heading h1{font-size:2.7rem}.key-heading p{font-size:.95rem}.key-promise{display:inline-block;margin-top:20px;padding:11px 15px;font-size:.75rem}.key-promise small{margin-top:4px;font-size:.7rem}.key-workspace{display:flex;flex-direction:column;gap:18px}.key-preview-column,.key-controls{width:100%}.key-preview-sticky{position:static}.key-canvas{height:320px}.key-preview{border-radius:17px}.key-preview-top{padding:15px 17px 0;font-size:.6rem}.key-dimensions{gap:7px}.key-dimensions>div{padding:10px}.key-dimensions dd{font-size:.95rem}.key-dimensions dt{font-size:.6rem}.key-export{grid-template-columns:1fr 1fr;gap:8px}.key-export .button{font-size:.76rem;padding:12px 7px}.key-panel{padding:20px;margin-bottom:20px}.key-guide{font-size:1rem}.key-guide h2{font-size:1.7rem}.key-tool-grid{grid-template-columns:1fr}.key-project-actions{gap:15px}}