:root{--color-primary: #8B7355;--color-primary-dark: #7A6B4F;--color-secondary: #A0926B;--color-background: #F5E6D3;--color-surface: rgba(255, 255, 255, .8);--color-border: #D4C4A8;--color-border-light: #E8DCC6;--color-success: #7A9B57;--color-error: #C4704F;--color-info: #8B7355;--font-family: "SUITE", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;--font-weight-thin: 100;--font-weight-extralight: 200;--font-weight-light: 300;--font-weight-regular: 400;--spacing-xs: .5rem;--spacing-sm: 1rem;--spacing-md: 1.5rem;--spacing-lg: 2rem;--spacing-xl: 3rem;--radius-sm: 12px;--radius-md: 15px;--radius-lg: 20px;--radius-xl: 25px;--radius-full: 30px;--shadow-sm: 0 5px 15px rgba(139, 115, 85, .2);--shadow-md: 0 10px 30px rgba(139, 115, 85, .3);--shadow-lg: 0 20px 60px rgba(139, 115, 85, .15);--transition-fast: .2s ease;--transition-normal: .3s ease;--grid-gap: 2.5rem;--grid-item-min: 180px}@font-face{font-family:SUITE;font-weight:100;src:url(https://cdn.jsdelivr.net/gh/webfontworld/sunn/SUIT-Thin.woff2) format("woff2");font-display:swap}@font-face{font-family:SUITE;font-weight:200;src:url(https://cdn.jsdelivr.net/gh/webfontworld/sunn/SUIT-ExtraLight.woff2) format("woff2");font-display:swap}@font-face{font-family:SUITE;font-weight:300;src:url(https://cdn.jsdelivr.net/gh/webfontworld/sunn/SUIT-Light.woff2) format("woff2");font-display:swap}@font-face{font-family:SUITE;font-weight:400;src:url(https://cdn.jsdelivr.net/gh/webfontworld/sunn/SUIT-Regular.woff2) format("woff2");font-display:swap}@font-face{font-family:SUITE;font-weight:500;src:url(https://cdn.jsdelivr.net/gh/webfontworld/sunn/SUIT-Medium.woff2) format("woff2");font-display:swap}@font-face{font-family:SUITE;font-weight:600;src:url(https://cdn.jsdelivr.net/gh/webfontworld/sunn/SUIT-SemiBold.woff2) format("woff2");font-display:swap}@font-face{font-family:SUITE;font-weight:700;src:url(https://cdn.jsdelivr.net/gh/webfontworld/sunn/SUIT-Bold.woff2) format("woff2");font-display:swap}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-family);font-weight:var(--font-weight-thin);line-height:1.6;color:var(--color-primary);background:var(--color-background);min-height:100vh;overflow-x:hidden}button{font-family:inherit;cursor:pointer;border:none;background:none}input{font-family:inherit;border:none;background:none;outline:none}img{max-width:100%;display:block}.container{width:100%;min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:0;scroll-snap-type:y mandatory;overflow-y:scroll;height:100vh}html{scroll-behavior:smooth}.main-screen,.how-to-use{scroll-snap-align:start;scroll-snap-stop:always}.main-screen{width:100%;max-width:800px;min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;scroll-snap-align:start}.main-content{display:flex;align-items:center;gap:4rem;width:100%;justify-content:center}.create-section,.join-section{text-align:center;flex:1;max-width:300px}.create-section{cursor:pointer;padding:1.3rem 2rem 2.25rem;border-radius:var(--radius-lg);transition:all var(--transition-normal)}.create-section:hover{background:#8b73551a;transform:translateY(-5px)}.create-section h2,.join-section h2{font-size:3rem;font-weight:var(--font-weight-thin);margin-bottom:var(--spacing-xs);color:var(--color-primary)}.create-section p{font-size:1.2rem;font-weight:var(--font-weight-thin);color:var(--color-secondary)}.divider{width:1px;height:200px;background:var(--color-border);margin:0 2rem}.join-input-container{display:flex;align-items:center;max-width:300px;margin:0 auto;background:#ffffffb3;border:2px solid var(--color-border);border-radius:var(--radius-full);overflow:hidden;transition:all var(--transition-normal);position:relative}.join-input-container:focus-within{border-color:var(--color-primary);background:#ffffffe6;box-shadow:var(--shadow-sm)}#clipboardCodeInput{flex:1;padding:var(--spacing-sm) var(--spacing-md);padding-right:60px;font-weight:var(--font-weight-thin);font-size:1rem;text-align:center;color:var(--color-primary)}#clipboardCodeInput::placeholder{color:#b8a082;font-style:italic}.join-btn{position:absolute;right:2px;top:2px;bottom:2px;min-width:48px;background:var(--color-primary);color:var(--color-background);font-size:1.5rem;font-weight:var(--font-weight-thin);transition:all var(--transition-normal);display:flex;align-items:center;justify-content:center;border-radius:0 26px 26px 0;padding:0 var(--spacing-sm)}.join-btn:hover{background:var(--color-primary-dark);transform:scale(1.05)}.clipboard-screen{width:100%;max-width:1000px;height:85vh;margin:auto 0;background:var(--color-surface);border-radius:var(--radius-xl);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;overflow:hidden}.clipboard-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-md) var(--spacing-lg);border-bottom:1px solid var(--color-border-light);background:#ffffff80}.clipboard-header h3{font-size:1.3rem;font-weight:var(--font-weight-light);color:var(--color-primary)}.header-actions{display:flex;gap:var(--spacing-xs)}.header-btn{width:40px;height:40px;background:#8b73551a;border-radius:var(--radius-sm);font-size:1.2rem;transition:all var(--transition-normal);display:flex;align-items:center;justify-content:center}.header-btn svg{display:block}.header-btn:hover{background:#8b735533;transform:translateY(-2px)}.content-grid{flex:1;padding:var(--spacing-lg);display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--grid-item-min),1fr));grid-auto-rows:180px;gap:var(--grid-gap);overflow-y:auto;align-content:start}.add-item{aspect-ratio:1;border:2px dashed var(--color-border);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition-normal);background:#ffffff4d}.add-item:hover{border-color:var(--color-primary);background:#8b73551a;transform:translateY(-5px);box-shadow:0 10px 25px #8b735526}.add-icon{font-size:3rem;color:var(--color-primary);font-weight:var(--font-weight-thin)}.status-bar{padding:var(--spacing-sm) var(--spacing-lg);background:#ffffff80;border-top:1px solid var(--color-border-light);font-weight:var(--font-weight-extralight);font-size:.9rem;color:var(--color-secondary);text-align:center}.scroll-indicator{position:absolute;bottom:6rem;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:.5rem;color:var(--color-secondary);cursor:pointer;animation:bounce 2s infinite;transition:color .3s ease,transform .3s ease,opacity .3s ease;z-index:10}.scroll-indicator:hover{color:var(--color-primary)}.scroll-indicator span{font-size:1rem;font-weight:500}.scroll-indicator svg{opacity:.8}.scroll-indicator.scroll-up{flex-direction:column-reverse;animation:bounce-up 2s infinite}@keyframes bounce{0%,20%,50%,80%,to{transform:translate(-50%) translateY(0)}40%{transform:translate(-50%) translateY(-8px)}60%{transform:translate(-50%) translateY(-4px)}}@keyframes bounce-up{0%,20%,50%,80%,to{transform:translate(-50%) translateY(0)}40%{transform:translate(-50%) translateY(8px)}60%{transform:translate(-50%) translateY(4px)}}.how-to-use{min-height:100vh;width:100%;padding:4rem 2rem;background:linear-gradient(180deg,var(--color-border-light) 0%,var(--color-background) 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;scroll-snap-align:start}.section-title{font-size:2rem;font-weight:700;color:var(--color-primary);margin-bottom:3rem;text-align:center}.steps-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2rem;max-width:1000px;width:100%;margin-bottom:2rem}.step{background:var(--color-surface);border-radius:var(--radius-lg);padding:2rem;text-align:center;box-shadow:var(--shadow-sm);transition:transform .3s ease,box-shadow .3s ease}.step:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}.step-icon{width:64px;height:64px;margin:0 auto 1.5rem;background:var(--color-background);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--color-primary)}.step h3{font-size:1.125rem;font-weight:600;color:var(--color-primary);margin-bottom:.75rem}.step p{font-size:.9rem;color:var(--color-secondary);line-height:1.6}.step p strong{color:var(--color-primary);font-weight:600}.features-note{margin-top:1.5rem;font-size:.9rem;color:var(--color-secondary);text-align:center}@media (max-width: 768px){.how-to-use{padding:3rem 1.5rem}.section-title{font-size:1.5rem;margin-bottom:2rem}.steps-container{grid-template-columns:1fr;gap:1.5rem}.step{padding:1.5rem}.scroll-indicator{bottom:4rem}.scroll-indicator span{font-size:.9rem}}@media (max-width: 480px){.scroll-indicator{bottom:3.5rem}.scroll-indicator span{font-size:.85rem}}.content-item{aspect-ratio:1;border-radius:var(--radius-lg);background:var(--color-surface);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(139,115,85,.2);display:flex;flex-direction:column;padding:var(--spacing-md);cursor:pointer;transition:all var(--transition-normal);position:relative;overflow:hidden}.content-item:hover{transform:translateY(-5px);box-shadow:0 15px 35px #8b735533;border-color:var(--color-primary)}.content-item.text-item{justify-content:center;text-align:center}.text-content{font-weight:var(--font-weight-extralight);font-size:.9rem;color:var(--color-primary);line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical}.content-item.file-item{justify-content:space-between}.file-icon{font-size:3rem;text-align:center;margin-bottom:auto}.file-info{text-align:center}.file-name{font-weight:var(--font-weight-light);font-size:.8rem;color:var(--color-primary);margin-bottom:.3rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-size{font-weight:var(--font-weight-thin);font-size:.7rem;color:var(--color-secondary)}.content-item.image-item{padding:0;overflow:hidden}.image-preview{width:100%;height:100%;object-fit:cover;border-radius:var(--radius-lg)}.image-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,#000c);color:#fff;padding:var(--spacing-sm);font-weight:var(--font-weight-medium);font-size:.85rem;opacity:0;transition:opacity var(--transition-normal);text-shadow:0 1px 3px rgba(0,0,0,.5)}.image-overlay .file-name{color:#fff;font-weight:var(--font-weight-semibold);margin-bottom:2px}.image-overlay .file-size{color:#ffffffd9;font-size:.75rem}.content-item.image-item:hover .image-overlay{opacity:1}.file-item[data-type*=image] .file-icon{color:#ff6b6b}.file-item[data-type*=pdf] .file-icon{color:#ff4757}.file-item[data-type*=text] .file-icon{color:#3742fa}.file-item[data-type*=zip] .file-icon{color:#ffa502}.file-item[data-type*=video] .file-icon{color:#ff3838}.file-item[data-type*=audio] .file-icon{color:#1dd1a1}.empty-state{grid-column:1 / -1;text-align:center;padding:var(--spacing-xl);color:var(--color-secondary);font-weight:var(--font-weight-extralight)}.empty-state-icon{font-size:4rem;margin-bottom:var(--spacing-sm);opacity:.5}.loading-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#f5e6d3e6;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:1000;color:var(--color-primary);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.loading-overlay p{font-weight:var(--font-weight-extralight)}.loading-spinner{width:50px;height:50px;border:3px solid rgba(139,115,85,.3);border-top-color:var(--color-primary);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:var(--spacing-sm)}@keyframes spin{to{transform:rotate(360deg)}}.toast{position:fixed;bottom:var(--spacing-lg);right:var(--spacing-lg);max-width:min(350px,calc(100vw - 4rem));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:var(--color-primary);color:var(--color-background);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);box-shadow:var(--shadow-md);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-weight:var(--font-weight-light);z-index:1001;opacity:0;visibility:hidden;transition:opacity var(--transition-normal),visibility var(--transition-normal)}.toast.show{opacity:1;visibility:visible}.toast.success{background:var(--color-success)}.toast.error{background:var(--color-error)}.legal-links{position:fixed;bottom:var(--spacing-sm);left:50%;transform:translate(-50%);display:flex;align-items:center;gap:var(--spacing-xs);font-size:.8rem;font-weight:var(--font-weight-light);color:var(--color-text-light, var(--color-secondary));z-index:10}.legal-links a{color:inherit;text-decoration:none;padding:.25rem .5rem;border-radius:var(--radius-sm);transition:all var(--transition-fast)}.legal-links a:hover{color:var(--color-primary);background:#8b73551a}.legal-links .divider{width:auto;height:auto;background:none;margin:0;color:var(--color-border)}@media (max-width: 768px){.container{padding:var(--spacing-sm)}.main-content{flex-direction:column;gap:var(--spacing-lg)}.divider{width:200px;height:1px;margin:var(--spacing-sm) 0}.clipboard-screen{height:85vh}.content-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--spacing-sm);padding:var(--spacing-sm)}.clipboard-header{padding:var(--spacing-sm);flex-direction:column;gap:var(--spacing-sm);text-align:center}}@media (max-width: 480px){.content-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.create-section h2,.join-section h2{font-size:2rem}}