:root{font-synthesis:none;text-rendering:optimizelegibility;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{color:#f8fafc;background:#05060a;min-width:320px;min-height:100vh;margin:0;overflow:hidden}button,input,select{font:inherit;font-weight:400}button,select{border:0}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}.app{--text:#f8fafc;--muted:#cbd5e1;--accent:#93c5fd;--panel-bg:#020617c7;--panel-border:#ffffff1a;--control-bg:#ffffff17;--select-bg:#ffffff1a;--frame-border:#ffffff17;--frame-shadow:inset 0 0 80px #0000008c, 0 24px 90px #00000059;--empty-bg:#0f172a94;--menu-bg:#0f172ab8;--photo-bg:#0f172a;min-height:100dvh;color:var(--text);background:radial-gradient(circle at 15% 20%,#3d7dff2e,#0000 30%),radial-gradient(circle at 80% 10%,#ec489929,#0000 30%),linear-gradient(135deg,#05060a 0%,#111827 100%);display:block;position:relative}.app--light{--text:#0f172a;--muted:#64748b;--accent:#8b5cf6;--panel-bg:#ffffffdb;--panel-border:#64748b2e;--control-bg:#f1f5f9f2;--select-bg:#f8fafcfa;--frame-border:#64748b2e;--frame-shadow:inset 0 0 44px #94a3b82e, 0 24px 90px #64748b38;--empty-bg:#ffffffb8;--menu-bg:#ffffffc2;--photo-bg:#f1f5f9;background:radial-gradient(circle at 16% 18%,#c4b5fd57,#0000 31%),radial-gradient(circle at 82% 12%,#fbcfe852,#0000 29%),radial-gradient(circle at 70% 88%,#bae6fd47,#0000 34%),linear-gradient(135deg,#fffaf3 0%,#f8fafc 48%,#eef2ff 100%)}.menu-toggle{z-index:20;background:var(--menu-bg);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);pointer-events:none;opacity:0;border-radius:14px;place-content:center;gap:5px;width:42px;height:42px;transition:opacity .18s,transform .18s;display:grid;position:fixed;top:18px;right:18px;transform:translateY(-8px);box-shadow:0 16px 34px #0000004d}.menu-toggle--visible{pointer-events:auto;opacity:1;transform:translateY(0)}.app--light .menu-toggle{box-shadow:0 14px 32px #64748b3d}.menu-toggle span{background:var(--text);border-radius:999px;width:19px;height:2px;display:block}.backdrop{z-index:10;pointer-events:none;background:#02061700;transition:background .18s;position:fixed;inset:0}.backdrop--visible{pointer-events:auto;background:#02061785}.frame{isolation:isolate;place-items:center;min-height:100dvh;padding:10px;display:grid;position:relative;overflow:hidden}.frame:before{z-index:-1;content:"";border:1px solid var(--frame-border);box-shadow:var(--frame-shadow);border-radius:34px;position:absolute;inset:4px}.frame--drag-active:before{box-shadow:var(--frame-shadow), inset 0 0 0 2px #93c5fd4d;border-color:#93c5fdb8}.drop-overlay{z-index:30;color:#f8fafc;text-align:center;text-shadow:0 2px 18px #00000059;pointer-events:none;-webkit-backdrop-filter:blur(16px)saturate(1.1);backdrop-filter:blur(16px)saturate(1.1);background:#0f172a6b;border:1px dashed #bfdbfebd;border-radius:26px;place-items:center;font-size:clamp(1rem,2.2vw,1.5rem);font-weight:600;display:grid;position:absolute;inset:18px}.app--light .drop-overlay{color:#0f172a;text-shadow:none;background:#ffffff85}.ambient{filter:blur(68px);opacity:.5;z-index:-2;border-radius:999px;width:38vw;height:38vw;position:absolute}.ambient--one{background:#2563eb;top:8%;left:12%}.ambient--two{background:#a855f7;bottom:8%;right:12%}.photo-stack{border-radius:28px;width:min(100%,100vw - 20px);height:min(940px,100dvh - 20px);position:relative;overflow:hidden;box-shadow:0 34px 110px #0000009e}.photo-stack--background-none,.photo-stack--background-solid{background:var(--photo-bg)}.media-background{backface-visibility:hidden;will-change:opacity, transform, filter;width:100%;height:100%;animation-duration:2.2s;animation-timing-function:cubic-bezier(.16,.84,.24,1);animation-fill-mode:both;position:absolute;inset:0;transform:translateZ(0)}.media-background--exit{z-index:0}.media-background--enter{z-index:1}.media-background--blur{object-fit:cover;object-position:center;filter:blur(10px)saturate(1.05)brightness(.82);opacity:.72;transform:scale(1.04)}.media-background--mosaic{filter:saturate(.95)brightness(.94);background-position:50%;background-repeat:repeat;background-size:180px}.media-background--solid{background:var(--photo-bg)}.photo-stack--background-blur:after{z-index:2;content:"";pointer-events:none;background:radial-gradient(circle,#0000 42%,#00000029);position:absolute;inset:0}.photo{object-position:center center;backface-visibility:hidden;background:var(--photo-bg);will-change:opacity, transform, filter;border-radius:28px;width:100%;height:100%;animation-duration:2.2s;animation-timing-function:cubic-bezier(.16,.84,.24,1);animation-fill-mode:both;position:absolute;inset:0;transform:translateZ(0)}.photo--exit{z-index:3}.photo--enter{z-index:4}.photo--contain{object-fit:contain}.photo--cover{object-fit:cover}.photo--stretch{object-fit:fill}.photo-stack--background-blur .photo,.photo-stack--background-mosaic .photo,.photo-stack--background-solid .photo{background:0 0}.photo--fade{animation-name:fadeIn}.photo--zoom{animation-name:zoomIn}.photo--slide{animation-name:slideIn}.photo--flip{animation-name:flipIn}.photo--blur{animation-name:blurIn}.photo--exit-fade{animation-name:fadeOut}.photo--exit-zoom{animation-name:zoomOut}.photo--exit-slide{animation-name:slideOut}.photo--exit-flip{animation-name:flipOut}.photo--exit-blur{animation-name:blurOut}.photo-shadow{filter:blur(40px);z-index:-1;background:#00000073;border-radius:50%;height:80px;position:absolute;inset:auto 12% 5%}.media-controls{z-index:6;pointer-events:none;opacity:0;grid-template-columns:repeat(4,minmax(54px,78px));gap:12px;width:min(360px,100% - 32px);transition:opacity .18s,transform .18s;display:grid;position:absolute;bottom:34px;left:50%;transform:translate(-50%,12px)}.media-controls--visible{pointer-events:auto;opacity:1;transform:translate(-50%)}.media-control-button{border:1px solid var(--panel-border);min-height:50px;color:var(--text);-webkit-backdrop-filter:blur(14px)saturate(1.15);backdrop-filter:blur(14px)saturate(1.15);background:#0f172a6b;border-radius:14px;place-items:center;transition:transform .16s,background .16s;display:grid;box-shadow:0 18px 40px #0f172a42}.app--light .media-control-button{background:#ffffff6b;box-shadow:0 18px 40px #64748b33}.media-control-button:hover{background:#1e293b8f;transform:translateY(-1px)}.app--light .media-control-button:hover{background:#ffffff9e}.media-control-button svg{fill:currentColor;width:22px;height:22px}.clock-card{z-index:5;color:#fff;text-shadow:0 2px 18px #00000057;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-backdrop-filter:blur(10px)saturate(1.08);backdrop-filter:blur(10px)saturate(1.08);cursor:grab;background:#0f172a38;border:1px solid #ffffff1f;border-radius:18px;gap:5px;min-width:min(300px,100vw - 56px);padding:14px 18px 13px;display:grid;position:absolute;bottom:42px;left:28px;box-shadow:0 18px 48px #0000002e}.clock-card:active{cursor:grabbing}.clock-card--placed{bottom:auto;right:auto}.clock-card strong{letter-spacing:-.06em;font-size:clamp(1.65rem,3.6vw,3rem);font-weight:500;line-height:.9}.clock-card span{color:#ffffffc2;text-transform:capitalize;font-size:clamp(.82rem,1.4vw,1.05rem)}.sticky-note{z-index:5;color:#3f2d0a;-webkit-backdrop-filter:blur(4px)saturate(1.08);backdrop-filter:blur(4px)saturate(1.08);background:linear-gradient(155deg,#fff59ddb,#fde047c2);border:1px solid #784a0029;border-radius:4px 14px 14px;width:min(250px,100vw - 56px);min-height:160px;display:grid;position:absolute;top:28px;right:28px;overflow:hidden;transform:rotate(-1.4deg);box-shadow:0 20px 44px #0000003d,inset 0 -18px 40px #92400e0f}.sticky-note--placed{bottom:auto;right:auto}.sticky-note-handle{cursor:grab;touch-action:none;background:linear-gradient(90deg,#facc159e,#fef08a4d);border-radius:0;min-height:28px}.sticky-note-handle:active{cursor:grabbing}.sticky-note textarea{resize:none;width:100%;min-height:132px;color:inherit;letter-spacing:.01em;background:0 0;border:0;outline:0;padding:10px 13px 14px;font:500 1rem/1.35 Segoe Print,Comic Sans MS,Comic Sans,Bradley Hand ITC,Marker Felt,cursive}.sticky-note textarea::placeholder{color:#3f2d0a8c}.loading-card{z-index:6;color:#fff;text-align:center;-webkit-backdrop-filter:blur(16px)saturate(1.18);backdrop-filter:blur(16px)saturate(1.18);background:#0f172a7a;border:1px solid #ffffff2e;border-radius:18px;justify-items:center;gap:8px;width:min(320px,100vw - 56px);padding:16px 18px;display:grid;position:absolute;top:28px;left:50%;transform:translate(-50%);box-shadow:0 18px 48px #00000047}.loading-card strong{font-size:.95rem;font-weight:500}.loading-card span:last-child{color:#ffffffc7;font-size:.78rem;line-height:1.35}.loader{border:3px solid #ffffff47;border-top-color:#fff;border-radius:999px;width:24px;height:24px;animation:.85s linear infinite spin}.empty-loader{margin:0 0 14px;display:block}.progress{z-index:4;background:#ffffff1f;border-radius:999px;height:4px;position:absolute;bottom:18px;left:22px;right:22px;overflow:hidden}.progress:before{content:"";transform-origin:0;width:100%;height:100%;animation:linear both progressBar;animation-duration:inherit;animation-play-state:inherit;background:linear-gradient(90deg,#60a5fa,#f472b6,#facc15);display:block}.empty-state{background:var(--empty-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid #ffffff1f;border-radius:34px;grid-template-columns:minmax(0,1fr) minmax(330px,.7fr);align-items:center;gap:clamp(14px,2.6vw,34px);width:min(880px,100%);padding:44px;display:grid;box-shadow:0 24px 90px #0000006b}.hero-copy{min-width:0}.hero-logo-wrap{place-items:center;display:grid}.hero-logo{object-fit:contain;width:clamp(300px,34vw,430px);height:clamp(300px,34vw,430px);margin:0;display:block}.hero-brand{color:var(--muted);letter-spacing:.08em;opacity:.42;text-align:center;text-transform:uppercase;margin:16px 0 0;font-size:.6rem;display:block}.empty-state p,.eyebrow{color:var(--accent);letter-spacing:.14em;text-transform:uppercase;margin:0 0 12px;font-size:.78rem;font-weight:600}.empty-state h1{letter-spacing:-.06em;margin:0 0 16px;font-size:clamp(2.25rem,5.8vw,4.6rem);line-height:.96}.hero-description{font-size:clamp(1rem,1.8vw,1.22rem);line-height:1.45;display:block}.empty-state span,.status,.meta{color:var(--muted)}.privacy-note{color:var(--muted);opacity:.72;margin-top:18px;font-size:.6rem;line-height:1.35;display:block}.drop-hint{color:var(--muted);background:#93c5fd14;border:1px dashed #93c5fd5c;border-radius:14px;flex-wrap:nowrap;align-items:center;gap:6px 14px;margin-top:12px;padding:10px 12px;font-size:clamp(.95rem,1.6vw,1.25rem);line-height:1.35;display:inline-flex}.drop-hint>span{min-width:0}.inline-menu-button{width:34px;height:30px;color:var(--text);background:var(--control-bg);vertical-align:middle;border-radius:10px;flex:none;place-content:center;gap:3px;margin-right:4px;display:inline-grid}.inline-menu-button span{background:currentColor;border-radius:999px;width:15px;height:2px;display:block}@media (width>=921px){.empty-state{width:min(880px,100vw - 80px);max-height:calc(100dvh - 48px);padding:32px}.hero-logo{width:clamp(300px,38dvh,420px);height:clamp(300px,38dvh,420px)}.empty-state h1{font-size:clamp(2.1rem,4.8vw,3.9rem)}}.panel{z-index:15;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;border-left:1px solid var(--panel-border);background:var(--panel-bg);-webkit-backdrop-filter:blur(28px);backdrop-filter:blur(28px);flex-direction:column;gap:10px;width:min(330px,100vw - 24px);height:100dvh;min-height:0;max-height:100dvh;padding:24px 20px;transition:transform .22s cubic-bezier(.2,.72,.24,1);display:flex;position:fixed;top:0;right:0;overflow:hidden scroll;transform:translate(105%);box-shadow:-22px 0 80px #0000004d}.panel::-webkit-scrollbar{width:8px}.panel::-webkit-scrollbar-thumb{border:2px solid var(--panel-bg);background:#94a3b873;border-radius:999px}.panel--open{transform:translate(0)}.panel h2{letter-spacing:-.05em;margin:0;font-size:1.55rem}.panel-eyebrow-row{justify-content:flex-start;align-items:center;gap:10px;margin-bottom:8px;display:flex}.panel-eyebrow-row .eyebrow{margin-bottom:0}.panel-title-row{align-items:center;gap:9px;display:flex}.panel-logo{object-fit:contain;flex:none;width:32px;height:32px}.status{margin:8px 0 0;font-size:.88rem;line-height:1.45}.hint{color:var(--muted);margin:-4px 0 0;font-size:.76rem;line-height:1.35}.primary,.ghost,.control-row button,.fullscreen-button,.action-button{min-height:38px;color:var(--text);border-radius:12px;font-size:.86rem;font-weight:400;transition:transform .16s,background .16s}.primary:hover,.ghost:hover,.control-row button:hover:not(:disabled),.fullscreen-button:hover,.action-button:hover{transform:translateY(-1px)}.primary{color:#f8fafc;background:linear-gradient(135deg,#2563eb,#9333ea);font-weight:500;box-shadow:0 16px 34px #2563eb59}.source-row{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;display:grid}.source-button{justify-content:center;align-items:center;gap:8px;display:inline-flex}.source-button svg{fill:currentColor;flex:none;width:18px;height:18px}.fullscreen-button{color:#f8fafc;background:linear-gradient(135deg,#7c3aed,#db2777);box-shadow:0 14px 30px #7c3aed3d}.language-button{min-width:44px;min-height:32px;color:var(--text);background:var(--control-bg);border-radius:999px;justify-content:center;align-items:center;gap:0;padding:0 12px;font-size:.8rem;font-weight:700;display:inline-flex}.language-button span{font-size:1.05rem}.app--light .ghost,.app--light .control-row button,.app--light .field select,.app--light .language-button{border:1px solid #64748b29}.ghost,.control-row button{background:var(--control-bg)}.action-row{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.flag-row{grid-template-columns:repeat(2,1fr);gap:8px;display:grid}.flag-button{border:1px solid var(--panel-border);min-height:38px;color:var(--muted);background:var(--control-bg);border-radius:12px;justify-content:center;align-items:center;gap:8px;font-size:.86rem;font-weight:500;transition:transform .16s,background .16s,color .16s;display:inline-flex}.flag-button:hover{transform:translateY(-1px)}.flag-button--active{color:#f8fafc;background:linear-gradient(135deg,#2563ebc7,#9333eac7);box-shadow:0 14px 30px #2563eb38}.flag-button svg{fill:currentColor;flex:none;width:18px;height:18px}.action-button{background:var(--control-bg)}.action-button--fullscreen{color:#f8fafc;background:linear-gradient(135deg,#7c3aed,#db2777);box-shadow:0 14px 30px #7c3aed3d}.action-button--active{color:#f8fafc;background:linear-gradient(135deg,#2563eb,#9333ea);box-shadow:0 14px 30px #2563eb42}.control-row{grid-template-columns:repeat(5,1fr);gap:8px;display:grid}.icon-button{place-items:center;display:grid}.icon-button svg{fill:currentColor;width:20px;height:20px}.field{color:var(--text);gap:4px;font-size:.88rem;font-weight:400;display:grid}.field span{color:var(--accent);font-size:.82rem;line-height:1.1}.field input[type=range]{accent-color:#60a5fa;margin:0}.field select{width:100%;min-height:38px;color:var(--text);background:var(--select-bg);border-radius:12px;padding:0 12px;font-size:.88rem;font-weight:400}.background-control{grid-template-columns:minmax(0,1fr) 42px;align-items:center;gap:8px;display:grid}.background-control select{min-width:0}.color-input{border:1px solid var(--panel-border);background:var(--select-bg);cursor:pointer;border-radius:12px;width:42px;height:38px;padding:3px}.color-input:disabled{cursor:not-allowed;opacity:.4}.color-input::-webkit-color-swatch-wrapper{padding:0}.color-input::-webkit-color-swatch{border:0;border-radius:8px}.meta{border-top:1px solid var(--panel-border);overflow-wrap:anywhere;gap:5px;margin-top:auto;padding-top:12px;font-size:.8rem;display:grid}.brand-mark{color:var(--muted);letter-spacing:.06em;opacity:.48;text-align:center;text-transform:uppercase;font-size:.55rem}.hidden-input{display:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes zoomIn{0%{opacity:0;transform:scale(1.08)}to{opacity:1;transform:scale(1)}}@keyframes zoomOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.94)}}@keyframes slideIn{0%{opacity:0;transform:translate(46px)}to{opacity:1;transform:translate(0)}}@keyframes slideOut{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-46px)}}@keyframes flipIn{0%{opacity:0;transform:perspective(900px)rotateY(-18deg)scale(.96)}to{opacity:1;transform:perspective(900px)rotateY(0)scale(1)}}@keyframes flipOut{0%{opacity:1;transform:perspective(900px)rotateY(0)scale(1)}to{opacity:0;transform:perspective(900px)rotateY(18deg)scale(.96)}}@keyframes blurIn{0%{opacity:0;filter:blur(18px);transform:scale(1.03)}to{opacity:1;filter:blur();transform:scale(1)}}@keyframes blurOut{0%{opacity:1;filter:blur();transform:scale(1)}to{opacity:0;filter:blur(18px);transform:scale(1.03)}}@keyframes progressBar{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=920px){.empty-state{grid-template-columns:1fr}.hero-logo-wrap{order:-1}.hero-logo{width:clamp(170px,46vw,260px);height:clamp(170px,46vw,260px)}.drop-hint{flex-wrap:initial;grid-template-columns:34px minmax(0,1fr);align-items:center;column-gap:8px;display:grid}.inline-menu-button{margin-right:0}body{overflow:auto}.frame{min-height:100dvh;padding:8px}.frame:before{border-radius:24px;inset:4px}.photo-stack{border-radius:20px;width:min(100%,100vw - 16px);height:calc(100dvh - 16px)}.photo{border-radius:20px}.panel{width:min(320px,100vw - 18px)}.progress{bottom:14px;left:16px;right:16px}.clock-card{border-radius:16px;min-width:0;max-width:min(260px,100vw - 32px);padding:11px 14px 10px;bottom:34px;left:16px;right:auto}.clock-card--placed{bottom:auto;right:auto}.sticky-note{width:min(190px,100vw - 36px);min-height:138px;top:18px;right:18px}.sticky-note textarea{min-height:110px;font-size:.92rem}.clock-card strong{font-size:clamp(1.45rem,8vw,2.25rem)}.clock-card span{font-size:.78rem}.media-controls{grid-template-columns:repeat(4,minmax(48px,1fr));gap:10px;width:min(340px,100% - 28px);bottom:18px}.media-control-button{border-radius:13px;min-height:48px}.loading-card{width:min(280px,100vw - 32px);padding:13px 15px;top:18px}}@media (height<=620px){.panel{gap:7px;padding:18px 16px}.panel h2{font-size:1.32rem}.status,.field,.field select{font-size:.8rem}.primary,.ghost,.control-row button,.fullscreen-button,.action-button,.language-button,.field select{border-radius:10px;min-height:34px}.eyebrow{margin-bottom:7px;font-size:.68rem}}
