* {
   box-sizing:border-box;
}

:root {
   --topbar-height: 34px;
   --bottombar-height: 64px;
}

html, body {
   margin: 0;
   min-height: 100%;
   overflow: auto;
   scrollbar-width: none;
   -ms-overflow-style: none;
}

/* hiding the scrollbar */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
   width: 0;
   height: 0;
   display: none;
}

body {
   font-family: "Inter", sans-serif;
   color: #eef1e8;
   background: #060d09;
   min-height: 100vh;
   overflow-x: hidden;
   padding-top: var(--topbar-height);
   padding-bottom: var(--bottombar-height);
}

.bg {
   position: fixed;
   top: var(--topbar-height);
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 0;
   background-image: url("./images/lilypads.png");
   background-size: cover;
   background-position: center 60%;
   animation: drift-bg 30s ease-in-out infinite alternate;
}

@keyframes drift-bg {
   from { background-position: center 55%; }
   to { background-position: center 65%; }
}

.bg-shade {
   position: fixed;
   top: var(--topbar-height);
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 1;
   pointer-events: none;
   background: linear-gradient(180deg, rgba(4,10,7,0) 0%, rgba(4,10,7,0) 40%, rgba(3,8,6,1) 100%);
}

/**/

.top-bar {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: var(--topbar-height);
   z-index: 5;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   padding: 0 20px;
   backdrop-filter: blur(10px);
   background: rgba(6, 12, 9, 0.55);
   border-bottom: 1px solid rgba(178, 199, 173, 0.15);
   box-sizing: border-box;
}

.top-bar-item {
   margin: 0;
   font-size: 12px;
   color: #eef1e8;
   padding: 2px 10px;
   border-radius: 16px;
   background: rgba(238, 241, 232, 0.1);
   white-space: nowrap;
}

.top-bar-brand {
   font-family: "Inter", sans-serif;
   font-weight: 500;
   letter-spacing: -0.01em;
   cursor: pointer;
}

.top-bar-status {
   display: none;
}

.top-bar-time {
   font-variant-numeric: tabular-nums;
   letter-spacing: 0.02em;
}

@media (min-width: 560px) {
   .top-bar-status {
      display: block;
   }
}

/**/

.bottom-bar {
   position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;
   height: var(--bottombar-height);
   z-index: 5;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 14px;
   padding: 0 20px;
   backdrop-filter: blur(10px);
   background: rgba(6, 13, 9, 0.55);
   border-top: 1px solid rgba(178, 199, 173, 0.15);
   box-sizing: border-box;
}

.dock-icon {
   position: relative;
   width: 44px;
   height: 44px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 12px;
   cursor: pointer;
   background: rgba(238, 241, 232, 0.08);
   -webkit-tap-highlight-color: transparent;
   -webkit-touch-callout: none;
   touch-action: manipulation;
   user-select: none;
   transition: background 0.15s ease, transform 0.15s ease;
}
.dock-icon:hover {
   background: rgba(238, 241, 232, 0.16);
   transform: translateY(-3px);
}
.dock-icon:active {
   transform: scale(0.94);
}
.dock-icon.selected {
   background: rgba(143, 210, 138, 0.22);
}

.dock-icon img {
   width: 28px;
   height: 28px;
   object-fit: cover;
   border-radius: 6px;
}

.dock-icon.open::after {
   content: "";
   position: absolute;
   bottom: -7px;
   left: 50%;
   translate: -50% 0;
   width: 4px;
   height: 4px;
   border-radius: 50%;
   background: #8fd28a;
}

/**/

.desktop-apps {
   position: fixed;
   top: calc(var(--topbar-height) + 22px);
   left: 22px;
   z-index: 2;
}

.app-icon {
   width: 76px;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 6px;
   padding: 10px 6px 8px;
   border-radius: 12px;
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
   user-select: none;
   transition: background 0.15s ease, transform 0.15s ease;
}
.app-icon:hover {
   background: rgba(238, 241, 232, 0.14);
   transform: translateY(-2px);
}
.app-icon:active {
   transform: scale(0.94);
}

.app-icon.selected {
   background: rgba(143, 210, 138, 0.18);
   box-shadow: 0 0 0 1px rgba(143, 210, 138, 0.4) inset;
}

.app-icon-glyph {
   width: 44px;
   height: 44px;
   object-fit: cover;
   border-radius: 10px;
   filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.4));
}

