:root{--color-bg: #EAEAEA;--color-text: #111111;--color-accent: #FFCC00;--color-accent-dim: #E6B800;--font-main: "Outfit", sans-serif}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-main);background-color:var(--color-bg);color:var(--color-text);overflow-y:auto;min-height:100vh;display:flex;justify-content:center;align-items:center;padding:2rem 0}.background-mesh{position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 15% 50%,rgba(255,204,0,.15),transparent 40%),radial-gradient(circle at 85% 30%,rgba(0,0,0,.05),transparent 50%);z-index:-2}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0IiBoZWlnaHQ9IjQiPgo8cmVjdCB3aWR0aD0iNCIgaGVpZ2h0PSI0IiBmaWxsPSIjZmZmIi8+CjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9IiNjY2MiLz4KPC9zdmc+) repeat;opacity:.3;z-index:-1;pointer-events:none}main{position:relative;z-index:10;text-align:center}.hero-text{font-size:clamp(2rem,6vw,6rem);font-weight:900;line-height:1.1;letter-spacing:-.02em;opacity:0;transform:translateY(30px);transition:opacity 1.2s cubic-bezier(.16,1,.3,1),transform 1.2s cubic-bezier(.16,1,.3,1);color:var(--color-text);text-shadow:0 10px 30px rgba(0,0,0,.1)}.hero-text.visible{opacity:1;transform:translateY(0)}.hero-authors{font-size:1.5rem;font-weight:700;color:var(--color-accent-dim);margin-top:1rem;letter-spacing:.05em;opacity:0;transform:translateY(20px);transition:opacity 1s ease-out .3s,transform 1s cubic-bezier(.16,1,.3,1) .3s}.hero-authors.visible{opacity:1;transform:translateY(0)}.image-container{margin-top:2rem;perspective:1000px}.hero-image{max-width:80%;max-height:50vh;border-radius:12px;box-shadow:0 20px 50px #0003;opacity:0;transform:translateY(20px) rotateX(10deg);transition:opacity 1s ease-out .5s,transform 1s cubic-bezier(.16,1,.3,1) .5s}.hero-image.visible{opacity:1;transform:translateY(0) rotateX(0)}.description-text{max-width:800px;margin:3rem auto 0;text-align:left;font-size:1.1rem;line-height:1.6;color:var(--color-text);opacity:0;transform:translateY(20px);transition:opacity 1s ease-out .8s,transform 1s cubic-bezier(.16,1,.3,1) .8s}.description-text p{margin-bottom:1.5rem}.description-text.visible{opacity:.8;transform:translateY(0)}.highlight{color:var(--color-accent);text-shadow:0 0 0px rgba(0,0,0,0);display:inline-block;position:relative}.highlight:after{content:"";position:absolute;bottom:5px;left:0;width:100%;height:.15em;background-color:var(--color-text);z-index:-1;opacity:.1;transform:scaleX(.9)}.afs-definition{text-align:center;margin-bottom:5rem;opacity:0;transform:translateY(30px);transition:opacity 1s ease-out 1s,transform 1s cubic-bezier(.16,1,.3,1) 1s}.afs-definition h2{font-size:5rem;font-weight:900;color:var(--color-accent);line-height:1;letter-spacing:-.05em;margin-bottom:.5rem}.afs-definition p{font-size:1.5rem;font-weight:700;color:var(--color-text);letter-spacing:.1em;margin-bottom:.5rem}.afs-definition .afs-sub{font-size:1rem;font-weight:400;opacity:.7;max-width:600px;margin:0 auto}.afs-definition.visible{opacity:1;transform:translateY(0)}.mobile-mockup{max-width:400px;margin:0 auto 5rem;background:#fff;border-radius:20px;box-shadow:0 30px 60px #00000026;overflow:hidden;color:#333;font-family:Courier New,Courier,monospace;border:1px solid #ddd;opacity:0;transform:translateY(30px);transition:opacity 1s ease-out 1.2s,transform 1s cubic-bezier(.16,1,.3,1) 1.2s}.mobile-mockup.visible{opacity:1;transform:translateY(0)}.mockup-header{background:var(--color-text);color:var(--color-accent);padding:1rem;font-weight:900;font-family:var(--font-main);letter-spacing:.05em;font-size:.9rem;border-bottom:2px solid var(--color-accent)}.mockup-body{padding:1.5rem;text-align:left}.mockup-status{font-weight:700;margin-bottom:1.5rem;color:#555;text-align:center}.mockup-section label{display:block;font-size:.7rem;color:#888;margin-bottom:.5rem;font-weight:700}.mockup-input{background:#f5f5f5;padding:10px;border-radius:6px;font-weight:700;font-size:.9rem;border:1px solid #eee;margin-bottom:1rem;display:flex;align-items:center}.barcode-icon{font-family:"Libre Barcode 39",cursive;margin-right:10px;letter-spacing:-2px}.mockup-divider{height:1px;background:#eee;margin:1.5rem 0}.mockup-data-row{display:flex;justify-content:space-between;margin-bottom:.5rem;font-size:.85rem}.mockup-data-row .label{color:#666}.mockup-data-row .value{font-weight:700;color:#000}.mockup-actions{display:flex;gap:10px}.mockup-actions button{flex:1;padding:10px;border:none;border-radius:6px;font-weight:700;cursor:pointer;font-family:var(--font-main);transition:transform .2s}.btn-confirm{background:#e8f5e9;color:#2e7d32;border:1px solid #c8e6c9}.btn-cancel{background:#ffebee;color:#c62828;border:1px solid #ffcdd2}.mockup-actions button:hover{transform:translateY(-2px)}.btn-neutral{background:#f5f5f5;color:#333;border:1px solid #ddd}.mockup-list-header{display:flex;font-size:.7rem;font-weight:700;color:#888;margin-bottom:.5rem;padding-bottom:.5rem;border-bottom:1px dashed #eee}.mockup-list-header span:nth-child(1){width:15%}.mockup-list-header span:nth-child(2){width:50%}.mockup-list-header span:nth-child(3){width:35%;text-align:right}.mockup-list-item{display:flex;font-size:.8rem;padding:.5rem 0;border-bottom:1px solid #f9f9f9}.mockup-list-item .pos{width:15%;color:#888}.mockup-list-item .art{width:50%;font-weight:700}.mockup-list-item .qty{width:35%;text-align:right;font-family:monospace}.mockup-list-item .check{margin-left:5px}.mockup-list-item.fade{opacity:.5;font-style:italic}
