@font-face{font-family:Jalnan;src:url('../vendor/Jalnan2.otf')}*{box-sizing:border-box}body{margin:0;background:#f8faf6;color:#243b38;font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer;border:1px solid #d6dfcf;background:#fff;border-radius:7px;padding:9px 12px}button:hover{background:#edf3e5}button:disabled{opacity:.5;cursor:default}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #afcda1;outline-offset:2px}input[type=number],select,textarea{border:1px solid #d5dfcf;border-radius:7px;background:#fcfdf9;padding:9px}input[type=range]{width:100%;accent-color:#60834b;height:18px}input[type=checkbox]{accent-color:#34744e}input[type=color]{width:47px;height:32px;padding:3px;background:white;border:1px solid #d5dfcf;border-radius:7px}select{max-width:100%}textarea{width:100%;resize:vertical;text-align:center;font-family:Jalnan,system-ui;font-size:25px;line-height:1.5;min-height:116px}h1,h2,h3,p{margin-top:0}h1{font-size:21px;letter-spacing:-1px;margin:8px 0}h2{font-size:14px;margin:20px 0 15px}h3{font-size:12px;margin-bottom:12px}small{font-size:9px;letter-spacing:2px;color:#6e8875}a{color:inherit;text-decoration:none}[hidden]{display:none!important}.site-header{height:76px;display:flex;align-items:center;justify-content:space-between;padding:12px 25px;border-bottom:1px solid #dde5d8;background:white;gap:12px}.brand{display:flex;align-items:center;gap:12px}.brand strong{font-size:21px;display:block;font-weight:600}.brand small{font-size:8px;letter-spacing:1.7px;color:#214638}.brand-mark{position:relative;display:grid;place-items:center;border-radius:13px;background:#327752;color:#fff9df;font-size:34px;font-weight:800;width:44px;height:44px}.brand-mark span{position:absolute;right:5px;top:2px;font-size:8px}.header-actions{display:flex;align-items:center;gap:7px}.header-actions button{font-size:11px;padding:8px 10px}.studio{display:grid;grid-template-columns:350px minmax(0,1fr);max-width:1800px;margin:auto}.settings{background:#fff;border-right:1px solid #dce5d5;min-width:0;position:relative}.intro{padding:25px 22px 18px}.intro p{font-size:11px;color:#809181;line-height:1.6;margin:0}.tabs{display:flex;flex-wrap:wrap;padding:5px;gap:3px;border-top:1px solid #e4eadf;border-bottom:1px solid #dde5d5;position:sticky;top:0;background:white;z-index:5}.tabs button{flex:1 0 29%;border:0;padding:10px 3px;background:white;font-size:11px;border-radius:6px;color:#73846b}.tabs button.active{background:#e9f0dc;color:#3f714b;font-weight:650}.panels{padding:0 23px 18px;min-height:500px}.hint{font-size:11px;color:#82917a;line-height:1.75;margin:9px 0 16px}.label-line{display:flex;justify-content:space-between;gap:6px;align-items:center;margin-bottom:10px;font-size:11px}.label-line span{font-size:10px;color:#91a087;white-space:nowrap}.control{margin:17px 0}.control-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.control-head label{font-size:12px}.number-field{display:flex;align-items:center;gap:5px;color:#86917d;font-size:10px}.number-field input{width:72px;text-align:right;padding:5px 7px}.field-label{display:block;font-size:12px;margin:17px 0 8px}.panels select{width:100%}.check{display:flex;align-items:center;gap:8px;margin:16px 0;font-size:12px;line-height:1.6}.check input{width:15px;height:15px}.prominent{background:#edf3e5;padding:12px;border-radius:8px}.wide{width:100%;margin:8px 0}.primary{background:#39694f;color:white;border-color:#39694f}.primary:hover{background:#2f5a43}.outline{color:#35694a;background:white}.subtle{background:#f5f7f1;color:#6d826e}.text-button{background:transparent;border:0;padding:5px;color:#71856c;font-size:11px}.preset-row{display:flex;gap:7px}.preset-row button{font-size:11px;background:#f5f8ee;flex:1}.font-source{display:flex;align-items:center;gap:5px;margin:18px 0;flex-wrap:wrap;font-size:11px}.font-source span{flex:1;min-width:90px}.font-source button{font-size:10px;padding:7px}.font-list{height:220px;overflow-y:auto;border:1px solid #dbe3d3;border-radius:8px;background:#fff}.font-card{display:block;height:88px;width:100%;text-align:left;padding:14px;border:0;border-bottom:1px solid #e9eee3;border-radius:0;font-size:17px}.font-card.active{background:#edf3e3;box-shadow:inset 3px 0 #5d8951}.note{font-size:11px;line-height:1.8;background:#f1f5e9;padding:12px;border-radius:8px;color:#698160;margin:16px 0}.settings-footer{position:sticky;bottom:0;background:#fffffff5;padding:12px 22px;border-top:1px solid #dce6d3;z-index:4;display:flex;flex-wrap:wrap;justify-content:center}.settings-footer button.wide{margin:0 0 6px}.settings-footer span{font-size:10px;color:#8b9b82}.row-setting{border:1px solid #e0e7d8;background:#fafcf6;border-radius:8px;padding:12px;margin:9px 0}.row-setting .row-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.row-setting input{width:55px;text-align:center;padding:5px}.row-setting p{font-size:12px;margin:7px 0 0;overflow-wrap:anywhere}.button-list{display:flex;gap:5px;flex-wrap:wrap}.button-card{font-size:11px;padding:8px}.button-card.active{background:#e5edd8;border-color:#78996c}.color-row{display:flex;align-items:center;justify-content:space-between;margin:15px 0;font-size:12px}.extra-color{border-top:1px solid #e0e7d6;padding-top:15px;margin-top:18px}.extra-color h3{font-size:12px;margin:0 0 10px}.char-cards{display:flex;gap:6px;flex-wrap:wrap}.char-card{display:flex;align-items:center;gap:3px;border:1px solid #dee7d4;border-radius:7px;padding:7px;background:#f9fbf5;font-size:16px}.char-card small{font:9px system-ui;letter-spacing:0}.char-card input{width:13px}.specs{display:grid;grid-template-columns:1fr auto;gap:10px;font-size:12px}.specs dt{color:#819077}.specs dd{margin:0}.workspace{min-width:0;padding:30px 30px 35px}.workspace-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.workspace-heading h2{font-size:20px;font-weight:500;letter-spacing:-.7px;margin:8px 0 12px}.local-tag{border:1px solid #dce5d3;border-radius:5px;color:#809477;font-size:9px;padding:5px}.status{font-size:11px;line-height:1.6;color:#64834c;margin:4px 0 12px;min-height:18px}.status.error{color:#b05f3b}.preview{position:relative;border:1px solid #dbe4ce;border-radius:12px;background:#eef3e5;overflow:hidden;min-height:410px}.preview-toolbar{position:absolute;left:14px;top:14px;right:14px;display:flex;align-items:center;gap:7px;z-index:2;flex-wrap:wrap}.preview-toolbar select,.preview-toolbar button{background:#fffffff0;font-size:11px;padding:8px;border-color:#dbe4d0}.preview-toolbar #fit{margin-left:auto}#viewport{height:clamp(410px,59vh,680px);width:100%;touch-action:none}#viewport canvas{display:block;width:100%;height:100%}.preview-bottom{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);display:flex;background:#fffffff0;border:1px solid #dde6d2;border-radius:8px;padding:4px;gap:3px;white-space:nowrap}.preview-bottom button{border:0;font-size:11px;padding:7px;background:transparent}.preview-bottom button:hover{background:#e9f0de}.preview-hints{display:flex;justify-content:space-between;gap:10px;color:#87967d;font-size:10px;margin:11px 0 18px;line-height:1.5}.press-control{display:flex;align-items:center;gap:14px;font-size:11px;color:#718669}.press-control input{max-width:240px}.press-control output{min-width:45px}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:#fff;border:1px solid #dfe7d7;border-radius:9px;margin:20px 0;overflow:hidden}.metric{padding:13px 16px;font-size:10px;color:#8a997f;border-right:1px solid #e6ecdf}.metric:last-child{border:0}.metric strong{display:block;font-size:15px;font-weight:500;color:#3f5848;margin-top:6px}.diagrams{display:grid;grid-template-columns:1fr 1fr;gap:14px}.diagrams article{min-width:0;background:white;border:1px solid #dfe6d7;border-radius:9px;padding:15px}.diagrams canvas{width:100%;height:auto;display:block}.diagrams p,.workspace-note{font-size:10px;color:#8b9c7f;line-height:1.7;margin:9px 0 0}.workspace-note{margin-top:18px}.part-labels{position:absolute;inset:0;pointer-events:none}.part-label{position:absolute;font-size:10px;background:#ffffffe8;color:#4e7050;padding:4px 7px;border:1px solid #d2ddc5;border-radius:5px;transform:translate(-50%,-50%);white-space:nowrap}.part-label.active{background:#718c4f;color:white}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:#315b42;color:white;padding:12px 20px;border-radius:8px;z-index:30;font-size:12px;max-width:90vw}
@media(min-width:701px){body{height:100dvh;overflow:hidden}.studio{height:calc(100dvh - 76px);overflow:hidden}.settings{height:100%;display:flex;flex-direction:column;overflow:hidden}.intro,.tabs,.settings-footer{flex-shrink:0}.tabs{position:static}.panels{min-height:0;flex:1;overflow-y:auto}.settings-footer{position:static}.workspace{height:100%;overflow-y:auto}}@media(max-width:1050px){.studio{grid-template-columns:310px minmax(0,1fr)}.workspace{padding:24px 18px}.diagrams{grid-template-columns:1fr}.metrics{grid-template-columns:repeat(2,1fr)}.metric{border-bottom:1px solid #e6ecdf}.intro{padding:22px 18px}.panels{padding:0 18px 18px}}@media(max-width:700px){.site-header{padding:12px;height:68px}.brand strong{font-size:17px}.brand-mark{height:36px;width:36px;font-size:28px}.brand small{font-size:6px}.header-actions{gap:4px}.header-actions button{padding:7px 6px;font-size:10px}.studio{display:flex;flex-direction:column}.workspace{order:0;padding:18px 12px}.settings{order:1;border-right:0;border-top:1px solid #dce5d5}.intro{display:none}.tabs{flex-wrap:nowrap;overflow-x:auto;top:0}.tabs button{flex:0 0 auto;padding:12px 11px}.panels{min-height:0;padding:0 20px 20px}.settings-footer{bottom:0}.workspace-heading h2{font-size:18px}.preview{min-height:350px}#viewport{height:390px}.preview-toolbar{left:8px;right:8px;top:8px;gap:4px}.preview-toolbar select{max-width:41%;font-size:10px;padding:7px}.preview-toolbar button{font-size:10px;padding:7px}.preview-hints{font-size:9px;flex-wrap:wrap}.diagrams{grid-template-columns:1fr 1fr;gap:8px}.diagrams article{padding:10px}.diagrams h3{font-size:10px}.diagrams p{display:none}.metrics{grid-template-columns:repeat(4,1fr)}.metric{padding:10px 7px;font-size:9px}.metric strong{font-size:12px}.workspace-note{margin-top:12px}.press-control{margin-top:5px}.local-tag{font-size:8px}#view-label{display:none}}