/* Notexa v4.5 Platinum: no JavaScript, design integrated into live server templates. */
:root {
    color-scheme: dark;
    --page:#080a0d;--panel:#12151b;--paper:#e9e9eb;--subtle:#adb0b9;
    --steel:#a4aab5;--stroke:rgba(204,208,220,.18);
    --violet:#9484ac;--violet-light:#c6b2d5;--quiet:#777c86;
  }
  *,*::before,*::after{box-sizing:border-box}
  html{min-height:100%;background:var(--page)}
  body{min-width:320px;min-height:100svh;margin:0;color:var(--paper);font:400 16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;letter-spacing:-.008em;-webkit-font-smoothing:antialiased}
  a{color:inherit;text-decoration:none}
  button,textarea,select{font:inherit}
  button{cursor:pointer}
  button:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:2px solid #d4bdec;outline-offset:4px}
  .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
  .page{min-height:100svh;position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column}
  .nebula{position:absolute;z-index:-3;inset:0;background-image:linear-gradient(180deg,rgba(8,10,14,.82) 0%,rgba(8,10,14,.92) 55%,rgba(8,10,14,.89) 100%),url('/assets/space.webp');background-position:center,center 48%;background-size:cover;filter:saturate(.24) contrast(1.06)}
  .page::before{content:"";position:absolute;z-index:-2;inset:0;pointer-events:none;background:radial-gradient(ellipse 58% 60% at 50% 48%,rgba(3,5,8,.62),transparent 86%),radial-gradient(ellipse 36% 36% at 10% 12%,rgba(91,86,110,.12),transparent 90%),radial-gradient(ellipse 40% 30% at 93% 76%,rgba(70,78,96,.11),transparent 95%),linear-gradient(90deg,rgba(1,2,4,.47),transparent 24%,transparent 76%,rgba(1,2,4,.47))}
  .page::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.24;background-image:linear-gradient(rgba(221,224,239,.04) 1px, transparent 1px),linear-gradient(90deg, rgba(221,224,239,.035) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(90deg,#000,transparent 22%,transparent 78%,#000)}
  .edge{position:absolute;z-index:-1;top:0;bottom:0;width:clamp(24px,4.4vw,80px);pointer-events:none;opacity:.75}
  .edge::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(194,196,208,.08),rgba(20,24,30,.18) 33%,rgba(173,175,194,.045) 85%,transparent);clip-path:polygon(0 0,80% 0,100% 7%,100% 34%,68% 38%,68% 66%,100% 72%,100% 100%,0 100%);border-right:1px solid rgba(174,179,193,.12)}
  .edge::after{content:"";position:absolute;width:1px;top:13%;bottom:14%;right:6px;background:linear-gradient(transparent,rgba(204,209,228,.40) 20%,rgba(165,151,188,.27) 60%,transparent)}
  .edge-left{left:0}.edge-right{right:0;transform:scaleX(-1)}
  .layout{width:min(1220px,calc(100% - 112px));margin:0 auto;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:36px 0 30px}
  .topline{width:100%;max-width:1100px;margin:0 auto 34px;display:flex;justify-content:space-between;align-items:center;gap:24px;color:#9ea2ad;font-size:10px;letter-spacing:.18em;font-weight:650}
  .topline .division{display:flex;align-items:center;gap:11px;white-space:nowrap}
  .topline .division::before{content:"";height:6px;width:6px;border-radius:100%;background:#c2bacd;box-shadow:0 0 14px rgba(180,165,206,.5)}
  .topline .sub{opacity:.65;letter-spacing:.12em}
  .masthead{text-align:center;margin:0 auto 37px}
  .brand{display:inline-flex;align-items:center;justify-content:center;gap:14px}
  .brand-icon{height:52px;width:47px;flex:none;color:#c9cbd2;filter:drop-shadow(0 4px 9px rgba(138,118,166,.18))}
  .brand-name{font-size:clamp(40px,4.7vw,61px);font-weight:760;line-height:1;letter-spacing:-.066em;background:linear-gradient(158deg,#fff 0%,#d5d6dc 45%,#9094a0 88%);background-clip:text;color:transparent}
  .brand-name span{color:#b9a6cc;-webkit-text-fill-color:#b9a6cc}
  .brand-sub{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:19px;color:#969aa6;font-size:10px;font-weight:680;letter-spacing:.29em}
  .brand-sub::before,.brand-sub::after{content:"";width:clamp(22px,6.8vw,95px);height:1px;background:linear-gradient(90deg,transparent,rgba(213,210,229,.38))}
  .brand-sub::after{transform:scaleX(-1)}
  .brand-sub b{font-weight:600;color:#a99bb6}
  .frame{position:relative;width:100%;isolation:isolate;padding:1px;background:linear-gradient(118deg,rgba(238,238,243,.52) 0%,rgba(130,137,154,.27) 21%,rgba(91,96,110,.18) 56%,rgba(179,181,195,.36) 84%,rgba(240,239,246,.46));clip-path:polygon(2.4% 0,97.6% 0,100% 5%,100% 95%,97.6% 100%,2.4% 100%,0 95%,0 5%);box-shadow:0 20px 90px rgba(0,0,0,.53)}
  .frame::before{content:"";position:absolute;z-index:3;pointer-events:none;inset:1px 12px auto;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.37) 50%,transparent);opacity:.5}
  .panel{position:relative;min-height:600px;padding:38px clamp(25px,4vw,62px) 29px;background:linear-gradient(142deg,rgba(26,29,36,.985),rgba(13,17,23,.985) 49%,rgba(21,22,29,.985));clip-path:inherit;border:1px solid rgba(255,255,255,.025)}
  .panel::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 58% 50% at 50% 0%,rgba(174,167,193,.065),transparent 85%),linear-gradient(180deg,rgba(255,255,255,.025),transparent 25%)}
  .panel>*{position:relative}
  .hero{text-align:center;margin:0 0 28px}
  .eyebrow{display:inline-flex;align-items:center;gap:9px;margin:0 0 11px;color:#aeb0bc;font-size:10px;letter-spacing:.24em;font-weight:730}
  .eyebrow .dash{width:17px;height:1px;background:#b2a1c1}
  h1{font-size:clamp(32px,3.6vw,50px);letter-spacing:-.05em;font-weight:690;line-height:1.17;margin:0 0 11px;color:#f1f1f3}
  .hero p{margin:0;color:#aeb1be;font-size:clamp(13px,1.3vw,16px)}
  .label-row{display:flex;justify-content:space-between;align-items:center;gap:15px;margin:0 0 10px;font-size:11px;font-weight:700;letter-spacing:.135em;color:#c8cad3}
  .label-row small{font-size:11px;font-weight:450;letter-spacing:normal;color:#818692}
  textarea{width:100%;display:block;min-height:175px;max-height:45vh;padding:19px 20px;resize:vertical;border-radius:12px;border:1px solid rgba(163,169,184,.26);background:linear-gradient(125deg,rgba(6,9,14,.83),rgba(16,19,26,.87));color:#f1f1f3;box-shadow:inset 0 1px 10px rgba(0,0,0,.2),0 1px 0 rgba(255,255,255,.035);font-size:15px;line-height:1.6;transition:border-color .15s ease,box-shadow .15s ease}
  textarea::placeholder{color:#777d8b}
  textarea:focus{border-color:rgba(195,184,214,.75);box-shadow:0 0 0 3px rgba(152,137,175,.11)}
  .actions{display:flex;justify-content:center;align-items:stretch;gap:13px;margin:22px auto 0;width:min(655px,100%)}
  .select-wrap{position:relative;width:fit-content;max-width:100%;flex:none}
  .hourglass{position:absolute;top:50%;left:15px;transform:translateY(-50%);height:20px;width:20px;color:#b3a5be;pointer-events:none}
  .chevron{position:absolute;right:17px;top:calc(50% - 5px);width:9px;height:9px;transform:rotate(45deg);border-bottom:1.7px solid #a6a9b8;border-right:1.7px solid #a6a9b8;pointer-events:none}
  select{display:block;width:auto;min-height:58px;appearance:none;-webkit-appearance:none;white-space:nowrap;padding:0 43px 0 45px;border:1px solid rgba(170,175,190,.27);border-radius:11px;background:linear-gradient(159deg,#272a32,#171a21 80%);color:#e0e1e6;font-size:14px;font-weight:650;box-shadow:inset 0 1px rgba(255,255,255,.065),0 8px 23px rgba(0,0,0,.14)}
  select:hover{border-color:rgba(200,190,217,.56)}select option{background:#1b1e26;color:#eff0f2}
  .create-button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:58px;min-width:0;flex:1;border:1px solid #d7d8de;border-radius:11px;background:linear-gradient(165deg,#f0eff1 0%,#c8c9d1 56%,#a9abb7 100%);color:#191c24;font-size:16px;font-weight:780;letter-spacing:-.022em;box-shadow:inset 0 1px 0 rgba(255,255,255,.68),inset 0 -2px 1px rgba(64,61,78,.18),0 9px 24px rgba(0,0,0,.24);transition:transform .18s ease,filter .18s ease}
  .create-button:hover{transform:translateY(-1px);filter:brightness(1.07)}.create-button:active{transform:translateY(0)}
  .create-button svg{width:19px;height:21px;flex:none;color:#3a3844}
  .features{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:29px;padding-top:24px;border-top:1px solid rgba(173,177,192,.18)}
  .feature{display:flex;align-items:flex-start;gap:11px;padding:1px 17px;min-width:0}
  .feature:first-child{padding-left:0}.feature:last-child{padding-right:0}
  .feature+.feature{border-left:1px solid rgba(173,177,192,.15)}
  .feature svg{flex:none;width:29px;height:31px;color:#b9b3c2}
  .feature h2{font-size:14px;font-weight:690;letter-spacing:-.023em;line-height:1.3;margin:0 0 6px;color:#e3e4e8}
  .feature p{font-size:11.7px;line-height:1.55;color:#9499a5;margin:0}
  .footer{margin:20px 0 0;display:flex;align-items:center;justify-content:space-between;gap:25px;color:#898e9a;font-size:11px;letter-spacing:.018em}
  .footer strong{color:#afb4bf;font-weight:550}.footer a{color:#b7aabd;border-bottom:1px solid rgba(183,170,189,.45);white-space:nowrap}
  @media(max-width:1000px){.layout{width:min(900px,calc(100% - 48px))}.topline{margin-bottom:32px}.panel{padding:34px 32px 26px}.features{grid-template-columns:repeat(2,minmax(0,1fr));gap:19px 0}.feature:nth-child(3){padding-left:0;border-left:0}.feature h2{font-size:14px}.feature p{font-size:12px}}
  @media(max-width:650px){.edge{width:22px}.layout{width:calc(100% - 30px);padding:22px 0 26px}.topline{font-size:9px;margin-bottom:22px}.topline .sub{display:none}.masthead{margin-bottom:28px}.brand-icon{height:40px;width:38px}.brand{gap:10px}.brand-name{font-size:clamp(38px,9vw,50px)}.brand-sub{gap:9px;font-size:9px;letter-spacing:.14em;margin-top:13px}.brand-sub::before,.brand-sub::after{width:24px}.frame,.panel{clip-path:none;border-radius:16px}.panel{min-height:0;padding:26px 18px 21px}.hero{margin-bottom:23px}.eyebrow{font-size:9px;letter-spacing:.17em}h1{font-size:clamp(28px,7vw,39px)}textarea{min-height:185px}.label-row small{display:none}.actions{margin-top:16px;gap:10px}.select-wrap select{min-height:54px}.create-button{min-height:54px}.features{margin-top:24px;padding-top:20px;gap:18px 0}.feature{padding:0 10px}.feature svg{width:24px;height:27px}.feature h2{font-size:13px}.feature p{font-size:11px}.footer{margin-top:17px;flex-wrap:wrap;justify-content:center;text-align:center;gap:8px 18px}}
  @media(max-width:430px){.topline{justify-content:center}.panel{padding:25px 16px}.actions{flex-direction:column}.select-wrap,.select-wrap select{width:100%}.create-button{flex:none;width:100%}.features{grid-template-columns:1fr 1fr;gap:21px 0}.feature{padding:0 8px}.feature:nth-child(odd){padding-left:0}.feature:nth-child(even){padding-right:0}.feature:nth-child(3){border:0}.feature h2{font-size:12.5px}.feature p{font-size:11px}}
  @media(prefers-reduced-motion:reduce){.create-button,textarea{transition:none}}
  
  /* Production state screens: creation, reveal, expired note and public API */
  .result-card{max-width:940px;margin:24px auto 0;padding:clamp(20px,3vw,32px);background:linear-gradient(145deg,rgba(7,10,16,.81),rgba(22,25,33,.91));border:1px solid rgba(183,187,201,.22);border-radius:12px;overflow-wrap:anywhere;box-shadow:inset 0 1px 0 rgba(240,241,246,.04)}
  .field-label{display:block;margin-bottom:10px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#c8cad3}
  .link-field{width:100%;display:block;min-height:56px;padding:14px 16px;margin:10px 0 12px;overflow:hidden;text-overflow:ellipsis;border:1px solid rgba(163,169,184,.3);border-radius:10px;background:#0a0d13;color:#f1f1f3;font:500 13px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace}
  .text-link{display:inline-block;margin:8px 0;color:#c8b3dd;text-decoration:underline;text-underline-offset:4px}
  .text-link:hover{color:#e6d8f2}
  .expiry{margin:13px 0 10px;color:#d4d5de;font-size:13px;font-weight:700}
  .notice{margin:15px 0 0;color:#aeb1be;font-size:13px;line-height:1.7}
  .notice strong{color:#e3e3e7}
  .confirm-form{margin:25px auto 8px;max-width:620px}
  .confirm-form .create-button{width:100%}
  .secondary-cta{display:table;margin:22px auto 0;padding:11px 19px;border:1px solid rgba(176,180,192,.32);border-radius:10px;background:rgba(37,41,50,.44);color:#d6d6e0;text-decoration:none;font-size:13px;font-weight:600}
  .secondary-cta:hover{background:rgba(65,68,82,.6);border-color:rgba(206,210,220,.6)}
  .revealed-message{display:block;max-height:60vh;max-width:100%;overflow:auto;overflow-wrap:anywhere;white-space:pre-wrap;padding:20px 22px;border:1px solid rgba(171,177,192,.25);border-radius:10px;background:#080c12;color:#f3f3f6;font:400 15px/1.75 ui-monospace,SFMono-Regular,Consolas,monospace}
  .api-docs{max-width:760px;text-align:left}
  .api-docs h3{font-size:20px;font-weight:650;color:#ececf0;margin:0 0 10px}
  .api-docs p{font-size:13px;color:#b8bbc7;line-height:1.7}
  .api-docs code,.api-docs pre{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:#d6c9df}
  .api-docs pre{padding:17px 16px;background:#090c12;border:1px solid rgba(160,166,181,.26);border-radius:10px;overflow-x:auto;white-space:pre-wrap;overflow-wrap:anywhere}
  .api-docs table{width:100%;border-collapse:collapse;font-size:13px;color:#b8bbc7;margin:12px 0 18px}
  .api-docs th,.api-docs td{border-bottom:1px solid rgba(177,184,199,.18);padding:10px 11px;text-align:left}
  .api-docs th{font-weight:700;color:#ecedf1}
  .footer-api{color:#cbb9d3!important;font-weight:650}
  .footer-api:hover{color:#f2e2f7!important}
  /* Keep the approved button geometry across every screen. */
  .create-form{display:block}
  @media(max-width:430px){.link-field{font-size:11px;padding:12px}.result-card{padding:15px}.api-docs h3{font-size:18px}.api-docs th,.api-docs td{padding:7px 5px}}