.app-icon-label {
   margin: 0;
   font-size: 12px;
   color: #dbe2d5;
   text-align: center;
   text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* omg frog! */

.pinned {
   position: fixed;
   top: calc(6.5vh + var(--topbar-height));
   right: 6vw;
   z-index: 1;
   margin: 0;
   width: 200px;
   background: #f4f1e9;
   padding: 10px 10px 34px;
   box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
   transform: rotate(4deg);
   opacity: 0;
   animation: pin-in 1s ease-out forwards, sway 6s ease-in-out infinite;
   animation-delay: 0.5s, 1.5s;
   transition: transform 0.3s ease;
}
.pinned:hover {
   transform: rotate(4deg) translateY(-4px) scale(1.02);
}

.pin {
   position: absolute;
   top: -9px;
   left: 50%;
   translate: -50% 0;
   width: 16px;
   height: 16px;
   border-radius: 50%;
   background: radial-gradient(circle at 35% 30%, #e6746a, #b4372c);
   box-shadow: 0 3px 5px rgba(0, 0, 0, 0.4);
}

.pinned img {
   display: block;
   width: 100%;
   height: 210px;
   object-fit: cover;
   filter:saturate(0.95) contrast(1.02);
}

.pinned figcaption {
   font-family: "Caveat", cursive;
   font-size: 20px;
   color: #3a3a2f;
   text-align: center;
   padding-top: 10px;
}

@keyframes pin-in {
   from { opacity: 0; transform: rotate(4deg) translateY(-16px); }
   to { opacity: 1; transform: rotate(4deg) translateY(0); }
}
@keyframes sway {
   0%, 100% { transform: rotate(4deg); }
   50% { transform: rotate(2.2deg); }
}

/* another one */

.taped {
   position: fixed;
   bottom: calc(7vh + var(--bottombar-height));
   left: 5vw;
   z-index: 1;
   margin: 0;
   width: 168px;
   background: #efece2;
   padding: 8px;
   box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
   transform: rotate(-6deg);
   opacity: 0;
   animation: tape-in 1s ease-out forwards;
   animation-delay: 0.8s;
   transition: transform 0.3s ease;
}
.taped:hover {
   transform: rotate(-6deg) translateY(-4px) scale(1.02);
}

.taped img {
   display: block;
   width: 100%;
   height: 168px;
   object-fit: cover;
   filter: saturate(0.95) contrast(1.02);
}

.tape {
   position: absolute;
   width: 46px;
   height: 18px;
   background: rgba(230, 224, 200, 0.55);
   border: 1px solid rgba(0, 0, 0, 0.2);
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.tape-left {
   top: -9px;
   left: -23px;
   rotate: -35deg;
}
.tape-right {
   bottom: -9px;
   right: -23px;
   rotate: -35deg;
}

@keyframes tape-in {
   from { opacity: 0; transform: rotate(-6deg) translate(16px); }
   to { opacity: 1; transform: rotate(-6deg) translate(0); }
}

/* film grain overlay */

.grain {
   position: fixed;
   inset: 0;
   z-index: 4;
   width: 100%;
   height: 100%;
   opacity: 0.05;
   pointer-events: none;
   mix-blend-mode: overlay;
}

.hero {
   position: relative;
   z-index: 3;
   min-height: calc(100vh - var(--topbar-height) - var(--bottombar-height));
   pointer-events: none;
}

.eyebrow {
   margin: 0 0 10px;
   font-size: 13px;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   color: #a9bda3;
   opacity: 0;
   animation: rise 0.9s ease-out forwards;
   animation-delay: 0.1s;
}

.title {
   font-family: "Newsreader", serif;
   font-style: italic;
   font-weight: 500;
   font-size: clamp(48px, 9vw, 88px);
   margin: 0;
   color: #f6f4ea;
   letter-spacing: -0.01em;
   text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
   opacity: 0;
   animation: rise 1s ease-out forwards;
   animation-delay: 0.25s;
}

.tagline {
   font-family: "Newsreader", serif;
   font-style: italic;
   font-size: clamp(15px, 2vw, 19px);
   color: #cdd8c6;
   margin: 14px 0 0;
   opacity: 0;
   animation: rise 1s ease-out forwards;
   animation-delay: 0.45s;
}

@keyframes rise {
   from { opacity: 0; transform: translateY(14px); }
   to { opacity: 1; transform: translateY(0); }
}

.window {
   position: absolute;
   pointer-events: auto;
   top: calc(50% - 150px);
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   flex-direction: column;
   align-items: center;
   width: min(640px, calc(100vw - 48px));
   max-width: 640px;
   padding: 0 0 32px;
   text-align: center;
   border-radius: 14px;
   border: 1px solid rgba(178, 199, 173, 0.18);
   background: rgba(6, 13, 9, 0.4);
   backdrop-filter: blur(10px);
   box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
   transition: width 0.25s ease, height 0.25s ease, top 0.25s ease, left 0.25s ease, right 0.25s ease, bottom 0.25s ease;
}

.window > .eyebrow,
.window > .title,
.window > .tagline,
.window > .card {
   margin-left: 24px;
   margin-right: 24px;
}

.window > .eyebrow {
   margin-top: 18px;
}

.window-header {
   width: 100%;
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   align-items: center;
   column-gap: 10px;
   cursor: grab;
   user-select: none;
   padding: 12px 14px;
   margin-bottom: 14px;
   border-bottom: 1px solid rgba(178, 199, 173, 0.14);
}
.window-header:active {
   cursor: grabbing;
}

.window-header-spacer {
   justify-self: start;
}

.window-header-text {
   grid-column: 2;
   justify-self: center;
   margin: 0;
   font-family: "Caveat", cursive;
   font-size: 18px;
   line-height: 1;
   color: #cdd8c6;
   letter-spacing: 0.02em;
}

.window-controls {
   grid-column: 3;
   justify-self: end;
   display: flex;
   align-items: center;
   gap: 8px;
}

.dot  {
   position: relative;
   width: 14px;
   height: 14px;
   padding: 0;
   margin: 0;
   border-radius: 50%;
   cursor: pointer;
   border: 1px solid rgba(0, 0, 0, 0.25);
   box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25);
   transition: filter 0.15s ease, transform 0.15s ease;
   font: inherit;
   appearance: none;
}
.dot:hover {
   filter: brightness(1.12);
   transform: scale(1.08);
}
.dot:active {
   transform: scale(0.94);
}
.dot::before {
   content: "";
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 9px;
   line-height: 1;
   color: rgba(0, 0, 0, 0.45);
   opacity: 0;
   transition: opacity 0.15s ease;
}

.window-controls:hover .dot::before {
   opacity: 1;
}

.dot-red {
   background: radial-gradient(circle at 35% 30%, #f3897c, #d9584a);
}
.dot-red::before {
   content: "×";
   font-size: 11px;
}

.dot-yellow {
   background: radial-gradient(circle at 35% 30%, #f6d17c, #dba13a);
}
.dot-yellow::before {
   content: "–";
}

.dot-green {
   background: radial-gradient(circle at 35% 30%, #8fd28a, #4f9e57);
}
.dot-green::before {
   content: "+";
   font-size: 10px;
}

.window.window-maximized {
   max-width: none;
   overflow-y: auto;
}

.window.window-minimizing {
   transform: translateX(-50%) scale(0.15) translateY(60vh);
   opacity: 0;
   pointer-events: none;
}

.card {
   margin-top: 44px;
   max-width: 520px;
   padding: 28px 30px;
   border-radius: 4px;
   background: rgba(8, 18, 13, 0);
   border: 1px solid rgba(178, 199, 173, 0.18);
   backdrop-filter: blur(6px);
   opacity: 0;
   animation: rise 1s ease-out forwards;
   animation-delay: 0.65s;
}

.bio {
   font-size: 16px;
   line-height: 1.65;
   color: #dbe2d5;
}
.bio:last-of-type {
   margin-bottom: 0;
}

/* notes */

.notes-window {
   top: calc(50% - 220px);
   left: 50%;
   transform: translateX(-50%);
   width: min(680px, calc(100vw - 48px));
   max-width: 680px;
   align-items: stretch;
   text-align: left;
   padding: 0 0 24px;
}

.notes-body {
   display: flex;
   flex-direction: row;
   gap: 14px;
   margin: 0 20px;
   height: 420px;
}

.window.window-maximized .notes-body {
   height: auto;
   flex: 1;
   min-height: 0;
}

.notes-sidebar {
   width: 190px;
   flex-shrink: 0;
   display: flex;
   flex-direction: column;
   border-right: 1px solid rgba(178, 199, 173, 0.16);
}

.notes-sidebar-toolbar {
   flex-shrink: 0;
   padding: 0 6px 10px 0;
   border-bottom: 1px solid rgba(178, 199, 173, 0.16);
   margin-bottom: 8px;
}

.notes-add-btn {
   width: 100%;
   padding: 7px 0;
   font-family: "Inter", sans-serif;
   font-size: 13px;
   color: #eef1e8;
   background: rgba(143, 210, 138, 0.16);
   border: 1px solid rgba(143, 210, 138, 0.35);
   border-radius: 8px;
   cursor: pointer;
   transition: background 0.15s ease;
}
.notes-add-btn:hover {
   background: rgba(143, 210, 138, 0.28);
}

.notes-entry-list {
   flex: 1;
   overflow-y: auto;
   padding-right: 6px;
}

.notes-entry {
   padding: 10px 12px;
   margin-bottom: 6px;
   border-radius: 8px;
   cursor: pointer;
   transition: background 0.15s ease;
}
.notes-entry:hover {
   background: rgba(238, 241, 232, 0.06);
}
.notes-entry.active {
   background: rgba(143, 210, 138, 0.16);
}

.notes-entry-title {
   margin: 0;
   font-family: "Newsreader", serif;
   font-style: italic;
   font-size: 15px;
   color: #f6f4ea;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.notes-entry-preview {
   margin: 4px 0 0;
   font-size: 12px;
   color: #a9bda3;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.notes-content {
   flex: 1;
   display: flex;
   flex-direction: column;
   min-width: 0;
   font-size: 15px;
   line-height: 1.7;
   color: #dbe2d5;
}

.notes-content-toolbar {
   flex-shrink: 0;
   display: flex;
   justify-content: flex-end;
   padding-bottom: 8px;
   margin-bottom: 8px;
   border-bottom: 1px solid rgba(178, 199, 173, 0.16);
}

.notes-delete-btn {
   padding: 5px 12px;
   font-family: "Inter", sans-serif;
   font-size: 12px;
   color: #e6a89e;
   background: rgba(217, 88, 74, 0.12);
   border: 1px solid rgba(217, 88, 74, 0.3);
   border-radius: 8px;
   cursor: pointer;
   transition: background 0.15s ease;
}
.notes-delete-btn:hover {
   background: rgba(217, 88, 74, 0.22);
}

.notes-title-field,
.notes-body-field {
   outline: none;
}

.notes-title-field {
   font-family: "Newsreader", serif;
   font-style: italic;
   font-weight: 500;
   font-size: 22px;
   color: #f6f4ea;
   margin: 0 0 12px;
}

.notes-body-field {
   flex: 1;
   overflow-y: auto;
   padding-right: 6px;
}

.notes-title-field:empty::before,
.notes-body-field:empty::before {
   content: attr(data-placeholder);
   color: #6b7a65;
   pointer-events: none;
}

/* browser */

.browser-window {
   top: calc(50% - 230px);
   left: 50%;
   transform: translateX(-50%);
   width: min(720px, calc(100vw - 48px));
   max-width: 720px;
   align-items: stretch;
   text-align: left;
   padding: 0 0 24px;
}

.browser-toolbar {
   display: flex;
   align-items: center;
   gap: 8px;
   margin: 0 20px 14px;
}

.browser-nav-btn {
   width: 26px;
   height: 26px;
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 15px;
   line-height: 1;
   color: #dbe2d5;
   background: rgba(238, 241, 232, 0.08);
   border: 1px solid rgba(178, 199, 173, 0.18);
   border-radius: 8px;
   cursor: pointer;
   transition: background 0.15s ease;
}
.browser-nav-btn:hover {
   background: rgba(238, 241, 232, 0.16);
}
.browser-nav-btn:disabled {
   opacity: 0.35;
   cursor: default;
}
.browser-nav-btn:disabled:hover {
   background: rgba(238, 241, 232, 0.08);
}

.browser-address-form {
   flex: 1;
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 0 10px;
   height: 26px;
   background: rgba(238, 241, 232, 0.08);
   border: 1px solid rgba(178, 199, 173, 0.18);
   border-radius: 13px;
}

.browser-address-leaf {
   display: flex;
   align-items: center;
   font-size: 13px;
   line-height: 1;
   flex-shrink: 0;
}

.browser-address-input {
   flex: 1;
   min-width: 0;
   border: none;
   outline: none;
   background: transparent;
   font-family: "Inter", sans-serif;
   font-size: 13px;
   line-height: 1;
   color: #eef1e8;
}
.browser-address-input::placeholder {
   color: #6b7a65;
}

.browser-newtab-btn {
   width: 26px;
   height: 26px;
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 14px;
   color: #dbe2d5;
   background: rgba(238, 241, 232, 0.08);
   border: 1px solid rgba(178, 199, 173, 0.18);
   border-radius: 8px;
   cursor: pointer;
   transition: background 0.15s ease;
}
.browser-newtab-btn:hover {
   background: rgba(238, 241, 232, 0.16);
}

.browser-body {
   position: relative;
   margin: 0 20px;
   height: 460px;
   border-radius: 10px;
   overflow: hidden;
   background: #eef1e8;
}

.window.window-maximized .browser-body {
   height: auto;
   flex: 1;
   min-height: 0;
}

.browser-frame {
   width: 100%;
   height: 100%;
   border: none;
   background: #fff;
}

.browser-home {
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 8px;
   padding: 20px;
   background: linear-gradient(180deg, #eef1e8 0%, #dfe6d6 100%);
   text-align: center;
}

.browser-home-glyph {
   width: 56px;
   height: 56px;
   border-radius: 14px;
   object-fit: cover;
   margin-bottom: 6px;
   filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.15));
}

.browser-home-title {
   margin: 0;
   font-family: "Newsreader", serif;
   font-style: italic;
   font-weight: 500;
   font-size: 24px;
   color: #263123;
}

.browser-home-subtitle {
   margin: 0 0 14px;
   font-size: 13px;
   color: #5c6b56;
}

.browser-home-form {
   display: flex;
   gap: 8px;
   width: min(360px, 100%);
}

.browser-home-input {
   flex: 1;
   min-width: 0;
   height: 36px;
   padding: 0 14px;
   font-family: "Inter", sans-serif;
   font-size: 13px;
   color: #263123;
   background: #fff;
   border: 1px solid rgba(38, 49, 35, 0.18);
   border-radius: 18px;
   outline: none;
}
.browser-home-input::placeholder {
   color: #8a9783;
}

.browser-home-submit {
   height: 36px;
   padding: 0 16px;
   font-family: "Inter", sans-serif;
   font-size: 13px;
   color: #eef1e8;
   background: #4f9e57;
   border: none;
   border-radius: 18px;
   cursor: pointer;
   transition: background 0.15s ease;
}
.browser-home-submit:hover {
   background: #43884a;
}

.browser-home-shortcuts {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 8px;
   width: min(360px, 100%);
   margin-top: 4px;
}

.browser-shortcut {
   height: 28px;
   padding: 0 12px;
   font-family: "Inter", sans-serif;
   font-size: 12px;
   color: #3d4a38;
   background: rgba(255, 255, 255, 0.6);
   border: 1px solid rgba(38, 49, 35, 0.14);
   border-radius: 14px;
   cursor: pointer;
   transition: background 0.15s ease, border-color 0.15s ease;
}
.browser-shortcut:hover {
   background: #fff;
   border-color: rgba(38, 49, 35, 0.28);
}

.browser-blocked {
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 10px;
   padding: 30px;
   text-align: center;
   background: linear-gradient(180deg, #eef1e8 0%, #dfe6d6 100%);
}

.browser-blocked-title {
   margin: 0;
   font-family: "Newsreader", serif;
   font-style: italic;
   font-weight: 500;
   font-size: 19px;
   color: #263123;
}

.browser-blocked-text {
   margin: 0 0 6px;
   max-width: 320px;
   font-size: 13px;
   color: #5c6b56;
}

.browser-blocked-btn {
   padding: 8px 18px;
   font-family: "Inter", sans-serif;
   font-size: 13px;
   color: #eef1e8;
   background: #4f9e57;
   border: none;
   border-radius: 18px;
   cursor: pointer;
   transition: background 0.15s ease;
}
.browser-blocked-btn:hover {
   background: #43884a;
}

@media (max-width: 700px) {
   .browser-window {
      top: 10vh;
      left: 50%;
      transform: translateX(-50%);
      width: calc(100vw - 32px);
   }

   .browser-body {
      height: 55vh;
      margin: 0 14px;
   }

   .notes-window {
      top: 10vh;
      left: 50%;
      transform: translateX(-50%);
      width: calc(100vw - 32px);
   }

   .notes-body {
      flex-direction: column;
      height: 60vh;
      margin: 0 14px;
   }

   .notes-sidebar {
      width: 100%;
      max-height: 130px;
      border-right: none;
      border-bottom: 1px solid rgba(178, 199, 173, 0.16);
      padding-bottom: 6px;
   }
}

@media (prefers-reduced-motion: reduce) {
   .bg, .pinned, .taped, .eyebrow, .title, .tagline, .card {
      animation: none !important;
      opacity: 1 !important;
   }

   .bg { transform: none !important; }
   .pinned { transform: rotate(4deg) !important; }
   .taped { transform: rotate(-6deg) !important; }
}

@media (max-width: 700px) {
   .pinned {
      position: absolute;
      top: 3vh;
      right: 50%;
      translate: 50% 0;
      width: 150px;
      transform: rotate(-3deg);
   }

   .pinned img { height: 150px; }
   .taped { display: none; }

   .window {
      top: 30vh;
      left: 50%;
      transform: translateX(-50%);
   }
}

@media (max-width: 560px) {
   .card { padding: 22px }
}