:root{--bg-color: #f1eee5;--text-primary: #2c2c2c;--text-secondary: #444;--accent-color: #333;--header-height: 64px;--header-height-mobile: 70px;--button-bg: rgba(0, 0, 0, .75);--button-shadow-dark: rgba(5, 5, 5, .25);--button-shadow-light: rgba(5, 5, 5, .1);--button-shadow-main: rgba(5, 5, 5, 1);--button-shadow-medium: rgba(5, 5, 5, .5);--button-shadow-soft: rgba(5, 5, 5, .25);--button-inner-bg-start: rgba(230, 230, 230, 1);--button-inner-bg-end: rgba(180, 180, 180, 1);--button-inner-shadow-dark: rgba(5, 5, 5, .1);--button-inner-shadow-dark-2: rgba(5, 5, 5, .25);--button-inner-shadow-dark-3: rgba(5, 5, 5, .5);--button-inner-shadow-dark-4: rgba(5, 5, 5, .75);--button-inner-highlight: rgba(255, 255, 255, .25);--button-inner-highlight-2: rgba(255, 255, 255, 1);--button-inner-highlight-3: rgba(255, 255, 255, .15);--button-text-start: rgba(25, 25, 25, 1);--button-text-end: rgba(75, 75, 75, 1);--button-text-shadow: rgba(0, 0, 0, .1)}[data-theme=dark]{--bg-color: #1a1a1a;--text-primary: #e0e0e0;--text-secondary: #c0c0c0;--accent-color: #f0f0f0}*{box-sizing:border-box}body{margin:0;background-color:var(--bg-color);color:var(--accent-color);overflow-x:hidden;min-height:100vh;font-size:16px;line-height:1.5;transition:background-color .3s ease,color .3s ease;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}main{background-color:var(--bg-color);min-height:100vh;padding-top:calc(var(--header-height) + 1.6rem);padding-bottom:1.6rem;transition:background-color .3s ease}.content-wrapper{max-width:1120px;margin:0 auto;padding:0 1rem}.content-section{display:flex;justify-content:flex-start;padding:0 1rem}.tldr-section{max-width:min(480px,90vw);margin:0}.tldr-section h2{font-size:clamp(1.25rem,3vw,1.4rem);color:#000;margin:.8rem 0;font-weight:600;transition:color .3s ease}[data-theme=dark] .tldr-section h2{color:#fff}.tldr-section h3{font-size:clamp(1.1rem,2.5vw,1.12rem);color:var(--text-primary);margin:.8rem 0;font-weight:600;transition:color .3s ease}.tldr-section p{font-size:clamp(1rem,2.5vw,.96rem);line-height:1.6;color:var(--text-secondary);margin:1.2rem 0;transition:color .3s ease}.decorative-line{height:2px;background:linear-gradient(90deg,var(--text-primary) 0%,transparent 100%);margin:.8rem 0;width:clamp(100px,30vw,160px);transition:background .3s ease}.upload-section{margin:2.5rem 0;text-align:left;display:flex;flex-direction:column;align-items:flex-start}.upload-button{all:unset;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);position:relative;border-radius:999vw;background-color:var(--button-bg);box-shadow:-.15em -.15em .15em -.075em var(--button-shadow-dark),.0375em .0375em .0675em 0 var(--button-shadow-light);transition:all .3s ease;font-size:clamp(.8rem,2vw,.8rem);display:inline-block}.upload-button:after{content:"";position:absolute;z-index:0;width:calc(100% + .3em);height:calc(100% + .3em);top:-.15em;left:-.15em;border-radius:inherit;background:linear-gradient(-135deg,var(--button-shadow-dark-2),transparent 20%,transparent 100%);filter:blur(.0125em);opacity:.25;mix-blend-mode:multiply}.upload-button .button-outer{position:relative;z-index:1;border-radius:inherit;transition:box-shadow .3s ease;will-change:box-shadow;box-shadow:0 .05em .05em -.01em var(--button-shadow-main),0 .01em .01em -.01em var(--button-shadow-medium),.15em .3em .1em -.01em var(--button-shadow-soft)}.upload-button:hover .button-outer{box-shadow:0 0 0 0 var(--button-shadow-main),0 0 0 0 var(--button-shadow-medium),0 0 0 0 var(--button-shadow-soft)}.button-inner{--inset: .035em;position:relative;z-index:1;border-radius:inherit;padding:.8em 1.2em;background-image:linear-gradient(135deg,var(--button-inner-bg-start),var(--button-inner-bg-end));transition:box-shadow .3s ease,clip-path .25s ease,background-image .25s ease,transform .25s ease;will-change:box-shadow,clip-path,background-image,transform;overflow:clip;clip-path:inset(0 0 0 0 round 999vw);box-shadow:0 0 0 0 inset var(--button-inner-shadow-dark),-.05em -.05em .05em 0 inset var(--button-inner-shadow-dark-2),0 0 0 0 inset var(--button-inner-shadow-dark),0 0 .05em .2em inset var(--button-inner-highlight),.025em .05em .1em 0 inset var(--button-inner-highlight-2),.12em .12em .12em inset var(--button-inner-highlight),-.075em -.25em .25em .1em inset var(--button-inner-shadow-dark-2)}.upload-button:hover .button-inner{clip-path:inset(clamp(1px,.0625em,2px) clamp(1px,.0625em,2px) clamp(1px,.0625em,2px) clamp(1px,.0625em,2px) round 999vw);box-shadow:.1em .15em .05em 0 inset var(--button-inner-shadow-dark-4),-.025em -.03em .05em .025em inset var(--button-inner-shadow-dark-3),.25em .25em .2em 0 inset var(--button-inner-shadow-dark-3),0 0 .05em .5em inset var(--button-inner-highlight-3),0 0 0 0 inset var(--button-inner-highlight-2),.12em .12em .12em inset var(--button-inner-highlight),-.075em -.12em .2em .1em inset var(--button-inner-shadow-dark-2)}.upload-button .button-inner span{position:relative;z-index:4;font-family:Century Schoolbook,serif;letter-spacing:-.025em;font-weight:500;color:#0000;background-image:linear-gradient(135deg,var(--button-text-start),var(--button-text-end));-webkit-background-clip:text;background-clip:text;transition:transform .25s ease;display:block;will-change:transform;text-shadow:var(--button-text-shadow) 0 0 .1em;user-select:none}.upload-button:hover .button-inner span,.upload-button:active .button-inner{transform:scale(.975)}.upload-button:focus{outline:2px solid var(--text-primary);outline-offset:4px}.image-preview-container{margin-top:2rem;width:100%}.image-preview{width:100%;max-width:500px;aspect-ratio:1;display:flex;align-items:center;justify-content:center;border:2px solid var(--text-secondary);border-radius:8px;overflow:hidden;background:#0000000d}[data-theme=dark] .image-preview{background:#ffffff0d}.image-preview img{width:100%;height:100%;object-fit:cover;display:block}@media (max-width: 1024px){.content-section{justify-content:center}.tldr-section{max-width:80vw}.upload-section{align-items:center}}@media (max-width: 768px){:root{--header-height: var(--header-height-mobile)}main{padding-top:calc(var(--header-height) + 1.5rem)}.content-wrapper{padding:0 .75rem}.content-section{padding:0 .5rem;justify-content:center}.tldr-section{max-width:95vw}.upload-section{text-align:center;margin:1.5rem 0;align-items:center}.upload-button{font-size:.95rem}.button-inner{padding:.8em 1.2em}.image-preview{max-width:90vw}}@media (max-width: 480px){.upload-button{font-size:.95rem}.button-inner{padding:.7em 1em}.decorative-line{width:80px}}.lego-container{display:inline-block;background:#0000000d;padding:20px;border-radius:8px}[data-theme=dark] .lego-container{background:#ffffff0d}.lego-grid{display:grid;grid-template-columns:repeat(16,1fr);grid-template-rows:repeat(16,1fr);gap:0;width:min(480px,90vw);aspect-ratio:1 / 1;margin:0 auto}.lego-brick{color:#f63;background-color:currentColor;width:100%;height:100%;aspect-ratio:1 / 1;box-shadow:inset -1px -1px #0003,inset 1px 1px #fff3;background-image:radial-gradient(circle at center,currentColor 40%,transparent 45%),radial-gradient(circle at center,rgba(255,255,255,.6) 40%,transparent 45%),radial-gradient(circle at center,rgba(0,0,0,.2) 40%,transparent 50%),radial-gradient(circle at center,rgba(0,0,0,.2) 40%,transparent 50%);background-size:100% 100%;background-position:center center,calc(50% - .5px) calc(50% - .5px),center center,calc(50% + 2px) calc(50% + 2px);background-repeat:no-repeat;filter:drop-shadow(2px 2px 2px rgba(0,0,0,.3)) drop-shadow(0 0 3px rgba(0,0,0,.4))}@media (max-width: 768px){.lego-grid{width:min(400px,85vw)}.lego-container{padding:15px}}@media (max-width: 480px){.lego-grid{width:min(320px,90vw)}.lego-container{padding:10px}.lego-brick{filter:drop-shadow(1px 1px 1px rgba(0,0,0,.3)) drop-shadow(0 0 2px rgba(0,0,0,.4))}}@media (max-width: 360px){.lego-grid{width:min(280px,88vw)}.lego-container{padding:8px}}.lego-loading{text-align:center;padding:2rem;color:var(--text-secondary);font-style:italic}@keyframes legoFadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.lego-container{animation:legoFadeIn .4s ease-out}@media (prefers-reduced-motion: reduce){.lego-container{animation:none}.lego-brick{filter:drop-shadow(2px 2px 2px rgba(0,0,0,.3))}}
