*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,system-ui,sans-serif;background-color:#121212;color:#e0e0e0;overflow:hidden;height:100vh;width:100vw}#app{display:grid;grid-template-columns:320px 1fr;height:100vh;transition:grid-template-columns .3s ease}#canvas-container{position:relative;overflow:hidden;background-color:#f0f2f5;width:100%;height:100%}@media(max-width:768px){#app{grid-template-columns:1fr}#canvas-container{padding-top:60px}}:root{--color-60: #ffffff;--color-30: #e0e0e0;--color-10: #3b82f6;--contrast-on-60: #1a1a1a;--contrast-on-30: #1a1a1a;--contrast-on-10: #ffffff;--selection-color: #ff00ff}#wireframe-stage{width:100%;height:100%;padding:2rem;overflow-y:auto;background-color:#f0f2f5;contain:layout paint}.wireframe-content{max-width:1200px;margin:0 auto;background:#fff;box-shadow:0 10px 30px #0000001a;min-height:100vh;transition:background-color .3s cubic-bezier(.25,.8,.25,1)}[data-role="60"]{background-color:var(--color-60);color:var(--contrast-on-60);transition:all .3s ease}[data-role="30"]{background-color:var(--color-30);color:var(--contrast-on-30);border:1px solid rgba(0,0,0,.05)}h1[data-role="30"],h2[data-role="30"],p[data-role="30"]{background-color:transparent;color:var(--color-30)}[data-role="10"]{background-color:var(--color-10);color:var(--contrast-on-10);font-weight:700}button.outline[data-role="10"]{background-color:transparent;border:2px solid var(--color-10);color:var(--color-10)}.mode-xray .wireframe-content{filter:grayscale(100%)}@media(max-width:768px){#wireframe-stage{padding:1rem}.wireframe-content{width:100%;box-shadow:none}.wireframe-content>header{flex-direction:column!important;gap:1.5rem!important;text-align:center;padding:1.5rem 1rem!important}.wireframe-content>header nav{flex-direction:column;gap:1rem;width:100%}.wireframe-content>header nav button{width:100%}.wireframe-content>section:first-of-type{padding:3rem 1rem!important}.wireframe-content>section:first-of-type h1[data-role="30"]{font-size:2.5rem!important;line-height:1.2;word-wrap:break-word}.wireframe-content>section:first-of-type>div{flex-direction:column!important;gap:1rem!important;width:100%}.wireframe-content>section:first-of-type>div button{width:100%}.wireframe-content>section:nth-of-type(2){grid-template-columns:1fr!important;gap:2rem!important;padding:3rem 1rem!important}.wireframe-content>section:nth-of-type(2) article{height:auto!important;min-height:250px}}.wf-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}.wf-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem}#controls-panel{background-color:#1e1e1e;border-right:1px solid #333;display:flex;flex-direction:column;overflow-y:auto;height:100%;z-index:500;transition:transform .3s cubic-bezier(.4,0,.2,1)}.panel-mobile-header{display:none;padding:1rem;border-bottom:1px solid #333;justify-content:space-between;align-items:center}@media(max-width:768px){#controls-panel{position:fixed;top:0;left:0;width:280px;height:100vh;box-shadow:10px 0 30px #00000080;transform:translate(-100%)}#controls-panel.is-open{transform:translate(0)}.panel-mobile-header{display:flex}}#mobile-toggle-btn{display:none;position:fixed;top:15px;left:15px;z-index:400;background:var(--color-10, #3b82f6);color:var(--contrast-on-10, #fff);border:none;border-radius:8px;padding:10px;cursor:pointer;box-shadow:0 4px 12px #0000004d}@media(max-width:768px){#mobile-toggle-btn{display:flex;align-items:center;justify-content:center}}.panel-header{padding:1.5rem;border-bottom:1px solid #333}.panel-header h2{margin:0;font-size:1.2rem;font-weight:600;letter-spacing:.5px}.control-group{padding:1.5rem;border-bottom:1px solid #2a2a2a}.control-group h3{font-size:.8rem;text-transform:uppercase;color:#888;margin-bottom:1rem;letter-spacing:1px}.color-input-wrapper{display:flex;align-items:center;gap:12px;margin-bottom:12px;background:#252525;padding:8px;border-radius:6px;transition:background .2s}.color-input-wrapper:hover{background:#2a2a2a}.color-preview{width:32px;height:32px;border-radius:50%;border:2px solid #444;overflow:hidden;position:relative;cursor:pointer}input[type=color]{position:absolute;top:-50%;left:-50%;width:200%;height:200%;cursor:pointer;opacity:0}.color-info{display:flex;flex-direction:column;flex:1}.color-label{font-size:.8rem;font-weight:700}.color-hex{font-family:monospace;font-size:.8rem;color:#888}.preset-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.preset-btn{width:100%;padding-bottom:100%;border-radius:50%;position:relative;border:2px solid transparent;cursor:pointer;overflow:hidden;transition:transform .2s}.preset-btn:hover{transform:scale(1.1);border-color:#fff}.preset-swatch{position:absolute;inset:0}.toggle-wrapper{display:flex;justify-content:space-between;align-items:center;cursor:pointer}.switch{position:relative;width:40px;height:20px;background:#444;border-radius:20px;transition:.3s}.switch:after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;background:#fff;border-radius:50%;transition:.3s}input[type=checkbox]:checked+.switch{background:#3b82f6}input[type=checkbox]:checked+.switch:after{transform:translate(20px)}#ctx-menu{position:fixed;z-index:1000;background:#1e1e1ef2;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:12px;width:220px;box-shadow:0 8px 32px #0006;opacity:0;pointer-events:none;transform:scale(.95);transition:opacity .1s ease,transform .1s ease;display:flex;flex-direction:column;gap:12px}#ctx-menu.visible{opacity:1;pointer-events:auto;transform:scale(1)}.ctx-header{font-size:.75rem;text-transform:uppercase;color:#888;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:8px;margin-bottom:4px}.ctx-control{display:flex;flex-direction:column;gap:6px}.ctx-label{font-size:.8rem;color:#ccc;display:flex;justify-content:space-between}input[type=range]{width:100%;height:4px;background:#444;border-radius:2px;outline:none;-webkit-appearance:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:#3b82f6;border-radius:50%;cursor:pointer;border:2px solid #fff}.role-switcher{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;background:#252525;padding:4px;border-radius:6px}.role-btn{background:transparent;border:none;color:#888;font-size:.8rem;padding:6px;cursor:pointer;border-radius:4px;transition:all .2s}.role-btn:hover{background:#ffffff1a;color:#fff}.role-btn.active{background:#3b82f6;color:#fff;font-weight:700}.ctx-reset{background:transparent;border:1px solid rgba(255,100,100,.3);color:#ff6b6b;padding:6px;border-radius:4px;cursor:pointer;font-size:.8rem;transition:background .2s}.ctx-reset:hover{background:#ff64641a}.modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000000b3;backdrop-filter:blur(5px);z-index:2000;display:flex;justify-content:center;align-items:center;opacity:0;pointer-events:none;transition:opacity .2s ease}.modal-overlay.open{opacity:1;pointer-events:auto}.modal-content{background:#1e1e1e;width:90%;max-width:600px;border:1px solid #333;border-radius:12px;box-shadow:0 20px 50px #00000080;display:flex;flex-direction:column;overflow:hidden;transform:scale(.95);transition:transform .2s cubic-bezier(.175,.885,.32,1.275)}.modal-overlay.open .modal-content{transform:scale(1)}.modal-header{display:flex;align-items:center;border-bottom:1px solid #333;background:#181818}.tab-btn{padding:1rem 1.5rem;background:transparent;border:none;color:#888;cursor:pointer;font-weight:600;border-bottom:2px solid transparent;transition:all .2s}.tab-btn:hover{color:#ccc}.tab-btn.active{color:#3b82f6;border-bottom-color:#3b82f6;background:#3b82f61a}.close-modal{margin-left:auto;padding:1rem;background:transparent;border:none;color:#666;cursor:pointer;font-size:1.2rem}.close-modal:hover{color:#fff}.code-area{padding:1.5rem;background:#121212;color:#a9b7c6;font-family:Fira Code,Consolas,monospace;font-size:.9rem;height:300px;overflow-y:auto;white-space:pre;line-height:1.5}.token-prop{color:#9876aa}.token-val{color:#6a8759}.token-key{color:#cc7832}.modal-footer{padding:1rem;border-top:1px solid #333;display:flex;justify-content:flex-end;gap:1rem;background:#181818}.btn-primary{background:#3b82f6;color:#fff;border:none;padding:.6rem 1.2rem;border-radius:6px;cursor:pointer;font-weight:600;transition:background .2s}.btn-primary:hover{background:#2563eb}