: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;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/SUITE-Light.woff2) format("woff2");font-weight:300;font-display:swap}@font-face{font-family:SUITE;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/SUITE-Regular.woff2) format("woff2");font-weight:400;font-display:swap}@font-face{font-family:SUITE;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/SUITE-Medium.woff2) format("woff2");font-weight:500;font-display:swap}@font-face{font-family:SUITE;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/SUITE-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}@font-face{font-family:SUITE;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/SUITE-Bold.woff2) format("woff2");font-weight:700;font-display:swap}@font-face{font-family:SUITE;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/SUITE-ExtraBold.woff2) format("woff2");font-weight:800;font-display:swap}@font-face{font-family:SUITE;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/SUITE-Heavy.woff2) format("woff2");font-weight:900;font-display:swap}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{font-family:var(--font-family)}body{font-family:var(--font-family);font-weight:var(--font-weight-regular);line-height:1.6;color:var(--color-primary);background:var(--color-background);min-height:100vh;overflow-x:hidden}h1,h2,h3,h4,h5,h6,p,span,a,li,label,input,button,textarea,select,summary,details{font-family:var(--font-family)}strong,b{font-family:var(--font-family);font-weight:700}button{font-family:var(--font-family);cursor:pointer;border:none;background:none}input{font-family:var(--font-family);border:none;background:none;outline:none}img{max-width:100%;display:block}.container{width:100%;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;padding:0;scroll-snap-type:y mandatory;overflow-y:scroll;height:100vh;height:100dvh}html{scroll-behavior:smooth}.main-screen,.how-to-use,.content-section{scroll-snap-align:start;scroll-snap-stop:always}@media (max-width: 768px){.container{scroll-snap-type:none}.main-screen,.how-to-use,.content-section{scroll-snap-align:none;scroll-snap-stop:normal}}.dot-nav{position:fixed;right:1.5rem;top:50%;transform:translateY(-50%);z-index:1000;display:flex;flex-direction:column;gap:1rem;opacity:0;transition:opacity .3s ease;pointer-events:none}.dot-nav.visible{opacity:1;pointer-events:auto}.dot-link{width:12px;height:12px;border-radius:50%;background:var(--color-border);border:2px solid var(--color-border);transition:all .3s ease;position:relative}.dot-link:hover{background:var(--color-secondary);border-color:var(--color-secondary);transform:scale(1.2)}.dot-link.active{background:var(--color-primary);border-color:var(--color-primary);transform:scale(1.3)}.dot-link:before{content:attr(title);position:absolute;right:24px;top:50%;transform:translateY(-50%);background:var(--color-primary);color:var(--color-background);padding:.4rem .75rem;border-radius:var(--radius-sm);font-size:.8rem;font-weight:500;font-family:var(--font-family);white-space:nowrap;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease}.dot-link:hover:before{opacity:1;visibility:visible}@media (max-width: 768px){.dot-nav{display:none}}.main-screen{width:100%;max-width:800px;min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;position:relative;scroll-snap-align:start}.main-content{display:flex;align-items:center;gap:clamp(2rem,6vw,4rem);width:100%;justify-content:center}.create-section,.join-section{text-align:center;flex:1;max-width:300px}.create-section{cursor:pointer;padding:clamp(1rem,2vw,1.5rem) clamp(1.5rem,3vw,2rem) clamp(1.5rem,3vw,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-family:var(--font-family);font-size:clamp(2rem,5vw,3rem);font-weight:200;margin-bottom:var(--spacing-xs);color:var(--color-primary)}.create-section p{font-family:var(--font-family);font-size:clamp(.9rem,2vw,1.2rem);font-weight:300;color:var(--color-secondary)}.divider{width:1px;height:clamp(120px,20vw,200px);background:var(--color-border);margin:0 clamp(1rem,3vw,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:50px;padding-left:var(--spacing-md);font-family:var(--font-family);font-weight:300;font-size:clamp(.9rem,1.5vw,1rem);text-align:center;color:var(--color-primary)}#clipboardCodeInput::placeholder{font-family:var(--font-family);font-weight:300;color:#b8a082;font-style:italic;text-align:center}.join-btn{position:absolute;right:2px;top:2px;bottom:2px;min-width:48px;background:var(--color-primary);color:var(--color-background);font-family:var(--font-family);font-size:1.5rem;font-weight:300;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);font-family:var(--font-family)}.clipboard-expiry{font-size:.75rem;font-weight:var(--font-weight-light);color:var(--color-secondary);margin-top:.15rem;font-family:var(--font-family)}.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)}.clipboard-note{padding:var(--spacing-sm) var(--spacing-lg);font-size:.8rem;font-weight:var(--font-weight-light);color:var(--color-secondary);text-align:center;font-family:var(--font-family)}.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;font-family:var(--font-family)}.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;font-family:var(--font-family)}.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;min-height:100dvh;width:100%;padding:clamp(2rem,4vw,4rem) clamp(1rem,2vw,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:clamp(1.3rem,3vw,2rem);font-weight:700;color:var(--color-primary);margin-bottom:clamp(1rem,3vw,3rem);text-align:center;font-family:var(--font-family)}.steps-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(.5rem,2vw,2rem);max-width:1000px;width:100%;margin-bottom:2rem}.step{background:var(--color-surface);border-radius:var(--radius-lg);padding:clamp(.75rem,2vw,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:clamp(36px,6vw,64px);height:clamp(36px,6vw,64px);margin:0 auto clamp(.5rem,1.5vw,1.5rem);background:var(--color-background);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--color-primary)}.step-icon svg{width:clamp(18px,3vw,32px);height:clamp(18px,3vw,32px)}.step h3{font-size:clamp(.75rem,1.5vw,1.125rem);font-weight:600;color:var(--color-primary);margin-bottom:clamp(.3rem,.75vw,.75rem);font-family:var(--font-family)}.step p{font-size:clamp(.65rem,1.2vw,.9rem);color:var(--color-secondary);line-height:1.6;font-family:var(--font-family)}.step p strong{color:var(--color-primary);font-weight:600}.features-note{margin-top:clamp(.75rem,1.5vw,1.5rem);font-size:clamp(.7rem,1.2vw,.9rem);color:var(--color-secondary);text-align:center;font-family:var(--font-family)}@media (max-width: 768px){.how-to-use{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 2rem);min-height:auto;justify-content:flex-start;padding-top:3rem}.steps-container{grid-template-columns:repeat(2,1fr);max-width:100%}.scroll-indicator{bottom:calc(env(safe-area-inset-bottom,0px) + 2rem)}.scroll-indicator span{font-size:.85rem}}@media (max-width: 480px){.scroll-indicator{bottom:3.5rem}.scroll-indicator span{font-size:.85rem}}.content-section{width:100%;min-height:100vh;min-height:100dvh;padding:clamp(2rem,4vw,4rem) clamp(1rem,3vw,2rem);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;scroll-snap-align:start}.content-section:nth-child(2n){background:linear-gradient(180deg,var(--color-border-light) 0%,var(--color-background) 100%)}.content-section:nth-child(odd){background:var(--color-background)}.brand-title{font-family:var(--font-family);font-size:clamp(4rem,12vw,7rem);font-weight:900;color:var(--color-primary);text-align:center;letter-spacing:-.03em}.section-title{font-family:var(--font-family);font-size:clamp(1.25rem,3vw,2rem);font-weight:700;color:var(--color-primary);margin-bottom:clamp(1rem,2vw,2rem);text-align:center}.section-subtitle{font-family:var(--font-family);font-size:clamp(.9rem,2.5vw,1.25rem);color:var(--color-secondary);text-align:center;margin-bottom:clamp(1.5rem,3vw,2.5rem);font-weight:400;letter-spacing:.05em}.about-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:clamp(.75rem,2vw,1.5rem);max-width:min(700px,100%);width:100%;margin-bottom:clamp(1rem,2vw,2rem)}.about-card{background:var(--color-surface);border-radius:var(--radius-lg);padding:clamp(1rem,2vw,1.5rem);box-shadow:var(--shadow-sm)}.about-icon{width:clamp(36px,5vw,48px);height:clamp(36px,5vw,48px);background:var(--color-background);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--color-primary);margin-bottom:clamp(.5rem,1vw,1rem)}.about-icon svg{width:clamp(18px,2.5vw,24px);height:clamp(18px,2.5vw,24px)}.about-card h3{font-size:clamp(.85rem,1.5vw,1rem);font-weight:600;color:var(--color-primary);margin-bottom:clamp(.4rem,1vw,.75rem)}.about-list{list-style:none;padding:0}.about-list li{font-size:clamp(.8rem,1.3vw,.95rem);color:var(--color-secondary);padding:clamp(.2rem,.5vw,.35rem) 0;padding-left:1rem;position:relative}.about-list li:before{content:"•";position:absolute;left:0;color:var(--color-primary)}.value-pills{display:flex;gap:clamp(.4rem,1vw,.75rem);flex-wrap:wrap;justify-content:center}.pill{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-full);padding:clamp(.3rem,.8vw,.5rem) clamp(.6rem,1.5vw,1rem);font-size:clamp(.7rem,1.2vw,.9rem);color:var(--color-primary);font-weight:500;display:flex;align-items:center;gap:clamp(.3rem,.6vw,.5rem)}.pill svg{width:clamp(12px,1.5vw,16px);height:clamp(12px,1.5vw,16px)}.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.5rem,1.5vw,1.25rem);max-width:min(800px,100%);width:100%}.feature-card{background:var(--color-surface);border-radius:var(--radius-md);padding:clamp(.75rem,1.5vw,1.25rem);text-align:center;box-shadow:var(--shadow-sm);transition:transform .2s ease}.feature-card:hover{transform:translateY(-3px)}.feature-icon{width:clamp(36px,5vw,52px);height:clamp(36px,5vw,52px);margin:0 auto clamp(.4rem,1vw,.75rem);background:var(--color-background);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--color-primary)}.feature-icon svg{width:clamp(18px,2.5vw,26px);height:clamp(18px,2.5vw,26px)}.feature-card h3{font-size:clamp(.75rem,1.3vw,.95rem);font-weight:600;color:var(--color-primary);margin-bottom:clamp(.25rem,.5vw,.5rem)}.feature-card p{font-size:clamp(.65rem,1.1vw,.85rem);color:var(--color-secondary);line-height:1.4}.faq-section{background:var(--color-background)!important}.faq-list{max-width:min(700px,100%);width:100%}.faq-item{background:var(--color-surface);border-radius:var(--radius-md);margin-bottom:clamp(.5rem,1vw,.75rem);box-shadow:var(--shadow-sm);overflow:hidden}.faq-item summary{padding:clamp(.75rem,1.5vw,1.25rem);font-size:clamp(.8rem,1.3vw,1rem);font-weight:500;color:var(--color-primary);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary:after{content:"+";font-size:clamp(1rem,1.5vw,1.25rem);font-weight:300;color:var(--color-secondary);transition:transform .2s ease}.faq-item[open] summary:after{transform:rotate(45deg)}.faq-item p{padding:0 clamp(.75rem,1.5vw,1.25rem) clamp(.75rem,1.5vw,1rem);font-size:clamp(.75rem,1.2vw,.95rem);color:var(--color-secondary);line-height:1.6}#useCasesSection{padding-bottom:clamp(6rem,10vw,8rem)}.usecases-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.5rem,1.5vw,1.25rem);max-width:min(800px,100%);width:100%;margin-bottom:clamp(1.5rem,3vw,3rem)}.usecase-card{background:var(--color-surface);border-radius:var(--radius-md);padding:clamp(.75rem,1.5vw,1.25rem);text-align:center;box-shadow:var(--shadow-sm);transition:transform .2s ease}.usecase-card:hover{transform:translateY(-3px)}.usecase-icon{width:clamp(36px,5vw,52px);height:clamp(36px,5vw,52px);margin:0 auto clamp(.4rem,1vw,.75rem);background:var(--color-background);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--color-primary)}.usecase-icon svg{width:clamp(18px,2.5vw,26px);height:clamp(18px,2.5vw,26px)}.usecase-card h3{font-size:clamp(.75rem,1.3vw,.95rem);font-weight:600;color:var(--color-primary);margin-bottom:clamp(.25rem,.5vw,.5rem)}.usecase-card p{font-size:clamp(.65rem,1.1vw,.85rem);color:var(--color-secondary);line-height:1.4}.site-footer{position:absolute;bottom:0;left:0;right:0;text-align:center;padding:clamp(1rem,2vw,2rem);color:var(--color-secondary)}.footer-links{display:flex;align-items:center;justify-content:center;gap:clamp(.5rem,1vw,1rem);margin-bottom:.5rem;font-size:clamp(.7rem,1.1vw,.85rem)}.footer-links a{color:var(--color-secondary);text-decoration:none;transition:color .2s ease;font-family:var(--font-family)}.footer-links a:hover{color:var(--color-primary)}.footer-divider{color:var(--color-border)}.site-footer p{font-size:clamp(.65rem,1vw,.8rem);font-family:var(--font-family)}@media (max-width: 768px){.content-section{justify-content:flex-start;padding-top:3rem}.features-grid,.usecases-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 480px){.features-grid,.usecases-grid{grid-template-columns:repeat(2,1fr)}}.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)}.delete-btn{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;background:#ffffffe6;border:1px solid rgba(139,115,85,.3);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:all var(--transition-normal);z-index:10;color:var(--color-secondary)}.delete-btn:hover{background:#ff4757;border-color:#ff4757;color:#fff;transform:scale(1.1)}.content-item:hover .delete-btn{opacity:1}.content-item.image-item .delete-btn{background:#0009;border-color:transparent;color:#fff}.content-item.image-item .delete-btn:hover{background:#ff4757}.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;font-family:var(--font-family)}.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;font-family:var(--font-family)}.file-size{font-weight:var(--font-weight-thin);font-size:.7rem;color:var(--color-secondary);font-family:var(--font-family)}.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}@media (max-width: 768px){.empty-state{padding:var(--spacing-md);font-size:.85rem}.empty-state-icon{font-size:2.5rem;margin-bottom:var(--spacing-xs)}}.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);font-family:var(--font-family)}.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);font-family:var(--font-family);z-index:1003;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:absolute;bottom:.75rem;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:var(--spacing-xs);font-size:.75rem;font-weight:var(--font-weight-light);font-family:var(--font-family);color:var(--color-text-light, var(--color-secondary));white-space:nowrap}@media (max-width: 768px){.legal-links{bottom:calc(env(safe-area-inset-bottom,0px) + .5rem);font-size:.7rem}}.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)}.qr-modal{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1002;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.qr-modal-content{background:var(--color-background);border-radius:var(--radius-xl);padding:var(--spacing-xl);text-align:center;position:relative;box-shadow:var(--shadow-lg);max-width:320px;width:90%}.qr-modal-content h3{margin:0 0 var(--spacing-md) 0;font-size:1.2rem;font-weight:var(--font-weight-normal);color:var(--color-primary)}.qr-close-btn{position:absolute;top:var(--spacing-sm);right:var(--spacing-sm);width:32px;height:32px;border:none;background:transparent;font-size:1.5rem;color:var(--color-secondary);cursor:pointer;border-radius:var(--radius-sm);transition:all var(--transition-fast)}.qr-close-btn:hover{background:#8b73551a;color:var(--color-primary)}#qrCanvas{display:block;margin:0 auto var(--spacing-sm)}.qr-url{font-size:.75rem;color:var(--color-secondary);word-break:break-all;margin:0 0 var(--spacing-md) 0;padding:var(--spacing-xs) var(--spacing-sm);background:#8b73550d;border-radius:var(--radius-sm)}.qr-actions{display:flex;gap:var(--spacing-sm);justify-content:center}.qr-action-btn{display:flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--color-border);background:var(--color-surface);border-radius:var(--radius-md);font-size:.9rem;color:var(--color-primary);cursor:pointer;transition:all var(--transition-fast)}.qr-action-btn:hover{background:#8b73551a;border-color:var(--color-primary)}@media (max-width: 768px){.container{padding:0;height:100dvh}.main-screen{min-height:100dvh;height:100dvh;padding-bottom:0}.how-to-use{min-height:100dvh;height:auto;width:100%;margin:0}.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}}