body{font-family:system-ui,-apple-system,sans-serif;line-height:1.6;margin:0;padding:2rem;background-color:#f9f9f9}.container{max-width:800px;margin:0 auto}h1,h2{color:#333}h2{font-size:22px}.project-logo{font-size:2.75rem;font-weight:700;margin-bottom:0rem;animation:doorHinge 5s cubic-bezier(.4,0,1,1) infinite;transform-origin:center bottom}.project-taglines{border-bottom:solid 1px #cccccc;padding-bottom:15px;h2{font-size:18px;margin:0}p{font-size:14px;font-weight:200;margin-top:-5px}}@keyframes doorHinge{0%{clip-path:inset(0 0 0 0);transform:rotateX(0)}50%{clip-path:inset(0 0 50% 0);transform:rotateX(0)}55%{clip-path:inset(0 0 0 0);transform:rotateX(-15deg)}65%{clip-path:inset(0 0 0 0);transform:rotateX(10deg)}75%{clip-path:inset(0 0 0 0);transform:rotateX(-5deg)}85%{clip-path:inset(0 0 0 0);transform:rotateX(2deg)}to{clip-path:inset(0 0 0 0);transform:rotateX(0)}}.demo-section{margin:2rem 0}.demo-accordion{margin:1rem 0}.how-to-use{margin:3rem 0 2rem;padding:2rem;background-color:#fff;border:1px solid #000;border-radius:4px}.how-to-use h2{font-size:2rem;margin-top:0;margin-bottom:2rem;padding-bottom:1rem;border-bottom:2px solid #000}.how-to-use h3{font-size:1.5rem;color:#000;margin-top:0;margin-bottom:1rem;font-weight:600}.guide-section{margin-bottom:2.5rem}.guide-section:last-child{margin-bottom:0}.guide-section p{margin:0 0 1rem;color:#333;line-height:1.6}.how-to-use pre{background-color:#f5f5f5;border:1px solid #ddd;border-radius:4px;padding:1rem;overflow-x:auto;margin:1rem 0}.how-to-use code{font-family:Monaco,Menlo,Consolas,monospace;font-size:.9rem;line-height:1.5;color:#333}.how-to-use pre code{display:block;white-space:pre}.how-to-use p code,.how-to-use .option-desc code{background-color:#f5f5f5;border:1px solid #ddd;border-radius:3px;padding:.2rem .4rem;font-size:.85rem;color:#d63384;white-space:nowrap}.options-table{border:1px solid #ddd;border-radius:4px;overflow:hidden;margin:1rem 0}.option-row{display:grid;grid-template-columns:200px 1fr;border-bottom:1px solid #ddd;transition:background-color .15s ease}.option-row:last-child{border-bottom:none}.option-row:hover{background-color:#f9f9f9}.option-name{padding:1rem;background-color:#f5f5f5;font-weight:600;border-right:1px solid #ddd;display:flex;align-items:center}.option-name code{background-color:transparent;border:none;padding:0;color:#000;font-size:.9rem}.option-desc{padding:1rem;color:#333;line-height:1.6}@media (max-width: 768px){.how-to-use{padding:1.5rem;margin:2rem -.5rem}.how-to-use h2{font-size:1.75rem}.how-to-use h3{font-size:1.25rem}.how-to-use pre{padding:.75rem}.how-to-use code{font-size:.85rem}.option-row{grid-template-columns:1fr}.option-name{border-right:none;border-bottom:1px solid #ddd}}@media (max-width: 480px){.how-to-use{padding:1rem;border-left:none;border-right:none;border-radius:0}.how-to-use h2{font-size:1.5rem;margin-bottom:1.5rem}.how-to-use h3{font-size:1.1rem}.guide-section{margin-bottom:2rem}.how-to-use pre{padding:.5rem;margin:.75rem -.5rem}.how-to-use code{font-size:.8rem}}footer{margin-top:3rem;padding:2rem 0;border-top:1px solid #ccc;text-align:center;font-size:.9rem;color:#666;line-height:1.6}footer a{color:#333;text-decoration:underline}footer a:hover{color:#000}footer code{background-color:#f5f5f5;border:1px solid #ddd;border-radius:3px;padding:.15rem .35rem;font-size:.85rem;color:#d63384}.shutters-accordion{--shutters-animation-duration: .3s;--shutters-animation-easing: ease-in-out}.shutters-header{cursor:pointer;display:flex;align-items:center;justify-content:space-between;user-select:none}.shutters-icon:before{content:"+";display:inline-block;transition:transform var(--shutters-animation-duration) var(--shutters-animation-easing)}.opened .shutters-icon:before{transform:rotate(45deg)}.shutters-content{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--shutters-animation-duration) var(--shutters-animation-easing),opacity var(--shutters-animation-duration) var(--shutters-animation-easing);opacity:0}.shutters-body{min-height:0;overflow:hidden}.opened .shutters-content{grid-template-rows:1fr;opacity:1}:root{--shutters-bg-color: #fff;--shutters-border-color: #000;--shutters-focus-color: #0066cc;--shutters-hover-bg: #f5f5f5;--shutters-text-color: #000}.shutters-accordion{background-color:var(--shutters-bg-color);font-family:system-ui,-apple-system,sans-serif;line-height:1.5}.shutters-item{border-bottom:1px solid var(--shutters-border-color);&:last-child{border-bottom:none}}.shutters-item.opened .shutters-header{background-color:var(--shutters-hover-bg)}.shutters-header{background-color:var(--shutters-bg-color);border:none;color:var(--shutters-text-color);font-size:clamp(.85rem,2vw,1rem);font-weight:500;padding:clamp(.5rem,2vw,1rem);transition:background-color .15s ease;&:hover{background-color:var(--shutters-hover-bg)}&:focus-visible{outline:2px solid var(--shutters-focus-color);outline-offset:-2px}}.shutters-title{flex:1;text-align:left}.shutters-icon{color:var(--shutters-text-color);font-size:clamp(1rem,2vw,1.2rem)}.shutters-content{padding:0 clamp(.5rem,2vw,1rem)}.shutters-body{color:var(--shutters-text-color);line-height:1.6;>*:first-child{margin-top:1rem}>*:last-child{margin-bottom:1rem}p{margin:0 0 1rem}ul,ol{margin:0 0 1rem;padding-left:1.5rem}li{margin-bottom:.25rem}li:last-child{margin-bottom:0}}