:root{--base-font-size:16px;--ratio:1.25;--rebeccapurple:#663399;--banner-text-color:#333;--text-color:#333;--dark-bg:#EEE;--light-bg:#f8f9fa;--text-xs:calc(0.64rem - 1px);--text-sm:calc(0.8rem - 1px);--text-base:calc(1rem - 1px);--text-md:calc(1.25rem - 1px);--text-lg:calc(1.563rem - 1px);--text-xl:calc(1.953rem - 1px);--text-2xl:calc(2.441rem - 1px);--text-3xl:calc(3.052rem - 1px);--leading-tight:1.1;--leading-snug:1.25;--leading-normal:1.5;--leading-relaxed:1.75;--no-underlines:none;--no-list:none;--center:center;--left:left;--system:-apple-system,system-ui,'Segoe UI',Tahoma,Geneva,Verdana,sans-serif}html{font-size:14px}@media (min-width:768px){html{font-size:16px}}@media (min-width:1024px){html{font-size:18px}}*{box-sizing:border-box}body{font-family:var(--system);line-height:var(--leading-normal);min-width:320px;max-width:100%;margin:0 auto;padding:12px;background-color:var(--dark-bg);color:var(--text-color)}@media (min-width:768px){body{max-width:760px;padding:20px}}@media (min-width:1024px){body{max-width:800px}}header{text-align:var(--center);width:100%;color:var(--banner-text-color);padding:1rem;margin-bottom:1.5rem}h1{font-size:var(--text-2xl);line-height:var(--leading-tight);font-weight:700;margin-bottom:1rem}h2{font-size:var(--text-xl);line-height:var(--leading-tight);font-weight:700;margin-top:0;margin-bottom:.8rem;text-align:var(--center)}h3{font-size:var(--text-lg);line-height:var(--leading-snug);margin-bottom:.8rem}h4{font-size:var(--text-md);line-height:var(--leading-snug)}p{font-size:var(--text-base);line-height:var(--leading-normal);margin-bottom:1rem}.caption,small{font-size:var(--text-sm);line-height:var(--leading-relaxed);color:#777}#rights{text-align:var(--center)}.text-xs{font-size:var(--text-xs);line-height:var(--leading-relaxed)}a:link{text-decoration:var(--no-underlines)}a:hover{color:var(--rebeccapurple)}.text-system{background-color:var(--light-bg);padding:1rem;border-radius:6px;margin-bottom:1.5rem}@media (min-width:768px){.text-system{padding:2rem;margin-bottom:2rem}}.lead{font-size:var(--text-md);line-height:var(--leading-snug)}.supporting-text{font-size:var(--text-sm);color:#555;margin-bottom:1rem}.size-toggle{display:flex;gap:10px;margin-bottom:1rem}.size-toggle button{padding:5px 10px;background-color:#e9ecef;border:1px solid #ced4da;border-radius:4px;cursor:pointer}.nested-example{border:1px solid var(--border-color);padding:1rem;margin:2rem 0;border-radius:5px}.nested-level{padding-left:1.5rem;border-left:2px solid #eee;margin:1rem 0}.comparison{display:flex;flex-direction:column;gap:20px;border:1px solid var(--border-color);padding:1rem;margin:1rem 0;border-radius:5px}@media (min-width:768px){.comparison{flex-direction:row}}.em-column,.rem-column,.scale-column{flex:1}.content{display:grid;grid-template-columns:1fr;grid-row-gap:1.25rem;margin-left:1rem;margin-right:1rem}.me{border-radius:100%;grid-row:1;margin:0 auto;align-self:var(--center);max-width:100%;height:auto}.intro{grid-row:2;text-align:var(--center)}#social{display:grid;grid-template-columns:repeat(3,1fr);grid-column-gap:0.15rem;text-align:var(--center);list-style-type:var(--no-list);margin:2rem 0}.fa-github{grid-column:1;text-align:var(--center)}.fa-linkedin{grid-column:2;text-align:var(--center)}.fa-mastodon{grid-column:3;text-align:var(--center)}.bbedit,.success-message{text-align:center}@media screen and (min-width:665px){.content{grid-template-columns:1fr 1fr;grid-template-rows:1fr;grid-column-gap:1rem}.me{border-radius:100%;grid-column:1;grid-row:1;align-self:var(--center)}.intro{grid-column:2;grid-row:1;text-align:var(--left)}#social{grid-template-columns:repeat(3,1fr);grid-column-gap:1rem;align-content:var(--center)}.fa-github{grid-column:1;align-self:var(--center)}.fa-linkedin{grid-column:2;align-self:var(--center)}.fa-mastodon{grid-column:3;align-self:var(--center)}}.fa-github a{color:#333}.fa-linkedin a{color:#0074b3}.fa-mastodon a{color:#6364ff}@media (prefers-color-scheme:dark){body{background-color:#1a1a1a;color:#e9f2f9}.text-system{background-color:#2a2a2a}.size-toggle button{background-color:#333;border-color:#444;color:#fff}.nested-level{border-left-color:#444}.comparison,.nested-example{border-color:#444}.fa-github a{color:#fff}}.form-container{max-width:600px;margin:0 auto;padding:2rem;background-color:#fff;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.1);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif}.form-title{color:#333;margin-bottom:1.5rem;text-align:center;font-weight:600}.form-group{margin-bottom:1.5rem}label{display:block;margin-bottom:.5rem;color:#555;font-weight:500;font-size:.9rem}input[type=date],input[type=email],input[type=number],input[type=password],input[type=tel],input[type=text],select,textarea{width:100%;box-sizing:border-box;padding:.75rem;border:1px solid #ddd;border-radius:4px;font-size:1rem;color:#333;background-color:#fafafa;transition:border-color .2s ease,box-shadow .2s ease}input:focus,select:focus,textarea:focus{outline:0;border-color:#4a90e2;box-shadow:0 0 0 3px rgba(74,144,226,.1);background-color:#fff}input:hover,select:hover,textarea:hover{border-color:#bbb}textarea{min-height:120px;resize:vertical}.checkbox-group,.radio-group{display:flex;align-items:center;margin-bottom:.5rem}input[type=checkbox],input[type=radio]{margin-right:.5rem;cursor:pointer}.checkbox-label,.radio-label{display:inline-block;margin-bottom:0;cursor:pointer}.submit-btn{display:block;width:100%;background-color:#4a90e2;color:#fff;border:none;border-radius:4px;padding:.75rem 1.5rem;font-size:1rem;font-weight:500;cursor:pointer;transition:background-color .2s ease}.submit-btn:hover{background-color:#3a7bca}.submit-btn:active{background-color:#2d6bb2;transform:translateY(1px)}.error-message{color:#e53935;font-size:.85rem;margin-top:.25rem}input.error,select.error,textarea.error{border-color:#e53935;background-color:#fff8f8}.required-field::after{content:"*";color:#e53935;margin-left:.25rem}.help-text{color:#777;font-size:.8rem;margin-top:.25rem}@media (max-width:768px){.form-container{padding:1.5rem}input[type=date],input[type=email],input[type=number],input[type=password],input[type=tel],input[type=text],select,textarea{padding:.6rem}.submit-btn{width:100%}}.form-row{display:flex;gap:1rem;margin-bottom:1.5rem}.form-col{flex:1}@media (max-width:576px){.form-row{flex-direction:column;gap:1.5rem}}.success-message{background-color:#e8f5e9;color:#2e7d32;padding:1rem;border-radius:4px;margin-bottom:1.5rem;text-align:center}