:root{--bg:#071021;--minor:#e6e6e6;--major:#c0c0c0;--axis:#111;--dot:#666;--card:#0e1627;--glass:rgba(255, 255, 255, 0.15);--font-color:#d0d4db;--muted:#9aa4b2;--accent:#36b37e}*{box-sizing:border-box}html,body{margin:0;padding:0;font-family:Inter,system-ui,Segoe UI,Roboto,'Helvetica Neue',Arial;background:var(--bg);color:var(--font-color)}a{text-decoration:none}.page-container{display:flex;flex-direction:column;min-height:100vh}.app{display:grid;grid-template-columns:360px 1fr 300px;gap:12px;min-height:calc(100vh - 60px);padding:12px}.panel{background:var(--card);border-radius:12px;padding:14px;box-shadow:0 6px 20px rgb(0 0 0 / .2);overflow-y:auto;max-height:calc(100vh - 84px)}.ad-column{background:var(--card);border-radius:12px;padding:14px;box-shadow:0 6px 20px rgb(0 0 0 / .2);overflow-y:auto;max-height:calc(100vh - 84px)}h2{margin:0 0 12px 0;font-size:16px;color:var(--font-color)}label{display:block;font-size:13px;margin:10px 0 6px;color:var(--font-color)}select,input[type=number],input[type=color],button,input[type=text]{width:100%;padding:8px;border-radius:8px;border:1px solid var(--glass);font-size:14px;background:#1a263a;color:var(--font-color)}select:focus,input:focus{outline:none;border-color:var(--accent)}.row{display:flex;gap:8px}.row>*{flex:1}.small{width:80px}.preview-wrap{display:flex;flex-direction:column;min-height:380px;width:100%}.preview{flex:1;border-radius:12px;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:12px;min-height:380px;width:100%;position:relative;overflow:visible}.controls-foot{display:flex;gap:8px;margin-top:12px}.btn{cursor:pointer;background:var(--accent);color:#fff;border:none;padding:10px;border-radius:8px}.btn.secondary{background:var(--card);color:var(--font-color);border:1px solid var(--glass)}.btn:hover{opacity:.9}.meta{font-size:12px;color:var(--muted);margin-top:8px}svg{max-width:100%;height:auto;display:block;background:#fff}.inline{display:flex;gap:8px;align-items:center}.help{font-size:12px;color:var(--muted)}.top-row{display:flex;gap:8px;align-items:center}.preset-list{display:flex;gap:8px;flex-wrap:wrap}.preset{padding:6px 8px;border-radius:8px;background:var(--card);border:1px solid var(--glass);font-size:13px;cursor:pointer;color:var(--font-color)}.tool-row{display:flex;gap:8px;align-items:center;margin-top:8px}.color-indicator{display:inline-block;width:22px;height:22px;border-radius:4px;border:2px solid var(--font-color);box-shadow:0 0 0 1px rgb(255 255 255 / .2);vertical-align:middle}.small-input{width:84px}#previewArea{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:visible}#exportSvg{display:block;max-width:100%;max-height:100%;width:auto;height:auto}.drawing-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:auto;touch-action:none;user-select:none}#ad-slot,#ad-slot-right{margin-top:12px;padding:8px;background:var(--card);border-radius:8px;text-align:center;color:var(--muted);font-size:13px;border:1px dashed var(--glass)}#description-module{width:80vw;margin:40px auto;padding:0 20px}#description-module h2{text-align:center;color:var(--font-color)}#description-module .guide-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:32px;margin:24px 0}#description-module .tutorial-section,#description-module .usage-section,#description-module .faq-section{margin:24px 0}#description-module .tutorial-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.description-subhead{text-align:center;margin-top:10px;color:var(--font-color)}#description-module .tutorial-card{background:var(--card);border:1px solid var(--glass);border-radius:8px;padding:16px;text-align:center}#description-module .tutorial-card h4{margin:0 0 12px;color:var(--font-color)}#description-module .tutorial-card img{max-width:100%;height:auto;border-radius:4px}#description-module .tip-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}#description-module .tip-card{background:var(--card);border:1px solid var(--glass);border-radius:8px;padding:12px;color:var(--font-color);font-size:.95rem}#description-module .usage-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}#description-module .usage-column,#description-module .faq-column{display:flex;flex-direction:column;gap:8px}#description-module .faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.icon-shapes{background-image:url(/images/icons/shapes.svg)}.icon-style{background-image:url(/images/icons/style.svg)}.icon-draw{background-image:url(/images/icons/draw.svg)}.icon-export{background-image:url(/images/icons/export.svg)}.icon-save{background-image:url(/images/icons/save.svg)}.icon-mobile{background-image:url(/images/icons/mobile.svg)}.icon-print{background-image:url(/images/icons/print.svg)}#description-module .guide-column{display:flex;flex-direction:column}#description-module .guide-section{margin:16px 0;border:1px solid var(--glass);border-radius:8px;transition:box-shadow 0.3s ease}#description-module .guide-section:hover{box-shadow:0 4px 12px rgb(255 255 255 / .2)}#description-module summary{padding:16px;font-size:1.2rem;font-weight:600;color:var(--font-color);background:var(--card);cursor:pointer;border-radius:8px;transition:background 0.3s ease}#description-module summary:hover{background:#2a3344}#description-module .guide-content{padding:20px;background:var(--card);border-radius:0 0 8px 8px;color:var(--font-color)}#description-module .guide-content ul{margin-left:32px}#description-module .guide-content ul li{margin-bottom:10px}#description-module .guide-content ul ul{list-style:circle;margin-left:36px}#description-module .guide-image{margin:20px 0;text-align:center}#description-module .guide-image img{max-width:100%;height:auto;border-radius:8px;box-shadow:0 2px 6px rgb(0 0 0 / .3)}#description-module .guide-image figcaption{font-size:.9rem;color:var(--muted);margin-top:8px}#description-module .cta-buttons{display:flex;gap:16px;justify-content:center;margin-top:24px}#description-module .cta-button{padding:12px 24px;font-size:1.1rem;font-weight:600;color:#fff;background:var(--accent);border:none;border-radius:6px;cursor:pointer;transition:background 0.3s ease}#description-module .cta-button:hover{background:#2e9b67}@media (max-width:1280px){.app{grid-template-columns:360px 1fr}.ad-column{display:none}}@media (max-width:980px){.app{display:flex;flex-direction:column;min-height:auto}.panel{min-height:0;max-height:none}.preview-wrap{height:auto;min-height:300px}.preview{min-height:300px;width:100%;max-width:100%}#previewArea{min-height:300px}.right{display:none}}@media (prefers-reduced-motion:no-preference){.panel,.ad-column{transition:box-shadow 0.18s ease}.panel:hover,.ad-column:hover{box-shadow:0 18px 40px rgb(0 0 0 / .3)}}.muted{color:var(--muted);font-size:13px}.flex{display:flex;gap:8px}.right{margin-left:auto}@media (min-width:769px){.left{width:320px}.left.active{width:320px}.toggle-btn{display:block}.right{display:block}}@media (max-width:768px){html,body{font-size:15px;margin:0;padding:0;overflow-x:hidden;overflow-y:auto;background:var(--bg)}.app{display:flex;flex-direction:column;min-height:auto;height:auto;width:100%;box-sizing:border-box}.preview-wrap{width:100%;min-height:300px;height:auto;display:block;box-sizing:border-box;order:1}.preview{display:block;width:100%;min-height:300px;height:auto;position:relative;padding:12px;box-sizing:border-box;background:var(--bg)}.preview.panel{width:100%;min-height:300px;height:auto;position:relative;padding:12px;box-sizing:border-box;overflow:visible;max-height:none;display:block}#previewArea{width:100%;min-height:300px;height:70vh;display:block;position:relative;box-sizing:border-box}.drawing-overlay{position:absolute;top:0;left:0;width:100%;height:100%;transform:none;box-sizing:border-box;pointer-events:auto;touch-action:none}aside.panel{order:2;display:none;max-height:none;background:var(--card)}aside.panel.active{display:block}.panel-toggle{display:block;margin:12px auto;padding:10px 14px;background:var(--accent);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:14px;order:0}.panel-toggle:active{background:#2e9b67}.ad-column{display:none}.app>*:not(.preview-wrap):not(aside.panel):not(.ad-column){order:3}}.panel-toggle{display:none}@media (max-width:768px){.panel-toggle{display:block;margin:12px auto;padding:10px 14px;background:var(--accent);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:14px}.panel-toggle:active{background:#2e9b67}.preview.panel{overflow:visible;max-height:none;height:auto}}@media (min-width:769px) and (max-width:1024px){#description-module .guide-grid{grid-template-columns:1fr}#description-module .tutorial-grid{grid-template-columns:1fr}#description-module .tip-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:768px){#description-module{padding:16px}#description-module .guide-container{max-width:100%}#description-module h2{font-size:1.4rem}#description-module h3{font-size:1.2rem}#description-module p,#description-module ul li{font-size:.95rem;color:var(--font-color)}#description-module .icon{width:20px;height:20px}#description-module .guide-grid,#description-module .usage-grid,#description-module .faq-grid,#description-module .tutorial-grid,#description-module .tip-grid{grid-template-columns:1fr}#description-module .tutorial-card,#description-module .tip-card{margin-bottom:16px}#description-module summary{font-size:1.1rem;padding:12px}#description-module .guide-content{padding:12px}#description-module .cta-button{padding:10px 20px;font-size:1rem}}.site-header{padding:12px 0;border-bottom:1px solid var(--glass);position:relative;width:100%}.header-container{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:1200px;margin:0 auto;padding:0 20px;box-sizing:border-box}.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.2rem;color:var(--font-color)}.logo img{width:32px;height:32px}.nav ul{display:flex;gap:20px;list-style:none;margin:0;padding:0}.nav a{color:var(--font-color);text-decoration:none;padding:6px 0}.nav a:hover{color:var(--accent)}.nav .submenu{display:none;position:absolute;top:100%;left:0;background:var(--card);border:1px solid var(--glass);border-radius:8px;min-width:180px;padding:8px 0;box-shadow:0 2px 6px rgb(0 0 0 / .2);z-index:1000}.nav .submenu li a{display:block;padding:8px 16px;color:var(--font-color);text-decoration:none}.nav .submenu li a:hover{background:var(--accent);color:#fff}@media (min-width:769px){.nav{display:block!important}.nav-toggle{display:none}.has-submenu{position:relative}.has-submenu:hover .submenu{display:block}}.nav-toggle{display:none;font-size:1.6rem;background:none;border:none;color:var(--font-color);cursor:pointer;padding:8px;z-index:1100}@media (max-width:768px){.site-header{padding:12px 0}.header-container{max-width:none;margin:0;padding:0 20px}.nav-toggle{display:block;margin-left:auto}.nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--card);border:1px solid var(--glass);border-radius:8px;padding:12px;min-height:100px;box-sizing:border-box;z-index:1000}.nav.active{display:block!important}.nav ul{flex-direction:column;gap:12px}.has-submenu>a::after{content:" ▼";font-size:.8rem}.has-submenu.open .submenu{display:block;position:relative;border:none;background:#fff0;padding-left:16px}}.site-footer{background:var(--card);padding:50px 20px 30px;margin-top:60px;border-top:1px solid var(--glass)}.footer-columns{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;max-width:1200px;margin:0 auto 40px}.footer-col h4{margin-bottom:16px;color:var(--font-color);font-size:1.1rem;margin-left:35px}.footer-col ul{list-style:none}.footer-col ul li{margin-bottom:8px}.footer-col a{color:var(--muted);transition:color 0.3s}.footer-col a:hover{color:var(--accent)}.footer-p{color:var(--muted);font-size:.95rem;line-height:1.6}.footer-note{text-align:center;font-size:.9rem;color:var(--muted);padding-top:20px;border-top:1px solid var(--glass)}@media (max-width:1024px){.footer-columns{grid-template-columns:repeat(2,1fr)}.footer-col h4{margin-left:25px}}@media (max-width:600px){.footer-columns{grid-template-columns:1fr;text-align:center}.footer-col h4{margin-left:25px}}