:root{--bg: #ffffff;--button-bg: #e6f2f2;--txt: #1e293b;--txt-muted: #4b5563;--border: #b3d4d4;--accent: #004d4d;--accent-hover: #003a3a}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box;list-style:none;text-decoration:none}html{background-color:var(--bg);color:var(--txt);font-family:-apple-system,BlinkMacSystemFont,Inter,sans-serif}body{height:100vh;overflow:hidden;display:flex;flex-direction:column}header{text-align:center;padding:1.25rem 1rem .75rem;flex-shrink:0;border-bottom:1px solid var(--border)}header h1{font-size:1.8rem;font-weight:600;margin-bottom:.25rem}header p{color:var(--txt-muted);font-size:.95rem}header a{color:var(--accent);font-weight:500;text-decoration:underline;transition:color .2s ease}header a:hover{color:var(--accent-hover)}.page{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}.preview{flex:1;min-height:0;padding:1rem;display:flex;align-items:center;justify-content:center;overflow:hidden}.settings{flex-shrink:0;height:35vh;padding:1rem;gap:.5rem;border-top:1px solid var(--border);overflow-y:auto;display:flex;flex-direction:column}@media(min-width:768px){.page{flex-direction:row}.preview{flex:1;height:100%;padding:2rem}.settings{width:320px;height:100%;flex-shrink:0;border-left:1px solid var(--border);border-top:none}}.btn{margin-top:.25rem;padding:.85rem 1.5rem;color:var(--txt);font-size:.95rem;font-weight:500;border:1px solid var(--border);border-radius:8px;background-color:var(--button-bg);transition:background-color .2s ease,border-color .2s ease,color .2s ease;text-align:center;cursor:pointer}.btn:hover{background-color:var(--accent);border-color:var(--accent);color:#fff}.btn:active{background-color:var(--accent-hover);border-color:var(--accent-hover)}.btn:disabled{opacity:.6;cursor:not-allowed}#chart-preview{display:block;width:100%;height:100%;border:1px solid var(--border);border-radius:8px;overflow:hidden}#chart-preview svg{display:block;max-width:100%;max-height:100%}label{font-size:.9rem;font-weight:500;color:var(--txt)}.input{padding:.75rem 1rem;color:var(--txt);background-color:var(--bg);font-size:.95rem;font-family:inherit;border:1px solid var(--border);border-radius:8px;transition:border-color .2s ease;outline:none;cursor:pointer}.input:focus{border-color:var(--accent)}#colour-pickers{gap:.4rem;display:flex;flex-direction:column}#colour-pickers[hidden]{display:none}.colour-picker-row{gap:.75rem;display:flex;align-items:center;justify-content:space-between}.colour-picker-row label{font-size:.9rem;font-weight:500;color:var(--txt);flex:1}input[type=color]{width:2.5rem;height:2.5rem;padding:.1rem;border:1px solid var(--border);border-radius:6px;cursor:pointer;background:none;flex-shrink:0}input[type=checkbox]{width:1.25rem;height:1.25rem;flex-shrink:0;cursor:pointer;accent-color:var(--accent)}.section-heading{font-size:.9rem;font-weight:500;color:var(--txt);margin-top:.5rem}.panel-heading{font-size:1rem;font-weight:600;color:var(--txt)}.section-divider{border:none;border-top:1px solid var(--border);margin:.5rem 0}.copy-row{display:flex;gap:.5rem}.copy-row .input{flex:1;min-width:0}.copy-row .btn{margin-top:0;padding:.75rem 1rem;flex-shrink:0}.url-input-row{flex-shrink:0;display:flex;align-items:center;border:1px solid var(--border);border-radius:8px;overflow:hidden}.url-affix{padding:.75rem .5rem;font-size:.85rem;color:var(--txt-muted);background-color:var(--bg);white-space:nowrap;flex-shrink:0}.url-input-row .input{border:none;border-radius:0;flex:1;min-width:0;padding:.75rem .5rem}.url-input-row .input:focus{border-color:transparent}