.DesignToHtmlTool-module__VhWShq__shell{z-index:0;isolation:isolate;gap:.9rem;width:min(1180px,92vw);min-height:100vh;margin:0 auto;padding:clamp(1rem,2vw,1.5rem) 0 4rem;display:grid;position:relative}.DesignToHtmlTool-module__VhWShq__shell:before,.DesignToHtmlTool-module__VhWShq__shell:after{content:"";z-index:-1;pointer-events:none;position:absolute;inset:0 max(-4vw,50% - 50vw)}.DesignToHtmlTool-module__VhWShq__shell:before{background:linear-gradient(135deg,#eff6fff2,#fffdf1f0 48%,#eef9f5f0),#f8fafc}.DesignToHtmlTool-module__VhWShq__shell:after{opacity:.45;background-image:linear-gradient(#11213f0e 1px,#0000 1px),linear-gradient(90deg,#11213f0e 1px,#0000 1px);background-size:34px 34px;-webkit-mask-image:linear-gradient(#000000e0,#0000 78%);mask-image:linear-gradient(#000000e0,#0000 78%)}.DesignToHtmlTool-module__VhWShq__shell>*{z-index:1;position:relative}.DesignToHtmlTool-module__VhWShq__title{color:#142a51;font-family:var(--font-display),var(--font-body),sans-serif;letter-spacing:0;font-size:clamp(1.8rem,4.2vw,2.5rem)}.DesignToHtmlTool-module__VhWShq__help{color:#31516f;border-left:4px solid #d4c918;max-width:72ch;padding-left:.85rem;line-height:1.55}.DesignToHtmlTool-module__VhWShq__tabs{background:#ffffffb3;border:1px solid #142a5124;border-radius:8px;grid-template-columns:repeat(3,minmax(0,1fr));align-content:start;gap:.35rem;padding:.24rem;display:grid}.DesignToHtmlTool-module__VhWShq__tabBtn{color:#334155;cursor:pointer;text-align:center;white-space:nowrap;background:0 0;border:1px solid #0000;border-radius:6px;padding:.44rem .34rem;font-size:12px;font-weight:800}.DesignToHtmlTool-module__VhWShq__tabBtn:hover{color:#142a51;background:#142a5112}.DesignToHtmlTool-module__VhWShq__tabBtnActive{color:#142a51;background:#fffc63;border-color:#d4c918b3;box-shadow:0 6px 14px #142a511f}.DesignToHtmlTool-module__VhWShq__warning{color:#7c2d12;letter-spacing:.02em;margin:0;font-weight:800;line-height:1.45}.DesignToHtmlTool-module__VhWShq__modeHelp{color:#334155;margin:0;line-height:1.48}.DesignToHtmlTool-module__VhWShq__modeLayout{align-items:start;gap:.55rem;display:grid}.DesignToHtmlTool-module__VhWShq__modeInfo{background:#f8fafc80;border-left:3px solid #0f766e8f;min-height:100%;padding:.34rem 0 .34rem .72rem}.DesignToHtmlTool-module__VhWShq__panel{contain:layout paint;background:#ffffffc7;border:1px solid #142a5121;border-radius:8px;gap:.55rem;padding:.9rem;display:grid;position:relative;overflow:hidden;box-shadow:0 18px 42px #142a5114,inset 0 1px #ffffff9e}.DesignToHtmlTool-module__VhWShq__panel:before{content:"";background:linear-gradient(90deg,#142a51,#0f766e 45%,#d4c918);height:3px;position:absolute;inset:0 0 auto}.DesignToHtmlTool-module__VhWShq__modePanel{background:linear-gradient(#fffc6352,#ffffffd1),#ffffffc7;align-content:start;gap:0}.DesignToHtmlTool-module__VhWShq__sourcePanel{background:linear-gradient(#ecfdf5c7,#ffffffd6),#ffffffc7}.DesignToHtmlTool-module__VhWShq__codePanel{color:#dbeafe;background:linear-gradient(145deg,#07111ffa,#11213ff5 55%,#0f172afa),#0f172a;border-color:#94a3b842;box-shadow:0 20px 46px #0f172a33,inset 0 1px #ffffff14}.DesignToHtmlTool-module__VhWShq__codePanel:before{background:linear-gradient(90deg,#fffc63,#38bdf8 54%,#94a3b8)}.DesignToHtmlTool-module__VhWShq__codePanel .DesignToHtmlTool-module__VhWShq__label{color:#f8fafc}.DesignToHtmlTool-module__VhWShq__previewPanel{background:linear-gradient(145deg,#eff6ffe6,#f8fafcd6),#ffffffc7}.DesignToHtmlTool-module__VhWShq__label{color:#142a51;letter-spacing:0;font-weight:800}.DesignToHtmlTool-module__VhWShq__editor{background:linear-gradient(#fffffff2,#fffdf1b3),#fff;border:1px solid #142a5133;border-radius:8px;width:100%;min-height:300px;padding:.7rem;overflow:auto;box-shadow:inset 0 1px #ffffffb8}.DesignToHtmlTool-module__VhWShq__editor:focus{outline-offset:2px;border-color:#0f766e;outline:2px solid #0f766e29}.DesignToHtmlTool-module__VhWShq__output{color:#dbeafe;resize:vertical;background:linear-gradient(#0f172ac7,#07111ff5),#07111f;border:1px solid #94a3b847;border-radius:8px;width:100%;min-height:260px;padding:.78rem;font-family:Consolas,monospace;font-size:13px;line-height:1.48;box-shadow:inset 0 1px 22px #00000038}.DesignToHtmlTool-module__VhWShq__output:focus{outline-offset:2px;border-color:#fffc63a6;outline:2px solid #fffc6324}.DesignToHtmlTool-module__VhWShq__inputGrid{grid-template-columns:minmax(300px,340px) minmax(0,1fr);align-items:stretch;gap:.9rem;display:grid}.DesignToHtmlTool-module__VhWShq__inputGrid>.DesignToHtmlTool-module__VhWShq__panel{gap:.42rem;min-width:0;padding:.72rem}.DesignToHtmlTool-module__VhWShq__inputGrid .DesignToHtmlTool-module__VhWShq__editor{min-height:180px}.DesignToHtmlTool-module__VhWShq__resultsGrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:.9rem;display:grid}.DesignToHtmlTool-module__VhWShq__resultsGrid>.DesignToHtmlTool-module__VhWShq__panel{content-visibility:auto;contain-intrinsic-size:720px;align-content:start;min-width:0}.DesignToHtmlTool-module__VhWShq__codeHeader{justify-content:space-between;align-items:center;gap:.75rem;display:flex}.DesignToHtmlTool-module__VhWShq__copyBtn{color:#142a51;cursor:pointer;background:#fffc63;border:1px solid #fffc63c2;border-radius:8px;padding:.42rem .68rem;font-size:13px;font-weight:800}.DesignToHtmlTool-module__VhWShq__copyBtn:disabled{color:#94a3b8;cursor:not-allowed;opacity:.8;background:#94a3b829;border-color:#94a3b847}.DesignToHtmlTool-module__VhWShq__copyBtn:not(:disabled):hover{filter:brightness(.98)}.DesignToHtmlTool-module__VhWShq__previewHeader{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;display:flex}.DesignToHtmlTool-module__VhWShq__previewTitleRow{flex-wrap:wrap;align-items:center;gap:.65rem;display:flex}.DesignToHtmlTool-module__VhWShq__previewControls{flex-wrap:wrap;align-items:flex-end;gap:.55rem;display:flex}.DesignToHtmlTool-module__VhWShq__screenshotBtn{color:#fff;cursor:pointer;background:#142a51;border:1px solid #142a512e;border-radius:8px;padding:.42rem .68rem;font-size:13px;font-weight:800}.DesignToHtmlTool-module__VhWShq__screenshotBtn:not(:disabled):hover{filter:brightness(1.08)}.DesignToHtmlTool-module__VhWShq__screenshotBtn:disabled{color:#64748b;cursor:not-allowed;background:#94a3b82e;border-color:#94a3b847}.DesignToHtmlTool-module__VhWShq__selectLabel{color:#31516f;gap:.24rem;font-size:12px;font-weight:800;display:grid}.DesignToHtmlTool-module__VhWShq__select{color:#142a51;min-width:150px;font:inherit;cursor:pointer;background:#ffffffe0;border:1px solid #142a5129;border-radius:8px;padding:.46rem .62rem}.DesignToHtmlTool-module__VhWShq__select:focus,.DesignToHtmlTool-module__VhWShq__zoomRange:focus-visible{outline-offset:2px;outline:2px solid #0f766e2e}.DesignToHtmlTool-module__VhWShq__zoomControl{min-width:190px}.DesignToHtmlTool-module__VhWShq__zoomRow{grid-template-columns:minmax(100px,1fr) 3.25rem;align-items:center;gap:.45rem;display:grid}.DesignToHtmlTool-module__VhWShq__zoomRange{accent-color:#0f766e;cursor:pointer;width:100%}.DesignToHtmlTool-module__VhWShq__zoomValue{color:#142a51;text-align:center;background:#ffffffd1;border:1px solid #142a5124;border-radius:8px;min-width:3.25rem;padding:.38rem .42rem;font-size:12px;font-weight:900}.DesignToHtmlTool-module__VhWShq__previewStage{background:linear-gradient(135deg,#e2e8f0f0,#f1f5f9eb),linear-gradient(90deg,#142a510d 1px,#0000 1px) 0 0/20px 20px;border:1px solid #142a511f;border-radius:8px;justify-content:center;align-items:flex-start;width:100%;min-height:260px;padding:1rem;display:flex;overflow:auto}.DesignToHtmlTool-module__VhWShq__previewZoomShell{flex:none;margin:0 auto;position:relative;overflow:visible}.DesignToHtmlTool-module__VhWShq__previewZoomCenter{position:absolute;top:0;left:50%;transform:translate(-50%)}.DesignToHtmlTool-module__VhWShq__previewZoomInner{transform-origin:top;width:100%;height:100%}.DesignToHtmlTool-module__VhWShq__phoneFrame{background:linear-gradient(145deg,#ffffff2e,#0000 14%),linear-gradient(315deg,#94a3b82e,#0000 18%),linear-gradient(145deg,#080b11,#2a303b 48%,#070a0f);border:2px solid #04070ceb;width:fit-content;margin:0 auto;position:relative;box-shadow:0 22px 42px #0f172a47,inset 0 0 0 1px #ffffff24,inset 0 0 0 5px #00000052}.DesignToHtmlTool-module__VhWShq__phoneFrame:before,.DesignToHtmlTool-module__VhWShq__phoneFrame:after{content:"";pointer-events:none;position:absolute}.DesignToHtmlTool-module__VhWShq__phoneFrameIosModern{border-radius:52px;padding:18px 15px}.DesignToHtmlTool-module__VhWShq__phoneFrameIosModern:before{background:linear-gradient(#111827,#475569,#111827);border-radius:999px 0 0 999px;width:3px;height:62px;top:112px;left:-5px;box-shadow:0 86px #1f2937}.DesignToHtmlTool-module__VhWShq__phoneFrameIosModern:after{background:linear-gradient(#111827,#475569,#111827);border-radius:0 999px 999px 0;width:3px;height:82px;top:146px;right:-5px}.DesignToHtmlTool-module__VhWShq__phoneFrameIosClassic{border-radius:42px;padding:46px 13px 58px}.DesignToHtmlTool-module__VhWShq__phoneFrameIosClassic:before{background:linear-gradient(#111827,#475569,#111827);border-radius:999px 0 0 999px;width:3px;height:48px;top:96px;left:-5px;box-shadow:0 66px #1f2937,62px -78px 0 -1px #1f2937}.DesignToHtmlTool-module__VhWShq__phoneFrameIosClassic:after{background:radial-gradient(circle at 42% 34%,#fff3,#0000 28%),linear-gradient(145deg,#111827,#020617);border:2px solid #94a3b875;border-radius:50%;width:33px;height:33px;bottom:13px;left:50%;transform:translate(-50%);box-shadow:inset 0 0 0 1px #0000009e,0 1px #ffffff1f}.DesignToHtmlTool-module__VhWShq__phoneFrameAndroid{background:linear-gradient(145deg,#fff3,#0000 16%),linear-gradient(145deg,#111827,#303846 50%,#090d14);border-radius:36px;padding:15px 11px 16px}.DesignToHtmlTool-module__VhWShq__phoneFrameAndroid:before{background:linear-gradient(#111827,#64748b,#111827);border-radius:999px 0 0 999px;width:3px;height:56px;top:122px;left:-5px}.DesignToHtmlTool-module__VhWShq__phoneFrameAndroid:after{background:linear-gradient(#111827,#64748b,#111827);border-radius:0 999px 999px 0;width:3px;height:82px;top:92px;right:-5px}.DesignToHtmlTool-module__VhWShq__phoneSensor{z-index:2;background:#05070a;position:absolute;top:10px;left:50%;transform:translate(-50%);box-shadow:inset 0 0 0 1px #ffffff0f}.DesignToHtmlTool-module__VhWShq__iphoneHardware{z-index:3;width:120px;height:34px;position:absolute;top:10px;left:50%;overflow:visible;transform:translate(-50%)}.DesignToHtmlTool-module__VhWShq__dynamicIsland{fill:#020617;filter:drop-shadow(0 1px #ffffff0f)}.DesignToHtmlTool-module__VhWShq__dynamicIslandLens{fill:#0f172a;stroke:#38bdf83d;stroke-width:1px}.DesignToHtmlTool-module__VhWShq__phoneFrameIosClassic .DesignToHtmlTool-module__VhWShq__phoneSensor{background:linear-gradient(90deg,#020617,#1f2937,#020617);border-radius:999px;width:56px;height:6px;top:22px}.DesignToHtmlTool-module__VhWShq__phoneFrameAndroid .DesignToHtmlTool-module__VhWShq__phoneSensor{background:radial-gradient(circle at 36% 34%,#94a3b885,#0000 16%),radial-gradient(circle,#020617 42%,#111827 64%,#020617);border-radius:999px;width:14px;height:14px;top:23px;box-shadow:0 0 0 2px #0f172ad6,inset 0 0 0 1px #38bdf833}.DesignToHtmlTool-module__VhWShq__previewScreen{border:1px solid #ffffff1f;transition:width .18s,height .18s,background-color .18s,color .18s;overflow:hidden;box-shadow:inset 0 0 0 1px #0f172a2e,0 0 0 1px #00000070}.DesignToHtmlTool-module__VhWShq__phoneFrameIosModern .DesignToHtmlTool-module__VhWShq__previewScreen{border-radius:36px}.DesignToHtmlTool-module__VhWShq__phoneFrameIosClassic .DesignToHtmlTool-module__VhWShq__previewScreen{border-radius:7px}.DesignToHtmlTool-module__VhWShq__phoneFrameAndroid .DesignToHtmlTool-module__VhWShq__previewScreen{border-radius:25px}.DesignToHtmlTool-module__VhWShq__previewFrame{contain:strict;background:0 0;border:0;width:100%;height:100%;display:block}.DesignToHtmlTool-module__VhWShq__previewEmpty{text-align:center;place-items:center;height:100%;padding:1rem;font-weight:800;display:grid}.DesignToHtmlTool-module__VhWShq__actions{flex-wrap:wrap;gap:.62rem;display:flex}.DesignToHtmlTool-module__VhWShq__ctaBtn,.DesignToHtmlTool-module__VhWShq__secondaryBtn{cursor:pointer;border:1px solid #d4c918b3;border-radius:8px;padding:.52rem .82rem;font-weight:800}.DesignToHtmlTool-module__VhWShq__ctaBtn{color:#142a51;background:#fffc63}.DesignToHtmlTool-module__VhWShq__secondaryBtn{color:#0f172a;background:#ffffffd6;border-color:#142a5129}.DesignToHtmlTool-module__VhWShq__ctaBtn:hover,.DesignToHtmlTool-module__VhWShq__secondaryBtn:hover{filter:brightness(.98)}@media (max-width:768px){.DesignToHtmlTool-module__VhWShq__inputGrid,.DesignToHtmlTool-module__VhWShq__resultsGrid,.DesignToHtmlTool-module__VhWShq__modeLayout{grid-template-columns:1fr}.DesignToHtmlTool-module__VhWShq__editor,.DesignToHtmlTool-module__VhWShq__output{min-height:260px}.DesignToHtmlTool-module__VhWShq__previewHeader{align-items:flex-start}.DesignToHtmlTool-module__VhWShq__previewControls,.DesignToHtmlTool-module__VhWShq__selectLabel,.DesignToHtmlTool-module__VhWShq__zoomControl{width:100%}.DesignToHtmlTool-module__VhWShq__select{width:100%;min-width:0}.DesignToHtmlTool-module__VhWShq__previewStage{min-height:220px;padding:.82rem}}