/* Critical: HTML hidden must always win over component display rules */
[hidden]{
  display:none !important;
}

:root{
  --xp-blue:#245edb;--xp-blue2:#0b46b5;--xp-light:#6fa8ff;--xp-bg:#ece9d8;--xp-line:#7f9db9;
  --text:#1d1d1d;--cream:#fffef7;--green:#3ca33c;--shadow:rgba(0,0,0,.28)
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Tahoma,Verdana,sans-serif;color:var(--text)}
body{min-height:100vh;background-image:image-set(url('background.webp') type('image/webp'),url('background.jpg') type('image/jpeg'));background-size:cover;background-position:center;background-attachment:fixed;overflow-x:hidden}
button,input,textarea,select{font:inherit}button{touch-action:manipulation}.desktop-shell{min-height:calc(100vh - 44px);display:grid;place-items:center;padding:28px 110px 78px}.xp-window{width:min(980px,100%);background:var(--xp-bg);border:2px solid #0843a7;border-radius:9px 9px 2px 2px;box-shadow:0 18px 45px var(--shadow),inset 0 0 0 1px #7ea6ef;overflow:hidden;animation:windowIn .35s ease-out}.title-bar{min-height:38px;background:linear-gradient(#6fa8ff 0,#2f72ec 16%,var(--xp-blue) 52%,var(--xp-blue2) 100%);color:white;display:flex;align-items:center;justify-content:space-between;padding:5px 6px 5px 9px;font-weight:700;text-shadow:0 1px #123c8d;position:relative}.title-bar:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 0 35%,rgba(255,255,255,.15) 50%,transparent 66%);animation:shine 9s linear infinite}.title-left{display:flex;align-items:center;gap:7px;z-index:1}.title-left img{object-fit:contain}.window-buttons{display:flex;gap:4px;z-index:1}.window-buttons span,.sheet-close{width:24px;height:24px;display:grid;place-items:center;border:1px solid white;border-radius:3px;background:linear-gradient(#fff,#cddaf1);color:#111;text-shadow:none;box-shadow:inset 0 0 0 1px #7192c7}.window-buttons .close,.sheet-close{background:linear-gradient(#ff9b87,#dc4c32);color:#fff}.menu-bar{height:29px;display:flex;align-items:center;gap:20px;padding:0 12px;border-bottom:1px solid #bbb5a6;background:#f7f3e8;font-size:12px}.app-body{display:grid;grid-template-columns:280px 1fr;gap:18px;padding:22px}.clippy-area{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0}.clippy-wrap{position:relative;cursor:pointer;outline:none}.clippy-img{display:block;width:min(230px,100%);height:auto;filter:drop-shadow(0 13px 10px rgba(0,0,0,.18));animation:clippyFloat 3.4s ease-in-out infinite}.clippy-wrap.react .clippy-img{animation:clippyReact .55s ease}.clippy-shadow{width:105px;height:15px;background:radial-gradient(ellipse,rgba(0,0,0,.32),transparent 70%);margin:3px auto 0;animation:shadowPulse 3.4s ease-in-out infinite}.clippy-bubble{margin-top:9px;width:100%;background:#fff7bd;border:1px solid #555;padding:8px 10px;font-size:12px;line-height:1.7;box-shadow:2px 2px 0 rgba(0,0,0,.25);position:relative}.message-panel{background:#fff;border:2px solid var(--xp-line);box-shadow:2px 2px 0 #b9b9b9;padding:17px;min-height:310px;display:flex;flex-direction:column}.message-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:11px;border-bottom:1px solid #ddd}.message-label{font:700 12px "Courier New",monospace;color:#1748a1}.online-pill{font-size:10px;color:#555;display:flex;align-items:center;gap:5px}.online-pill i{width:8px;height:8px;border-radius:50%;background:#37bd3d;box-shadow:0 0 7px rgba(55,189,61,.65)}.message-text{margin:22px 2px 12px;min-height:112px;font-size:21px;line-height:2;font-weight:500;white-space:pre-wrap;word-break:break-word}.message-text.typing:after{content:"";display:inline-block;width:7px;height:20px;background:#222;margin-right:5px;vertical-align:middle;animation:blink .8s steps(1) infinite}.message-meta{display:flex;justify-content:space-between;gap:10px;align-items:center;border-top:1px dashed #aaa;padding-top:11px;font-size:13px;color:#4f4f4f}.message-meta time{font-size:11px;color:#777}.message-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:15px}.xp-button{min-height:38px;border:1px solid #315b91;border-right-color:#9eb6d4;border-bottom-color:#9eb6d4;border-radius:3px;background:linear-gradient(#fff,#dfe8f4);box-shadow:inset 0 1px #fff;cursor:pointer;padding:7px 10px;color:#111}.xp-button:hover{background:linear-gradient(#fff,#cfe1fb)}.xp-button:active{transform:translateY(1px)}.xp-button.primary{border-color:#154a8d;background:linear-gradient(#fff,#c8dcfb);font-weight:700}.xp-button.favorited{color:#b27a00;background:linear-gradient(#fffced,#ffe8a1)}.secondary-actions{display:flex;justify-content:flex-end;gap:14px;margin-top:10px}.link-button,.status-link{border:0;background:transparent;color:#4a4a4a;text-decoration:underline;font-size:11px;cursor:pointer;padding:2px}.write-cta-wrap{padding:0 22px 20px}.write-cta{width:100%;min-height:48px;border:2px solid #0b4495;background:linear-gradient(#fff,#cfe2ff);font-weight:700;font-size:15px;box-shadow:inset 0 0 0 1px white;cursor:pointer}.window-statusbar{min-height:29px;background:#f5f0e4;border-top:1px solid #bfb9aa;display:flex;align-items:center;gap:12px;padding:5px 10px;font-size:10px;color:#666}.window-statusbar a{color:#555}.status-grow{flex:1}.xp-taskbar{position:fixed;bottom:0;left:0;right:0;height:44px;background:linear-gradient(#2f76e2,#1353bd);border-top:1px solid #7bb7ff;display:flex;align-items:center;z-index:30}.start-button{height:100%;min-width:108px;background:linear-gradient(#55c85c,#2e9135);border-radius:0 18px 18px 0;color:white;font-size:20px;font-style:italic;font-weight:700;display:flex;align-items:center;justify-content:center;gap:7px;text-shadow:0 1px #1f5c25;box-shadow:inset 0 1px rgba(255,255,255,.4)}.winmark{font-size:23px}.task-item{margin-left:9px;height:32px;min-width:170px;color:#fff;background:linear-gradient(rgba(255,255,255,.22),rgba(255,255,255,.08));border:1px solid rgba(255,255,255,.24);display:flex;align-items:center;gap:7px;padding:0 11px;font-size:12px}.tray{margin-left:auto;height:100%;min-width:120px;display:flex;align-items:center;justify-content:center;gap:12px;color:white;font-size:11px;background:rgba(0,180,230,.17);border-left:1px solid rgba(255,255,255,.2)}.desktop-icons{position:fixed;top:14px;left:14px;z-index:1;display:flex;flex-direction:column;gap:14px}.desktop-shortcut{width:78px;text-align:center;color:white;text-shadow:1px 1px 2px #000;font-size:28px;line-height:1}.desktop-shortcut span{display:block;font-size:11px;margin-top:5px}.sheet-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.34);z-index:49}.compose-sheet,.favorites-sheet{position:fixed;z-index:50;left:50%;top:50%;transform:translate(-50%,-50%);width:min(520px,calc(100vw - 28px));background:var(--xp-bg);border:2px solid #0843a7;border-radius:8px 8px 2px 2px;box-shadow:0 25px 70px rgba(0,0,0,.45);overflow:hidden}.title-bar.compact{min-height:34px;font-size:12px}.sheet-close{border:1px solid white;cursor:pointer;font-weight:700}.compose-form{padding:16px;display:flex;flex-direction:column;gap:11px}.compose-form label{font-size:12px;display:flex;flex-direction:column;gap:5px}.checkbox-row{flex-direction:row!important;align-items:center}.xp-input{width:100%;border:2px solid;border-color:#7f9db9 #fff #fff #7f9db9;background:white;padding:9px;font-size:14px;outline:none}.compose-form textarea{min-height:130px;resize:vertical;line-height:1.8}.counter{text-align:left;color:#777;font-size:10px;margin-top:-6px}.compose-actions{display:flex;justify-content:flex-end;gap:8px}.form-note{margin:0;color:#777;font-size:10px}.honeypot{position:absolute!important;left:-9999px!important;opacity:0!important}.favorites-list{padding:12px;max-height:62vh;overflow:auto}.favorite-card{background:white;border:1px solid #c9c4b9;padding:10px;margin-bottom:8px;cursor:pointer}.favorite-card p{margin:0 0 6px;line-height:1.7;font-size:13px}.favorite-card small{color:#777}.empty-state{padding:28px;text-align:center;color:#777;font-size:12px}.balloon{position:fixed;right:14px;bottom:55px;width:min(290px,calc(100vw - 28px));z-index:70;background:#fff8c6;border:1px solid #545454;border-radius:7px;box-shadow:0 10px 28px rgba(0,0,0,.28);padding:10px 12px;font-size:12px;animation:balloonIn .25s ease}.balloon strong{display:block;color:#1748a1;margin-bottom:4px}.balloon:after{content:"";position:absolute;right:24px;bottom:-10px;border-left:9px solid transparent;border-right:9px solid transparent;border-top:10px solid #545454}.report-dialog{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.35);display:grid;place-items:center;padding:15px}.report-box{width:min(390px,100%);background:var(--xp-bg);border:2px solid #0843a7}.report-body{padding:13px}.report-body p{font-size:12px}.report-body .compose-actions{margin-top:12px}

.brand-strip{
  min-height:34px;display:flex;align-items:center;gap:10px;padding:6px 14px;
  background:linear-gradient(90deg,#dfe9f8,#f7f3e8 58%,#e9edf5);
  border-bottom:1px solid #b7b1a3;font-size:10px;color:#526276
}
.brand-strip strong{font:700 11px "Courier New",monospace;color:#1748a1;direction:ltr}
.brand-strip span{padding:2px 7px;border:1px solid #91a7c8;background:#fff;font-size:9px;color:#333}
.brand-strip em{margin-inline-start:auto;font-style:normal;font:10px "Courier New",monospace;color:#6c6c6c;direction:ltr}
.memory-badge{
  align-self:flex-start;margin-top:12px;padding:4px 8px;border:1px solid #b58b20;background:#fff4b5;
  color:#775600;font:700 10px "Courier New",monospace;box-shadow:1px 1px 0 #d0c18a;direction:ltr
}
.featured-link{color:#7a5700!important}
.write-cta{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
.write-cta strong{font-size:15px;direction:ltr}
.write-cta-sub{font-size:10px;font-weight:400;color:#4e627a}
.status-motto{font:9px "Courier New",monospace;color:#777;direction:ltr;white-space:nowrap}
.archive-sheet{
  position:fixed;z-index:50;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(620px,calc(100vw - 28px));background:var(--xp-bg);
  border:2px solid #0843a7;border-radius:8px 8px 2px 2px;
  box-shadow:0 25px 70px rgba(0,0,0,.45);overflow:hidden
}
.archive-intro{padding:13px 14px 4px;display:flex;flex-direction:column;gap:5px;font-size:11px;color:#666}
.archive-intro strong{font:700 12px "Courier New",monospace;color:#1748a1;direction:ltr}
.archive-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:14px}
.archive-folder{
  min-height:126px;border:1px solid #8a9cb5;background:linear-gradient(#fff,#e8edf4);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  cursor:pointer;box-shadow:inset 0 1px #fff;padding:12px
}
.archive-folder:hover{background:linear-gradient(#fff,#d9e8ff)}
.archive-folder:active{transform:translateY(1px)}
.archive-folder>span{font-size:36px;filter:drop-shadow(1px 2px 0 rgba(0,0,0,.15))}
.archive-folder strong{font:700 13px "Courier New",monospace;color:#1748a1;direction:ltr}
.archive-folder small{font-size:10px;color:#666}

@media(max-width:900px){body{background-attachment:scroll}.desktop-icons{display:none}.desktop-shell{padding:12px 10px 64px;align-items:start}.xp-window{width:100%;border-radius:7px 7px 2px 2px}.app-body{grid-template-columns:1fr;padding:14px}.clippy-area{padding-top:3px}.clippy-img{width:128px}.clippy-shadow{width:70px;height:10px}.clippy-bubble{max-width:420px;text-align:center}.message-panel{min-height:0;padding:14px}.message-text{min-height:95px;font-size:18px;line-height:1.95;margin-top:16px}.message-actions{grid-template-columns:repeat(2,1fr)}.write-cta-wrap{padding:0 14px 14px}.menu-bar{overflow:auto;white-space:nowrap}.xp-taskbar{height:42px}.start-button{min-width:88px;font-size:17px}.task-item{min-width:120px;max-width:155px}.tray{min-width:92px}.compose-sheet,.favorites-sheet,.archive-sheet{left:0;right:0;bottom:0;top:auto;transform:none;width:100%;max-height:88svh;border-radius:12px 12px 0 0}.compose-form{padding:14px max(14px,env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}.compose-form textarea{min-height:115px}.secondary-actions{justify-content:space-between}.window-statusbar{gap:9px}.window-statusbar #statusText{max-width:44vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
@media(max-width:520px){
.brand-strip{padding:5px 9px;gap:6px}.brand-strip strong{font-size:9px}.brand-strip span{font-size:8px}.brand-strip em{display:none}
.archive-grid{grid-template-columns:1fr 1fr;padding:10px;gap:8px}.archive-folder{min-height:112px;padding:8px}
.status-motto{display:none}
.desktop-shell{padding-left:7px;padding-right:7px}.title-bar{min-height:36px;font-size:13px}.window-buttons span{width:22px;height:22px}.menu-bar{font-size:11px;height:27px}.app-body{padding:11px}.clippy-img{width:105px}.clippy-bubble{font-size:11px}.message-head{align-items:flex-start}.message-label{font-size:10px}.online-pill{font-size:9px}.message-text{font-size:17px;line-height:1.9}.message-actions{gap:6px}.xp-button{min-height:44px;font-size:12px}.write-cta{min-height:50px}.task-item{display:none}.start-button{min-width:84px}.tray{margin-left:auto}.window-statusbar{font-size:9px}.compose-actions .xp-button{flex:1}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important}}
@keyframes windowIn{from{opacity:0;transform:scale(.98) translateY(8px)}to{opacity:1;transform:none}}@keyframes shine{0%{transform:translateX(-160%)}100%{transform:translateX(160%)}}@keyframes clippyFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-5px) rotate(1deg)}}@keyframes clippyReact{0%,100%{transform:scale(1)}40%{transform:scale(1.06) rotate(-3deg)}}@keyframes shadowPulse{0%,100%{transform:scaleX(1);opacity:.45}50%{transform:scaleX(.9);opacity:.26}}@keyframes blink{50%{opacity:0}}@keyframes balloonIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}


/* Day / night desktop wallpaper */
body.day-wallpaper{background-image:url('background.webp')}
body.night-wallpaper{background-image:url('background-night.jpg')}

/* More faithful Windows XP taskbar */
.xp-taskbar{
  direction:ltr;
  height:40px;
  background:
    linear-gradient(to bottom,#3169d5 0%,#4993e6 7%,#245edb 14%,#245edb 84%,#1941a5 100%);
  border-top:1px solid #6fa9f8;
  box-shadow:inset 0 1px rgba(255,255,255,.25);
}
.start-button{
  height:40px;
  min-width:102px;
  padding:0 14px 0 8px;
  border-radius:0 18px 18px 0;
  justify-content:flex-start;
  gap:6px;
  font-family:Tahoma,Arial,sans-serif;
  font-size:18px;
  font-style:italic;
  font-weight:700;
  background:
    linear-gradient(to bottom,#3c9f3c 0%,#64c85f 8%,#3ca23a 16%,#3b9b36 82%,#1c6d24 100%);
  border-right:1px solid #1b641e;
  box-shadow:inset 0 1px rgba(255,255,255,.55),inset 0 -1px rgba(0,0,0,.12);
}
.start-logo{width:25px;height:25px;object-fit:contain;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.task-item{
  direction:ltr;
  height:30px;
  margin-left:8px;
  border-radius:2px;
  background:linear-gradient(#3984df,#2864c7);
  border:1px solid rgba(10,52,148,.65);
  box-shadow:inset 0 1px rgba(255,255,255,.18);
}
.tray{
  direction:ltr;
  margin-left:auto;
  height:40px;
  min-width:118px;
  background:linear-gradient(#1fa5e8,#0d8dcc);
  border-left:1px solid #1361b4;
  box-shadow:inset 1px 0 rgba(255,255,255,.2);
}

/* Story preview so the Story button always gives visible feedback */
.story-preview-sheet{
  position:fixed;z-index:60;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(430px,calc(100vw - 24px));max-height:92svh;overflow:auto;
  background:var(--xp-bg);border:2px solid #0843a7;border-radius:8px 8px 2px 2px;
  box-shadow:0 25px 70px rgba(0,0,0,.55)
}
.story-preview-body{padding:12px}
.story-preview-frame{
  width:min(270px,72vw);aspect-ratio:9/16;margin:0 auto;
  display:grid;place-items:center;background:#111;border:2px inset #b7b7b7;
  overflow:hidden;position:relative
}
.story-preview-frame img{width:100%;height:100%;object-fit:contain;display:block}
.story-loading{color:#fff;font:12px Tahoma;text-align:center;padding:16px}
.story-preview-note{font-size:10px;color:#555;text-align:center;line-height:1.8;margin:10px 0}
.story-preview-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}

@media(max-width:900px){
  body.day-wallpaper,body.night-wallpaper{background-attachment:scroll}
  .xp-taskbar{height:40px}
  .start-button{height:40px;min-width:92px;font-size:17px}
  .tray{height:40px;min-width:96px}
}
@media(max-width:520px){
  .start-button{min-width:90px;padding-left:7px;padding-right:10px}
  .start-logo{width:23px;height:23px}
  .story-preview-sheet{left:0;right:0;bottom:0;top:auto;transform:none;width:100%;max-height:94svh;border-radius:12px 12px 0 0}
  .story-preview-frame{width:min(240px,68vw)}
}

.server-submit-notice{
  position:fixed;z-index:200;top:16px;left:50%;transform:translateX(-50%);
  max-width:min(560px,calc(100vw - 28px));padding:10px 14px;
  background:#e5f7d7;border:2px solid #3d8b2c;box-shadow:3px 4px 16px rgba(0,0,0,.28);
  color:#163d12;font:12px Tahoma;text-align:center
}
.server-submit-notice.error{background:#ffe0dc;border-color:#b94a3b;color:#711b12}