@import"https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding&display=swap";:root{--app-bg: #ffffff;--app-text: #000000;--accent-color: #3388ff;--accent-color--transparent: rgba(51, 136, 255, .15);--border-color: #e0e0e0;--border-hover: #cccccc;--error-color: #ff3333;--edge-padding: 20px}::selection{background-color:var(--accent-color);color:#fff}::-moz-selection{background-color:var(--accent-color);color:#fff}*{box-sizing:border-box}html{height:100%;margin:0;padding:0;overflow-x:hidden}body{height:100svh;margin:0;padding:0;font-family:Nanum Gothic Coding,monospace;background:var(--app-bg);color:var(--app-text);transition:background-color .2s ease,color .2s ease}#root{min-height:100svh;width:100%;display:flex;flex-direction:column}button{background:none;border:none;padding:0;font:inherit;color:inherit;cursor:pointer}.app-container{display:flex;flex-direction:column;min-height:100svh;width:100%}.app-header{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:var(--edge-padding);width:100%;z-index:10;font-size:1rem;flex-shrink:0}.header-title-group{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;justify-content:center}.app-header h1{margin:0;font-size:1rem;font-weight:400;cursor:pointer;transition:color .2s ease}.header-tag{background-color:var(--accent-color--transparent);color:var(--accent-color);padding:.2em .6em;font-size:.75rem;border-radius:4px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}.app-header h1:hover{color:var(--accent-color)}.app-header a{color:var(--app-text);text-decoration:none}.app-header a:hover{text-decoration:underline;color:var(--accent-color)}.header-links{display:flex;gap:20px;align-items:center}.guide-link{color:var(--accent-color);text-decoration:none;font-weight:500;padding:8px 12px;border-radius:4px;background:#3388ff1a;transition:background-color .2s ease}.guide-link:hover{background:#38f3;text-decoration:none}.main-content{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;padding:1rem var(--edge-padding);animation:fadeIn .5s ease}.app-footer{display:flex;justify-content:space-between;align-items:center;padding:var(--edge-padding);width:100%;z-index:10;font-size:1rem;flex-shrink:0}.camera-wrapper,.analysis-container,.loading-container,.error-display,.initial-choice-container{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem}.control-button{font-family:Nanum Gothic Coding,monospace;font-size:1rem;color:var(--app-text);background-color:transparent;border:1px solid var(--app-text);padding:.6rem 1.5rem;cursor:pointer;text-transform:uppercase;text-align:center;transition:all .15s ease;min-width:200px}.control-button:hover:not(:disabled){background-color:var(--app-text);color:var(--app-bg)}.control-button:disabled{opacity:.5;cursor:not-allowed;border-color:var(--border-color);color:var(--border-color)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.initial-choice-container{gap:2rem;text-align:center}.initial-choice-container h2{font-size:1.2rem;font-weight:400;text-transform:uppercase;letter-spacing:.05em;opacity:.8;margin:0}.choice-buttons{display:flex;flex-direction:row;gap:1.5rem;flex-wrap:wrap;justify-content:center}.video-container{border:1px solid var(--border-color);text-align:center;width:100%;max-width:640px;aspect-ratio:4 / 3;position:relative;overflow:hidden;background-color:#000;transition:border-color .2s ease;padding:4px}.video-container:hover{border-color:var(--accent-color)}video,.output_canvas,.face-guide-overlay{display:block;position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}video{transform:scaleX(-1)}.output_canvas{z-index:1;pointer-events:none}.face-guide-overlay{z-index:2;pointer-events:none;transform:scaleX(-1)}.face-guide-overlay path{stroke:#ffffff26;stroke-dasharray:10 8;stroke-width:2;transition:stroke .3s ease}.video-container:hover .face-guide-overlay path{stroke:#38f6}.snapshot-container.upload-preview{background-color:#000;max-width:640px;max-height:480px;display:flex;justify-content:center;align-items:center;overflow:hidden}.snapshot-container.upload-preview .snapshot-image,.snapshot-container.upload-preview .output_canvas{object-fit:contain;max-width:100%;max-height:100%;width:auto;height:auto}.snapshot-container.upload-preview .output_canvas{position:absolute}.loading-container p{font-size:1rem;text-transform:uppercase;letter-spacing:.1em;opacity:.8}.loading-visualizer{display:grid;grid-template-rows:repeat(10,1fr);grid-template-columns:repeat(10,1fr);gap:4px;height:120px;width:120px}.loading-visualizer .led{width:100%;height:100%;border-radius:50%;background-color:var(--border-color);transition:background-color .1s ease-out,transform .1s ease-out}.loading-visualizer .led.active{background-color:var(--accent-color);transform:scale(1.1);box-shadow:0 0 5px var(--accent-color)}.error-display{text-align:center;color:var(--error-color);font-size:1.2rem}.error-display .control-button{border-color:var(--error-color);color:var(--error-color)}.error-display .control-button:hover{background-color:var(--error-color);color:var(--app-bg)}.video-container,.analysis-section,.snapshot-container{position:relative}.video-container:before,.video-container:after,.analysis-section:before,.analysis-section:after,.snapshot-container:before,.snapshot-container:after{content:"";position:absolute;width:20px;height:20px;border-color:var(--accent-color);border-style:solid;transition:all .3s ease;pointer-events:none}.video-container:before,.analysis-section:before,.snapshot-container:before{top:-1px;left:-1px;border-width:2px 0 0 2px}.video-container:after,.analysis-section:after,.snapshot-container:after{bottom:-1px;right:-1px;border-width:0 2px 2px 0}.video-container{border-radius:2px}.snapshot-container{border:1px solid var(--border-color);padding:4px;border-radius:2px}.analysis-container{max-width:1200px;gap:2rem;animation:fadeIn .5s ease}.analysis-grid-layout{display:flex;flex-direction:column;gap:2rem;width:100%;align-items:center}.analysis-grid-layout .snapshot-container{width:100%;max-width:480px;flex-shrink:0;aspect-ratio:4 / 3}.snapshot-image{width:100%;height:100%;object-fit:cover}.results-content{flex-grow:1;text-align:left}.analysis-section{padding:1rem;border:1px solid var(--border-color);border-radius:2px;width:100%}.analysis-section h2{font-size:1rem;text-transform:uppercase;border-bottom:1px solid var(--border-color);padding-bottom:.5rem;margin:0 0 1rem;font-weight:400}.result-item{margin-bottom:1.5rem}.result-item h3{font-size:.9rem;text-transform:uppercase;color:var(--app-text);opacity:.7;margin:0 0 .5rem;font-weight:400}.result-item p{margin:0;font-size:1rem;line-height:1.5}.product-link{margin-top:.5rem!important}.product-link a{color:var(--accent-color);text-decoration:none;border-bottom:1px dashed var(--accent-color)}.product-link a:hover{border-bottom-style:solid}.sources-section{width:100%;margin-top:1rem;border-top:1px solid var(--border-color);padding-top:2rem}.sources-section h2{font-size:1rem;text-transform:uppercase;border-bottom:1px solid var(--border-color);padding-bottom:.5rem;margin:0 0 1rem;font-weight:400;text-align:center}.sources-section ul{list-style:none;padding:0;font-size:.9rem;columns:2;gap:1.5rem;text-align:center}.sources-section li{margin-bottom:.5rem}.sources-section a{color:var(--app-text);text-decoration:none;opacity:.7;word-break:break-all}.sources-section a:hover{opacity:1;text-decoration:underline;color:var(--accent-color)}@media (min-width: 768px){.app-header{flex-direction:row;justify-content:space-between}.analysis-grid-layout{display:grid;align-items:start;grid-template-areas:"snapshot snapshot" "analysis recommendations";grid-template-columns:1fr 1fr}.analysis-grid-layout>.snapshot-container{grid-area:snapshot;margin:0 auto}.analysis-grid-layout>.facial-analysis{grid-area:analysis}.analysis-grid-layout>.makeup-recs{grid-area:recommendations}}@media (min-width: 1200px){.analysis-grid-layout{grid-template-areas:"snapshot analysis recommendations";grid-template-columns:320px 1fr 1fr}.analysis-grid-layout>.snapshot-container{width:320px;margin:0}}@media (max-width: 600px){:root{--edge-padding: 15px}body{font-size:15px}.main-content{padding-top:1rem;padding-bottom:2rem}.app-footer{flex-direction:column;gap:.5rem;text-align:center;padding-top:10px;padding-bottom:10px}.control-button{padding:.8rem 1rem;width:100%;max-width:400px;min-width:0}.choice-buttons{flex-direction:column;width:100%}.sources-section ul{columns:1}.analysis-section{padding:.8rem}.analysis-section h2{font-size:.95rem}.result-item h3{font-size:.85rem}.result-item p{font-size:.95rem}.loading-visualizer{height:100px;width:100px;gap:3px}}