:root{
  --bg:#b0b0b0;
  --card:#fafafa;
  --text:#000000;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,sans-serif,Arial;
  max-width:510px;
  margin:auto;
  padding:21px;
}

nav{
  display:flex;
  justify-content:space-between;
  font-weight:600;
  margin-bottom:27px;
  font-size: clamp(1.5rem, 3.6vw, 2.1rem);
}

nav a{
    color:inherit;
    text-decoration:none;
}

.nav-link.active{
    border-bottom:2px solid black;
    pointer-events: none;
    font-weight:900;
    cursor: default;
}

a:hover {
    color: #000000;
    font-weight:780;
    opacity:.9;
    transition:.1s;
}

h1{
  text-align:center;
  font-size: clamp(2rem, 18.9vw, 5.1rem);
  line-height:1;
  font-weight:900;
}

.status-box{
  border-radius:30px;
  background:var(--card);
  overflow:hidden;
  margin-top: 1.8rem;
  margin-bottom: 1.2rem;
}

.status-wrap{
  color: #818181;
  font-family: monospace;
  padding:9px;
}

.loading{
  text-align:center;
  color: #dddddd;
  font-family: monospace;
  padding:30px;
}

#feed{
  display:flex;
  gap:18px;

  align-items:flex-start;
  overflow-x:auto;
  overflow-y:hidden;

  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;

  padding:0 0;
}

#feed::-webkit-scrollbar{
  display:none;
}

.post{
  flex:0 0 80%;
  width:85%;
  background:white;
  border-radius:24px;
  overflow:hidden;

  scroll-snap-align:center;


}



.post-image{
  width:100%;
  display:block;

  aspect-ratio:1/1;
  object-fit:cover;
}

.post-content{
  padding:20px;
}

.post-date{
  opacity:.4;
  font-size:11px;
  margin-bottom:10px;
}

.post-text{
  font-size:18px;
  line-height:1.6;
   white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  
}

#status {
  text-align: center;
}

.loading-cursor {
  display: inline-block;
  color: #cccccc;
  font-family: monospace;
  animation: blink 0.5s step-end infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

/*
.about-box{
  border-radius:30px;
  background:var(--card);
  overflow:hidden;
  margin-bottom:20px;
}

.about-text{
  color: #818181;
  font-family: monospace;
  padding:30px;
}*/

a {
    color: #636363;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

summary {
  cursor: pointer;
  font-weight: bold;
  padding: .39rem .04rem;
  list-style: none;
  font-family: "Courier New", Courier, monospace;
  font-size: clamp(.75rem, 3.12vw, 1.11rem);
  color: var(--receipt-accent);
}

summary::marker,
summary::-webkit-details-marker {
  display: none;
}

summary::before {
  content: "";
  display: inline-block;
  margin-right: 6.9px;

  width: 0;
  height: 0;

  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid currentColor;

  transition: transform .15s ease;
}

details[open] summary::before {
  transform: rotate(90deg);
}

details > div {
  padding: .3rem .6rem;
  border-left: 2px solid #ddd;
   margin-left: 4px;
}



.receipt {
  --receipt-bg: #fafafa;
  --receipt-fg: #333333;
  --receipt-accent: #606060;
  --receipt-link: #a4a4a4;
  --receipt-hover: #ff5100;
  
  position: relative;
  max-width: 69vw;
  margin: 2.4rem auto;
  padding: 1.59rem 2.1rem;
  background: var(--receipt-bg);
  color: var(--receipt-fg);
  font-family: "Courier New", Courier, monospace;
  line-height: 1.2;
  letter-spacing: 0.03em;
  border-radius: 0rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.receipt-text {
  display: flex;
  flex-direction: column;
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
  padding: 0.2rem;
}

.receipt a {
  color: var(--receipt-link);
  text-decoration: none;
  text-align:justify;
}

.dont-highlight {
  font-family: monospace;
  color: #ff5100;
  font-size: clamp(0.45rem, 2.7vw, .54rem);
}

.receipt a:hover {
  color: var(--receipt-hover);
}

.receipt__title {
  margin: 0 0 0.rem;
  font-size: clamp(2rem, 9vw, 2.4rem);
  margin-bottom: 0.39rem;
  font-weight: bold;
  text-align: center;
}
.receipt__meta p {
  margin: 0;
  letter-spacing: 0.01em;
  font-size: clamp(0.6rem, 3vw, 0.9rem);
  padding: 0.3rem 1.1rem;
  text-align: justify;
  line-height: 1;
}
.receipt__items {
  list-style: none;
  padding: 0;
  padding-top: 0.9rem;
  border-top: 1px dashed #818181;
  margin: 1rem 0;
}

.receipt-row{
  display:flex;
  align-items:baseline;
  font-size: clamp(0.7rem, 2.4vw, 0.9rem);
  font-family: "Courier New", Courier, monospace;
  padding: 2.1px 0;
  color: var(--receipt-accent);
}

.label{
  flex:1;
  white-space:normal;
  overflow-wrap:break-word;
  
}

.value{
  text-align:right;
}

.receipt__items li {
  font-size: clamp(0.6rem, 3.3vw, 0.9rem);
  margin-top: 0.1rem;
  margin-bottom: 0.1rem;
}
.receipt__items strong {
  display: block;
  font-size: clamp(.9rem, 3.3vw, 1rem);
  color: var(--receipt-accent);
}

.whisper {
  font-size: 0.81rem;
  opacity: 0.6;
}

.receipt__total {
  margin: 0;
  padding-top: 1.2rem;
  border-top: 1px dashed #999999;
  font-size: clamp(0.6rem, 3.3vw, .9rem);
  text-align: right;
  color: var(--receipt-accent);
}
.receipt__footer {
  font-size: clamp(1rem, 3.6vw, 1.23rem);
  text-align: center;
  margin-top: 1.2rem;
  margin-bottom: 0.3rem;
}
.receipt__footer a {
  color: var(--receipt-accent);
}

.receipt::before {
  content: "";
  position: absolute;
  left: 0;
  top: -12px;

  width: 100%;
  height: 12px;

  background:
    linear-gradient(
      -45deg,
      var(--receipt-bg) 8px,
      transparent 0
    ) 0 0 / 16px 100% repeat-x,

    linear-gradient(
      45deg,
      var(--receipt-bg) 8px,
      transparent 0
    ) 0px 0 / 16px 100% repeat-x;
}

.receipt::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -12px;

  width: 100%;
  height: 12px;

  background:
    linear-gradient(
      135deg,
      var(--receipt-bg) 8px,
      transparent 0
      ) 0 0 / 16px 100% repeat-x,

    linear-gradient(
      -135deg,
      var(--receipt-bg) 8px,
       transparent 0
      )0px 0 / 16px 100% repeat-x;
}

.sns {
  margin-top: .9rem;
  display: flex;
  gap: 15px;
  
}

.sns svg {
  width: 1.2em;
  height: 1.2em;
}

.flower {
  margin-top: .2rem;
  font-size: clamp(.6rem, 3vw, .9rem);
  display: flex;
}

.footer {
  text-align:center;
  color: #333333;
  margin-top: 1.2rem;
  font-family: monospace;
  font-size: clamp(.6rem, 3vw, 1rem);
  line-height:1;
  opacity: 0.54;
}