:root{--bg: #000000;--surface: #1C1C1E;--surface-2: #2C2C2E;--surface-3: #3A3A3C;--surface-grouped: #1C1C1E;--label: rgba(255, 255, 255, 1);--label-2: rgba(235, 235, 245, .6);--label-3: rgba(235, 235, 245, .3);--label-4: rgba(235, 235, 245, .18);--fill-1: rgba(120, 120, 128, .36);--fill-2: rgba(120, 120, 128, .32);--fill-3: rgba(118, 118, 128, .24);--fill-4: rgba(118, 118, 128, .18);--separator: rgba(84, 84, 88, .65);--separator-opaque: #38383A;--tint: #FF6347;--tint-pressed: #E8401C;--tint-bg: rgba(255, 99, 71, .18);--tint-bg-soft: rgba(255, 99, 71, .1);--system-red: #FF453A;--system-orange: #FF9F0A;--system-blue: #0A84FF;--system-green: #30D158;--material-thin: rgba(28, 28, 30, .72);--font-system: "Noto Sans Thai", -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", system-ui, "Segoe UI", Roboto, sans-serif;--type-large-title-size: 34px;--type-large-title-lh: 41px;--type-large-title-track: -.022em;--type-title-1-size: 28px;--type-title-1-lh: 34px;--type-title-1-track: -.013em;--type-title-2-size: 22px;--type-title-2-lh: 28px;--type-title-2-track: -.016em;--type-title-3-size: 20px;--type-title-3-lh: 25px;--type-title-3-track: -.019em;--type-headline-size: 17px;--type-headline-lh: 22px;--type-headline-track: -.025em;--type-body-size: 17px;--type-body-lh: 22px;--type-body-track: -.025em;--type-callout-size: 16px;--type-callout-lh: 21px;--type-callout-track: -.02em;--type-subhead-size: 15px;--type-subhead-lh: 20px;--type-subhead-track: -.016em;--type-footnote-size: 13px;--type-footnote-lh: 18px;--type-footnote-track: -.006em;--type-caption-size: 12px;--type-caption-lh: 16px;--type-caption-track: 0;--radius-card: 18px;--radius-grouped: 14px;--radius-control: 14px;--radius-small: 10px;--radius-image: 14px;--radius-pill: 980px;--ease-snappy: cubic-bezier(.32, .72, 0, 1);--ease-spring: cubic-bezier(.34, 1.56, .64, 1);--ease-smooth: cubic-bezier(.4, 0, .2, 1);--duration-fast: .16s;--duration: .22s;--duration-slow: .3s;--shadow-1: 0 1px 2px rgba(0, 0, 0, .18), 0 4px 14px rgba(0, 0, 0, .18);--shadow-2: 0 4px 12px rgba(0, 0, 0, .3), 0 12px 36px rgba(0, 0, 0, .32)}:root[data-theme=light]{--bg: #F2F2F7;--surface: #FFFFFF;--surface-2: #F2F2F7;--surface-3: #E5E5EA;--surface-grouped: #FFFFFF;--label: rgba(0, 0, 0, 1);--label-2: rgba(60, 60, 67, .6);--label-3: rgba(60, 60, 67, .3);--label-4: rgba(60, 60, 67, .18);--fill-1: rgba(120, 120, 128, .2);--fill-2: rgba(120, 120, 128, .16);--fill-3: rgba(118, 118, 128, .12);--fill-4: rgba(116, 116, 128, .08);--separator: rgba(60, 60, 67, .29);--separator-opaque: #C6C6C8;--tint: #E8401C;--tint-pressed: #C0341A;--tint-bg: rgba(232, 64, 28, .1);--tint-bg-soft: rgba(232, 64, 28, .06);--material-thin: rgba(255, 255, 255, .72);--shadow-1: 0 1px 2px rgba(60, 60, 67, .1), 0 4px 14px rgba(60, 60, 67, .08);--shadow-2: 0 4px 12px rgba(60, 60, 67, .12), 0 12px 36px rgba(60, 60, 67, .16)}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{-webkit-text-size-adjust:100%;text-size-adjust:100%}body{background:var(--bg);color:var(--label);font-family:var(--font-system);font-size:var(--type-body-size);line-height:var(--type-body-lh);letter-spacing:var(--type-body-track);font-weight:400;min-height:100dvh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"kern","liga","cv11","ss01";overflow-x:hidden}::selection{background:var(--tint);color:#fff}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}h1,h2,h3,h4{color:var(--label);font-family:var(--font-system);letter-spacing:var(--type-large-title-track);text-wrap:balance}p{text-wrap:pretty}header{max-width:1080px;margin:0 auto;padding:16px 24px 0;position:relative;z-index:1}.toolbar{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-radius:var(--radius-control);margin-bottom:56px;background:var(--material-thin);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border:.5px solid var(--separator)}.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--label);padding:4px 6px;border-radius:var(--radius-small);transition:background var(--duration-fast) var(--ease-smooth)}.logo:hover{background:var(--fill-3)}.logo:active{background:var(--fill-2)}.logo-mark{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;color:var(--tint);flex-shrink:0}.logo-text{display:inline-flex;align-items:center;gap:5px;font-size:var(--type-subhead-size);line-height:1;font-weight:600;letter-spacing:var(--type-subhead-track)}.logo-scg{color:var(--label);font-weight:700}.logo-sep{color:var(--label-3);font-weight:400}.logo-allin{color:var(--label-2);font-weight:600}.header-actions{display:flex;align-items:center;gap:8px}.floating-actions{position:fixed;top:16px;right:16px;display:flex;align-items:center;gap:8px;z-index:10}.btn-home{height:32px;padding:0 14px;font-size:var(--type-footnote-size);margin-top:16px}.lang-toggle,.theme-toggle{background:var(--fill-3);border:none;width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:18px;line-height:1;display:inline-flex;align-items:center;justify-content:center;padding:0;color:var(--label);transition:background var(--duration-fast) var(--ease-smooth),transform .12s var(--ease-snappy)}.lang-toggle:hover,.theme-toggle:hover{background:var(--fill-2)}.lang-toggle:active,.theme-toggle:active{transform:scale(.94);background:var(--fill-1)}.theme-toggle svg{display:block;color:var(--label-2)}.hero{padding:64px 0 32px;text-align:center}header h1{font-size:clamp(40px,6vw,56px);line-height:1.05;font-weight:700;letter-spacing:-.024em;color:var(--label);margin-bottom:8px}.tagline{font-size:var(--type-title-3-size);line-height:var(--type-title-3-lh);letter-spacing:var(--type-title-3-track);font-weight:400;color:var(--label-2);max-width:38ch;margin:0 auto}main{max-width:1080px;margin:0 auto;padding:0 24px 64px;position:relative;z-index:1}main>section{animation:contentEnter var(--duration-slow) var(--ease-snappy) both}@keyframes contentEnter{0%{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}main>section.leaving{animation:sectionExit .14s var(--ease-snappy) both;pointer-events:none}@keyframes sectionExit{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-4px) scale(.99)}}.mode-switch{display:flex;background:var(--fill-3);border-radius:var(--radius-control);padding:3px;margin:0 auto 16px;gap:2px;width:fit-content;justify-content:center}.mode-switch-option{display:inline-flex;align-items:center;gap:6px;background:transparent;border:none;cursor:pointer;font-family:var(--font-system);font-size:var(--type-subhead-size);font-weight:600;letter-spacing:var(--type-subhead-track);color:var(--label-2);padding:7px 16px;border-radius:calc(var(--radius-control) - 3px);transition:background var(--duration) var(--ease-smooth),color var(--duration) var(--ease-smooth),transform .12s var(--ease-snappy);min-width:96px;justify-content:center}.mode-switch-option:hover{color:var(--label)}.mode-switch-option:active{transform:scale(.97)}.mode-switch-option.active{background:var(--surface);color:var(--label);box-shadow:var(--shadow-1)}.mode-switch-icon{display:inline-flex;align-items:center;justify-content:center}#upload-zone{position:relative;height:360px;border-radius:var(--radius-card);background:var(--surface);background-image:radial-gradient(120% 80% at 50% 0%,var(--tint-bg-soft),transparent 55%);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;box-shadow:inset 0 0 0 .5px var(--separator),var(--shadow-1);transition:background-color var(--duration) var(--ease-smooth),box-shadow var(--duration) var(--ease-smooth),transform .2s var(--ease-snappy);overflow:hidden}@media (hover: hover) and (pointer: fine){#upload-zone:hover{box-shadow:inset 0 0 0 .5px var(--label-3),var(--shadow-2)}}#upload-zone:active{transform:scale(.985);box-shadow:inset 0 0 0 .5px var(--separator),var(--shadow-1)}#upload-zone.drag-over{background-color:var(--tint-bg);box-shadow:inset 0 0 0 1.5px var(--tint),0 0 0 6px var(--tint-bg-soft),var(--shadow-2)}.upload-icon-wrapper{position:relative;width:72px;height:72px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;border-radius:var(--radius-control);background:linear-gradient(135deg,var(--tint-bg) 0%,var(--fill-4) 100%);box-shadow:inset 0 0 0 .5px var(--separator);color:var(--tint);transition:transform var(--duration) var(--ease-spring),background var(--duration) var(--ease-snappy),box-shadow var(--duration) var(--ease-snappy)}@media (hover: hover) and (pointer: fine){#upload-zone:hover .upload-icon-wrapper{transform:translateY(-2px);background:linear-gradient(135deg,var(--tint-bg) 0%,var(--tint-bg-soft) 100%);box-shadow:inset 0 0 0 .5px var(--tint)}}.upload-icon-ring{position:absolute;top:-4px;right:-4px;bottom:-4px;left:-4px;border-radius:calc(var(--radius-control) + 4px);border:1.5px solid var(--tint);opacity:0;transform:scale(.96);transition:opacity .22s var(--ease-snappy),transform .22s var(--ease-snappy)}#upload-zone.drag-over .upload-icon-ring{animation:pulseRing 1.6s var(--ease-snappy) infinite}@media (hover: hover) and (pointer: fine){#upload-zone:hover .upload-icon-ring{opacity:.45;transform:scale(1.04)}}@keyframes pulseRing{0%{transform:scale(.96);opacity:0}40%{opacity:.5}to{transform:scale(1.12);opacity:0}}.upload-icon{display:flex;align-items:center;justify-content:center}.upload-text{font-size:var(--type-title-2-size);line-height:var(--type-title-2-lh);letter-spacing:var(--type-title-2-track);font-weight:700;color:var(--label);margin-bottom:6px;text-align:center}.upload-subtext{font-size:var(--type-subhead-size);line-height:var(--type-subhead-lh);letter-spacing:var(--type-subhead-track);color:var(--label-2);font-weight:400}#draw-zone{display:flex;flex-direction:column;gap:14px;border-radius:var(--radius-card);background:var(--surface);padding:14px;box-shadow:inset 0 0 0 .5px var(--separator),var(--shadow-1)}.draw-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.draw-tools{display:flex;background:var(--fill-3);border-radius:var(--radius-control);padding:3px;gap:2px}.draw-tool{display:inline-flex;align-items:center;gap:6px;background:transparent;border:none;cursor:pointer;font-family:var(--font-system);font-size:var(--type-subhead-size);font-weight:600;letter-spacing:var(--type-subhead-track);color:var(--label-2);padding:7px 14px;border-radius:calc(var(--radius-control) - 3px);transition:background var(--duration) var(--ease-smooth),color var(--duration) var(--ease-smooth),transform .12s var(--ease-snappy)}.draw-tool:hover{color:var(--label)}.draw-tool:active{transform:scale(.97)}.draw-tool.active{background:var(--surface);color:var(--tint);box-shadow:var(--shadow-1)}.draw-actions{display:flex;gap:8px}.draw-actions .btn-secondary[disabled]{opacity:.45;pointer-events:none}.draw-canvas-wrap{position:relative;width:100%;aspect-ratio:4 / 3;border-radius:var(--radius-image);background:#fff;overflow:hidden;box-shadow:inset 0 0 0 .5px var(--separator);background-image:linear-gradient(to right,rgba(0,0,0,.06) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,0,0,.06) 1px,transparent 1px);background-size:20px 20px}#draw-canvas{display:block;width:100%;height:100%;cursor:crosshair}.draw-hint{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;pointer-events:none;color:#3c3c4373;font-size:var(--type-subhead-size);letter-spacing:var(--type-subhead-track);font-weight:500;transition:opacity .2s var(--ease-snappy)}#draw-zone.has-content .draw-hint{opacity:0}#draw-zone.tool-eraser #draw-canvas{cursor:cell}.draw-submit-row{display:flex;justify-content:flex-end}.draw-submit-row .btn-primary[disabled]{opacity:.45;pointer-events:none}#loading-section{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:360px}.loading-card{text-align:center;padding:56px 64px;border-radius:var(--radius-card);background:var(--surface);box-shadow:var(--shadow-1);max-width:440px;width:100%}.ai-loader{display:flex;align-items:center;justify-content:center;gap:6px;height:48px;margin:0 auto 24px}.ai-loader-bar{width:4px;height:36px;border-radius:4px;background:var(--tint);transform-origin:center;animation:aiPulse 1.2s ease-in-out infinite}.ai-loader-bar:nth-child(1){animation-delay:0s}.ai-loader-bar:nth-child(2){animation-delay:.15s}.ai-loader-bar:nth-child(3){animation-delay:.3s}.ai-loader-bar:nth-child(4){animation-delay:.45s}@keyframes aiPulse{0%,to{transform:scaleY(.333);opacity:.4}50%{transform:scaleY(1);opacity:1}}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{font-size:var(--type-title-3-size);line-height:var(--type-title-3-lh);letter-spacing:var(--type-title-3-track);font-weight:600;color:var(--label);margin-bottom:4px;transition:opacity .14s var(--ease-snappy),transform .14s var(--ease-snappy)}.loading-subtext{font-size:var(--type-subhead-size);line-height:var(--type-subhead-lh);letter-spacing:var(--type-subhead-track);color:var(--label-2);transition:opacity .14s var(--ease-snappy)}#error-section{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:360px}.error-card{text-align:center;padding:40px 48px;border-radius:var(--radius-card);background:var(--surface);box-shadow:var(--shadow-1);max-width:420px;width:100%}.error-icon{width:56px;height:56px;border-radius:50%;background:var(--tint-bg);color:var(--tint);display:flex;align-items:center;justify-content:center;margin:0 auto 20px}.error-text{font-size:var(--type-callout-size);line-height:var(--type-callout-lh);letter-spacing:var(--type-callout-track);color:var(--label);font-weight:400;margin-bottom:24px}.btn-primary{background:var(--tint);color:#fff;height:44px;padding:0 22px;border:none;border-radius:var(--radius-control);cursor:pointer;font-family:var(--font-system);font-size:var(--type-headline-size);font-weight:600;letter-spacing:var(--type-headline-track);display:inline-flex;align-items:center;justify-content:center;transition:background var(--duration) var(--ease-smooth),transform .12s var(--ease-snappy),box-shadow var(--duration) var(--ease-smooth)}.btn-primary:hover{background:var(--tint-pressed)}.btn-primary:active{transform:scale(.97);background:var(--tint-pressed)}.btn-secondary{background:var(--fill-3);color:var(--label);height:36px;padding:0 16px;border:none;border-radius:var(--radius-control);cursor:pointer;font-family:var(--font-system);font-size:var(--type-subhead-size);font-weight:600;letter-spacing:var(--type-subhead-track);display:inline-flex;align-items:center;justify-content:center;transition:background var(--duration) var(--ease-smooth),transform .12s var(--ease-snappy)}.btn-secondary:hover{background:var(--fill-2)}.btn-secondary:active{transform:scale(.97);background:var(--fill-1)}.btn-text{background:none;border:none;color:var(--tint);font-family:var(--font-system);font-size:var(--type-subhead-size);font-weight:500;letter-spacing:var(--type-subhead-track);cursor:pointer;padding:8px 12px;border-radius:var(--radius-small);transition:background var(--duration) var(--ease-smooth),opacity .12s var(--ease-snappy)}.btn-text:hover{background:var(--tint-bg-soft)}.btn-text:active{opacity:.55}.quiz-skip-actions{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:32px}.quiz-skip-sep{color:var(--label-3);font-size:var(--type-subhead-size)}.quiz-container{max-width:580px;margin:0 auto;text-align:center;position:relative}.quiz-back{display:inline-flex;align-items:center;gap:4px;background:none;border:none;color:var(--tint);font-family:var(--font-system);font-size:var(--type-subhead-size);font-weight:500;letter-spacing:var(--type-subhead-track);cursor:pointer;padding:6px 10px 6px 6px;margin:0 0 8px -10px;border-radius:var(--radius-small);transition:background .12s var(--ease-smooth),opacity .12s var(--ease-snappy)}.quiz-back svg{display:block}.quiz-back:hover{background:var(--tint-bg-soft)}.quiz-back:active{opacity:.55}.quiz-progress{width:100%;height:4px;background:var(--fill-3);border-radius:2px;margin-bottom:32px;overflow:hidden}.quiz-progress-bar{height:100%;width:100%;background:var(--tint);border-radius:2px;transform:scaleX(0);transform-origin:left center;transition:transform .38s var(--ease-smooth)}.quiz-step{font-size:var(--type-footnote-size);line-height:var(--type-footnote-lh);letter-spacing:.06em;font-weight:600;color:var(--tint);text-transform:uppercase;margin-bottom:8px;min-height:var(--type-footnote-lh)}.quiz-question{font-size:var(--type-title-1-size);line-height:var(--type-title-1-lh);letter-spacing:var(--type-title-1-track);font-weight:600;color:var(--label);margin-bottom:28px;transition:opacity .14s var(--ease-snappy),transform .14s var(--ease-snappy)}.quiz-options{display:flex;flex-direction:column;background:var(--surface);border-radius:var(--radius-grouped);overflow:hidden;box-shadow:var(--shadow-1);transition:opacity .14s var(--ease-snappy),transform .14s var(--ease-snappy)}.quiz-option{display:flex;align-items:center;gap:14px;padding:14px 18px;background:transparent;border:none;cursor:pointer;font-family:var(--font-system);text-align:left;color:var(--label);position:relative;transition:background .12s var(--ease-smooth);min-height:52px;animation:optionEnter .24s var(--ease-snappy) both}@keyframes optionEnter{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.quiz-option+.quiz-option:before{content:"";position:absolute;top:0;left:60px;right:0;height:.5px;background:var(--separator)}.quiz-option:hover{background:var(--fill-3)}.quiz-option:active{background:var(--fill-2)}.quiz-option.selected{background:var(--tint-bg)}.quiz-option.selected:after{content:"";position:absolute;top:50%;right:18px;width:22px;height:22px;transform:translateY(-50%);background-color:var(--tint);-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M4 11.5 L9 16.5 L18 6.5'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M4 11.5 L9 16.5 L18 6.5'/></svg>");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:22px;mask-size:22px;animation:checkPop .22s var(--ease-spring) both}@keyframes checkPop{0%{transform:translateY(-50%) scale(.4);opacity:0}to{transform:translateY(-50%) scale(1);opacity:1}}.quiz-option-icon{font-size:24px;line-height:1;width:32px;text-align:center;flex-shrink:0}.quiz-option-label{font-size:var(--type-body-size);line-height:var(--type-body-lh);letter-spacing:var(--type-body-track);font-weight:400;color:var(--label);flex:1}.styles-header{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:28px}.styles-header h2{font-size:var(--type-large-title-size);line-height:var(--type-large-title-lh);letter-spacing:var(--type-large-title-track);font-weight:700;color:var(--label);margin-bottom:6px}.styles-header-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.room-summary{font-size:var(--type-subhead-size);line-height:var(--type-subhead-lh);letter-spacing:var(--type-subhead-track);color:var(--label-2);max-width:38ch}.style-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.style-card{background:var(--surface);border-radius:var(--radius-card);overflow:hidden;cursor:pointer;border:.5px solid var(--separator);position:relative;transition:transform .2s var(--ease-snappy),box-shadow var(--duration) var(--ease-smooth),border-color var(--duration) var(--ease-smooth);display:flex;flex-direction:column;animation:cardEnter .32s var(--ease-snappy) both}.style-card:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;box-shadow:inset 0 0 0 0 transparent;opacity:0;transform:scale(.97);pointer-events:none;transition:box-shadow .18s var(--ease-snappy),opacity .18s var(--ease-snappy),transform .18s var(--ease-snappy)}.style-card.selected:after{box-shadow:inset 0 0 0 2px var(--tint);opacity:1;transform:scale(1)}@keyframes cardEnter{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (hover: hover) and (pointer: fine){.style-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}}.style-card:active{transform:scale(.985)}.style-card.selected{border-color:var(--tint);box-shadow:var(--shadow-1)}.style-thumbnail{height:160px;width:100%;display:flex;align-items:center;justify-content:center;position:relative;border-radius:0;transition:transform .32s var(--ease-snappy)}@media (hover: hover) and (pointer: fine){.style-card:hover .style-thumbnail{transform:scale(1.04)}}.style-thumbnail.generating{opacity:.55}.thumb-spinner{width:22px;height:22px;border:2px solid var(--label-4);border-top-color:var(--label);border-radius:50%;animation:spin .8s linear infinite}.style-card:has(.generating){cursor:default;opacity:.7}.style-info{padding:14px 16px 16px;display:flex;flex-direction:column;gap:4px}.style-info h3{font-size:var(--type-headline-size);line-height:var(--type-headline-lh);letter-spacing:var(--type-headline-track);font-weight:600;color:var(--label);display:flex;align-items:center;flex-wrap:wrap;gap:8px}.style-info p{font-size:var(--type-subhead-size);line-height:var(--type-subhead-lh);letter-spacing:var(--type-subhead-track);color:var(--label-2);font-weight:400}.style-badge{display:inline-flex;align-items:center;font-size:var(--type-caption-size);line-height:1.2;font-weight:600;letter-spacing:0;padding:4px 9px;border-radius:var(--radius-pill);background:var(--fill-3);color:var(--label-2)}.style-badge.recommended{background:var(--tint-bg);color:var(--tint)}.custom-style-card{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);border-color:var(--tint);background:var(--surface);position:relative;overflow:hidden;animation:customCardEnter .42s var(--ease-spring) both}@keyframes customCardEnter{0%{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.custom-style-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,var(--tint-bg-soft),transparent 60%);pointer-events:none}.custom-style-card .style-thumbnail{height:100%;min-height:240px}.custom-style-card .style-info{padding:24px 28px;justify-content:center;gap:8px;position:relative}.custom-style-card .style-info h3{font-size:var(--type-title-2-size);line-height:var(--type-title-2-lh);letter-spacing:var(--type-title-2-track);font-weight:700}.result-header{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:24px}.result-header h2{font-size:var(--type-large-title-size);line-height:var(--type-large-title-lh);letter-spacing:var(--type-large-title-track);font-weight:700;color:var(--label);margin-bottom:6px}.result-style-desc{font-size:var(--type-subhead-size);line-height:var(--type-subhead-lh);letter-spacing:var(--type-subhead-track);color:var(--label-2);max-width:56ch}.result-actions{display:flex;gap:8px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end;align-items:center}.action-menu{position:relative;display:inline-flex}.action-menu-trigger{width:36px;padding:0}.action-menu-trigger svg{display:block}.action-menu-list{position:absolute;top:calc(100% + 8px);right:0;min-width:200px;background:var(--material-thick, var(--surface));border:.5px solid var(--separator);border-radius:var(--radius-card);box-shadow:var(--shadow-2);padding:6px;display:flex;flex-direction:column;z-index:50;transform-origin:top right;animation:actionMenuEnter .2s var(--ease-snappy);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px)}.action-menu-list[hidden]{display:none}@keyframes actionMenuEnter{0%{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.action-menu-item{background:transparent;border:none;border-radius:var(--radius-small);font-family:var(--font-system);font-size:var(--type-subhead-size);font-weight:500;letter-spacing:var(--type-subhead-track);color:var(--label);text-align:left;padding:9px 12px;cursor:pointer;transition:background .12s var(--ease-smooth)}.action-menu-item:hover{background:var(--fill-3)}.action-menu-item:active{background:var(--fill-2)}.action-menu-item.copied-flash{color:var(--tint);background:var(--tint-bg-soft)}.result-body{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:24px;align-items:start}.render-container{width:100%}.render-container img{width:100%;border-radius:var(--radius-card);display:block;border:.5px solid var(--separator);box-shadow:var(--shadow-2);background:var(--surface);opacity:0;transform:scale(1.02);transform-origin:center;transition:opacity .36s var(--ease-snappy),transform .36s var(--ease-snappy);cursor:zoom-in}.render-container img.loaded{opacity:1;transform:scale(1)}.bom-panel{background:var(--surface);border-radius:var(--radius-card);border:.5px solid var(--separator);box-shadow:var(--shadow-1);padding:22px 22px 18px;display:flex;flex-direction:column;gap:18px;position:sticky;top:16px;max-height:calc(100vh - 32px);overflow-y:auto}.bom-toggle{display:none;align-items:center;gap:10px;padding:12px 14px;background:var(--fill-3);border:none;border-radius:var(--radius-control);font-family:var(--font-system);font-size:var(--type-subhead-size);font-weight:600;letter-spacing:var(--type-subhead-track);color:var(--label);cursor:pointer;width:100%;text-align:left;transition:background .12s var(--ease-smooth)}.bom-toggle:hover{background:var(--fill-2)}.bom-toggle-label{flex:1}.bom-toggle-amount{font-variant-numeric:tabular-nums;color:var(--tint);font-weight:600}.bom-toggle-chevron{color:var(--label-2);transition:transform .22s var(--ease-snappy)}.bom-panel.bom-collapsed .bom-toggle-chevron{transform:rotate(-90deg)}.bom-eyebrow{font-size:var(--type-footnote-size);line-height:var(--type-footnote-lh);letter-spacing:.04em;text-transform:uppercase;font-weight:600;color:var(--tint);margin-bottom:6px}.bom-rationale{font-size:var(--type-callout-size);line-height:var(--type-callout-lh);letter-spacing:var(--type-callout-track);font-weight:500;color:var(--label);text-wrap:pretty}.bom-rooms{display:flex;flex-direction:column;gap:14px}.bom-room{display:flex;flex-direction:column;gap:8px;padding:14px 0;border-top:.5px solid var(--separator)}.bom-room:first-child{border-top:none;padding-top:0}.bom-room-header{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.bom-room-name{font-size:var(--type-headline-size);line-height:var(--type-headline-lh);letter-spacing:var(--type-headline-track);font-weight:600;color:var(--label)}.bom-room-area{font-size:var(--type-caption-size);line-height:var(--type-caption-lh);color:var(--label-3);font-weight:500;display:inline-flex;align-items:baseline;gap:4px;white-space:nowrap}.bom-room-area-input{width:3.6em;padding:1px 4px;margin:0;font:inherit;font-weight:600;color:var(--label);background:var(--fill-4);border:.5px solid var(--separator);border-radius:6px;text-align:right;-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield;transition:background-color .12s ease,border-color .12s ease,box-shadow .12s ease}.bom-room-area-input::-webkit-outer-spin-button,.bom-room-area-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.bom-room-area-input:hover{background:var(--fill-3)}.bom-room-area-input:focus{outline:none;background:var(--fill-3);border-color:var(--tint);box-shadow:0 0 0 3px color-mix(in srgb,var(--tint) 18%,transparent)}.bom-room-area-revert{display:inline-flex;align-items:center;justify-content:center;margin-left:2px;padding:0 5px;height:18px;font-size:12px;line-height:1;color:var(--label-3);background:transparent;border:none;border-radius:4px;cursor:pointer;transition:color .12s ease,background-color .12s ease}.bom-room-area-revert:hover{color:var(--tint);background:var(--fill-4)}.bom-line{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:start;gap:12px;padding:10px 0;border-top:.5px solid var(--fill-4)}.bom-line:first-child{border-top:none}.bom-swatch{width:28px;height:28px;border-radius:8px;border:.5px solid var(--separator);flex-shrink:0;margin-top:2px}.bom-line-info{min-width:0;display:flex;flex-direction:column;gap:3px}.bom-line-name{font-size:var(--type-subhead-size);line-height:var(--type-subhead-lh);letter-spacing:var(--type-subhead-track);color:var(--label);font-weight:500}.bom-line-reason{font-size:var(--type-caption-size);line-height:var(--type-caption-lh);color:var(--label-2);font-weight:400}.bom-line-meta{font-size:var(--type-caption-size);line-height:var(--type-caption-lh);color:var(--label-3);font-weight:500}.bom-line-price{text-align:right;display:flex;flex-direction:column;gap:2px;flex-shrink:0}.bom-line-total{font-size:var(--type-subhead-size);line-height:var(--type-subhead-lh);letter-spacing:var(--type-subhead-track);color:var(--label);font-weight:600;font-variant-numeric:tabular-nums}.bom-line-unit{font-size:var(--type-caption-size);line-height:var(--type-caption-lh);color:var(--label-3);font-variant-numeric:tabular-nums}.bom-total{display:flex;align-items:baseline;justify-content:space-between;padding-top:16px;border-top:.5px solid var(--separator)}.bom-total-label{font-size:var(--type-subhead-size);line-height:var(--type-subhead-lh);letter-spacing:var(--type-subhead-track);color:var(--label-2);font-weight:500}.bom-total-value{font-size:var(--type-title-2-size);line-height:var(--type-title-2-lh);letter-spacing:var(--type-title-2-track);color:var(--label);font-weight:700;font-variant-numeric:tabular-nums}.bom-disclaimer{font-size:var(--type-caption-size);line-height:var(--type-caption-lh);color:var(--label-3)}.bom-loading{text-align:center;padding:32px 16px;color:var(--label-2);font-size:var(--type-subhead-size)}.bom-panel.bom-animate .bom-room,.bom-panel.bom-animate .bom-line{animation:bomStagger .32s var(--ease-snappy) both}@keyframes bomStagger{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.print-header{display:none}@media print{:root,:root[data-theme=light]{--bg: #FFFFFF;--surface: #FFFFFF;--label: #000000;--label-2: #555555;--label-3: #777777;--separator: #C8C8CC;--shadow-1: none;--shadow-2: none}body{background:#fff;color:#000}.floating-actions,.toolbar,header .tagline,.btn-home,.result-actions,.bom-toggle,.lightbox,footer{display:none!important}header{padding:0;margin:0}header .hero{display:none}main{max-width:none;padding:0;margin:0}.print-header{display:block;text-align:left;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid #000}.print-brand{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#555;margin-bottom:6px}.print-title{font-size:22px;font-weight:700;color:#000;margin-bottom:4px;letter-spacing:-.012em}.print-meta{font-size:12px;color:#555}.result-header{display:none}.result-body{display:block}.render-container{margin-bottom:16px;page-break-inside:avoid;break-inside:avoid}.render-container img{max-width:100%;max-height:300px;width:auto;height:auto;display:block;margin:0 auto;box-shadow:none;border:1px solid #C8C8CC;border-radius:6px}.bom-panel{position:static;max-height:none;overflow:visible;box-shadow:none;border:none;border-radius:0;padding:0;background:#fff;page-break-inside:auto}.bom-eyebrow{color:#000;font-weight:700;border-top:1px solid #000;padding-top:8px}.bom-rationale{color:#000;font-style:italic}.bom-room,.bom-line{page-break-inside:avoid;break-inside:avoid}.bom-swatch{border-color:#999}.bom-line-name,.bom-line-total,.bom-room-name{color:#000}.bom-line-reason{color:#444}.bom-line-meta,.bom-line-unit,.bom-room-area,.bom-disclaimer{color:#666}.bom-total{page-break-inside:avoid;break-inside:avoid;border-top:2px solid #000;margin-top:12px;padding-top:12px}.bom-total-value{color:#000}.print-title,.print-meta,.bom-rationale,.bom-room-name,.bom-line-name,.bom-line-reason,.bom-line-meta,.bom-disclaimer,.bom-total-label,.bom-eyebrow{line-break:anywhere;overflow-wrap:anywhere;word-break:break-word}.bom-panel{max-width:100%}.bom-swatch{display:none}.bom-rooms,.bom-room,.bom-line,.bom-line-info,.bom-line-price,.bom-room-header,.bom-total{display:block}.bom-line{padding:8px 0;border-top:1px solid #E0E0E0}.bom-line:first-child{border-top:none}.bom-room-name{display:block;font-weight:700;font-size:13px;color:#000}.bom-room-area{display:block;font-size:10px;color:#777;margin-bottom:4px}.bom-room-area-input{border:none;background:transparent;padding:0;width:auto;font:inherit;color:inherit;text-align:left;-webkit-appearance:none;-moz-appearance:none;appearance:none}.bom-room-area-revert{display:none}.bom-line-name{display:block;font-weight:600;font-size:12px;color:#000;margin-bottom:2px}.bom-line-total{display:inline;font-weight:700;font-size:11px;color:#000}.bom-line-total:after{content:" ·";color:#999}.bom-line-meta{display:inline;font-size:11px;color:#555}.bom-line-meta:after{content:" ·";color:#999}.bom-line-unit{display:inline;font-size:11px;color:#888}.bom-line-reason{display:block;font-size:11px;color:#555;font-style:italic;margin-top:3px}.bom-total{margin-top:16px;padding-top:12px;border-top:2px solid #000;text-align:right}.bom-total-label{display:block;font-size:11px;color:#555;margin-bottom:4px}.bom-total-value{display:block;font-size:18px;font-weight:700;color:#000}@page{margin:14mm}}.share-banner{background:var(--tint-bg);color:var(--tint);border-radius:var(--radius-grouped);padding:10px 16px;font-size:var(--type-subhead-size);line-height:var(--type-subhead-lh);letter-spacing:var(--type-subhead-track);font-weight:600;margin-bottom:16px;border:.5px solid var(--tint);animation:bannerEnter .28s var(--ease-snappy) both}@keyframes bannerEnter{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%) translateY(0);background:var(--material-thin);border:.5px solid var(--separator);border-radius:var(--radius-pill);padding:12px 22px;font-size:var(--type-subhead-size);font-weight:500;color:var(--label);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);box-shadow:var(--shadow-2);z-index:200;animation:toastEnter .28s var(--ease-spring);white-space:nowrap;max-width:calc(100vw - 32px);overflow:hidden;text-overflow:ellipsis}.toast.leaving{animation:toastExit .2s var(--ease-snappy) forwards}@keyframes toastEnter{0%{opacity:0;transform:translate(-50%) translateY(8px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@keyframes toastExit{0%{opacity:1;transform:translate(-50%) translateY(0)}to{opacity:0;transform:translate(-50%) translateY(6px)}}.lightbox{position:fixed;top:0;right:0;bottom:0;left:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:32px;background:#000000b8;backdrop-filter:saturate(140%) blur(28px);-webkit-backdrop-filter:saturate(140%) blur(28px);cursor:zoom-out;animation:lightboxEnter .22s var(--ease-snappy)}@keyframes lightboxEnter{0%{opacity:0}to{opacity:1}}.lightbox-img{max-width:100%;max-height:100%;width:auto;height:auto;border-radius:var(--radius-card);box-shadow:0 24px 60px #0006;cursor:default;animation:lightboxImgEnter .28s var(--ease-spring);touch-action:pinch-zoom;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}@keyframes lightboxImgEnter{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}.lightbox-close{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;background:var(--material-thin);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border:.5px solid var(--separator);color:var(--label);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .12s var(--ease-smooth),transform .12s var(--ease-snappy)}.lightbox-close:hover{background:var(--fill-2)}.lightbox-close:active{transform:scale(.94)}body.lightbox-open{overflow:hidden}#generating-overlay{position:fixed;bottom:24px;left:50%;transform:translate(-50%);z-index:100}#generating-overlay:not(.hidden){animation:overlayEnter .24s var(--ease-snappy) both}@keyframes overlayEnter{0%{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%)}}.overlay-content{display:inline-flex;align-items:center;gap:12px;background:var(--material-thin);border:.5px solid var(--separator);border-radius:var(--radius-pill);padding:10px 18px;font-size:var(--type-subhead-size);font-weight:500;color:var(--label);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);box-shadow:var(--shadow-2)}.overlay-content .spinner{width:16px;height:16px;margin-bottom:0;border:2px solid var(--label-4);border-top-color:var(--label);border-radius:50%;animation:spin .8s linear infinite}.hidden{display:none!important}footer{max-width:1080px;margin:0 auto;padding:32px 24px 40px;text-align:center;font-size:var(--type-footnote-size);line-height:var(--type-footnote-lh);letter-spacing:var(--type-footnote-track);color:var(--label-3)}@media (max-width: 900px){header,main,footer{padding-left:20px;padding-right:20px}.toolbar{margin-bottom:32px}.hero{padding-top:48px}.style-grid{grid-template-columns:repeat(2,1fr)}.styles-header,.result-header{flex-direction:column;align-items:flex-start;gap:16px}.styles-header-actions,.result-actions{justify-content:flex-start}.result-actions .action-menu-list{right:auto;left:0;transform-origin:top left}.custom-style-card{grid-template-columns:1fr}.custom-style-card .style-thumbnail{min-height:200px}.result-body{grid-template-columns:1fr}.bom-panel{position:static;max-height:none}.bom-toggle{display:inline-flex;position:sticky;top:8px;z-index:5;box-shadow:var(--shadow-1)}.bom-panel.bom-collapsed{padding-bottom:12px;gap:0}.bom-panel.bom-collapsed .bom-header,.bom-panel.bom-collapsed .bom-rooms,.bom-panel.bom-collapsed .bom-total,.bom-panel.bom-collapsed .bom-disclaimer{display:none}}@media (max-width: 540px){header h1{font-size:36px}.style-grid{grid-template-columns:1fr}.quiz-question{font-size:var(--type-title-2-size);line-height:var(--type-title-2-lh);letter-spacing:var(--type-title-2-track)}.upload-text{font-size:var(--type-title-3-size);line-height:var(--type-title-3-lh);letter-spacing:var(--type-title-3-track)}.styles-header h2,.result-header h2{font-size:var(--type-title-1-size);line-height:var(--type-title-1-lh);letter-spacing:var(--type-title-1-track)}#upload-zone{height:320px}.styles-header-actions{width:100%}.styles-header-actions .btn-secondary{flex:1;min-width:0}.loading-card,.error-card{padding:36px 28px}}