*{box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;max-width:700px;margin:0 auto;padding:15px 15px 10px;background:#f5f7fa;line-height:1.5;font-size:15px}.header{background:#3498db;color:#fff;padding:12px 16px;border-radius:12px;margin-bottom:8px;box-shadow:0 8px 32px #3498db33;position:relative;text-align:center}.header-content{max-width:100%}.header h1{margin:0 0 3px;font-size:1.6rem;font-weight:700}.header p{margin:0;font-size:.85rem;opacity:.9}.github-link{position:absolute;top:10px;right:20px;display:inline-flex;align-items:center;gap:6px;color:#fffffff2;text-decoration:none;font-size:.8rem;font-weight:500;padding:6px 10px;background:#ffffff26;border:1px solid rgba(255,255,255,.25);border-radius:8px;transition:all .2s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.github-link:hover{background:#ffffff40;border-color:#fff6;color:#fff;transform:translateY(-1px);box-shadow:0 4px 12px #00000026}.github-link svg{flex-shrink:0;width:18px;height:18px}.generator{background:#fff;border-radius:12px;padding:12px;margin-bottom:8px;box-shadow:0 4px 20px #2c3e501a;border:1px solid #e8eaed}.form-group{margin-bottom:12px}.form-group label{display:block;margin-bottom:4px;font-weight:600;color:#2c3e50;font-size:14px}.form-group.primary label{font-size:15px;font-weight:700;color:#2c3e50;margin-bottom:6px}.form-group.primary input[type=url]{padding:12px 16px;border:3px solid #3498db;border-radius:10px;font-size:16px;font-weight:500;background:linear-gradient(135deg,#fff,#f8fbff);box-shadow:0 2px 8px #3498db26;transition:all .3s ease}.form-group.primary input[type=url]:focus{outline:none;border-color:#2980b9;box-shadow:0 4px 16px #3498db40;transform:translateY(-1px)}.form-group.primary input[type=url]::placeholder{color:#7fb3d3;opacity:.8}.form-group.secondary label{font-size:13px;font-weight:500;color:#5a6c7d;opacity:.9}.form-group input[type=url],.form-group input[type=number],.form-group select{width:100%;padding:8px 12px;border:2px solid #e1e8ed;border-radius:8px;font-size:15px;transition:border-color .3s ease;background:#fafbfc}.form-group input[type=url]{font-size:16px}.form-group input[type=number],.form-group select option{font-size:13px}.form-group input:focus,.form-group select:focus{outline:none;border-color:#3498db}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}.generate-btn{background:#3498db;color:#fff;border:none;padding:8px 16px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s ease;width:100%}.generate-btn:hover{background:#2980b9;transform:translateY(-2px);box-shadow:0 6px 20px #3498db4d}.generate-btn:disabled{background:#bdc3c7;cursor:not-allowed;transform:none;box-shadow:none}.preview-section,.code-section{background:#fff;border-radius:12px;padding:14px;margin-bottom:6px;box-shadow:0 4px 20px #2c3e501a;border:1px solid #e8eaed}.code-section{margin-top:2px}.preview-section h2,.code-section h2,.code-section h3{margin:0 0 8px;color:#2c3e50;font-size:1.05rem}.code-section h3{font-size:.9rem;margin:0 0 6px;font-weight:600}.preview-area{border:2px dashed #95a5a6;padding:15px;background:#f8f9fa;border-radius:8px;text-align:center;display:flex;align-items:center;justify-content:center;flex-direction:column;touch-action:manipulation;-webkit-touch-callout:none}.preview-area:has(div:not(.placeholder)){background:#fff;border:2px solid #3498db;padding:10px;text-align:center;align-items:center;justify-content:center}.placeholder{color:#6c757d;font-style:italic}.code-display{background:#0d1117;color:#f0f6fc;border:1px solid #30363d;padding:0;border-radius:8px;position:relative;box-sizing:border-box;max-height:120px;overflow-y:auto;font-size:12px}.code-display pre{margin:0;padding:16px;background:transparent;border:none;border-radius:0;overflow:visible;font-family:ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace;font-size:12px;line-height:1.45;word-wrap:normal;white-space:pre}.code-display code{background:transparent;color:inherit;font-size:inherit;padding:0;margin:0;border:none;border-radius:0;display:block}.code-display #codeContent{margin:0;padding:0;display:block;color:#f0f6fc}.code-display::-webkit-scrollbar{width:12px;height:12px}.code-display::-webkit-scrollbar-track{background:#0d1117;border-radius:8px}.code-display::-webkit-scrollbar-thumb{background:#484f58;border-radius:8px;border:2px solid #0d1117}.code-display::-webkit-scrollbar-thumb:hover{background:#6e7681}#codeContent{display:block;white-space:pre-wrap;word-break:break-all;margin:0;padding:0;line-height:1.4;min-height:1em;border:none;outline:none;color:inherit}.copy-btn{position:sticky;top:8px;right:8px;float:right;margin-bottom:-40px;background:#21262d;color:#f0f6fc;border:1px solid #30363d;padding:6px 12px;border-radius:6px;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s ease;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;z-index:10;box-shadow:0 2px 4px #0000004d}.copy-btn:hover{background:#30363d;border-color:#6e7681}.copy-success{background:#22c55e33!important;color:#22c55e!important;border-color:#22c55e66!important;box-shadow:0 4px 12px #22c55e33!important}.error{color:#c0392b;background:#fadbd8;padding:12px 16px;border-radius:8px;margin-top:10px}.help{background:#bee3f8;padding:8px 12px;border-radius:8px;margin-bottom:12px;border-left:4px solid #3182ce;font-size:14px;line-height:1.4}.help-title{display:block;font-size:1em;font-weight:700;margin-bottom:2px;color:#2a3a4a;letter-spacing:.05em}.help-desc{display:block;font-size:.9em;color:#444;line-height:1.7}@media (max-width: 768px){body{padding:10px;font-size:14px}.header{padding:12px 16px;position:relative;margin-bottom:6px}.header h1{font-size:1.3rem;margin-right:60px}.header p{font-size:.75rem}.github-link{position:absolute;top:8px;right:12px;font-size:11px;gap:4px;padding:4px 6px}.github-link svg{width:12px;height:12px}.generator,.preview-section,.code-section{padding:10px;margin-bottom:5px}.code-section{margin-top:1px}.help{padding:6px 10px;font-size:12px;line-height:1.3}.form-row{grid-template-columns:1fr;gap:8px}.form-group.primary input[type=url]{padding:10px 14px;font-size:16px}.form-group.secondary label{font-size:12px}.preview-area{padding:8px;touch-action:manipulation}.preview-area:has(div:not(.placeholder)){padding:5px;align-items:center}.code-display{max-height:80px;font-size:11px}.code-display pre{padding:12px;font-size:11px}.copy-btn{top:6px;right:6px;padding:4px 8px;font-size:11px}.code-section h3{font-size:.85rem;margin:0 0 5px}}@media (max-width: 480px){.header{margin-bottom:5px}.header h1{font-size:1.1rem;margin-right:55px;line-height:1.3}.header p{font-size:.7rem;margin-top:2px}.github-link{top:6px;right:8px;font-size:10px;gap:3px;padding:3px 5px}.github-link svg{width:10px;height:10px}.form-row{gap:6px}.generator,.preview-section,.code-section{margin-bottom:4px;padding:8px}.code-section h3{font-size:.8rem;margin:0 0 4px}}.footer{background:#fff;border-radius:12px;padding:16px;margin-top:8px;box-shadow:0 4px 20px #2c3e501a;border:1px solid #e8eaed;text-align:center}.footer-content{max-width:100%}.footer-author{margin:0 0 8px;font-size:14px;color:#2c3e50;font-weight:500}.footer-author a{color:#3498db;text-decoration:none;font-weight:600;transition:color .2s ease}.footer-author a:hover{color:#2980b9;text-decoration:underline}.footer-links{margin:0;font-size:13px}.footer-links a{color:#7f8c8d;text-decoration:none;transition:color .2s ease}.footer-links a:hover{color:#2c3e50}.footer-links .separator{margin:0 8px;color:#bdc3c7}@media (max-width: 768px){.footer{padding:12px;margin-top:6px}.footer-author{font-size:13px;margin-bottom:6px}.footer-links{font-size:12px}.footer-links .separator{margin:0 6px}}@media (max-width: 480px){.footer{padding:10px;margin-top:5px}.footer-author{font-size:12px}.footer-links{font-size:11px}}:host{all:initial;display:inline-block!important;visibility:visible!important;opacity:1!important;box-sizing:border-box!important}.turntable-wrapper{box-sizing:border-box;margin:0;padding:0;border:none;background:none;font-family:inherit;line-height:normal;display:inline-block;width:auto;max-width:100%;vertical-align:top}[vimeo-video-id]{box-sizing:border-box;margin:0;padding:0;background:none;font-family:inherit;line-height:normal;position:relative;display:block;width:auto;opacity:0;visibility:hidden;transition:opacity .3s ease;min-height:300px;overflow:hidden;border:1px solid transparent;touch-action:none;-webkit-touch-callout:none}[vimeo-video-id].initialized{opacity:1;visibility:visible}[vimeo-video-id] iframe{box-sizing:border-box;margin:0;padding:0;border:none;max-width:none;min-width:0;background:transparent;display:block;opacity:0;visibility:hidden;transition:opacity .3s ease}[vimeo-video-id] iframe.size-ready{opacity:1;visibility:visible}.drag-overlay{box-sizing:border-box;margin:0;padding:0;border:none;background:none;position:absolute;top:0;left:0;width:100%;height:100%;cursor:grab;user-select:none;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none}#angle-display{box-sizing:border-box;margin:0;padding:6px 10px;border:1px solid rgba(255,255,255,.1);position:absolute;bottom:10px;left:50%;transform:translate(-50%);background:#000000bf;color:#fff;border-radius:6px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:12px;font-weight:600;letter-spacing:0px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 2px 8px #0000004d;pointer-events:none;z-index:5;display:none;justify-content:center;align-items:center;width:60px;white-space:nowrap;font-variant-numeric:tabular-nums;min-width:60px;font-feature-settings:"tnum" 1}.reload-button{box-sizing:border-box;margin:0;padding:0;position:absolute;top:8px;left:8px;width:32px;height:32px;background:#0000004d;border:1px solid rgba(255,255,255,.1);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:15;transition:all .2s ease;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.reload-button:hover{background:#00000080;border-color:#ffffff40;transform:scale(1.05)}.reload-button:active{transform:scale(.95)}.reload-icon{width:16px;height:16px;color:#fffc;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.reload-button.loading .reload-icon{animation:reload-spin 1s linear infinite}@keyframes reload-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}#rotation-angle{display:inline-block;width:30px;text-align:right;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}.degree-symbol{display:inline-block;width:10px;text-align:left}#angle{display:inline-block;width:2.2em;text-align:right;font-variant-numeric:tabular-nums}.loading-overlay{box-sizing:border-box;margin:0;padding:0;border:none;position:absolute;top:0;left:0;width:100%;height:100%;min-height:300px;background:#000c;display:flex;align-items:center;justify-content:center;z-index:10;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);transition:opacity .3s ease;border-radius:inherit}.loading-overlay.hidden{opacity:0;pointer-events:none}.loading-content{text-align:center;color:#fff;padding:20px;border-radius:8px;background:#ffffff1a;min-width:250px;box-sizing:border-box}.loading-text{font-size:16px;margin-bottom:15px;font-weight:500}.progress-container{display:flex;align-items:center;gap:10px}.progress-bar{flex:1;height:8px;background:#fff3;border-radius:4px;overflow:hidden;position:relative}.progress-fill{height:100%;background:linear-gradient(90deg,#4caf50,#81c784);border-radius:4px;width:0%;transition:width .3s ease;position:relative}.progress-fill:after{content:"";position:absolute;top:0;left:0;height:100%;width:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:shimmer 2s infinite}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.progress-text{font-size:14px;font-weight:700;min-width:35px}.vimeo-viewer-wrapper{box-sizing:border-box;margin:0;padding:0;display:inline-block;width:auto}.vimeo-link{box-sizing:border-box;margin:8px 0 0;padding:6px 12px;border:none;display:block;text-align:center;color:#666;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:12px;font-weight:500;text-decoration:none;border-radius:4px;background:#0000000d;transition:color .3s ease,background-color .3s ease;width:auto;opacity:0;pointer-events:none}.vimeo-link.visible{opacity:1;pointer-events:auto}.vimeo-link:hover{color:#06c;background:#0066cc1a;text-decoration:none}.drag-overlay.dragging,[vimeo-video-id].dragging{touch-action:none}@media (max-width: 768px){.turntable-wrapper{display:block;width:100%;max-width:none;min-width:100%;box-sizing:border-box;margin:0 auto}[vimeo-video-id]{display:block;width:100%;max-width:none;min-width:100%;min-height:auto;box-sizing:border-box;margin:0 auto}[vimeo-video-id] iframe{display:block;width:100%;max-width:none;min-width:100%;height:auto;aspect-ratio:1 / 1;box-sizing:border-box;margin:0 auto}.loading-overlay{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;min-height:auto;box-sizing:border-box;margin:0;padding:0}.loading-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:70%;max-width:300px;min-width:200px;padding:12px 16px;box-sizing:border-box}.loading-text{font-size:14px;margin-bottom:10px;text-align:center}.progress-container{gap:8px;align-items:center;justify-content:center}.progress-bar{height:6px;flex:1;min-width:120px}.progress-text{font-size:12px;min-width:35px;text-align:center}.drag-overlay{width:100%;height:100%;box-sizing:border-box}#angle-display{bottom:5px;font-size:11px;padding:4px 8px;min-width:50px;width:50px}#rotation-angle{width:25px}.vimeo-link{font-size:11px;padding:4px 8px;margin-top:6px;display:block;text-align:center;width:100%;box-sizing:border-box}}