@import url('https://fonts.googleapis.com/css2?family=Allura&family=IBM+Plex+Sans+Arabic:wght@300;400;500&family=Manrope:wght@400;500;600&family=Newsreader:opsz,wght@6..72,300;6..72,400&display=swap');
:root{--white:#f8f5ed;--muted:rgba(248,245,237,.68);--hair:rgba(255,255,255,.22);--glass:rgba(14,16,13,.42);--gold:#ddc69a;--ease:cubic-bezier(.22,.8,.22,1)}
*{box-sizing:border-box}html,body{height:100%;margin:0}body{overflow:hidden;background:#0b0c0a;color:var(--white);font-family:Manrope,system-ui,sans-serif;-webkit-font-smoothing:antialiased}button,select{font:inherit}.landscape-shell{position:fixed;inset:0;overflow:hidden}
.backdrop{position:fixed;z-index:1;inset:0;background:#090a08;overflow:hidden}.backdrop__image,.backdrop__veil,.backdrop__grain{position:absolute;inset:0}.backdrop__image{background-position:center;background-size:cover;background-repeat:no-repeat;opacity:0;transform:scale(1.008);transition:opacity .85s var(--ease),transform 7s ease}.backdrop__image.is-visible{opacity:1;transform:scale(1)}.backdrop__veil{pointer-events:none;background:linear-gradient(180deg,rgba(3,4,3,.37),transparent 25%,transparent 62%,rgba(3,4,3,.45))}.backdrop__grain{opacity:.09;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitchTiles'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E")}
.topbar{position:fixed;z-index:10;inset:0 0 auto;display:flex;justify-content:space-between;align-items:center;padding:max(22px,2.8vw) max(22px,3.4vw);pointer-events:none}.brand,.icon-button{pointer-events:auto}.brand{display:flex;align-items:center;gap:13px;color:inherit;text-decoration:none;text-shadow:0 2px 16px #000}.brand__mark{display:grid;place-items:center;width:36px;height:36px;border:1px solid rgba(255,255,255,.58);border-radius:50%;font:20px Newsreader,serif}.brand b{display:block;font-family:Allura,'Brush Script MT',cursive;font-size:32px;line-height:.72;letter-spacing:.01em;font-weight:400;text-transform:none}.brand small{display:block;margin-top:4px;color:var(--muted);font-size:8px;letter-spacing:.12em;text-transform:uppercase}.icon-button{width:44px;height:44px;border:1px solid var(--hair);border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(10,10,9,.28);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);cursor:pointer;transition:.25s}.icon-button:hover,.icon-button:focus-visible{background:rgba(255,255,255,.16);transform:rotate(18deg);outline:none}.icon-button svg{width:19px;fill:currentColor}
.settings{position:fixed;z-index:20;top:82px;right:24px;width:min(330px,calc(100vw - 32px));padding:22px;border:1px solid rgba(255,255,255,.24);border-radius:20px;background:rgba(15,17,15,.78);box-shadow:0 24px 80px rgba(0,0,0,.4);backdrop-filter:blur(22px) saturate(125%);-webkit-backdrop-filter:blur(22px) saturate(125%);animation:panelIn .25s var(--ease)}@keyframes panelIn{from{opacity:0;transform:translateY(-7px)}}.settings__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;font:400 21px Newsreader,serif}.settings__head button{border:0;background:none;color:#fff;font-size:28px;line-height:1;cursor:pointer}.settings label,.field-label{display:block;color:var(--muted);font-size:10px;letter-spacing:.18em;text-transform:uppercase;margin:15px 0 8px}.select-wrap{position:relative}.select-wrap:after{content:'⌄';position:absolute;right:14px;top:8px;pointer-events:none;color:var(--muted)}select{width:100%;appearance:none;border:1px solid var(--hair);border-radius:12px;padding:11px 38px 11px 13px;color:#fff;background:rgba(255,255,255,.08);outline:none}select option{color:#111}.segmented{display:grid;grid-template-columns:1fr 1fr;padding:3px;border:1px solid var(--hair);border-radius:13px;background:rgba(0,0,0,.12)}.segmented button{padding:9px;border:0;border-radius:9px;background:transparent;color:var(--muted);cursor:pointer}.segmented button.is-active{color:#161611;background:var(--white)}.settings__note{margin:17px 0 0;color:rgba(255,255,255,.48);font-size:10px;line-height:1.6}
.experience{position:fixed;z-index:4;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:88px 22px 62px;pointer-events:none}.quote-card{pointer-events:auto;width:fit-content;min-width:min(340px,calc(100vw - 44px));max-width:min(850px,calc(100vw - 44px));max-height:52svh;overflow-y:auto;scrollbar-width:none;padding:24px clamp(28px,4.3vw,54px) 25px;border:1px solid rgba(255,255,255,.28);border-radius:25px;background:linear-gradient(135deg,rgba(22,24,21,.56),rgba(8,10,8,.34));box-shadow:0 24px 70px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.12);backdrop-filter:blur(16px) saturate(120%);-webkit-backdrop-filter:blur(16px) saturate(120%);text-shadow:0 2px 18px rgba(0,0,0,.48);transition:opacity .22s,transform .3s var(--ease)}.quote-card::-webkit-scrollbar{display:none}.quote-card.is-leaving{opacity:0;transform:translateY(7px)}.quote-card__meta{display:flex;justify-content:center;align-items:center;gap:10px;color:var(--gold);font-size:8px;letter-spacing:.19em;text-transform:uppercase}.quote-card__meta i{width:18px;height:1px;background:currentColor;opacity:.65}
blockquote{width:fit-content;margin:18px auto 20px;text-align:center;font:300 clamp(25px,3vw,40px)/1.2 Newsreader,serif;letter-spacing:-.02em;text-wrap:balance;max-width:730px}.quote-card.is-poetry blockquote,.quote-card blockquote[dir=rtl]{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:clamp(23px,2.5vw,34px);font-weight:300;line-height:1.58;letter-spacing:0;direction:rtl;text-align:center;white-space:pre-line;unicode-bidi:plaintext;text-wrap:pretty;word-break:normal;overflow-wrap:normal}.attribution{display:flex;align-items:center;justify-content:center;gap:13px}.attribution__line{width:30px;height:1px;background:rgba(255,255,255,.5)}cite{display:block;font-style:normal;font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase}.attribution small{display:block;margin-top:3px;color:var(--muted);font:italic 12px Newsreader,serif}.quote-card[dir=rtl] cite{font-family:'IBM Plex Sans Arabic';font-size:13px;letter-spacing:0;text-transform:none}.quote-card[dir=rtl] .attribution small{font-family:'IBM Plex Sans Arabic';font-style:normal}
.visibility-button,.next-button{pointer-events:auto;display:flex;align-items:center;gap:9px;border:1px solid rgba(255,255,255,.3);border-radius:999px;color:#fff;background:rgba(10,10,9,.4);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);cursor:pointer;font-size:9px;letter-spacing:.13em;text-transform:uppercase;transition:.25s}.visibility-button{order:-1;align-self:center;margin-bottom:8px;padding:9px 14px}.visibility-button svg{width:15px;height:15px;fill:currentColor}.next-button{margin-top:10px;padding:10px 16px 10px 18px}.visibility-button:hover,.visibility-button:focus-visible,.next-button:hover,.next-button:focus-visible{background:var(--white);color:#171713;outline:none}.next-button svg{width:16px;fill:none;stroke:currentColor;stroke-width:1.5}.next-button.is-loading svg{animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.quote-hidden .quote-card,.quote-hidden .next-button{display:none}.quote-hidden .visibility-button{margin:0;padding:11px 17px;background:rgba(10,10,9,.55)}
.art-credit{position:fixed;z-index:4;left:max(18px,3vw);bottom:18px;display:flex;align-items:center;gap:7px;max-width:min(76vw,900px);padding:7px 10px;border-radius:8px;background:rgba(6,7,6,.46);backdrop-filter:blur(7px);text-shadow:0 2px 12px #000;font-size:9px;color:var(--muted)}.art-credit__label{color:var(--gold);font-size:7px;letter-spacing:.18em;margin-right:4px}.art-credit #paintingTitle{color:#fff;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dot{opacity:.5}.status{position:fixed;z-index:5;right:18px;bottom:12px;color:var(--muted);font-size:10px}.settings-open .experience,.settings-open .art-credit{opacity:.25;transition:opacity .2s}
@media(max-width:650px){.topbar{padding:16px 18px}.brand small{display:none}.icon-button{width:40px;height:40px}.settings{top:66px;right:12px;background:rgba(15,17,15,.9)}.experience{inset:0;padding:76px 10px 54px}.quote-card{width:calc(100vw - 20px);max-height:50svh;border-radius:21px;padding:18px 17px 19px}.quote-card__meta{font-size:7px}blockquote{font-size:clamp(23px,6.8vw,31px);margin:13px auto 15px}.quote-card.is-poetry blockquote,.quote-card blockquote[dir=rtl]{font-size:clamp(21px,5.8vw,27px);line-height:1.52;margin:10px auto 13px}.attribution{gap:10px}.attribution__line{width:24px}.visibility-button{margin-bottom:6px}.next-button{margin-top:7px}.art-credit{left:10px;right:70px;top:auto;bottom:8px;max-width:none;white-space:nowrap;overflow:hidden}.art-credit__label,.art-credit .dot,#paintingYear{display:none}.art-credit #paintingTitle{max-width:52vw}.status{display:none}}
@media(max-height:700px) and (max-width:650px){.quote-card{max-height:55svh;padding-top:14px;padding-bottom:14px}.quote-card.is-poetry blockquote,.quote-card blockquote[dir=rtl]{font-size:20px;line-height:1.42;margin:8px auto 10px}.attribution small{display:none}}
@media (orientation:landscape) and (max-height:520px){.topbar{padding:9px 13px}.brand small{display:none}.brand__mark{width:31px;height:31px;font-size:17px}.icon-button{width:34px;height:34px}.settings{top:49px;right:10px;max-height:calc(100dvh - 58px);overflow:auto;padding:15px}.experience{inset:0;justify-content:center;padding:48px 55px 30px}.quote-card{width:fit-content;min-width:min(280px,calc(100vw - 110px));max-width:min(720px,calc(100vw - 110px));max-height:56dvh;padding:9px 22px 10px;border-radius:16px}.quote-card__meta{display:none}blockquote{font-size:22px;line-height:1.12;margin:4px auto 7px}.quote-card.is-poetry blockquote,.quote-card blockquote[dir=rtl]{font-size:18px;line-height:1.3;margin:2px auto 5px}.attribution{gap:8px}.attribution__line{width:20px}.quote-card[dir=rtl] cite{font-size:11px}.attribution small{display:none}.visibility-button{padding:6px 10px;margin-bottom:4px;font-size:7px}.visibility-button svg{width:12px;height:12px}.next-button{padding:6px 11px;margin-top:4px;font-size:7px}.next-button svg{width:12px}.quote-hidden .visibility-button{padding:8px 13px}.art-credit{left:12px;right:auto;top:auto;bottom:5px;max-width:55vw;padding:5px 8px}.status{display:none}}
@media (orientation:portrait) and (max-width:760px){.landscape-shell{inset:auto;left:50%;top:50%;width:100dvh;height:100vw;transform:translate(-50%,-50%) rotate(90deg);transform-origin:center}.backdrop{inset:0;transform:none}.topbar{inset:0 0 auto;padding:9px 13px}.brand{gap:9px}.brand__mark{width:31px;height:31px;font-size:17px}.brand b{font-size:29px}.brand small{display:none}.icon-button{width:34px;height:34px}.icon-button svg{width:16px}.settings{top:49px;right:10px;width:min(330px,calc(100dvh - 32px));max-height:calc(100vw - 58px);overflow:auto;padding:15px}.experience{inset:0;transform:none;justify-content:center;padding:48px 55px 30px}.quote-card{width:fit-content;min-width:min(280px,calc(100dvh - 110px));max-width:min(720px,calc(100dvh - 110px));max-height:56%;padding:9px 22px 10px;border-radius:16px}.quote-card__meta{display:none}blockquote{font-size:22px;line-height:1.12;margin:4px auto 7px}.quote-card.is-poetry blockquote,.quote-card blockquote[dir=rtl]{font-size:18px;line-height:1.3;margin:2px auto 5px}.attribution{gap:8px}.attribution__line{width:20px}.quote-card[dir=rtl] cite{font-size:11px}.attribution small{display:none}.visibility-button{padding:6px 10px;margin-bottom:4px;font-size:7px}.visibility-button svg{width:12px;height:12px}.next-button{padding:6px 11px;margin-top:4px;font-size:7px}.next-button svg{width:12px}.quote-hidden .visibility-button{padding:8px 13px}.art-credit{left:12px;right:auto;top:auto;bottom:5px;max-width:55%;padding:5px 8px}.status{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01s!important;transition-duration:.01s!important}}