:root{--primary-color: #007bff;--primary-hover-color: #0056b3;--background-color: #f0f2f5;--container-bg-color: #ffffff;--light-bg-color: #f9f9f9;--text-color: #333;--border-color: #dee2e6;--guide-color: #ff4500}html{scroll-behavior:smooth}body{font-family:Zen Kaku Gothic New,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Hiragino Kaku Gothic ProN,Meiryo,sans-serif;margin:0;background-color:var(--background-color);color:var(--text-color);line-height:1.6;display:flex;flex-direction:column;min-height:100vh}.page-content{flex:1;max-width:1000px;margin:2rem auto;padding:0 1.5rem;display:flex;flex-direction:column;gap:4rem}header{text-align:center;padding:.5rem 1rem;background-color:var(--container-bg-color);box-shadow:0 2px 4px #0000001a}header h1{margin:.25rem 0;font-weight:300}header h1 a{color:inherit;text-decoration:none}header p{margin-top:0;margin-bottom:.4rem;font-size:.9rem}footer{background-color:#343a40;color:#f8f9fa;text-align:center;padding:2rem 1rem;margin-top:4rem;font-weight:300}footer p{margin:0 0 .5rem}footer nav a{color:#dee2e6;text-decoration:none;margin:0 .75rem;white-space:nowrap}footer nav a:hover{color:#fff;text-decoration:underline}.page-wrapper{flex:1}.page-container{max-width:800px;margin:1.5rem auto;padding:2rem;background-color:var(--container-bg-color);border-radius:8px;box-shadow:0 2px 4px #0000001a}.page-container.form-container{max-width:700px}.hidden{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.button{display:inline-block;padding:.75rem 1.5rem;border:none;border-radius:8px;background-color:#6c757d;color:#fff;cursor:pointer;text-align:center;font-size:1rem;transition:background-color .2s ease;width:100%;box-sizing:border-box}.button-inline{width:auto}.button:hover:not(:disabled){background-color:#5a6268}.button.primary{background-color:var(--primary-color)}.button.primary:hover:not(:disabled){background-color:var(--primary-hover-color)}.button:disabled{background-color:#ccc;cursor:not-allowed;transition:none}.button.button-secondary{background-color:transparent;border:2px solid var(--primary-color);color:var(--primary-color);padding:.6rem 1.5rem;width:auto;text-decoration:none}.button.button-secondary:hover:not(:disabled){background-color:var(--primary-color);color:#fff}.card{background-color:var(--container-bg-color);border-radius:8px;box-shadow:0 4px 8px #00000014;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease}.card-image{width:100%;height:auto;aspect-ratio:16 / 9;object-fit:cover;background-color:#e9ecef}.card-content{padding:1.25rem}.card-header{display:flex;align-items:center;gap:.75rem;padding:1.25rem;border-bottom:1px solid var(--border-color)}.card-header h3{margin:0;font-size:1.2rem;font-weight:500}.card-link-wrapper{text-decoration:none;color:inherit;display:flex;flex-direction:column;height:100%}.card-link-wrapper .card-content{flex-grow:1}.page-title-container{padding-top:2rem;text-align:center}.page-title-container .section-subtitle{margin-bottom:0}.section-title{text-align:center;font-size:1.8rem;font-weight:400;margin-bottom:2.5rem;position:relative}.section-title:after{content:"";display:block;width:50px;height:3px;background:linear-gradient(135deg,var(--primary-color) 0%,#8b5cf6 100%);margin:.5rem auto 0}.section-subtitle{text-align:center;color:#666;margin-top:-2rem;margin-bottom:2.5rem;max-width:600px;margin-left:auto;margin-right:auto}.app-container{display:flex;flex-wrap:wrap;gap:1.5rem;padding:1.5rem;max-width:1400px;margin:0 auto;width:100%;box-sizing:border-box}.workspace{flex:3;min-width:300px;display:flex;justify-content:center;align-items:center;background-color:#e9ecef;border:2px dashed var(--border-color);border-radius:8px;position:relative;overflow:hidden;min-height:500px}.controls{flex:1;min-width:280px;background-color:var(--container-bg-color);padding:1.5rem;border-radius:8px;box-shadow:0 2px 4px #0000001a;align-self:flex-start}.workspace.drag-over{border-color:var(--primary-color);background-color:#e6f2ff;border-style:solid}.workspace.drag-over>*{pointer-events:none}#upload-prompt{text-align:center}#upload-prompt p{margin:8px 0}#canvas-container{position:relative;max-width:100%;max-height:100%;line-height:0}canvas{max-width:100%;max-height:80vh;display:block;background-color:#fff}#focus-area{position:absolute;border:2px solid var(--primary-color);box-shadow:0 0 0 1px #fff,inset 0 0 0 1px #fff;cursor:move;top:25%;left:25%;width:50%;height:50%;box-sizing:border-box;z-index:10}#focus-area.circle{border-radius:50%}.resize-handle{position:absolute;width:12px;height:12px;background:var(--primary-color);border:2px solid #fff;border-radius:2px;z-index:11}.resize-handle[data-direction=nw]{top:-6px;left:-6px;cursor:nwse-resize}.resize-handle[data-direction=ne]{top:-6px;right:-6px;cursor:nesw-resize}.resize-handle[data-direction=sw]{bottom:-6px;left:-6px;cursor:nesw-resize}.resize-handle[data-direction=se]{bottom:-6px;right:-6px;cursor:nwse-resize}#resize-guide-box{position:absolute;top:0;left:0;width:100%;height:100%;box-sizing:border-box;outline:2px dashed var(--primary-color);display:none;pointer-events:none;z-index:9}#focus-area.circle #resize-guide-box{display:block}.guide-line{position:absolute;background-color:var(--guide-color);display:none;z-index:5;pointer-events:none}.guide-line.horizontal{width:100%;height:2px;left:0}.guide-line.vertical{height:100%;width:2px;top:0}.controls h2{font-weight:400;margin:0 0 .6rem}.controls label{display:block;pointer-events:none;margin-top:.6rem;margin-bottom:.25rem}.controls label:first-of-type{margin-top:0}fieldset{border:1px solid var(--border-color);border-radius:8px;margin-bottom:.8rem;padding:.6rem 1rem .9rem}legend{padding:0 .5rem}.controls input[type=range]{appearance:none;width:100%;height:8px;border-radius:9999px;background:var(--border-color);cursor:pointer}.controls input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border:2px solid #fff;border-radius:9999px;background:var(--primary-color);box-shadow:none;transition:background-color .2s ease}.controls input[type=range]:hover::-webkit-slider-thumb{background:var(--primary-hover-color)}.controls input[type=range]::-moz-range-thumb{border:none;width:14px;height:14px;border:2px solid #fff;border-radius:9999px;background:var(--primary-color);box-shadow:none;transition:background-color .2s ease}.controls input[type=range]:hover::-moz-range-thumb{background:var(--primary-hover-color)}.select-wrapper{position:relative;width:100%}.select-wrapper:after{content:"▼";font-size:.8rem;position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;color:#555}#focus-shape,#line-type{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;padding:.5rem 2rem .5rem .75rem;border:1px solid var(--border-color);border-radius:.5rem;background-color:var(--container-bg-color);cursor:pointer;font-size:.9rem;font-weight:300}#focus-shape:hover,#line-type:hover{border-color:#999}.controls .clr-field{width:100%;box-sizing:border-box;display:inline-flex;align-items:center;margin-bottom:.2rem}.controls .clr-field input{width:100%;height:100%;padding:.5rem 2rem .5rem .75rem;border:1px solid var(--border-color);border-radius:.5rem;font-size:.9rem}.controls .clr-field button{border-radius:0 .5rem .5rem 0}#download-btn{margin-top:.5rem}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;text-align:center}.feature-item{background-color:var(--container-bg-color);border-radius:8px;box-shadow:0 4px 8px #0000000d;padding:1.5rem;text-align:center;transition:transform .2s ease,box-shadow .2s ease;position:relative;overflow:hidden}.feature-item:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(135deg,var(--primary-color) 0%,#8b5cf6 100%)}.feature-item .feature-icon{height:48px;display:inline-flex;align-items:center;justify-content:center}.feature-item .feature-icon img{width:48px;height:48px}.feature-item h3{margin:.2rem 0 .5rem;font-weight:500}.feature-item p{margin:0;font-size:.9rem;color:#555}.usage-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}.usage-steps .card p{font-size:.95rem;color:#333;margin:0}.usage-steps .card .card-image{border-bottom:1px solid var(--border-color);box-sizing:border-box;object-fit:contain}.usage-steps .card .card-image+p{padding:1.25rem}.step-number{background-color:var(--primary-color);color:#fff;font-weight:700;width:28px;height:28px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center;flex-shrink:0}.introduction-container{display:flex;align-items:center;gap:2.5rem;max-width:1000px;margin:0 auto;background-color:var(--container-bg-color);padding:2.5rem;border-radius:8px;box-shadow:0 4px 8px #00000014}.introduction-image{width:200px;height:200px;flex-shrink:0;border-radius:8px;color:var(--primary-color)}.introduction-text p{margin-top:0;margin-bottom:1rem}.introduction-text p:last-child{margin-bottom:0}.tips-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}.tips-grid .card .card-content{text-align:left;padding:1.25rem}.tips-grid .card h3{margin:0 0 .5rem;font-weight:500}.tips-grid .card p{margin:0;font-size:.95rem;color:#555}.faq-wrapper{display:flex;flex:1}.faq-container{width:100%;max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:.75rem;padding:0 1rem}.faq-item{background-color:var(--container-bg-color);border-radius:8px;transition:background-color .2s ease}.faq-question{display:block;padding:1.8rem 2.5rem 1.8rem 1.5rem;cursor:pointer;font-weight:500;position:relative;font-size:1.05rem;list-style:none}.faq-question::-webkit-details-marker{display:none}.faq-question:after{content:"+";position:absolute;right:1.5rem;top:50%;transform:translateY(-50%);font-size:1.5rem;font-weight:300;color:var(--primary-color);transition:transform .2s ease}.faq-item[open] .faq-question:after{content:"−";transform:translateY(-50%) rotate(180deg)}.faq-answer{padding:0 1.5rem 1.25rem;color:#333;line-height:1.7}.faq-answer p{margin:0}.faq-answer a{color:var(--primary-color);text-decoration:none}.faq-answer a:hover{text-decoration:underline}.page-container iframe{width:100%;height:812px;border:none;display:block}.page-container h2{font-weight:500;margin-top:2rem;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:2px solid #e9ecef}.page-container h2:first-of-type{margin-top:0}.page-container p,.page-container ul{margin-bottom:1rem;line-height:1.8}.page-container strong{font-weight:500}.page-container ul{padding-left:20px}.page-container li{margin-bottom:.75rem}@media (max-width: 800px){header h1{font-size:1.8rem}.page-content{padding:0 1rem;gap:3rem;margin-top:1rem}footer nav a{display:block;margin:.75rem 0}.section-title{font-size:1.5rem}.section-subtitle{margin-top:-1.5rem;margin-bottom:2rem}.card-header{padding:1rem}.card-header h3{font-size:1.1rem}.app-container{flex-direction:column;padding:1rem;gap:1rem}.workspace{height:auto}#upload-prompt{font-size:.9rem}canvas{max-height:80vh}.controls{width:100%;box-sizing:border-box;align-self:stretch}.controls h2{font-size:1.3rem;margin:0 0 .2rem}.controls label{font-size:.95rem;margin-top:.4rem;margin-bottom:.1rem}fieldset{padding:.4rem 1rem .6rem}legend{font-size:.9rem}.features-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.7rem}.feature-item{padding:.8rem}.feature-item h3{font-size:1rem}.feature-item p{font-size:.8rem}.usage-steps .card p{font-size:.9rem}.usage-steps .card .card-image+p{padding:1rem}.step-number{font-size:.85rem;width:24px;height:24px}.introduction-container{flex-direction:column;padding:2rem 1.5rem}.introduction-text p{font-size:.9rem}.tips-grid .card h3{font-size:1.1rem}.tips-grid .card p{font-size:.9rem}.comparison-grid{gap:1.5rem}.comparison-item{padding:1rem}.image-comparison{flex-direction:column}.developer-profile{flex-direction:column;text-align:center}.profile-text p{font-size:.9rem}.profile-links{text-align:center}.faq-question{padding:1.2rem 2.5rem 1.2rem 1rem;font-size:.9rem}.faq-question:after{right:1rem}.faq-answer{padding-left:1rem;padding-right:1rem;font-size:.9rem}.faq-item[open] .faq-answer{padding-bottom:1rem}.page-container{margin:1rem;padding:1.5rem}.page-container.form-container{padding:0}.page-container iframe{height:100vh;border-radius:8px}.page-container h2{font-size:1.3rem}.page-container p,.page-container ul{font-size:.9rem}}